diff --git a/ui/analytics.js b/ui/analytics.js index c6f3875cd..e7c616e2b 100644 --- a/ui/analytics.js +++ b/ui/analytics.js @@ -480,7 +480,7 @@ function sendPromMetric(name: string, value?: number) { let url = new URL(SDK_API_PATH + '/metric/ui'); const params = { name: name, value: value ? value.toString() : '' }; url.search = new URLSearchParams(params).toString(); - return fetch(url, { method: 'post' }).catch(function(error){}); + return fetch(url, { method: 'post' }).catch(function(error) {}); } } diff --git a/ui/component/viewers/videoViewer/internal/ads.js b/ui/component/viewers/videoViewer/internal/ads.js index 5956a4b1c..7dbbe015d 100644 --- a/ui/component/viewers/videoViewer/internal/ads.js +++ b/ui/component/viewers/videoViewer/internal/ads.js @@ -18,24 +18,24 @@ const adTags = { }; // Modified to work with IMA -const vastMacroUrl = - `https://vast.aniview.com/api/adserver61/vast/` + - `?AV_PUBLISHERID=60afcbc58cfdb065440d2426` + - `&AV_CHANNELID=${adTags.ford}` + - `&AV_URL=[URL]` + - `&cb=[CACHEBUSTING]` + - `&AV_WIDTH=[WIDTH]` + - `&AV_HEIGHT=[HEIGHT]` + - // `&AV_SCHAIN=[SCHAIN_MACRO]` + - // `&AV_CCPA=[CCPA_MACRO]` + - // `&AV_GDPR=[GDPR_MACRO]` + - // `&AV_CONSENT=[CONSENT_MACRO]` + - `&skip=true` + - `&skiptimer=5` + - `&logo=true` + - `&usevslot=true` + - `&vastretry=2` + - `&hidecontrols=false`; +// const vastMacroUrl = +// `https://vast.aniview.com/api/adserver61/vast/` + +// `?AV_PUBLISHERID=60afcbc58cfdb065440d2426` + +// `&AV_CHANNELID=${adTags.ford}` + +// `&AV_URL=[URL]` + +// `&cb=[CACHEBUSTING]` + +// `&AV_WIDTH=[WIDTH]` + +// `&AV_HEIGHT=[HEIGHT]` + +// // `&AV_SCHAIN=[SCHAIN_MACRO]` + +// // `&AV_CCPA=[CCPA_MACRO]` + +// // `&AV_GDPR=[GDPR_MACRO]` + +// // `&AV_CONSENT=[CONSENT_MACRO]` + +// `&skip=true` + +// `&skiptimer=5` + +// `&logo=true` + +// `&usevslot=true` + +// `&vastretry=2` + +// `&hidecontrols=false`; // only run on chrome (brave included) and don't run on mobile for time being const browserIsChrome = videojs.browser.IS_CHROME; @@ -52,7 +52,6 @@ const hitsAtFiftyPercentChance = hitsFiftyPercent(); * @param player */ function runAds(internalFeatureEnabled, allowPreRoll, player) { - // current timestamp for vpaid const timestamp = new Date().toISOString(); @@ -89,7 +88,7 @@ function runAds(internalFeatureEnabled, allowPreRoll, player) { if (shouldShowAnAd && browserIsChrome && !IS_MOBILE) { // fire up ima integration via module player.ima({ - adTagUrl: vastMacroUrl, + adTagUrl: vpaidMacroUrl, vpaidMode: 2, // 2 maps to insecure }); } diff --git a/ui/component/viewers/videoViewer/internal/videojs-events.jsx b/ui/component/viewers/videoViewer/internal/videojs-events.jsx index c6f428229..265d837e0 100644 --- a/ui/component/viewers/videoViewer/internal/videojs-events.jsx +++ b/ui/component/viewers/videoViewer/internal/videojs-events.jsx @@ -17,8 +17,7 @@ const setLabel = (controlBar, childName, label) => { }; export default ({ tapToUnmuteRef, tapToRetryRef, setReload, videoTheaterMode, - playerRef, autoplaySetting, player}) => { - + playerRef, autoplaySetting, replay}) => { // Override the player's control text. We override to: // 1. Add keyboard shortcut to the tool-tip. // 2. Override videojs' i18n and use our own (don't want to have 2 systems). @@ -113,15 +112,15 @@ export default ({ tapToUnmuteRef, tapToRetryRef, setReload, videoTheaterMode, // } // }, [adUrl]); - // useEffect(() => { - // const player = playerRef.current; - // if (player) { - // const controlBar = player.getChild('controlBar'); - // controlBar - // .getChild('TheaterModeButton') - // .controlText(videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)')); - // } - // }, [videoTheaterMode]); + useEffect(() => { + const player = playerRef.current; + if (player) { + const controlBar = player.getChild('controlBar'); + controlBar + .getChild('TheaterModeButton') + .controlText(videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)')); + } + }, [videoTheaterMode]); // when user clicks 'Unmute' button, turn audio on and hide unmute button function unmuteAndHideHint() { @@ -173,38 +172,47 @@ export default ({ tapToUnmuteRef, tapToRetryRef, setReload, videoTheaterMode, } } - // useEffect(() => { - // console.log('RUNNING HERE!') - // - // const player = playerRef.current; - // if (player) { - // const touchOverlay = player.getChild('TouchOverlay'); - // const controlBar = player.getChild('controlBar') || touchOverlay.getChild('controlBar'); - // const autoplayButton = controlBar.getChild('AutoplayNextButton'); - // - // if (autoplayButton) { - // const title = autoplaySetting ? __('Autoplay Next On') : __('Autoplay Next Off'); - // - // autoplayButton.controlText(title); - // autoplayButton.setAttribute('aria-label', title); - // autoplayButton.setAttribute('aria-checked', autoplaySetting); - // } - // } - // }, [autoplaySetting]); + useEffect(() => { + const player = playerRef.current; + if (player) { + const touchOverlay = player.getChild('TouchOverlay'); + const controlBar = player.getChild('controlBar') || touchOverlay.getChild('controlBar'); + const autoplayButton = controlBar.getChild('AutoplayNextButton'); - // Add various event listeners to player - player.one('play', onInitialPlay); - player.on('play', resolveCtrlText); - player.on('pause', resolveCtrlText); - player.on('loadstart', resolveCtrlText); - player.on('fullscreenchange', resolveCtrlText); - player.on('volumechange', resolveCtrlText); - player.on('volumechange', onVolumeChange); - player.on('error', onError); - // player.on('ended', onEnded); + if (autoplayButton) { + const title = autoplaySetting ? __('Autoplay Next On') : __('Autoplay Next Off'); + + autoplayButton.controlText(title); + autoplayButton.setAttribute('aria-label', title); + autoplayButton.setAttribute('aria-checked', autoplaySetting); + } + } + }, [autoplaySetting]); + + useEffect(() => { + const player = playerRef.current; + if (replay && player) { + player.play(); + } + }, [replay]); + + function initializeEvents() { + const player = playerRef.current; + // Add various event listeners to player + player.one('play', onInitialPlay); + player.on('play', resolveCtrlText); + player.on('pause', resolveCtrlText); + player.on('loadstart', resolveCtrlText); + player.on('fullscreenchange', resolveCtrlText); + player.on('volumechange', resolveCtrlText); + player.on('volumechange', onVolumeChange); + player.on('error', onError); + // player.on('ended', onEnded); + } return { retryVideoAfterFailure, unmuteAndHideHint, + initializeEvents, }; }; diff --git a/ui/component/viewers/videoViewer/internal/videojs-functions.jsx b/ui/component/viewers/videoViewer/internal/videojs-functions.jsx index e794abaea..921ea1b7c 100644 --- a/ui/component/viewers/videoViewer/internal/videojs-functions.jsx +++ b/ui/component/viewers/videoViewer/internal/videojs-functions.jsx @@ -1,6 +1,5 @@ // @flow export default ({ source, sourceType, videoJsOptions, isAudio }) => { - function detectFileType() { return new Promise(async (res, rej) => { try { diff --git a/ui/component/viewers/videoViewer/internal/videojs-keyboard-shortcuts.jsx b/ui/component/viewers/videoViewer/internal/videojs-keyboard-shortcuts.jsx index 7fc8eebb8..8f989604a 100644 --- a/ui/component/viewers/videoViewer/internal/videojs-keyboard-shortcuts.jsx +++ b/ui/component/viewers/videoViewer/internal/videojs-keyboard-shortcuts.jsx @@ -1,3 +1,4 @@ +// @flow import * as OVERLAY from './overlays'; import * as KEYCODES from 'constants/keycodes'; import isUserTyping from 'util/detect-typing'; @@ -121,7 +122,6 @@ export default ({ playNext, playPrevious, toggleVideoTheaterMode }) => { // eslint-disable-next-line flowtype/no-types-missing-file-annotation function handleSingleKeyActions(e: KeyboardEvent, playerRef, containerRef) { - if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return; if (e.keyCode === KEYCODES.SPACEBAR || e.keyCode === KEYCODES.K) togglePlay(containerRef); if (e.keyCode === KEYCODES.F) toggleFullscreen(playerRef); diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx index 0082d121a..4075226a4 100644 --- a/ui/component/viewers/videoViewer/internal/videojs.jsx +++ b/ui/component/viewers/videoViewer/internal/videojs.jsx @@ -123,7 +123,7 @@ export default React.memo(function VideoJs(props: Props) { isAudio, onPlayerReady, toggleVideoTheaterMode, - adUrl, // TODO: this ad functionality isn't used, can be pulled out + // adUrl, // TODO: this ad functionality isn't used, can be pulled out claimId, userId, allowPreRoll, @@ -171,7 +171,8 @@ export default React.memo(function VideoJs(props: Props) { const { detectFileType, createVideoPlayerDOM } = functions({ source, sourceType, videoJsOptions, isAudio }); - let unmuteAndHideHint, retryVideoAfterFailure; + const { unmuteAndHideHint, retryVideoAfterFailure, initializeEvents } = events({ tapToUnmuteRef, tapToRetryRef, setReload, videoTheaterMode, playerRef, autoplaySetting, replay }); + // Initialize video.js function initializeVideoPlayer(el) { if (!el) return; @@ -184,10 +185,7 @@ export default React.memo(function VideoJs(props: Props) { runAds(internalFeatureEnabled, allowPreRoll, player); - const videoJsEvents = events({ tapToUnmuteRef, tapToRetryRef, setReload, videoTheaterMode, playerRef, autoplaySetting, player }); - - unmuteAndHideHint = videoJsEvents.unmuteAndHideHint; - retryVideoAfterFailure = videoJsEvents.retryVideoAfterFailure; + initializeEvents(); // Replace volume bar with custom LBRY volume bar LbryVolumeBarClass.replaceExisting(player); @@ -228,14 +226,6 @@ export default React.memo(function VideoJs(props: Props) { return vjs; } - // todo: what does this do exactly? - useEffect(() => { - const player = playerRef.current; - if (replay && player) { - player.play(); - } - }, [replay]); - /** instantiate videoJS and dispose of it when done with code **/ // This lifecycle hook is only called once (on mount), or when `isAudio` or `source` changes. useEffect(() => {