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

disable loading screen

Browse source
This commit is contained in:
Jeremy Kauffman 2020-04-26 16:32:39 -04:00 committed by Sean Yesmunt
parent 4a6d9c7292
commit e23ae63c74
2 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -66,6 +66,7 @@ export default React.memo(function VideoJs(props: Props) {
type: sourceType, type: sourceType,
}, },
], ],
autoplay: false,
poster: poster, // thumb looks bad in app, and if autoplay, flashing poster is annoying poster: poster, // thumb looks bad in app, and if autoplay, flashing poster is annoying
plugins: { eventTracking: true }, plugins: { eventTracking: true },
}; };

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

@ -61,6 +61,9 @@ function VideoViewer(props: Props) {
const [isPlaying, setIsPlaying] = useState(false); const [isPlaying, setIsPlaying] = useState(false);
const [showAutoplayCountdown, setShowAutoplayCountdown] = useState(false); const [showAutoplayCountdown, setShowAutoplayCountdown] = useState(false);
const [isEndededEmbed, setIsEndededEmbed] = useState(false); const [isEndededEmbed, setIsEndededEmbed] = useState(false);
/* isLoading was designed to show loading screen on first play press, rather than completely black screen, but
breaks because some browsers (e.g. Firefox) block autoplay but leave the player.play Promise pending */
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const previousUri = usePrevious(uri); const previousUri = usePrevious(uri);
@ -101,7 +104,6 @@ function VideoViewer(props: Props) {
} }
function onPlay() { function onPlay() {
console.log('on play!!!');
setIsLoading(false); setIsLoading(false);
setIsPlaying(true); setIsPlaying(true);
setShowAutoplayCountdown(false); setShowAutoplayCountdown(false);
@ -113,9 +115,9 @@ function VideoViewer(props: Props) {
} }
const onPlayerReady = useCallback(player => { const onPlayerReady = useCallback(player => {
console.log('on player ready!!!'); const shouldPlay = !embedded || autoplayIfEmbedded;
// https://blog.videojs.com/autoplay-best-practices-with-video-js/#Programmatic-Autoplay-and-Success-Failure-Detection // https://blog.videojs.com/autoplay-best-practices-with-video-js/#Programmatic-Autoplay-and-Success-Failure-Detection
if (autoplaySetting || autoplayIfEmbedded) { if (shouldPlay) {
const promise = player.play(); const promise = player.play();
if (promise !== undefined) { if (promise !== undefined) {
promise promise
@ -123,13 +125,14 @@ function VideoViewer(props: Props) {
// Autoplay started // Autoplay started
}) })
.catch(function(error) { .catch(function(error) {
setIsLoading(false);
setIsPlaying(false); setIsPlaying(false);
setPlayingUri(null); setPlayingUri(null);
}); });
} }
} }
setIsLoading(!embedded); // if we are here outside of an embed, we're playing setIsLoading(shouldPlay); // if we are here outside of an embed, we're playing
player.on('tracking:buffered', doTrackingBuffered); player.on('tracking:buffered', doTrackingBuffered);
player.on('tracking:firstplay', doTrackingFirstPlay.bind(player)); player.on('tracking:firstplay', doTrackingFirstPlay.bind(player));
player.on('ended', onEnded); player.on('ended', onEnded);
@ -160,8 +163,8 @@ function VideoViewer(props: Props) {
{showAutoplayCountdown && <AutoplayCountdown uri={uri} />} {showAutoplayCountdown && <AutoplayCountdown uri={uri} />}
{isEndededEmbed && <FileViewerEmbeddedEnded uri={uri} />} {isEndededEmbed && <FileViewerEmbeddedEnded uri={uri} />}
{embedded && !isEndededEmbed && <FileViewerEmbeddedTitle uri={uri} />} {embedded && !isEndededEmbed && <FileViewerEmbeddedTitle uri={uri} />}
{/* change message at any time */} {/* disable this loading behavior because it breaks when player.play() promise hangs */}
{isLoading && <LoadingScreen status={__('Loading')} />} {false && isLoading && <LoadingScreen status={__('Loading')} />}
<VideoJs <VideoJs
source={source} source={source}
isAudio={isAudio} isAudio={isAudio}