Emojiful

Emojiful

Mods
19M Downloads

Some gif emotes with very bad resolution

leduard opened this issue · 1 comments

commented

I made a script to be able to create my own datapack with some emotes using the 7tv API.
All the static emotes seems to work without problem, but some gif emotes either dont load at all, or when they load they look a bit scuffed. Heres a video showing what i mean:

The modpack im using is the ATM9TTS. This is also a dedicated server. I also havent made any changes to any configs other than adding the datapack.

Heres how the json of one of the emotes with problem looks:

{
  "category": "lemon",
  "name": "prepffttt",
  "url": "https://cdn.7tv.app/emote/01J2CQ7NM00006YFK521XXW8YJ/4x.gif",
  "type": "emojiful:emoji_recipe"
}

If you follow that cdn link, you can see that the emote looks fine there. And i tried both 4x.gif and 1x.gif, both have the same problem.

Heres the script i used to create the files: 
const fs = require("fs");
const path = require("path");
const axios = require("axios");

const API_URL = (channelId) => `https://7tv.io/v3/users/twitch/${channelId}`;
const OUTPUT_DIR = "./emojis/emojiful/recipes";
const CATEGORY = "lemon";

async function fetchEmotes(channelId) {
    if (fs.existsSync(OUTPUT_DIR)) {
        fs.rmSync(OUTPUT_DIR, { recursive: true, force: true });
    }
      
    fs.mkdirSync(OUTPUT_DIR, { recursive: true });

    try {
        const response = await axios.get(API_URL(channelId));
        const emotes = response.data.emote_set.emotes;
        
        if (!fs.existsSync(OUTPUT_DIR)) {
            fs.mkdirSync(OUTPUT_DIR);
        }
        
        emotes.forEach(emote => {
            const isAnimated = emote.data?.animated;
            // const fileExtension = "webp";
            const fileExtension = isAnimated ? "gif" : "webp";
            const emoteName = emote.name.toLowerCase().replace('!', "");

            const emoteData = {
                category: CATEGORY,
                name: emoteName,
                url: `https://cdn.7tv.app/emote/${emote.id}/4x.${fileExtension}`,
                type: "emojiful:emoji_recipe"
            };

            const filePath = path.join(OUTPUT_DIR, `${emoteName}.json`);
            fs.writeFileSync(filePath, JSON.stringify(emoteData, null, 2));
            console.log(`Created: ${filePath}`);
        });
        
        console.log("✅ All emote JSON files created successfully.");
    } catch (error) {
        console.error("❌ Error fetching emotes:", error.message);
    }
}

fetchEmotes(96858382);

What i want to know is if theres anything i can do on my end to get that working

commented

So this is almost certainly caused by emojiful not supporting transparency as a way to optimize gifs.
Unless the dev adds support for this, the best way around this is to use tools that can "unoptimize" gifs (which will also increase their filesize, sometimes significantly) like ezgif (use the "coalesce" option) or gifsicle with -U. The biggest problem with this as a solution is that it requires you to rehost the gifs, but at least it works more often then not.