From 935e9e628d04d9bbeb0d36122e86a3fa933a42d7 Mon Sep 17 00:00:00 2001
From: Frank Warnaar <frank@voorhoede.nl>
Date: Mon, 17 Jul 2023 14:26:15 +0200
Subject: [PATCH] feat(vue-dato-video): use native lazy loading

---
 package-lock.json                             |  5 ++--
 packages/vue-dato-video/package.json          |  1 -
 .../vue-dato-video/src/vue-dato-video.vue     | 25 ++++---------------
 3 files changed, 7 insertions(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b5de394..7fd841a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5404,16 +5404,15 @@
     },
     "packages/vue-dato-video": {
       "name": "@voorhoede/vue-dato-video",
-      "version": "2.0.0",
+      "version": "3.0.0",
       "license": "ISC",
       "dependencies": {
-        "@voorhoede/vue-lazy-load": "^2.0.0",
         "vue": "^3.3.2"
       }
     },
     "packages/vue-lazy-load": {
       "name": "@voorhoede/vue-lazy-load",
-      "version": "2.0.0",
+      "version": "3.0.0",
       "license": "ISC",
       "dependencies": {
         "vue": "^3.3.2"
diff --git a/packages/vue-dato-video/package.json b/packages/vue-dato-video/package.json
index b760e98..b084100 100644
--- 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
index 5bcc765..5904d65 100644
--- 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 {