fix(lg-video): youtube video with poster not loading if drag is disabled

fix #1101
sachinchoolur · Aug 20, 2021 · 458e55b · 458e55b
1 parent a63fcae
commit 458e55b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 24 deletions.
diff --git a/src/lightgallery.ts b/src/lightgallery.ts
@@ -82,6 +82,8 @@ export class LightGallery {
 
     private isDummyImageRemoved = false;
 
+    private dragOrSwipeEnabled = false;
+
     public mediaContainerPosition = {
         top: 0,
         bottom: 0,
@@ -186,6 +188,7 @@ export class LightGallery {
         setTimeout(() => {
             this.enableDrag();
             this.enableSwipe();
+            this.triggerPosterClick();
         }, 50);
 
         this.arrow();
@@ -1775,6 +1778,7 @@ export class LightGallery {
         if (this.settings.enableSwipe) {
             this.$inner.on('touchstart.lg', (e) => {
                 e.preventDefault();
+                this.dragOrSwipeEnabled = true;
                 const $item = this.getSlideItem(this.index);
                 if (
                     ($LG(e.target).hasClass('lg-item') ||
@@ -1834,6 +1838,7 @@ export class LightGallery {
         let isMoved = false;
         if (this.settings.enableDrag) {
             this.outer.on('mousedown.lg', (e) => {
+                this.dragOrSwipeEnabled = true;
                 const $item = this.getSlideItem(this.index);
                 if (
                     $LG(e.target).hasClass('lg-item') ||
@@ -1899,6 +1904,17 @@ export class LightGallery {
         }
     }
 
+    triggerPosterClick(): void {
+        this.$inner.on('click.lg', (event) => {
+            if (
+                !this.dragOrSwipeEnabled &&
+                this.isPosterElement($LG(event.target))
+            ) {
+                this.LGel.trigger(lGEvents.posterClick);
+            }
+        });
+    }
+
     manageSwipeClass(): void {
         let _touchNext = this.index + 1;
         let _touchPrev = this.index - 1;

diff --git a/src/plugins/video/lg-video.ts b/src/plugins/video/lg-video.ts
@@ -64,21 +64,10 @@ export default class Video {
             this.onHasVideo.bind(this),
         );
 
-        if (this.core.settings.enableSwipe || this.core.settings.enableDrag) {
-            this.core.LGel.on(`${lGEvents.posterClick}.video`, () => {
-                const $el = this.core.getSlideItem(this.core.index);
-                this.loadVideoOnPosterClick($el);
-            });
-        } else {
-            // For IE 9 and bellow
-            this.core.outer
-                .find('.lg-item')
-                .first()
-                .on('click.lg', () => {
-                    const $el = this.core.getSlideItem(this.core.index);
-                    this.loadVideoOnPosterClick($el);
-                });
-        }
+        this.core.LGel.on(`${lGEvents.posterClick}.video`, () => {
+            const $el = this.core.getSlideItem(this.core.index);
+            this.loadVideoOnPosterClick($el);
+        });
 
         // @desc fired immediately before each slide transition.
         this.core.LGel.on(
@@ -101,13 +90,8 @@ export default class Video {
      * @param {Event} event - Javascript Event object.
      */
     onHasVideo(event: CustomEventHasVideo): void {
-        const {
-            index,
-            src,
-            html5Video,
-            hasPoster,
-            isFirstSlide,
-        } = event.detail;
+        const { index, src, html5Video, hasPoster, isFirstSlide } =
+            event.detail;
         if (!hasPoster) {
             // All functions are called separately if poster exist in loadVideoOnPosterClick function
 
@@ -197,7 +181,7 @@ export default class Video {
     ): string {
         let video = '';
         const videoInfo =
-            this.core.galleryItems[(index as unknown) as number]
+            this.core.galleryItems[index as unknown as number]
                 .__slideVideoInfo || {};
         const currentGalleryItem = this.core.galleryItems[index];
         let videoTitle = currentGalleryItem.title || currentGalleryItem.alt;
@@ -418,7 +402,7 @@ export default class Video {
         }
     }
 
-    loadVideoOnPosterClick($el: lgQuery) {
+    loadVideoOnPosterClick($el: lgQuery): void {
         // check slide has poster
         if (!$el.hasClass('lg-video-loaded')) {
             // check already video element present