Switch skyline to GIF and add plugin_skyline_compatibility option (#198)

source/plugins/skyline/README.md

@@ -22,7 +22,8 @@ This uses puppeteer to generate collect image frames, and use CSS animations to
   with:
     # ... other options
     plugin_skyline: yes
-    plugin_skyline_year: 0      # Set to 0 to display current year
-    plugin_skyline_frames: 60   # Use 60 frames (half-loop)
-    plugin_skyline_quality: 0.5 # Scale-down quality by half to reduce file-size (⚠️ higher quality increase file size)
+    plugin_skyline_year: 0            # Set to 0 to display current year
+    plugin_skyline_frames: 60         # Use 60 frames (half-loop)
+    plugin_skyline_quality: 0.5       # Set image quality
+    plugin_skyline_compatibility: yes # Support additional browsers (⚠️ increases file size and reduce optimization)
 ```

source/plugins/skyline/index.mjs

@@ -7,7 +7,7 @@
             return null
 
         //Load inputs
-          let {year, frames, quality} = imports.metadata.plugins.skyline.inputs({data, account, q})
+          let {year, frames, quality, compatibility} = imports.metadata.plugins.skyline.inputs({data, account, q})
           if (Number.isNaN(year)) {
             year = new Date().getFullYear()
             console.debug(`metrics/compute/${login}/plugins > skyline > year set to ${year}`)
@@ -32,13 +32,13 @@
 
         //Generate gif
           console.debug(`metrics/compute/${login}/plugins > skyline > generating frames`)
-          const framed = await imports.record({page, width, height, frames, scale:quality})
+          const animation = compatibility ? await imports.record({page, width, height, frames, scale:quality}) : await imports.gif({page, width, height, frames, quality:Math.max(1, quality*20)})
 
         //Close puppeteer
           await browser.close()
 
         //Results
-          return {frames:framed}
+          return {animation, width, height, compatibility}
       }
     //Handle errors
       catch (error) {

source/plugins/skyline/metadata.yml

@@ -29,10 +29,16 @@ inputs:
     max: 120
 
   # Image quality
-  # Note that it significantly increases output filesize (up to a few Mb) which can cause render/loading issues
   plugin_skyline_quality:
     description: Image quality
     type: number
     default: 0.5
     min: 0.1
-    max: 1
+    max: 1
+
+  # This uses CSS animations instead of GIF to support a wider range of browser like FireFox and Safari
+  # Using this mode significantly increase file size as each frame is encoded separately
+  plugin_skyline_compatibility:
+    description: Compatibility mode
+    type: boolean
+    default: no

source/plugins/skyline/tests.yml

@@ -7,6 +7,16 @@
   modes:
     - action
 
+- name: Skyline plugin (compatibility)
+  uses: lowlighter/metrics@latest
+  with:
+    token: NOT_NEEDED
+    plugin_skyline: yes
+    plugin_skyline_compatibility: yes
+  timeout: 1800000
+  modes:
+    - action
+
 - name: Skyline plugin (complete)
   uses: lowlighter/metrics@latest
   with: