Merge branch 'release/2.38.0'

WesselKroos · Sep 18, 2023 · d47bd5d · d47bd5d
2 parents 81fce5c + 89ea2c9
commit d47bd5d
Show file tree

Hide file tree

Showing 20 changed files with 523 additions and 103 deletions.
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,6 +1,7 @@
 import resolve from '@rollup/plugin-node-resolve'
 import babel from '@rollup/plugin-babel'
 import eslint from '@rollup/plugin-eslint'
+import fs from 'fs'
 
 const common = {
   context: 'window',
@@ -29,8 +30,9 @@ const scripts = ['background', 'options', 'content', 'injected']
 
 export default scripts.map(script => Object.assign({}, {
   input:  `./src/scripts/${script}.js`,
-  output:  { 
-   file: `./dist/scripts/${script}.js`,
-   format: 'iife'
+  output:  {
+    file: `./dist/scripts/${script}.js`,
+    format: 'iife',
+    intro: fs.readFileSync('./src/scripts/intros/console.js', 'utf8')
  }
 }, common))
diff --git a/src/manifest.json b/src/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Ambient light for YouTube™",
   "description": "Immersive yourself in YouTube™ videos with ambient light!",
-  "version": "2.37.34",
+  "version": "2.38.0",
   "homepage_url": "https://github.com/WesselKroos/youtube-ambilight",
   "author": "Wessel Kroos",
   "icons": {
@@ -13,6 +13,7 @@
   "minimum_chrome_version": "80",
   "browser_specific_settings": {
     "gecko": {
+      "id": "{e997c82e-7eb4-4f7f-8ca0-2e2c375c3016}",
       "strict_min_version": "74.0"
     }
   },

diff --git a/src/options.html b/src/options.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta charset="utf-8" />
   <title>Ambient light for YouTube&trade; settings</title>
   <link rel="stylesheet" href="styles/options.css">
 </head>
@@ -33,6 +34,24 @@ <h2>Support me</h2>
       </a>
     </p>
 
+    <h2>Import / Export settings</h2>
+    <div id="importExportStatus" class="import-export-status"></div>
+    <div id="importExportStatusDetails" class="import-export-status-details" tabindex="0"></div>
+    <h3>File storage</h3>
+    <p>
+      <button id="exportFileBtn">Export to file</button>
+      <button id="importFileBtn">Import from file</button>
+      <input hidden name="import-settings-file" type="file" accept=".json"/>
+    </p>
+    <h3>Cloud storage (Your browser account)</h3>
+    <p>
+      <button id="exportAccountBtn">Export to cloud</button>
+      <button id="importAccountBtn" disabled>Import from cloud</button>
+    </p>
+    <p>
+      <div id="importableAccountStatus" class="importable-account-status"></div>
+    </p>
+
     <h2>Crash reports & Privacy</h2>
     <p>
       A crash report contains only anonymous data and will be deleted after 30 days.

diff --git a/src/scripts/injected.js b/src/scripts/injected.js
@@ -254,7 +254,7 @@ const loadAmbientlight = async () => {
   try {
     await Settings.getStoredSettingsCached()
   } catch(ex) {
-    console.warn('Ambient light for YouTube™ | The settings cannot be precached')
+    console.warn('The settings cannot be precached')
     console.error(ex)
   }
 

diff --git a/src/scripts/intros/console.js b/src/scripts/intros/console.js
@@ -0,0 +1,25 @@
+// eslint-disable-next-line no-unused-vars
+let console;
+
+(function() {
+  const preMessage = 'Ambient light for YouTube™ |'
+
+  const enrich = (...args) => {
+    if (args.length <= 0) return args
+
+    if(typeof args[0] === 'string') {
+      const [firstArg, ...postArgs] = args
+      return [`${preMessage} ${firstArg}`, ...postArgs]
+    }
+
+    return [preMessage, ...args]
+  }
+
+  console = {
+    log:   (...args) => window.console.log(...enrich(...args)),
+    debug: (...args) => window.console.debug(...enrich(...args)),
+    warn:  (...args) => window.console.warn(...enrich(...args)),
+    error: (...args) => window.console.error(...enrich(...args)),
+    dir:   (...args) => window.console.dir(...args),
+  }
+})();
diff --git a/src/scripts/libs/ambientlight.js b/src/scripts/libs/ambientlight.js
@@ -103,7 +103,7 @@ export default class Ambientlight {
         try {
           await this.enable(true)
         } catch(ex) {
-          console.warn('Ambient light for YouTube™ | Failed to enable on launch')
+          console.warn('Failed to enable on launch')
           SentryReporter.captureException(ex)
         }
       }
@@ -236,7 +236,7 @@ export default class Ambientlight {
         }
       }
     } catch(ex) {
-      console.warn('Ambient light for YouTube™ | applyChromiumBug1142112Workaround error. Continuing ambientlight initialization...')
+      console.warn('applyChromiumBug1142112Workaround error. Continuing ambientlight initialization...')
       SentryReporter.captureException(ex)
     }
   }
@@ -373,7 +373,7 @@ export default class Ambientlight {
         update
       }
     } catch(ex) {
-      console.warn('Ambient light for YouTube™ | applyChromiumBugVideoJitterWorkaround error. Continuing ambientlight initialization...')
+      console.warn('applyChromiumBugVideoJitterWorkaround error. Continuing ambientlight initialization...')
       SentryReporter.captureException(ex)
       this.enableChromiumBugVideoJitterWorkaround = false // Prevent retries
     }
@@ -569,7 +569,7 @@ export default class Ambientlight {
       error: (ex) => {
         const videoElem = ex?.target;
         const error = videoElem?.error;
-        console.warn(`Ambient light for YouTube™ | Restoring the ambient light after a video error...
+        console.warn(`Restoring the ambient light after a video error...
 Video error: ${mediaErrorToString(error?.code)} ${error?.message ? `(${error?.message})` : ''}
 Video network state: ${networkStateToString(videoElem?.networkState)}
 Video ready state: ${readyStateToString(videoElem?.readyState)}`)
@@ -654,7 +654,7 @@ Video ready state: ${readyStateToString(videoElem?.readyState)}`)
       this.videoPlayerElem.setInternalSize()
       this.sizesChanged = true
     } catch(ex) {
-      console.warn('Ambient light for YouTube™ | Failed to resize the video player')
+      console.warn('Failed to resize the video player')
     }
   }
 
@@ -751,7 +751,7 @@ Video ready state: ${readyStateToString(videoElem?.readyState)}`)
       //     await new Promise(resolve => raf(resolve)) // Wait for all layout style recalculations
       //     this.sizesChanged = true
       //   } catch(ex) {
-      //     console.warn('Ambient light for YouTube™ | Failed to resize the video player')
+      //     console.warn('Failed to resize the video player')
       //   }
       // }
       if(!this.settings.enabled) return
@@ -1007,7 +1007,7 @@ Video ready state: ${readyStateToString(videoElem?.readyState)}`)
 
     // Try to apply the workaround once
     if(this.videoElem.src && !getImageDataAllowed && !this.crossOriginApplied) {
-      console.warn(`Ambient light for YouTube™ | Detected cross origin video. Applying workaround... ${this.videoElem.src}, ${this.videoElem.crossOrigin}`)
+      console.warn(`Detected cross origin video. Applying workaround... ${this.videoElem.src}, ${this.videoElem.crossOrigin}`)
       this.crossOriginApplied = true
 
       try {
@@ -1016,7 +1016,7 @@ Video ready state: ${readyStateToString(videoElem?.readyState)}`)
         this.videoPlayerElem.loadVideoById(this.videoPlayerElem.getVideoData().video_id) // Refreshes auto quality setting range above 480p
         this.videoElem.currentTime = currentTime
       } catch(ex) {
-        console.warn(`Ambient light for YouTube™ | Detected cross origin video. Failed to apply workaround...  ${this.videoElem.src}, ${this.videoElem.crossOrigin}`)
+        console.warn(`Detected cross origin video. Failed to apply workaround...  ${this.videoElem.src}, ${this.videoElem.crossOrigin}`)
       }
     }
 
@@ -1084,7 +1084,7 @@ Video ready state: ${readyStateToString(videoElem?.readyState)}`)
         if(!this.settings.webGLCrashDate) {
           SentryReporter.captureException(ex)
         } else {
-          console.log('Ambient light for YouTube™ | ', ex)
+          console.log(ex)
         }
         this.settings.handleWebGLCrash()
       }
@@ -1146,7 +1146,7 @@ Video ready state: ${readyStateToString(videoElem?.readyState)}`)
         if(!this.settings.webGLCrashDate) {
           SentryReporter.captureException(ex)
         } else {
-          console.log('Ambient light for YouTube™ | ', ex)
+          console.log(ex)
         }
         this.settings.handleWebGLCrash()
       }
@@ -2096,9 +2096,10 @@ Video ready state: ${readyStateToString(videoElem?.readyState)}`)
       if(this.averageVideoFramesDifference < .0175) return 1 // 1 seconds
     }
 
+    const frameFading = this.settings.frameFading ? Math.round(Math.pow(this.settings.frameFading, 2)) : 0
     const frameFadingMax = (15 * Math.pow(ProjectorWebGL.subProjectorDimensionMax, 2)) - 1
-    const realFramerateLimit = (this.settings.webGL && this.settings.frameFading > frameFadingMax)
-      ? Math.max(1, (frameFadingMax / (this.settings.frameFading || 1)) * this.settings.framerateLimit)
+    const realFramerateLimit = (this.settings.webGL && frameFading > frameFadingMax)
+      ? Math.max(1, (frameFadingMax / (frameFading || 1)) * this.settings.framerateLimit)
       : this.settings.framerateLimit
     return realFramerateLimit
   }
@@ -2206,7 +2207,7 @@ Video ready state: ${readyStateToString(videoElem?.readyState)}`)
         'NS_ERROR_NOT_AVAILABLE',
         'NS_ERROR_OUT_OF_MEMORY'
       ].includes(ex.name)) {
-        console.warn('Ambient light for YouTube™ | Failed to display the ambient light')
+        console.warn('Failed to display the ambient light')
         console.error(ex)
         return
       }
@@ -2762,7 +2763,7 @@ Video ready state: ${readyStateToString(videoElem?.readyState)}`)
   //         }
   //       }
   //     } catch(ex) {
-  //       console.log(`Ambient light for YouTube™ | Skipped disabling YouTube\'s own Ambient Mode: ${ex?.message}`)
+  //       console.log(`Skipped disabling YouTube\'s own Ambient Mode: ${ex?.message}`)
   //     }
 
   //     settingsBtn?.click() // Close settings
@@ -2780,7 +2781,7 @@ Video ready state: ${readyStateToString(videoElem?.readyState)}`)
   //     await new Promise(resolve => raf(resolve)) // Await rendering
   //     settingsPopup.classList.remove('disable-youtube-ambient-mode-workaround')
   //   } catch(ex) {
-  //     console.log(`Ambient light for YouTube™ | Failed to automatically disable YouTube\'s own Ambient Mode: ${ex?.message}`)
+  //     console.log(`Failed to automatically disable YouTube\'s own Ambient Mode: ${ex?.message}`)
   //   }
   // }
 
@@ -2807,7 +2808,7 @@ Video ready state: ${readyStateToString(videoElem?.readyState)}`)
         this.sizesChanged = true
       }
     } catch(ex) {
-      console.warn('Ambient light for YouTube™ | Failed to execute HDR video check')
+      console.warn('Failed to execute HDR video check')
     }
 
     this.showedCompareWarning = false
@@ -2868,7 +2869,7 @@ Video ready state: ${readyStateToString(videoElem?.readyState)}`)
 
   onVideoFrame = wrapErrorHandler(function onVideoFrame(compose, info) {
     if (!this.requestVideoFrameCallbackId) {
-      console.warn(`Ambient light for YouTube™ | Old rvfc fired. Ignoring a possible duplicate. ${this.requestVideoFrameCallbackId} | ${compose} | ${info}`)
+      console.warn(`Old rvfc fired. Ignoring a possible duplicate. ${this.requestVideoFrameCallbackId} | ${compose} | ${info}`)
       return
     }
     this.videoElem.requestVideoFrameCallback(() => {}) // Requesting as soon as possible to prevent skipped video frames on displays with a matching framerate

diff --git a/src/scripts/libs/bar-detection.js b/src/scripts/libs/bar-detection.js
@@ -321,7 +321,7 @@ export default class BarDetection {
       this.worker = workerFromCode(workerCode)
       this.worker.onmessage = (e) => {
         if(e.data.id !== -1) {
-          // console.warn('Ambient light for YouTube™ | Ignoring old bar detection message:', e.data)
+          // console.warn('Ignoring old bar detection message:', e.data)
           return
         }
         if(e.data.error) {
@@ -437,7 +437,7 @@ export default class BarDetection {
               this.run !== run || 
               e.data.id !== this.workerMessageId
             ) {
-              // console.warn('Ambient light for YouTube™ | Ignoring old bar detection percentage:', 
+              // console.warn('Ignoring old bar detection percentage:', 
               //   this.workerMessageId, e.data.id, e.data.horizontalPercentage,  e.data.verticalPercentage)
               resolve()
               return

diff --git a/src/scripts/libs/canvas-webgl.js b/src/scripts/libs/canvas-webgl.js
@@ -61,13 +61,13 @@ export class WebGLContext {
         this.scaleY = undefined
         this.program = undefined // Prevent warning: Cannot delete program from old context. in initCtx
 
-        console.log(`Ambient light for YouTube™ | WebGLContext lost (${this.lostCount})`)
+        console.log(`WebGLContext lost (${this.lostCount})`)
         this.setWebGLWarning('restore')
       }.bind(this)), false);
       this.canvas.addEventListener('webglcontextrestored', wrapErrorHandler(async function webGLContextRestored() {
-        // console.log(`Ambient light for YouTube™ | WebGLContext restored (${this.lostCount})`)
+        // console.log(`WebGLContext restored (${this.lostCount})`)
         if(this.lostCount >= 3) {
-          console.error('Ambient light for YouTube™ | WebGLContext was lost 3 times. The current restoration has been aborted to prevent an infinite restore loop.')
+          console.error('WebGLContext was lost 3 times. The current restoration has been aborted to prevent an infinite restore loop.')
           this.setWebGLWarning('3 times restore')
           return
         }
@@ -80,12 +80,12 @@ export class WebGLContext {
           if(!this.ambientlight.projector?.lost && !this.ambientlight.projector?.blurLost)
             this.setWarning('')
         } else {
-          console.error(`Ambient light for YouTube™ | WebGLContext restore failed (${this.lostCount})`)
+          console.error(`WebGLContext restore failed (${this.lostCount})`)
           this.setWebGLWarning('restore')
         }
       }.bind(this)), false);
       this.canvas.addEventListener('webglcontextcreationerror', wrapErrorHandler(function webGLContextCreationError(e) {
-        // console.warn(`Ambient light for YouTube™ | WebGLContext creationerror: ${e.statusMessage}`)
+        // console.warn(`WebGLContext creationerror: ${e.statusMessage}`)
         this.webglcontextcreationerrors.push({
           message: e.statusMessage || '?',
           time: performance.now(),
@@ -113,7 +113,7 @@ export class WebGLContext {
         this.ctx.finish() // Wait for any pending draw calls to finish
         this.ctx.deleteProgram(this.program) // Free GPU memory
       } catch(ex) {
-        console.warn('Ambient light for YouTube™ | Failed to delete previous WebGLContext program', ex)
+        console.warn('Failed to delete previous WebGLContext program', ex)
       }
       this.program = undefined
     }
@@ -606,7 +606,7 @@ export class WebGLContext {
     const invalid = this.isContextLost() || !this.program;
     if (invalid && !this.ctxIsInvalidWarned && !this.program) {
       this.ctxIsInvalidWarned = true
-      console.log('Ambient light for YouTube™ | WebGLContext is lost')
+      console.log('WebGLContext is lost')
     }
     return invalid;
   }

diff --git a/src/scripts/libs/generic.js b/src/scripts/libs/generic.js
@@ -31,7 +31,7 @@ export const waitForDomElement = (check, container, timeout) => new Promise((res
 })
 
 let errorHandler = (ex) => {
-  console.error(`Ambient light for YouTube™ |`, ex)
+  console.error(ex)
 }
 export const setErrorHandler = (handler) => {
   errorHandler = handler

diff --git a/src/scripts/libs/projector-2d.js b/src/scripts/libs/projector-2d.js
@@ -25,21 +25,21 @@ export default class Projector2d {
   }
 
   onProjectorCtxLost = () => {
-    console.log('Ambient light for YouTube™ | Lost 2d projector')
+    console.log('Lost 2d projector')
     this.lostCount++
     // event.preventDefault(); // Prevents restoration
     this.settings.setWarning('Failed to restore the renderer from a GPU crash.\nReload the page to try it again.\nOr the memory on your GPU is in use by another process.\nYou can additionallyt undo the last changed setting or reset all the settings to the default values.')
   }
 
   onProjectorCtxRestored = (event) => {
     if(this.lostCount  >= 3 * this.projectors.length) {
-      console.error('Ambient light for YouTube™ | Projector2D context restore failed 3 times')
+      console.error('Projector2D context restore failed 3 times')
 
       this.settings.setWarning('Failed to restore 3 times the renderer from a GPU crash.\nReload the page to try it again.\nOr the memory on your GPU is in use by another process.\nYou can additionallyt undo the last changed setting or reset all the settings to the default values.')
       return
     }
 
-    console.log('Ambient light for YouTube™ | Restored 2d projector')
+    console.log('Restored 2d projector')
     const projectorElem = event.currentTarget
     projectorElem.width = 1 // Reset size
     this.ambientlight.buffersCleared = true // Trigger resize before redraw