Refactor image conversion (#163)

* Refactor image conversion

* Docs

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,

docs/plugins.md

@@ -1,6 +1,7 @@
 # Playlet Brighterscript Plugins
 
 - [Json5/Yaml support](#json5yaml-support)
+- [Convert images](#convert-images)
 - [Manifest editing](#manifest-editing)
 - [Validation](#validation)
 - [Includes](#includes)
@@ -27,6 +28,21 @@ Brightscript can only parse json natively using [ParseJson](https://developer.ro
 
 At the end of the build, the plugin scans for certain files (`jsonc`, `json`, `json5` and `yaml`), and converts them to plain json, while keeping the original file name. That way they are all parsable by the [ParseJson](https://developer.roku.com/en-ca/docs/references/brightscript/language/global-utility-functions.md#parsejsonjsonstring-as-string-flags---as-string-as-object) function, even though their original format is not compatible.
 
+## Convert images
+
+**[Source](/tools/bs-plugins/image-gen-plugin.ts)**
+
+This plugin allows us to convert svg files to png files.
+
+### Why
+
+This is used to convert splash screen, app poster, as well as icons in the app. Having svg images (or vector images in general) as the source of truth is better, in case images need to be modified or resized. Since Roku can't load them, we convert them to png.
+
+### How
+
+Each `.svg` file found will have an associated `.svg.meta.json5` file, which will contain the hash (MD5) of the svg, conversion paramters, and the hash of the output files. This allows us to hash existing files and see if a conversion is needed.
+Notice how each `.svg` file can be configured to generate multiple png files. This is especially the case to generate the app artwork (splash screen/poster) with different sizes from the same logo `.svg` file.
+
 ## Manifest editing
 
 **[Source](/tools/bs-plugins/manifest-edit-plugin.ts)**

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,
+    },
+  ],
+}