LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

all code working with some flow fixes needed

Browse source
This commit is contained in:
Anthony 2021-11-09 22:51:59 +01:00
parent c6e6bd55e1
commit 57ca238f2d
No known key found for this signature in database
GPG key ID: C386D3C93D50E356
6 changed files with 72 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
ui/component/viewers/videoViewer/internal/ads.js
View file

@ -18,24 +18,24 @@ const adTags = {
}; };
// Modified to work with IMA // Modified to work with IMA
const vastMacroUrl = // const vastMacroUrl =
`https://vast.aniview.com/api/adserver61/vast/` + // `https://vast.aniview.com/api/adserver61/vast/` +
`?AV_PUBLISHERID=60afcbc58cfdb065440d2426` + // `?AV_PUBLISHERID=60afcbc58cfdb065440d2426` +
`&AV_CHANNELID=${adTags.ford}` + // `&AV_CHANNELID=${adTags.ford}` +
`&AV_URL=[URL]` + // `&AV_URL=[URL]` +
`&cb=[CACHEBUSTING]` + // `&cb=[CACHEBUSTING]` +
`&AV_WIDTH=[WIDTH]` + // `&AV_WIDTH=[WIDTH]` +
`&AV_HEIGHT=[HEIGHT]` + // `&AV_HEIGHT=[HEIGHT]` +
// `&AV_SCHAIN=[SCHAIN_MACRO]` + // // `&AV_SCHAIN=[SCHAIN_MACRO]` +
// `&AV_CCPA=[CCPA_MACRO]` + // // `&AV_CCPA=[CCPA_MACRO]` +
// `&AV_GDPR=[GDPR_MACRO]` + // // `&AV_GDPR=[GDPR_MACRO]` +
// `&AV_CONSENT=[CONSENT_MACRO]` + // // `&AV_CONSENT=[CONSENT_MACRO]` +
`&skip=true` + // `&skip=true` +
`&skiptimer=5` + // `&skiptimer=5` +
`&logo=true` + // `&logo=true` +
`&usevslot=true` + // `&usevslot=true` +
`&vastretry=2` + // `&vastretry=2` +
`&hidecontrols=false`; // `&hidecontrols=false`;
// only run on chrome (brave included) and don't run on mobile for time being // only run on chrome (brave included) and don't run on mobile for time being
const browserIsChrome = videojs.browser.IS_CHROME; const browserIsChrome = videojs.browser.IS_CHROME;
@ -52,7 +52,6 @@ const hitsAtFiftyPercentChance = hitsFiftyPercent();
* @param player * @param player
*/ */
function runAds(internalFeatureEnabled, allowPreRoll, player) { function runAds(internalFeatureEnabled, allowPreRoll, player) {
// current timestamp for vpaid // current timestamp for vpaid
const timestamp = new Date().toISOString(); const timestamp = new Date().toISOString();
@ -89,7 +88,7 @@ function runAds(internalFeatureEnabled, allowPreRoll, player) {
if (shouldShowAnAd && browserIsChrome && !IS_MOBILE) { if (shouldShowAnAd && browserIsChrome && !IS_MOBILE) {
// fire up ima integration via module // fire up ima integration via module
player.ima({ player.ima({
adTagUrl: vastMacroUrl, adTagUrl: vpaidMacroUrl,
vpaidMode: 2, // 2 maps to insecure vpaidMode: 2, // 2 maps to insecure
}); });
} }

66
ui/component/viewers/videoViewer/internal/videojs-events.jsx
View file

@ -17,8 +17,7 @@ const setLabel = (controlBar, childName, label) => {
}; };
export default ({ tapToUnmuteRef, tapToRetryRef, setReload, videoTheaterMode, export default ({ tapToUnmuteRef, tapToRetryRef, setReload, videoTheaterMode,
playerRef, autoplaySetting, player}) => { playerRef, autoplaySetting, replay}) => {
// Override the player's control text. We override to: // Override the player's control text. We override to:
// 1. Add keyboard shortcut to the tool-tip. // 1. Add keyboard shortcut to the tool-tip.
// 2. Override videojs' i18n and use our own (don't want to have 2 systems). // 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]); // }, [adUrl]);
// useEffect(() => { useEffect(() => {
// const player = playerRef.current; const player = playerRef.current;
// if (player) { if (player) {
// const controlBar = player.getChild('controlBar'); const controlBar = player.getChild('controlBar');
// controlBar controlBar
// .getChild('TheaterModeButton') .getChild('TheaterModeButton')
// .controlText(videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)')); .controlText(videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)'));
// } }
// }, [videoTheaterMode]); }, [videoTheaterMode]);
// when user clicks 'Unmute' button, turn audio on and hide unmute button // when user clicks 'Unmute' button, turn audio on and hide unmute button
function unmuteAndHideHint() { function unmuteAndHideHint() {
@ -173,25 +172,32 @@ export default ({ tapToUnmuteRef, tapToRetryRef, setReload, videoTheaterMode,
} }
} }
// useEffect(() => { useEffect(() => {
// console.log('RUNNING HERE!') const player = playerRef.current;
// if (player) {
// const player = playerRef.current; const touchOverlay = player.getChild('TouchOverlay');
// if (player) { const controlBar = player.getChild('controlBar') || touchOverlay.getChild('controlBar');
// const touchOverlay = player.getChild('TouchOverlay'); const autoplayButton = controlBar.getChild('AutoplayNextButton');
// 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]);
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 // Add various event listeners to player
player.one('play', onInitialPlay); player.one('play', onInitialPlay);
player.on('play', resolveCtrlText); player.on('play', resolveCtrlText);
@ -202,9 +208,11 @@ export default ({ tapToUnmuteRef, tapToRetryRef, setReload, videoTheaterMode,
player.on('volumechange', onVolumeChange); player.on('volumechange', onVolumeChange);
player.on('error', onError); player.on('error', onError);
// player.on('ended', onEnded); // player.on('ended', onEnded);
}
return { return {
retryVideoAfterFailure, retryVideoAfterFailure,
unmuteAndHideHint, unmuteAndHideHint,
initializeEvents,
}; };
}; };

1
ui/component/viewers/videoViewer/internal/videojs-functions.jsx
View file

@ -1,6 +1,5 @@
// @flow // @flow
export default ({ source, sourceType, videoJsOptions, isAudio }) => { export default ({ source, sourceType, videoJsOptions, isAudio }) => {
function detectFileType() { function detectFileType() {
return new Promise(async (res, rej) => { return new Promise(async (res, rej) => {
try { try {

2
ui/component/viewers/videoViewer/internal/videojs-keyboard-shortcuts.jsx
View file

@ -1,3 +1,4 @@
// @flow
import * as OVERLAY from './overlays'; import * as OVERLAY from './overlays';
import * as KEYCODES from 'constants/keycodes'; import * as KEYCODES from 'constants/keycodes';
import isUserTyping from 'util/detect-typing'; 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 // eslint-disable-next-line flowtype/no-types-missing-file-annotation
function handleSingleKeyActions(e: KeyboardEvent, playerRef, containerRef) { function handleSingleKeyActions(e: KeyboardEvent, playerRef, containerRef) {
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return; 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.SPACEBAR || e.keyCode === KEYCODES.K) togglePlay(containerRef);
if (e.keyCode === KEYCODES.F) toggleFullscreen(playerRef); if (e.keyCode === KEYCODES.F) toggleFullscreen(playerRef);

18
ui/component/viewers/videoViewer/internal/videojs.jsx
View file

@ -123,7 +123,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
isAudio, isAudio,
onPlayerReady, onPlayerReady,
toggleVideoTheaterMode, 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, claimId,
userId, userId,
allowPreRoll, allowPreRoll,
@ -171,7 +171,8 @@ export default React.memo<Props>(function VideoJs(props: Props) {
const { detectFileType, createVideoPlayerDOM } = functions({ source, sourceType, videoJsOptions, isAudio }); 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 // Initialize video.js
function initializeVideoPlayer(el) { function initializeVideoPlayer(el) {
if (!el) return; if (!el) return;
@ -184,10 +185,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
runAds(internalFeatureEnabled, allowPreRoll, player); runAds(internalFeatureEnabled, allowPreRoll, player);
const videoJsEvents = events({ tapToUnmuteRef, tapToRetryRef, setReload, videoTheaterMode, playerRef, autoplaySetting, player }); initializeEvents();
unmuteAndHideHint = videoJsEvents.unmuteAndHideHint;
retryVideoAfterFailure = videoJsEvents.retryVideoAfterFailure;
// Replace volume bar with custom LBRY volume bar // Replace volume bar with custom LBRY volume bar
LbryVolumeBarClass.replaceExisting(player); LbryVolumeBarClass.replaceExisting(player);
@ -228,14 +226,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
return vjs; 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 **/ /** 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. // This lifecycle hook is only called once (on mount), or when `isAudio` or `source` changes.
useEffect(() => { useEffect(() => {