fix(source): added densities option

basics · Nov 3, 2023 · c8a5c55 · c8a5c55
1 parent 75bdca5
commit c8a5c55
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 16 deletions.
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -49,12 +49,14 @@ const stage = {
           xl: '100vw',
           xxl: '100vw'
         },
-        media: '(orientation: landscape)'
+        media: '(orientation: landscape)',
+        densities: ['x1', 'x2']
       },
       {
         src: '/img/stage-portrait.jpg',
         sizes: { default: '100vw', xxs: '100vw', xs: '100vw' },
-        media: '(orientation: portrait)'
+        media: '(orientation: portrait)',
+        densities: ['x1', 'x2']
       }
     ]
   }
@@ -86,7 +88,8 @@ const imageTextA = {
           xxl: '100vw'
         }
       }
-    ]
+    ],
+    densities: ['x1', 'x2']
   }
 };
 
@@ -117,7 +120,8 @@ const imageTextB = {
           xxl: '100vw'
         }
       }
-    ]
+    ],
+    densities: ['x1', 'x2']
   }
 };
 

diff --git a/playground/pages/tests/image/components/Critical.vue b/playground/pages/tests/image/components/Critical.vue
@@ -27,7 +27,8 @@ const image = {
       lg: '100vw',
       xl: '100vw',
       xxl: '100vw'
-    }
+    },
+    densities: ['x1', 'x2']
   }
 };
 </script>
diff --git a/playground/pages/tests/image/components/Lazy.vue b/playground/pages/tests/image/components/Lazy.vue
@@ -26,7 +26,8 @@ const image = {
       lg: '100vw',
       xl: '100vw',
       xxl: '100vw'
-    }
+    },
+    densities: ['x1', 'x2']
   }
 };
 </script>
diff --git a/playground/pages/tests/picture/components/Critical.vue b/playground/pages/tests/picture/components/Critical.vue
@@ -27,7 +27,8 @@ const picture = {
         lg: '100vw',
         xl: '100vw',
         xxl: '100vw'
-      }
+      },
+      densities: ['x1', 'x2']
     }
   ]
 };

diff --git a/playground/pages/tests/picture/components/Lazy.vue b/playground/pages/tests/picture/components/Lazy.vue
@@ -27,7 +27,8 @@ const picture = {
         lg: '100vw',
         xl: '100vw',
         xxl: '100vw'
-      }
+      },
+      densities: ['x1', 'x2']
     }
   ]
 };

diff --git a/src/runtime/components/SpeedkitImage/classes/Source.mjs b/src/runtime/components/SpeedkitImage/classes/Source.mjs
@@ -10,9 +10,10 @@ export default class Source {
   format = null;
   quality = null;
   preload = false;
-  modifiers = {};
-  provider = undefined; // https://image.nuxtjs.org/api/optionsproviders
-  preset = undefined; // https://image.nuxtjs.org/api/optionspresets
+  modifiers = {}; // https://image.nuxt.com/usage/nuxt-img#modifiers
+  provider = undefined; // https://image.nuxt.com/usage/nuxt-img#provider
+  preset = undefined; // https://image.nuxt.com/usage/nuxt-img#preset
+  densities = undefined; // https://image.nuxt.com/usage/nuxt-img#densities
 
   constructor({
     src,
@@ -25,7 +26,8 @@ export default class Source {
     preload = false,
     modifiers = {},
     provider = undefined,
-    preset = undefined
+    preset = undefined,
+    densities = undefined
   }) {
     this.src = src;
     this.sizes = sizes;
@@ -38,6 +40,7 @@ export default class Source {
     this.modifiers = modifiers;
     this.provider = provider;
     this.preset = preset;
+    this.densities = densities;
   }
 
   get key() {
@@ -65,7 +68,14 @@ export default class Source {
   }
 
   getOptions() {
-    return { provider: this.provider, preset: this.preset };
+    return {
+      provider: this.provider,
+      preset: this.preset,
+      densities: []
+        .concat(this.densities || 1)
+        .map(v => String(v).trim())
+        .join(' ')
+    };
   }
 
   getMeta(compiledSrc, $speedkit) {
@@ -100,7 +110,8 @@ export default class Source {
       preload: this.preload,
       modifiers: this.modifiers,
       provider: this.provider,
-      preset: this.preset
+      preset: this.preset,
+      densities: this.densities
     };
   }
 

diff --git a/src/runtime/components/SpeedkitVimeo/Base.vue b/src/runtime/components/SpeedkitVimeo/Base.vue
@@ -85,6 +85,13 @@ export default {
           xxl: '100vw'
         };
       }
+    },
+
+    posterDensities: {
+      type: [Array, String],
+      default() {
+        return ['x1', 'x2'];
+      }
     }
   },
   emits: ['playing', 'ready'],
@@ -183,7 +190,8 @@ export default {
                 'vimeo'
               ),
             sizes: this.posterSizes,
-            media: 'all'
+            media: 'all',
+            densities: this.posterDensities
           }
         ]
       };

diff --git a/src/runtime/components/SpeedkitYoutube/Base.vue b/src/runtime/components/SpeedkitYoutube/Base.vue
@@ -85,6 +85,13 @@ export default {
           xxl: '100vw'
         };
       }
+    },
+
+    posterDensities: {
+      type: [Array, String],
+      default() {
+        return ['x1', 'x2'];
+      }
     }
   },
 
@@ -122,7 +129,8 @@ export default {
           {
             src: `/youtube/vi/${this.videoId}/maxresdefault.jpg`,
             sizes: this.posterSizes,
-            media: 'all'
+            media: 'all',
+            densities: this.posterDensities
           }
         ]
       };