tonyair
/
webpack-bootstrap-ui-kit
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

FIX: Video peview

This commit is contained in:
Tony Air 2020-06-16 08:20:10 +07:00
parent e6b8a8d6ea
commit 498b93d5b9
2 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate", "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
"version": "2.1.7", "version": "2.1.8",
"author": "Tony Air <tony@twma.pro>", "author": "Tony Air <tony@twma.pro>",
"license": "MIT", "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.", "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.",

37
src/js/_components/_ui.video.preview.js
View File

@ -1,13 +1,12 @@
"use strict"; 'use strict';
import $ from 'jquery'; import $ from 'jquery';
import MainUI from "../_main"; import MainUI from '../_main';
import Events from '../_events'; import Events from '../_events';
import SpinnerUI from './_ui.spinner'; import SpinnerUI from './_ui.spinner';
const VideoPreviewUI = (($) => { const VideoPreviewUI = (($) => {
const NAME = 'jsVideoPreviewUI'; const NAME = 'jsVideoPreviewUI';
const DATA_KEY = NAME; const DATA_KEY = NAME;
@ -15,10 +14,7 @@ const VideoPreviewUI = (($) => {
const D = document; const D = document;
class VideoPreviewUI { class VideoPreviewUI {
constructor(el) { constructor(el) {
console.log(`Initializing: ${NAME}`);
const ui = this; const ui = this;
ui.$_el = $(el); ui.$_el = $(el);
ui.innerHTML = ui.$_el[0].innerHTML; ui.innerHTML = ui.$_el[0].innerHTML;
@ -27,16 +23,25 @@ const VideoPreviewUI = (($) => {
const href = ui.$_el.attr('href') || ui.$_el.data('href'); const href = ui.$_el.attr('href') || ui.$_el.data('href');
const YouTubeGetID = (url) => { const YouTubeGetID = (url) => {
parsedURL = url.split(/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/); 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; 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; 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); video_id = YouTubeGetID(href);
} }
@ -45,10 +50,10 @@ const VideoPreviewUI = (($) => {
ui.$_el.addClass('loading'); ui.$_el.addClass('loading');
$.ajax({ $.ajax({
type: 'GET', type: 'GET',
url: `https://vimeo.com/api/v2/video/${ video_id }.json`, url: `https://vimeo.com/api/v2/video/${video_id}.json`,
jsonp: 'callback', jsonp: 'callback',
dataType: 'jsonp', dataType: 'jsonp',
success: function(data) { success: function (data) {
const thumbnail_src = data[0].thumbnail_large; const thumbnail_src = data[0].thumbnail_large;
ui.show(thumbnail_src); ui.show(thumbnail_src);
ui.$_el.removeClass('loading'); ui.$_el.removeClass('loading');
@ -98,8 +103,12 @@ const VideoPreviewUI = (($) => {
}; };
// auto-apply // auto-apply
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => { $(window).on(`${Events.LODEDANDREADY}`, () => {
$('[data-video-preview="true"]').jsVideoPreviewUI(); console.log(`Initializing: ${NAME}`);
$('[data-video-preview="true"]').each((i, el) => {
$(el).jsVideoPreviewUI();
});
}); });
return VideoPreviewUI; return VideoPreviewUI;