From 42f67f4d6d2443bc33b6253e096c95f11d07198b Mon Sep 17 00:00:00 2001
From: vrv <radeanu.vasile.md@gmail.com>
Date: Tue, 27 Jun 2023 14:49:58 +0400
Subject: [PATCH] fix video autoplay && image styles

---
 src/components/vueperslides/styles.scss      |  2 +-
 src/components/vueperslides/vueperslide.vue  | 21 +++++++++++---------
 src/components/vueperslides/vueperslides.vue |  8 ++++----
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/vueperslides/styles.scss b/src/components/vueperslides/styles.scss
index 0bcc495..4b96d4b 100644
--- a/src/components/vueperslides/styles.scss
+++ b/src/components/vueperslides/styles.scss
@@ -78,7 +78,7 @@
   background-position: center;
 
   &__image {background-position: center;}
-  &__video {outline: none;}
+  &__video {outline: none; width: 100%; height: 100%;}
   &--no-pointer-events:before {
     content: '';
     position: absolute;
diff --git a/src/components/vueperslides/vueperslide.vue b/src/components/vueperslides/vueperslide.vue
index fccd1a7..774f1a4 100644
--- a/src/components/vueperslides/vueperslide.vue
+++ b/src/components/vueperslides/vueperslide.vue
@@ -12,8 +12,6 @@ component.vueperslide(
   template(v-if="videoObj")
     video.vueperslide__video(
       v-if="videoObj.webm || videoObj.mp4"
-      width="100%"
-      height="100%"
       v-bind="videoObj.props || {}")
       source(v-if="videoObj.webm" :src="videoObj.webm" type="video/webm")
       source(v-if="videoObj.mp4" :src="videoObj.mp4" type="video/mp4")
@@ -85,7 +83,7 @@ export default {
       const { visibleSlides, fade, slideImageInside, gap, gapPx } = this.conf
 
       return {
-        ...(!slideImageInside && this.imageSrc && { backgroundImage: `url("${this.imageSrc}")` }),
+        ...(!slideImageInside && this.imageSrc && { backgroundImage: `url("${this.imageSrc}")`, backgroundRepeat: 'no-repeat' }),
         ...(visibleSlides > 1 && { width: (100 - (gap ? gap * (visibleSlides - 1) : 0)) / visibleSlides + '%' }),
         ...(visibleSlides > 1 && fade && { [this.conf.rtl ? 'right' : 'left']: ((this.slideIndex % visibleSlides) / visibleSlides) * 100 + '%' }),
         ...(gap && { [this.conf.rtl ? 'marginLeft' : 'marginRight']: gap + (gapPx ? 'px' : '%') })
@@ -102,7 +100,10 @@ export default {
       return /youtube\.|youtu\.be/.test(this.videoObj.url)
     },
     imageStyles () {
-      return { ...(this.conf.slideImageInside && this.imageSrc && { backgroundImage: `url("${this.imageSrc}")` }) }
+      if (!this.conf.slideImageInside || !this.imageSrc) {
+        return {}
+      }
+      return { backgroundImage: `url("${this.imageSrc}")`, backgroundRepeat: 'no-repeat' }
     },
     slideFace3d () {
       if (!this.conf['3d']) return false
@@ -159,12 +160,14 @@ export default {
 
     // Only for lazy loading, this method is called from the Vueperslides component.
     loadImage () {
-      // Don't try to reload image if already loaded.
-      if (this.loading || this.loaded) return
-
-      this.loading = true
-
       return new Promise((resolve, reject) => {
+        // Don't try to reload image if already loaded.
+        if (this.loading || this.loaded || !this.image?.length) {
+          this.loaded = true
+          return resolve(null)
+        }
+
+        this.loading = true
         const img = document.createElement('img')
         img.onload = () => {
           this.imageSrc = this.image
diff --git a/src/components/vueperslides/vueperslides.vue b/src/components/vueperslides/vueperslides.vue
index 262e0cf..2650f71 100644
--- a/src/components/vueperslides/vueperslides.vue
+++ b/src/components/vueperslides/vueperslides.vue
@@ -971,12 +971,10 @@ export default {
       if (this.isReady && !jumping && emit) this.emit('before-slide', true, nextSlide)
 
       // First pause all the videos.
-      // this.slides.list.forEach(slide => slide.video && slide.video.pause())
+      this.slides.list.forEach(slide => slide.video && slide.video.pause())
 
       const nextSlideObj = this.slides.list[nextSlide]
-      if (this.isReady && nextSlideObj.video) {
-        const currSlideObj = this.slides.list[this.slides.current]
-        if (currSlideObj.video) currSlideObj.video.pause()
+      if (this.isReady && nextSlideObj?.video?.props?.autoplay) {
         nextSlideObj.video.play()
       }
 
@@ -1083,6 +1081,8 @@ export default {
     loadSlide (slide, index) {
       slide.loadImage()
         .then(response => {
+          if (!response) return
+
           const { image, style } = response
           slide.loaded = true
           slide.image = image