From 498b93d5b92668e945f2d152f3c522a42ce3558d Mon Sep 17 00:00:00 2001
From: Tony Air <tony@thewebdevelopmentagency.com>
Date: Tue, 16 Jun 2020 08:20:10 +0700
Subject: [PATCH] FIX: Video peview

---
 package.json                            |  2 +-
 src/js/_components/_ui.video.preview.js | 37 +++++++++++++++----------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index d232e4d..d993b16 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
-	"version": "2.1.7",
+	"version": "2.1.8",
 	"author": "Tony Air <tony@twma.pro>",
 	"license": "MIT",
 	"description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
diff --git a/src/js/_components/_ui.video.preview.js b/src/js/_components/_ui.video.preview.js
index 1014b1d..dc60b36 100755
--- a/src/js/_components/_ui.video.preview.js
+++ b/src/js/_components/_ui.video.preview.js
@@ -1,13 +1,12 @@
-"use strict";
+'use strict';
 
 import $ from 'jquery';
 
-import MainUI from "../_main";
+import MainUI from '../_main';
 import Events from '../_events';
 import SpinnerUI from './_ui.spinner';
 
 const VideoPreviewUI = (($) => {
-
   const NAME = 'jsVideoPreviewUI';
   const DATA_KEY = NAME;
 
@@ -15,10 +14,7 @@ const VideoPreviewUI = (($) => {
   const D = document;
 
   class VideoPreviewUI {
-
     constructor(el) {
-      console.log(`Initializing: ${NAME}`);
-
       const ui = this;
       ui.$_el = $(el);
       ui.innerHTML = ui.$_el[0].innerHTML;
@@ -27,16 +23,25 @@ const VideoPreviewUI = (($) => {
       const href = ui.$_el.attr('href') || ui.$_el.data('href');
       const YouTubeGetID = (url) => {
         parsedURL = url.split(/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/);
-        return undefined !== parsedURL[2] ? parsedURL[2].split(/[^0-9a-z_-]/i)[0] : parsedURL[0];
+        return undefined !== parsedURL[2]
+          ? parsedURL[2].split(/[^0-9a-z_-]/i)[0]
+          : parsedURL[0];
       };
 
-
       let video;
 
-      if (video = href.match(/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/)) {
+      if (
+        (video = href.match(
+          /(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/,
+        ))
+      ) {
         let video_id;
 
-        if (video[1] === 'youtube' || video[1] === 'youtube-nocookie' || video[1] === 'youtu') {
+        if (
+          video[1] === 'youtube' ||
+          video[1] === 'youtube-nocookie' ||
+          video[1] === 'youtu'
+        ) {
           video_id = YouTubeGetID(href);
         }
 
@@ -45,10 +50,10 @@ const VideoPreviewUI = (($) => {
           ui.$_el.addClass('loading');
           $.ajax({
             type: 'GET',
-            url: `https://vimeo.com/api/v2/video/${  video_id  }.json`,
+            url: `https://vimeo.com/api/v2/video/${video_id}.json`,
             jsonp: 'callback',
             dataType: 'jsonp',
-            success: function(data) {
+            success: function (data) {
               const thumbnail_src = data[0].thumbnail_large;
               ui.show(thumbnail_src);
               ui.$_el.removeClass('loading');
@@ -98,8 +103,12 @@ const VideoPreviewUI = (($) => {
   };
 
   // auto-apply
-  $(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
-    $('[data-video-preview="true"]').jsVideoPreviewUI();
+  $(window).on(`${Events.LODEDANDREADY}`, () => {
+    console.log(`Initializing: ${NAME}`);
+
+    $('[data-video-preview="true"]').each((i, el) => {
+      $(el).jsVideoPreviewUI();
+    });
   });
 
   return VideoPreviewUI;