Local icons support

src/entry.js

@@ -65,10 +65,11 @@ let app = {
 const fbHost = 'https://firebasestorage.googleapis.com/'
 const fbPrefix = 'v0/b/rugame-db' + '.appspot.com/o/public%2F'
 const FirebaseScreenshotLoader = V2RangedScreenshotLoader.bind(null, fbHost, fbPrefix, true)
-const FirebaseIconLoader = V3IconLoader.bind(null, fbHost, fbPrefix)
+const FirebaseIconLoader = V3IconLoader.bind(null, fbHost, fbPrefix, '', true)
+const IconLoader = import.meta.env.PROD ? FirebaseIconLoader : V3IconLoader
 
 app = PV.reactive(app)
-app.datasource = new DataSourceManager(V2DataSource, FirebaseIconLoader, FirebaseScreenshotLoader, app)
+app.datasource = new DataSourceManager(V2DataSource, IconLoader, FirebaseScreenshotLoader, app)
 Router.initialize(app)
 
 window.app = app

src/icon.js

@@ -22,15 +22,19 @@ class IconLoader {
 }
 
 class V3IconLoader extends IconLoader {
-  constructor(host, prefix) {
+  constructor(host, prefix, postfix = '/data', replaceSlashes = false) {
     super()
     this.host = host
-    this.prefix = prefix
+    this.prefix = prefix || ''
+    this.postfix = postfix
+    this.grid = this.postfix + '/icon_grid.png?alt=media'
+    this.replaceSlashes = replaceSlashes
+    this.grid = replaceSlashes ? this.grid.replace(/\//g, '%2F') : this.grid
   }
 
   getIcon(appId, dir) {
     if (app.config.icons_grid) {
-      return this.host + this.prefix + ((dir + '/icon_grid.png?alt=media').replace(/\//g, '%2F'))
+      return this.host + this.prefix + dir + this.grid
     } else {
       return this.getDefaultIcon(dir)
     }
@@ -52,9 +56,14 @@ class V3IconLoader extends IconLoader {
 
   loadIconsGrid(dir) {
     if (!app.config.icons_grid) return
+    if (!this.host) {
+      this.host = app.datasource.ds.host
+    }
     if (app.datasource.ds.contentDirs.indexOf(dir) === -1) return this.getDefaultIcon(dir)
     loadedDirs[dir] = false
-    const url = this.host + this.prefix + ((dir + '/icons.meta.json?alt=media').replace(/\//g, '%2F'))
+    let metadataFilePath = '/icons.meta.json?alt=media'
+    metadataFilePath = this.replaceSlashes ? metadataFilePath.replace(/\//g, '%2F') : metadataFilePath
+    const url = this.host + this.prefix + (dir + this.postfix + metadataFilePath)
     fetchJSON(url).then(metadata => {
       const [width, height] = metadata.resolution
       const missing = metadata.missing === 'all' ? {has: x => true} : new Set(metadata.missing)

src/styles/style.css

@@ -283,6 +283,9 @@ main {
   image-rendering: pixelated;
   border-radius: 4px;
 }
+.mdl-layout__header > .mdl-layout-icon {
+  top: 20px
+}
 .external-icon {
   fill: white;
   width: 34px;