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

more debugging work

Browse source
This commit is contained in:
Anthony 2021-09-02 22:42:21 +02:00
parent 9b88463886
commit df84c4ccbd
No known key found for this signature in database
GPG key ID: C386D3C93D50E356
2 changed files with 54 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -499,14 +499,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
const wrapper = document.createElement('div');
wrapper.setAttribute('data-vjs-player', 'true');
const el = document.createElement(isAudio ? 'audio' : 'video');
el.className = 'video-js';
// el.className = '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');
// }
el.className = 'video-js vjs-big-play-centered';
wrapper.appendChild(el);
@ -552,23 +545,8 @@ export default React.memo<Props>(function VideoJs(props: Props) {
if (!el) return;
const vjs = videojs(el, videoJsOptions, () => {
const player = playerRef.current;
const isNotAndroidOrIos = !videojs.browser.IS_ANDROID && !videojs.browser.IS_IOS;
if (isNotAndroidOrIos) {
el.classList.add('vjs-big-play-centered');
const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
playBT.style.display = 'none';
} else {
// console.log('hiding button');
// player.bigPlayButton.hide()
// const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
// playBT.remove()
}
// this seems like a weird thing to have to check for here
if (!player) return;
@ -655,10 +633,11 @@ export default React.memo<Props>(function VideoJs(props: Props) {
window.removeEventListener('keydown', handleKeyDown);
const player = playerRef.current;
if (player) {
player.dispose();
window.player = undefined;
}
player.pause()
player.dispose();
window.oldPlayer = window.player;
window.player = undefined;
};
}, [isAudio]);
@ -696,6 +675,8 @@ export default React.memo<Props>(function VideoJs(props: Props) {
});
}, [source, reload]);
console.log('RUNNING HERE VIDEOJS!');
return (
// $FlowFixMe
<div className={classnames('video-js-parent', { 'video-js-parent--ios': IS_IOS })} ref={containerRef}>

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

@ -114,6 +114,8 @@ function VideoViewer(props: Props) {
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
!window.MSStream;
console.log("RUNNING HERE PARENT VIEW.")
// force everything to recent when URI changes, can cause weird corner cases otherwise (e.g. navigate while autoplay is true)
useEffect(() => {
if (uri && previousUri && uri !== previousUri) {
@ -208,7 +210,17 @@ function VideoViewer(props: Props) {
playerReadyDependencyList.push(desktopPlayStartTime);
}
let alreadyRunning = false;
const onPlayerReady = useCallback((player: Player) => {
console.log('already running');
console.log(alreadyRunning)
console.log(new Date())
alreadyRunning = true;
console.log("PLAYER READY CALLBACK")
if (!embedded) {
player.muted(muted);
player.volume(volume);
@ -218,60 +230,51 @@ function VideoViewer(props: Props) {
const shouldPlay = !embedded || autoplayIfEmbedded;
console.log('should play');
console.log(shouldPlay);
let tryingToPlay = false;
// console.log('should play');
// console.log(shouldPlay);
// 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);
// }
console.log('starting video!');
const playPromise = player.play();
const timeoutPromise = new Promise((resolve, reject) =>
setTimeout(() => reject(PLAY_TIMEOUT_ERROR), PLAY_TIMEOUT_LIMIT)
);
(async function() {
try {
console.log('is playing already');
console.log(isPlaying);
console.log('player');
console.log(player);
// console.log('is paused!');
// console.log(player.paused());
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()) {
if(IS_IOS){
const isAlreadyPlaying = isPlaying;
setIsPlaying(true);
if (!isAlreadyPlaying) {
console.log('STARTING PLAYER')
const playerResponse = player.play();
const isPaused = player.paused();
// console.log(playerResponse)
// await new Promise(resolve => setTimeout(resolve, 2000));
// console.log(playerResponse);
if (IS_IOS && isPaused) {
document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
player.muted(true);
const iosResponse = player.play();
await new Promise(resolve => setTimeout(resolve, 2000));
console.log(iosResponse);
}
// another version had player.play()
player.play();
}
} else {
console.log('other block conditional');
if(IS_IOS){
document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
player.muted(true);
} else {
console.log('ALREADY HAVE PLAYER, DISPOSING!!')
player.dispose()
}
console.log('\n\n')
player.play();
} catch (err) {
console.log(err);
}
setIsLoading(false);
setIsPlaying(false);
});
})();
}
setIsLoading(shouldPlay); // if we are here outside of an embed, we're playing
@ -304,6 +307,7 @@ function VideoViewer(props: Props) {
changeMute(player.muted());
}
});
player.on('ratechange', () => {
const HAVE_NOTHING = 0; // https://docs.videojs.com/player#readyState
if (player && player.readyState() !== HAVE_NOTHING) {