diff options
Diffstat (limited to 'demo/src')
| -rw-r--r-- | demo/src/js/demo.js | 93 | ||||
| -rw-r--r-- | demo/src/sass/settings/type.scss | 3 |
2 files changed, 31 insertions, 65 deletions
diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index c074d4fa..605eded7 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -7,16 +7,17 @@ import Raven from 'raven-js'; (() => { - 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 +31,9 @@ import Raven from 'raven-js'; // Remove class on blur document.addEventListener('focusout', event => { + if (container.contains(event.target)) { + return; + } event.target.classList.remove(tabClassName); }); @@ -42,12 +46,18 @@ 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 || 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', @@ -57,57 +67,6 @@ import Raven from 'raven-js'; tooltips: { controls: true, }, - clickToPlay: false, - /* 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, }, @@ -115,7 +74,7 @@ import Raven from 'raven-js'; google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c', }, ads: { - enabled: true, + enabled: env.prod || env.dev, publisherId: '918848828995742', }, }); @@ -311,11 +270,17 @@ import Raven from 'raven-js'; }); }); + // Raven / Sentry + // For demo site (https://plyr.io) only + if (env.prod) { + Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install(); + } + // Google analytics // For demo site (https://plyr.io) only /* eslint-disable */ - if (isLive) { - (function(i, s, o, g, r, a, m) { + if (env.prod) { + ((i, s, o, g, r, a, m) => { i.GoogleAnalyticsObject = r; i[r] = i[r] || diff --git a/demo/src/sass/settings/type.scss b/demo/src/sass/settings/type.scss index e8f0b2c8..8c614361 100644 --- a/demo/src/sass/settings/type.scss +++ b/demo/src/sass/settings/type.scss @@ -2,7 +2,8 @@ // Typography // ========================================================================== -$font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif; +$font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol'; $font-size-base: 15; $font-size-small: 13; |