| 1 |
(function () { |
| 2 |
function init() { |
| 3 |
document.querySelectorAll('.bkbg-vp-app').forEach(function (appEl) { |
| 4 |
if (appEl.dataset.rendered) return; |
| 5 |
appEl.dataset.rendered = '1'; |
| 6 |
var opts; |
| 7 |
try { opts = JSON.parse(appEl.dataset.opts || '{}'); } catch (e) { opts = {}; } |
| 8 |
var o = Object.assign({ |
| 9 |
playlistTitle: 'Watch the Series', showPlaylistTitle: true, |
| 10 |
episodes: [], layout: 'side', listPosition: 'right', |
| 11 |
showNumbers: true, showDuration: true, showDescription: true, showThumbnails: true, |
| 12 |
listWidth: 340, borderRadius: 12, paddingTop: 0, paddingBottom: 0, |
| 13 |
bgColor: '#0f0f1a', playerBg: '#000000', listBg: '#1a1a2e', activeBg: '#2d2b55', |
| 14 |
titleColor: '#ffffff', metaColor: '#a0aec0', epTitleColor: '#f0f0f0', |
| 15 |
epMetaColor: '#718096', activeColor: '#6366f1', accentColor: '#6366f1' |
| 16 |
}, opts); |
| 17 |
|
| 18 |
var episodes = o.episodes || []; |
| 19 |
if (!episodes.length) { appEl.style.display = 'none'; return; } |
| 20 |
|
| 21 |
function mk(tag, cls, style) { |
| 22 |
var n = document.createElement(tag); |
| 23 |
if (cls) n.className = cls; |
| 24 |
if (style) Object.assign(n.style, style); |
| 25 |
return n; |
| 26 |
} |
| 27 |
|
| 28 |
function embedSrc(ep) { |
| 29 |
if (ep.videoType === 'youtube' && ep.videoId) return 'https://www.youtube.com/embed/' + ep.videoId + '?rel=0&enablejsapi=1'; |
| 30 |
if (ep.videoType === 'vimeo' && ep.videoId) return 'https://player.vimeo.com/video/' + ep.videoId; |
| 31 |
return ep.videoUrl || ''; |
| 32 |
} |
| 33 |
|
| 34 |
var isSide = o.layout === 'side'; |
| 35 |
var isListLeft = o.listPosition === 'left'; |
| 36 |
var activeIdx = 0; |
| 37 |
|
| 38 |
/* Section */ |
| 39 |
var section = mk('div', 'bkbg-vp-section', { |
| 40 |
background: o.bgColor, |
| 41 |
paddingTop: o.paddingTop + 'px', |
| 42 |
paddingBottom: o.paddingBottom + 'px', |
| 43 |
borderRadius: o.borderRadius + 'px', |
| 44 |
overflow: 'hidden' |
| 45 |
}); |
| 46 |
|
| 47 |
/* Shell */ |
| 48 |
var shell = mk('div', 'bkbg-vp-shell' + (isSide ? '' : ' vp-stack') + (isSide && isListLeft ? ' vp-list-left' : '')); |
| 49 |
|
| 50 |
/* Player pane */ |
| 51 |
var playerPane = mk('div', 'bkbg-vp-player-pane', { background: o.playerBg }); |
| 52 |
|
| 53 |
var ratio = mk('div', 'bkbg-vp-player-ratio'); |
| 54 |
var iframe = document.createElement('iframe'); |
| 55 |
iframe.allowFullscreen = true; |
| 56 |
iframe.allow = 'autoplay; encrypted-media'; |
| 57 |
ratio.appendChild(iframe); |
| 58 |
playerPane.appendChild(ratio); |
| 59 |
|
| 60 |
var playerInfo = mk('div', 'bkbg-vp-player-info'); |
| 61 |
var nowTitle = mk('h3', 'bkbg-vp-now-title', { color: o.titleColor }); |
| 62 |
var nowDesc = mk('p', 'bkbg-vp-now-desc', { color: o.metaColor }); |
| 63 |
playerInfo.appendChild(nowTitle); |
| 64 |
if (o.showDescription) playerInfo.appendChild(nowDesc); |
| 65 |
playerPane.appendChild(playerInfo); |
| 66 |
|
| 67 |
/* List pane */ |
| 68 |
var listPane = mk('div', 'bkbg-vp-list-pane', { |
| 69 |
width: isSide ? o.listWidth + 'px' : '100%', |
| 70 |
background: o.listBg |
| 71 |
}); |
| 72 |
|
| 73 |
if (o.showPlaylistTitle) { |
| 74 |
var header = mk('div', 'bkbg-vp-list-header', { color: o.titleColor }); |
| 75 |
header.textContent = o.playlistTitle; |
| 76 |
listPane.appendChild(header); |
| 77 |
} |
| 78 |
|
| 79 |
var scroll = mk('div', 'bkbg-vp-list-scroll', { |
| 80 |
maxHeight: isSide ? '480px' : '280px' |
| 81 |
}); |
| 82 |
listPane.appendChild(scroll); |
| 83 |
|
| 84 |
var epEls = []; |
| 85 |
|
| 86 |
function goTo(idx) { |
| 87 |
activeIdx = idx; |
| 88 |
var ep = episodes[idx]; |
| 89 |
|
| 90 |
/* update player */ |
| 91 |
var src = embedSrc(ep); |
| 92 |
if (ep.videoType === 'file' && ep.videoUrl) { |
| 93 |
/* swap to video element if needed */ |
| 94 |
if (iframe.parentNode) { |
| 95 |
var vid = document.createElement('video'); |
| 96 |
vid.src = ep.videoUrl; |
| 97 |
vid.controls = true; |
| 98 |
vid.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%'; |
| 99 |
ratio.replaceChild(vid, iframe); |
| 100 |
} |
| 101 |
} else { |
| 102 |
iframe.src = src; |
| 103 |
} |
| 104 |
|
| 105 |
/* update info */ |
| 106 |
nowTitle.innerHTML = ep.title || ''; |
| 107 |
nowDesc.innerHTML = ep.description || ''; |
| 108 |
|
| 109 |
/* update episode list items */ |
| 110 |
epEls.forEach(function (info, i) { |
| 111 |
var isAct = i === idx; |
| 112 |
info.el.style.background = isAct ? o.activeBg : 'transparent'; |
| 113 |
info.el.style.borderLeftColor = isAct ? o.activeColor : 'transparent'; |
| 114 |
if (info.num) { |
| 115 |
info.num.style.background = isAct ? o.activeColor : 'rgba(255,255,255,0.1)'; |
| 116 |
info.num.style.color = isAct ? '#ffffff' : o.epMetaColor; |
| 117 |
} |
| 118 |
if (info.playingTag) info.playingTag.style.display = isAct ? 'block' : 'none'; |
| 119 |
}); |
| 120 |
} |
| 121 |
|
| 122 |
episodes.forEach(function (ep, idx) { |
| 123 |
var epEl = mk('div', 'bkbg-vp-ep'); |
| 124 |
epEl.addEventListener('click', function () { goTo(idx); }); |
| 125 |
|
| 126 |
var num = null; |
| 127 |
if (o.showNumbers) { |
| 128 |
num = mk('div', 'bkbg-vp-ep-num'); |
| 129 |
num.textContent = idx + 1; |
| 130 |
epEl.appendChild(num); |
| 131 |
} |
| 132 |
|
| 133 |
if (o.showThumbnails) { |
| 134 |
var thumb = mk('div', 'bkbg-vp-ep-thumb'); |
| 135 |
if (ep.thumbnailUrl) { |
| 136 |
var img = document.createElement('img'); |
| 137 |
img.src = ep.thumbnailUrl; |
| 138 |
img.alt = ep.thumbnailAlt || ep.title || ''; |
| 139 |
thumb.appendChild(img); |
| 140 |
} else { |
| 141 |
var ph = mk('div', 'bkbg-vp-ep-thumb-placeholder'); |
| 142 |
ph.textContent = '▶'; |
| 143 |
thumb.appendChild(ph); |
| 144 |
} |
| 145 |
epEl.appendChild(thumb); |
| 146 |
} |
| 147 |
|
| 148 |
var body = mk('div', 'bkbg-vp-ep-body'); |
| 149 |
var titleEl = mk('div', 'bkbg-vp-ep-title', { color: o.epTitleColor }); |
| 150 |
titleEl.textContent = ep.title || ''; |
| 151 |
body.appendChild(titleEl); |
| 152 |
|
| 153 |
var meta = mk('div', 'bkbg-vp-ep-meta', { color: o.epMetaColor }); |
| 154 |
if (o.showDuration && ep.duration) { |
| 155 |
var dur = mk('span', ''); |
| 156 |
dur.textContent = ep.duration; |
| 157 |
meta.appendChild(dur); |
| 158 |
} |
| 159 |
var playingTag = mk('span', 'bkbg-vp-ep-playing', { color: o.activeColor, display: 'none' }); |
| 160 |
playingTag.textContent = '▶ Playing'; |
| 161 |
meta.appendChild(playingTag); |
| 162 |
body.appendChild(meta); |
| 163 |
epEl.appendChild(body); |
| 164 |
|
| 165 |
scroll.appendChild(epEl); |
| 166 |
epEls.push({ el: epEl, num: num, playingTag: playingTag }); |
| 167 |
}); |
| 168 |
|
| 169 |
if (isSide && !isListLeft) { |
| 170 |
shell.appendChild(playerPane); |
| 171 |
shell.appendChild(listPane); |
| 172 |
} else if (isSide && isListLeft) { |
| 173 |
shell.appendChild(listPane); |
| 174 |
shell.appendChild(playerPane); |
| 175 |
} else { |
| 176 |
shell.appendChild(playerPane); |
| 177 |
shell.appendChild(listPane); |
| 178 |
} |
| 179 |
|
| 180 |
section.appendChild(shell); |
| 181 |
goTo(0); |
| 182 |
|
| 183 |
appEl.parentNode.insertBefore(section, appEl); |
| 184 |
}); |
| 185 |
} |
| 186 |
|
| 187 |
if (document.readyState !== 'loading') { init(); } |
| 188 |
else { document.addEventListener('DOMContentLoaded', init); } |
| 189 |
})(); |
| 190 |
|
