diff options
Diffstat (limited to 'demo/src/js')
| -rw-r--r-- | demo/src/js/demo.js | 142 |
1 files changed, 51 insertions, 91 deletions
diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index 003e85d5..add123e5 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -5,18 +5,20 @@ // ========================================================================== import Raven from 'raven-js'; +import Plyr from '../../../src/js/plyr'; (() => { - const isLive = window.location.host === 'plyr.io'; - - // Raven / Sentry - // For demo site (https://plyr.io) only - if (isLive) { - Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install(); - } + const { host } = window.location; + const env = { + prod: host === 'plyr.io', + dev: host === 'dev.plyr.io', + }; document.addEventListener('DOMContentLoaded', () => { Raven.context(() => { + const selector = '#player'; + const container = document.getElementById('container'); + if (window.shr) { window.shr.setup({ count: { @@ -30,6 +32,10 @@ import Raven from 'raven-js'; // Remove class on blur document.addEventListener('focusout', event => { + if (!event.target.classList || container.contains(event.target)) { + return; + } + event.target.classList.remove(tabClassName); }); @@ -42,71 +48,27 @@ import Raven from 'raven-js'; // Delay the adding of classname until the focus has changed // This event fires before the focusin event setTimeout(() => { - document.activeElement.classList.add(tabClassName); - }, 0); + const focused = document.activeElement; + + if (!focused || !focused.classList || container.contains(focused)) { + return; + } + + focused.classList.add(tabClassName); + }, 10); }); // Setup the player - const player = new Plyr('#player', { + const player = new Plyr(selector, { debug: true, title: 'View From A Blue Moon', - iconUrl: '../dist/plyr.svg', + iconUrl: 'dist/plyr.svg', keyboard: { global: true, }, tooltips: { controls: true, }, - /* controls: [ - 'play-large', - 'restart', - 'rewind', - 'play', - 'fast-forward', - 'progress', - 'current-time', - 'duration', - 'mute', - 'volume', - 'captions', - 'settings', - 'pip', - 'airplay', - 'fullscreen', - ], */ - /* i18n: { - restart: '重新開始', - rewind: '快退{seektime}秒', - play: '播放', - pause: '暫停', - fastForward: '快進{seektime}秒', - seek: '尋求', - played: '發揮', - buffered: '緩衝的', - currentTime: '當前時間戳', - duration: '長短', - volume: '音量', - mute: '靜音', - unmute: '取消靜音', - enableCaptions: '開啟字幕', - disableCaptions: '關閉字幕', - enterFullscreen: '進入全螢幕', - exitFullscreen: '退出全螢幕', - frameTitle: '球員為{title}', - captions: '字幕', - settings: '設定', - speed: '速度', - normal: '正常', - quality: '質量', - loop: '循環', - start: 'Start', - end: 'End', - all: 'All', - reset: '重啟', - disabled: '殘', - enabled: '啟用', - advertisement: '廣告', - }, */ captions: { active: true, }, @@ -114,9 +76,16 @@ import Raven from 'raven-js'; google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c', }, ads: { - enabled: true, + enabled: env.prod || env.dev, publisherId: '918848828995742', }, + previewThumbnails: { + enabled: true, + src: [ + 'https://cdn.plyr.io/static/demo/thumbs/100p.vtt', + 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt', + ], + }, }); // Expose for tinkering in the console @@ -143,7 +112,11 @@ import Raven from 'raven-js'; // Set a new source function newSource(type, init) { // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video - if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) { + if ( + !(type in types) || + (!init && type === currentType) || + (!currentType.length && type === types.video) + ) { return; } @@ -215,10 +188,12 @@ import Raven from 'raven-js'; case types.youtube: player.source = { type: 'video', - sources: [{ - src: 'https://youtube.com/watch?v=bTqVqk7FSmY', - provider: 'youtube', - }], + sources: [ + { + src: 'https://youtube.com/watch?v=bTqVqk7FSmY', + provider: 'youtube', + }, + ], }; break; @@ -226,10 +201,12 @@ import Raven from 'raven-js'; case types.vimeo: player.source = { type: 'video', - sources: [{ - src: 'https://vimeo.com/76979871', - provider: 'vimeo', - }], + sources: [ + { + src: 'https://vimeo.com/76979871', + provider: 'vimeo', + }, + ], }; break; @@ -302,26 +279,9 @@ import Raven from 'raven-js'; }); }); - // Google analytics + // Raven / Sentry // For demo site (https://plyr.io) only - /* eslint-disable */ - if (isLive) { - (function(i, s, o, g, r, a, m) { - i.GoogleAnalyticsObject = r; - i[r] = - i[r] || - function() { - (i[r].q = i[r].q || []).push(arguments); - }; - i[r].l = 1 * new Date(); - a = s.createElement(o); - m = s.getElementsByTagName(o)[0]; - a.async = 1; - a.src = g; - m.parentNode.insertBefore(a, m); - })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); - window.ga('create', 'UA-40881672-11', 'auto'); - window.ga('send', 'pageview'); + if (env.prod) { + Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install(); } - /* eslint-enable */ })(); |