Refactor image conversion

config/bsconfig.base.json

@@ -26,7 +26,8 @@
         "source/**",
         "components/**",
         "images/**",
-        "!images/vector/**",
+        "!**/*.svg",
+        "!**/*.svg.meta.json5",
         "fonts/**",
         "config/**",
         "lib/**",
@@ -48,7 +49,8 @@
         "../tools/bs-plugins/track-transpiled-plugin.ts",
         "../tools/bs-plugins/json-yaml-plugin.ts",
         "../tools/bs-plugins/validation-plugin.ts",
-        "../tools/bs-plugins/logger-plugin.ts"
+        "../tools/bs-plugins/logger-plugin.ts",
+        "../tools/bs-plugins/image-gen-plugin.ts"
     ],
     "retainStagingDir": true,
     "require": [

config/bsconfig.tests.base.json

@@ -4,7 +4,8 @@
         "source/**",
         "components/**",
         "images/**",
-        "!images/vector/**",
+        "!**/*.svg",
+        "!**/*.svg.meta.json5",
         "fonts/**",
         "config/**",
         "lib/**",
@@ -24,7 +25,8 @@
         "../tools/bs-plugins/track-transpiled-plugin.ts",
         "../tools/bs-plugins/json-yaml-plugin.ts",
         "../tools/bs-plugins/validation-plugin.ts",
-        "../tools/bs-plugins/logger-plugin.ts"
+        "../tools/bs-plugins/logger-plugin.ts",
+        "../tools/bs-plugins/image-gen-plugin.ts"
     ],
     "rooibos": {
         "logLevel": 2,

package.json

@@ -4,6 +4,7 @@
     "description": "Unofficial Youtube client for Roku",
     "devDependencies": {
         "@rokucommunity/bslint": "^0.8.10",
+        "@types/crypto-js": "^4.1.2",
         "@types/fs-extra": "^11.0.2",
         "@types/node": "^20.7.2",
         "@types/xml2js": "^0.4.12",
@@ -12,6 +13,7 @@
         "brighterscript-formatter": "^1.6.33",
         "convert-svg-to-png": "^0.6.4",
         "cross-fetch": "^4.0.0",
+        "crypto-js": "^4.1.1",
         "dotenv": "^16.3.1",
         "express": "^4.18.2",
         "fs-extra": "^11.1.1",
@@ -52,7 +54,6 @@
         "test:build:app": "cd playlet-app && npm run test:build",
         "test:lib": "cd playlet-lib && npm run test",
         "test:build:lib": "cd playlet-lib && npm run test:build",
-        "generate-images": "node tools/generate-images.js",
         "version-sync": "node tools/version-sync.js",
         "manifest-git-hash": "node tools/update-manifest-git-hash.js",
         "sign-package": "node tools/sign-package.js",

playlet-app/src/images/vector/logo-dark.svg.meta.json5

@@ -0,0 +1,26 @@
+{
+  inputHash: '0536f51fa72c2e4e368ea0e901aadfc1',
+  outputs: [
+    {
+      outputFilePath: 'src/images/splash-screen_fhd.jpg',
+      outputHash: 'b15f3a3f1ccc459cbca12cb828b78d16',
+      width: 1920,
+      height: 1080,
+      background: '#242424',
+    },
+    {
+      outputFilePath: 'src/images/splash-screen_hd.jpg',
+      outputHash: '25e9c4220f8a42101d6333e548e33aa8',
+      width: 1280,
+      height: 720,
+      background: '#242424',
+    },
+    {
+      outputFilePath: 'src/images/splash-screen_sd.jpg',
+      outputHash: 'c54a2f7fa65f443263806962450f2c04',
+      width: 720,
+      height: 480,
+      background: '#242424',
+    },
+  ],
+}

playlet-app/src/images/vector/logo-fav.svg.meta.json5

@@ -0,0 +1,4 @@
+{
+  inputHash: "d61131ccc714d8df0b4514ca76883494",
+  outputs: [],
+}

playlet-app/src/images/vector/logo-light.svg.meta.json5

@@ -0,0 +1,26 @@
+{
+  inputHash: '3452c6ea1c84f59aedf5530bf86a7a51',
+  outputs: [
+    {
+      outputFilePath: 'src/images/channel-poster_fhd.png',
+      outputHash: 'd644a0db84deed0bcc41a41d08a4ef75',
+      width: 540,
+      height: 405,
+      background: '#FFFFFF',
+    },
+    {
+      outputFilePath: 'src/images/channel-poster_hd.png',
+      outputHash: 'd07a4ffaa021b55528bee91710f4e9d2',
+      width: 290,
+      height: 218,
+      background: '#FFFFFF',
+    },
+    {
+      outputFilePath: 'src/images/channel-poster_sd.png',
+      outputHash: '66a311c639f89ff009e4624468282b2f',
+      width: 246,
+      height: 140,
+      background: '#FFFFFF',
+    },
+  ],
+}

playlet-app/src/manifest

@@ -9,7 +9,7 @@ ui_resolutions=hd
 
 ##   Channel Assets
 ###  Main Menu Icons / Channel Poster Artwork
-#### Image sizes are FHD: 540x405px | HD: 290x218px | SD: 214x144px
+#### Image sizes are FHD: 540x405px | HD: 290x218px | SD: 246x140px
 mm_icon_focus_fhd=pkg:/images/channel-poster_fhd.png
 mm_icon_focus_hd=pkg:/images/channel-poster_hd.png
 mm_icon_focus_sd=pkg:/images/channel-poster_sd.png

playlet-lib/src/images/icons/filters-black.svg.meta.json5

@@ -0,0 +1,11 @@
+{
+  inputHash: 'b88a05052cd01cb7a89bd6802418d79e',
+  outputs: [
+    {
+      outputFilePath: 'src/images/icons/filters-black.png',
+      outputHash: 'f0a7539ae840c00a2d91292f993bb75e',
+      width: 64,
+      height: 64,
+    },
+  ],
+}

playlet-lib/src/images/icons/filters-white.svg.meta.json5

@@ -0,0 +1,11 @@
+{
+  inputHash: 'df7918a3b43642f707cc0d9fcfd2d9ee',
+  outputs: [
+    {
+      outputFilePath: 'src/images/icons/filters-white.png',
+      outputHash: '914e2c8da9772c23c24bebbd39c918f2',
+      width: 64,
+      height: 64,
+    },
+  ],
+}

playlet-lib/src/images/icons/home.svg.meta.json5

@@ -0,0 +1,11 @@
+{
+  inputHash: '788d5e9ddc5a26953392afa17a85a05c',
+  outputs: [
+    {
+      outputFilePath: 'src/images/icons/home.png',
+      outputHash: '3da3ed864137ace837ef2f96a4e5e13d',
+      width: 64,
+      height: 64,
+    },
+  ],
+}

playlet-lib/src/images/icons/info.svg.meta.json5

@@ -0,0 +1,11 @@
+{
+  inputHash: '92a5720049ca36c38c695969534c2bb5',
+  outputs: [
+    {
+      outputFilePath: 'src/images/icons/info.png',
+      outputHash: '31b5c5c342ded1bc99b3466c2fbaaf09',
+      width: 64,
+      height: 64,
+    },
+  ],
+}

playlet-lib/src/images/icons/phone.svg.meta.json5

@@ -0,0 +1,11 @@
+{
+  inputHash: 'e6318f56ce4c0cc637cf0cc3180a2013',
+  outputs: [
+    {
+      outputFilePath: 'src/images/icons/phone.png',
+      outputHash: '2d7ece94b64fa5a725adeea5a313cbcf',
+      width: 64,
+      height: 64,
+    },
+  ],
+}

playlet-lib/src/images/icons/search.svg.meta.json5

@@ -0,0 +1,11 @@
+{
+  inputHash: 'dede98d4bf3c835836c82c485600108c',
+  outputs: [
+    {
+      outputFilePath: 'src/images/icons/search.png',
+      outputHash: '5b5fb4128202a1e074b04ee570bbcf69',
+      width: 64,
+      height: 64,
+    },
+  ],
+}

playlet-lib/src/images/icons/settings.svg.meta.json5

@@ -0,0 +1,11 @@
+{
+  inputHash: '11d4a0bfa1ae239216088d825851ec4a',
+  outputs: [
+    {
+      outputFilePath: 'src/images/icons/settings.png',
+      outputHash: '1b6d024df95af8b002e469453e29a632',
+      width: 64,
+      height: 64,
+    },
+  ],
+}

tools/bs-plugins/image-gen-plugin.ts

@@ -0,0 +1,107 @@
+// This plugin converts svg files to png/jpeg files 
+
+import {
+    CompilerPlugin, ProgramBuilder,
+} from 'brighterscript';
+import { readFileSync, renameSync, rmSync, writeFileSync } from 'fs';
+import { existsSync } from 'fs-extra';
+import { globSync } from 'glob';
+import md5 from 'crypto-js/md5';
+import { join as joinPath, relative as relativePath } from 'path';
+import json5 from 'json5';
+const shell = require('shelljs');
+
+const META_EXT = '.meta.json5';
+
+export class ImageGenPlugin implements CompilerPlugin {
+    public name = 'ImageGenPlugin';
+
+    beforeProgramCreate(builder: ProgramBuilder) {
+        const rootDir = builder.options.rootDir!;
+
+        const svgFiles = globSync(`**/*.svg`, { cwd: rootDir });
+
+        svgFiles.forEach((svg) => {
+            // Web app can use svg files, no need to convert
+            if (svg.includes('www')) {
+                return;
+            }
+
+            const svgFile = relativePath(process.cwd(), joinPath(rootDir, svg));
+            const metafile = `${svgFile}${META_EXT}`;
+            if (!existsSync(metafile)) {
+                this.createDefaultMetaFile(svgFile, metafile);
+            }
+
+            const meta = json5.parse(readFileSync(metafile, 'utf8'));
+
+            this.generateImages(svgFile, meta, metafile);
+        });
+    }
+
+    createDefaultMetaFile(svgFile: string, metafile: string) {
+        const meta = {
+            inputHash: '',
+            outputs: [{
+                outputFilePath: svgFile.replace('.svg', '.png'),
+                outputHash: '',
+                width: 64,
+                height: 64,
+            }]
+        }
+
+        writeFileSync(metafile, json5.stringify(meta, null, 2));
+    }
+
+    generateImages(svgFile: string, meta: any, metafile: string) {
+        let metaChanged = false;
+        const inputHash = this.checkFileHash(svgFile, meta.inputHash);
+        if (!inputHash.valid) {
+            meta.inputHash = inputHash.hash;
+            metaChanged = true;
+        }
+
+        for (var i in meta.outputs) {
+            const output = meta.outputs[i];
+
+            let outputHash = this.checkFileHash(output.outputFilePath, output.outputHash);
+
+            if (inputHash.valid && outputHash.valid) {
+                continue;
+            }
+
+            this.generateImage(svgFile, output);
+            outputHash = this.checkFileHash(output.outputFilePath, output.outputHash);
+
+            output.outputHash = outputHash.hash;
+            metaChanged = true;
+        }
+
+        if (metaChanged) {
+            writeFileSync(metafile, json5.stringify(meta, null, 2));
+        }
+    }
+
+    generateImage(svgFile: string, output: any) {
+        shell.exec(`node ../tools/convert-image.js --input "${svgFile}" --options '${JSON.stringify(output)}'`)
+    }
+
+    checkFileHash(file: string, hash: string) {
+        if (!existsSync(file)) {
+            return {
+                valid: false,
+                hash: ''
+            }
+        }
+
+        const outputHash = md5(readFileSync(file, 'binary')).toString();
+        return {
+            valid: outputHash === hash,
+            hash: outputHash
+        }
+    }
+}
+
+export default () => {
+    return new ImageGenPlugin();
+};

tools/convert-image.js

@@ -0,0 +1,19 @@
+// Description: Converts SVGs to PNGs and resizes them to the correct dimensions. 
+
+const { ArgumentParser } = require('argparse')
+const { convertFile } = require('convert-svg-to-png');
+
+(async () => {
+    const parser = new ArgumentParser({
+        description: 'Sync Youtube profile with Invidious'
+    });
+
+    parser.add_argument('--input', { help: 'Input file path' });
+    parser.add_argument('--options', { help: 'Options as json string' });
+
+    const args = parser.parse_args()
+    const input = args.input
+    const options = JSON.parse(args.options)
+
+    await convertFile(input, options);
+})();