Merge pull request #27 from voorhoede/feat/native-lazy-loading

feat(vue-dato-video): use native lazy loading
voorhoede · Sep 8, 2023 · e68e5a1 · e68e5a1
2 parents 23e3dfe + 935e9e6
commit e68e5a1
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 24 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/vue-dato-video/package.json b/packages/vue-dato-video/package.json
@@ -23,7 +23,6 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@voorhoede/vue-lazy-load": "^3.0.0",
     "vue": "^3.3.2"
   },
   "author": "De Voorhoede",

diff --git a/packages/vue-dato-video/src/vue-dato-video.vue b/packages/vue-dato-video/src/vue-dato-video.vue
@@ -5,17 +5,7 @@
         class="vue-dato-video__background-container"
         :style="{ aspectRatio }"
       >
-        <lazy-load>
-          <div class="vue-dato-video__background">
-            <div
-              class="vue-dato-video__cover"
-              :style="{
-                backgroundImage: `url(${imageUrl})`,
-                width: coverWidth,
-              }"
-            ></div>
-          </div>
-        </lazy-load>
+        <img class="vue-dato-video__cover" :src="imageUrl" loading="lazy" alt="" />
         <iframe
           v-if="isPlaying"
           class="vue-dato-video__iframe"
@@ -61,7 +51,6 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue";
-import { VueLazyLoad as LazyLoad } from "@voorhoede/vue-lazy-load";
 
 const binaryBoolean = (value: boolean) => (value ? 1 : 0);
 
@@ -105,10 +94,6 @@ const aspectRatio = computed(() => {
   return video.width / canvasHeight.value;
 });
 
-const coverWidth = computed(() => {
-  return `${((video.width * maxRatio) / video.height) * 100}%`;
-});
-
 const imageUrl = computed(() => {
   const sizeRegex = /_\d+(x\d+)?\.\w+$/; // match _123.ext and _123x123.ext
   let preset = "/maxresdefault.jpg";
@@ -177,12 +162,12 @@ onMounted(() => {
 }
 
 .vue-dato-video__cover {
+  position: absolute;
+  top: 0;
+  left: 0;
   height: 100%;
   max-width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  background-size: cover;
-  background-position: center center;
+  object-fit: cover;
 }
 
 .vue-dato-video__iframe {