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

Fix videojs issues #6986

Closed
mayeaux wants to merge 5 commits from fix-videojs-issues into master
pull from: fix-videojs-issues
merge into: LBRYCommunity:master
Conversation 0 Commits 5 Files changed 3 +88 -23
3 changed files with 88 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/component/viewers/videoViewer/internal/plugins/videojs-mobile-ui/plugin.js
View file

@ -151,8 +151,8 @@ const onPlayerReady = (player, options) => {
* Never shows if the endscreen plugin is present
*/
const mobileUi = function(options) {
// if (videojs.browser.IS_ANDROID || videojs.browser.IS_IOS) {
if (videojs.browser.IS_ANDROID) {
if (videojs.browser.IS_ANDROID || videojs.browser.IS_IOS) {
// if (videojs.browser.IS_ANDROID) {
this.ready(() => {
onPlayerReady(this, videojs.mergeOptions(defaults, options));
});

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

@ -59,6 +59,7 @@ type Props = {
userId: ?number,
// allowPreRoll: ?boolean,
shareTelemetry: boolean,
showAutoplayCountdown: boolean
};
// type VideoJSOptions = {
@ -84,11 +85,12 @@ const VIDEO_JS_OPTIONS = {
controls: true,
html5: {
vhs: {
overrideNative: !videojs.browser.IS_ANY_SAFARI,
overrideNative: true, // don't override on safari
},
},
};
// keys to bind to for keyboard shortcuts
const SPACE_BAR_KEYCODE = 32;
const SMALL_F_KEYCODE = 70;
const SMALL_M_KEYCODE = 77;
@ -118,6 +120,7 @@ const SEEK_BACKWARD_KEYCODE_5 = ARROW_LEFT_KEYCODE;
const SEEK_STEP_5 = 5;
const SEEK_STEP = 10; // time to seek in seconds
// register videojs plugins
if (!Object.keys(videojs.getPlugins()).includes('eventTracking')) {
videojs.registerPlugin('eventTracking', eventTracking);
}
@ -197,6 +200,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
userId,
// allowPreRoll,
shareTelemetry,
showAutoplayCountdown,
} = props;
const [reload, setReload] = useState('initial');
@ -217,11 +221,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
eventTracking: true,
overlay: OVERLAY.OVERLAY_DATA,
},
// fixes problem of errant CC button showing up on iOS
// the true fix here is to fix the m3u8 file, see: https://github.com/lbryio/lbry-desktop/pull/6315
controlBar: {
subsCapsButton: false,
},
};
const tapToUnmuteRef = useRef();
@ -263,10 +262,13 @@ export default React.memo<Props>(function VideoJs(props: Props) {
}
}
// unmute video when player hits "Tap to unmute button"
function unmuteAndHideHint() {
const player = playerRef.current;
if (player) {
// unmute the video
player.muted(false);
// turn the volume all the way up if it's at 0
if (player.volume() === 0) {
player.volume(1.0);
}
@ -296,29 +298,29 @@ export default React.memo<Props>(function VideoJs(props: Props) {
// as the listener to update static texts.
const player = playerRef.current;
if (player) {
const controlBar = player.getChild('controlBar');
// const controlBar = player.getChild('controlBar');
switch (e.type) {
case 'play':
controlBar.getChild('PlayToggle').controlText(__('Pause (space)'));
// controlBar.getChild('PlayToggle').controlText(__('Pause (space)'));
break;
case 'pause':
controlBar.getChild('PlayToggle').controlText(__('Play (space)'));
// controlBar.getChild('PlayToggle').controlText(__('Play (space)'));
break;
case 'volumechange':
controlBar
.getChild('VolumePanel')
.getChild('MuteToggle')
.controlText(player.muted() || player.volume() === 0 ? __('Unmute (m)') : __('Mute (m)'));
// controlBar
// .getChild('VolumePanel')
// .getChild('MuteToggle')
// .controlText(player.muted() || player.volume() === 0 ? __('Unmute (m)') : __('Mute (m)'));
break;
case 'fullscreenchange':
controlBar
.getChild('FullscreenToggle')
.controlText(player.isFullscreen() ? __('Exit Fullscreen (f)') : __('Fullscreen (f)'));
// controlBar
// .getChild('FullscreenToggle')
// .controlText(player.isFullscreen() ? __('Exit Fullscreen (f)') : __('Fullscreen (f)'));
break;
case 'loadstart':
// --- Do everything ---
controlBar.getChild('PlaybackRateMenuButton').controlText(__('Playback Rate (<, >)'));
controlBar.getChild('QualityButton').controlText(__('Quality'));
// controlBar.getChild('PlaybackRateMenuButton').controlText(__('Playback Rate (<, >)'));
// controlBar.getChild('QualityButton').controlText(__('Quality'));
resolveCtrlText({ type: 'play' });
resolveCtrlText({ type: 'pause' });
resolveCtrlText({ type: 'volumechange' });
@ -329,7 +331,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
// (2) We'll have to get 'makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)'
// as a prop here so we can say "Theater mode|Default mode" instead of
// "Toggle Theater mode".
controlBar.getChild('Button').controlText(__('Toggle Theater mode (t)'));
// controlBar.getChild('Button').controlText(__('Toggle Theater mode (t)'));
break;
default:
if (isDev) throw Error('Unexpected: ' + e.type);
@ -357,6 +359,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
}
function onError() {
console.log('error!');
const player = playerRef.current;
showTapButton(TAP.RETRY);
@ -493,6 +496,12 @@ export default React.memo<Props>(function VideoJs(props: Props) {
wrapper.setAttribute('data-vjs-player', 'true');
const el = document.createElement(isAudio ? 'audio' : 'video');
el.className = 'video-js vjs-big-play-centered ';
// show large play button when paused on ios
if (IS_IOS) {
el.classList.add('vjs-show-big-play-button-on-pause');
}
wrapper.appendChild(el);
container.appendChild(wrapper);
@ -553,6 +562,29 @@ export default React.memo<Props>(function VideoJs(props: Props) {
player.on('error', onError);
player.on('ended', onEnded);
// on ios, show a play button when paused
if (IS_IOS) {
const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
player.on('pause', function() {
const videoDiv = player.children_[0];
const controlBar = document.getElementsByClassName('vjs-control-bar')[0];
const leftWidth = ((videoDiv.offsetWidth - playBT.offsetWidth) / 2) + 'px';
const availableHeight = videoDiv.offsetHeight - controlBar.offsetHeight;
const topHeight = (((availableHeight - playBT.offsetHeight) / 2) + 11) + 'px';
playBT.style.top = topHeight;
playBT.style.left = leftWidth;
playBT.style.margin = 0;
});
player.on('ended', function() {
if (showAutoplayCountdown) {
playBT.style.display = 'none';
}
});
}
// Replace volume bar with custom LBRY volume bar
LbryVolumeBarClass.replaceExisting(player);

37
ui/component/viewers/videoViewer/view.jsx
View file

@ -212,19 +212,51 @@ function VideoViewer(props: Props) {
}
const shouldPlay = !embedded || autoplayIfEmbedded;
console.log('should play');
console.log(shouldPlay);
let tryingToPlay = false;
// TODO: this is causing issues with videos starting randomly
// https://blog.videojs.com/autoplay-best-practices-with-video-js/#Programmatic-Autoplay-and-Success-Failure-Detection
if (shouldPlay) {
// tryingToPlay = true;
//
// try {
// if(!tryingToPlay){
// console.log('trying to start playing');
// player.play();
// } else {
// console.log('already starting playing');
// }
// } catch (err){
// console.log('player error');
// console.log(err);
// }
const playPromise = player.play();
const timeoutPromise = new Promise((resolve, reject) =>
setTimeout(() => reject(PLAY_TIMEOUT_ERROR), PLAY_TIMEOUT_LIMIT)
);
Promise.race([playPromise, timeoutPromise]).catch((error) => {
console.log('promise error');
console.log(error);
console.log('promise error');
if (typeof error === 'object' && error.name && error.name === 'NotAllowedError') {
console.log('running here!')
if (player.autoplay() && !player.muted()) {
// player.muted(true);
document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
player.muted(true);
// another version had player.play()
player.play()
}
} else {
console.log('other block conditional');
player.muted(true);
player.play()
document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
}
setIsLoading(false);
setIsPlaying(false);
@ -289,7 +321,7 @@ function VideoViewer(props: Props) {
{isEndededEmbed && <FileViewerEmbeddedEnded uri={uri} />}
{embedded && !isEndededEmbed && <FileViewerEmbeddedTitle uri={uri} />}
{/* disable this loading behavior because it breaks when player.play() promise hangs */}
{isLoading && <LoadingScreen status={__('Loading')} />}
{/*{isLoading && <LoadingScreen status={__('Loading')} />}*/}
{!isFetchingAd && adUrl && (
<>
@ -336,6 +368,7 @@ function VideoViewer(props: Props) {
userId={userId}
allowPreRoll={!embedded && !authenticated}
shareTelemetry={shareTelemetry}
showAutoplayCountdown={autoplaySetting}
/>
)}
</div>