121 lines
2.8 KiB
JavaScript
121 lines
2.8 KiB
JavaScript
'use strict'
|
|
|
|
import $ from 'jquery'
|
|
|
|
import MainUI from '../_main'
|
|
import Events from '../_events'
|
|
import SpinnerUI from './_ui.spinner'
|
|
|
|
const VideoPreviewUI = (($) => {
|
|
const NAME = 'jsVideoPreviewUI'
|
|
const DATA_KEY = NAME
|
|
|
|
const G = window
|
|
const D = document
|
|
|
|
class VideoPreviewUI {
|
|
constructor (el) {
|
|
const ui = this
|
|
ui.$_el = $(el)
|
|
ui.innerHTML = ui.$_el[0].innerHTML
|
|
|
|
ui.$_el.data(DATA_KEY, this)
|
|
const href = ui.$_el.attr('href') || ui.$_el.data('href')
|
|
const YouTubeGetID = (url) => {
|
|
const parsedURL = url.split(
|
|
/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/
|
|
)
|
|
console.log(`${NAME}: ${parsedURL}`)
|
|
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-]+))/
|
|
))
|
|
) {
|
|
let video_id
|
|
|
|
if (
|
|
video[1] === 'youtube' ||
|
|
video[1] === 'youtube-nocookie' ||
|
|
video[1] === 'youtu'
|
|
) {
|
|
video_id = YouTubeGetID(href)
|
|
}
|
|
|
|
if (video[1] == 'vimeo') {
|
|
video_id = video[3]
|
|
ui.$_el.addClass('loading')
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: `https://vimeo.com/api/v2/video/${video_id}.json`,
|
|
jsonp: 'callback',
|
|
dataType: 'jsonp',
|
|
success: function (data) {
|
|
const thumbnail_src = data[0].thumbnail_large
|
|
ui.show(thumbnail_src)
|
|
ui.$_el.removeClass('loading')
|
|
},
|
|
})
|
|
|
|
return
|
|
}
|
|
|
|
if (video_id) {
|
|
ui.show(`//i3.ytimg.com/vi/${video_id}/0.jpg`)
|
|
}
|
|
}
|
|
}
|
|
|
|
show (src) {
|
|
const ui = this
|
|
ui.$_el[0].innerHTML = ''
|
|
ui.$_el.append(`<img src="${src}" alt="Video" />`)
|
|
}
|
|
|
|
static dispose () {
|
|
console.log(`${NAME}: dispose`)
|
|
ui.$_el[0].innerHTML = ui.innerHTML
|
|
}
|
|
|
|
static _jQueryInterface () {
|
|
return this.each((i, el) => {
|
|
// attach functionality to element
|
|
const $el = $(el)
|
|
let data = $el.data(DATA_KEY)
|
|
|
|
if (!data) {
|
|
data = new VideoPreviewUI(el)
|
|
$el.data(DATA_KEY, data)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
// jQuery interface
|
|
$.fn[NAME] = VideoPreviewUI._jQueryInterface
|
|
$.fn[NAME].Constructor = VideoPreviewUI
|
|
$.fn[NAME].noConflict = () => {
|
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
|
return VideoPreviewUI._jQueryInterface
|
|
}
|
|
|
|
// auto-apply
|
|
$(window).on(`${Events.LODEDANDREADY}`, () => {
|
|
console.log(`${NAME}: init`)
|
|
|
|
$('[data-video-preview="true"]').each((i, el) => {
|
|
$(el).jsVideoPreviewUI()
|
|
})
|
|
})
|
|
|
|
return VideoPreviewUI
|
|
})($)
|
|
|
|
export default VideoPreviewUI
|