From e23ae63c748a3d367e4edce98e83959bcff5c15d Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <jeremy@lbry.io>
Date: Sun, 26 Apr 2020 16:32:39 -0400
Subject: [PATCH] disable loading screen

---
 .../viewers/videoViewer/internal/videojs.jsx      |  1 +
 ui/component/viewers/videoViewer/view.jsx         | 15 +++++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx
index cc445ab4f..374a49431 100644
--- a/ui/component/viewers/videoViewer/internal/videojs.jsx
+++ b/ui/component/viewers/videoViewer/internal/videojs.jsx
@@ -66,6 +66,7 @@ export default React.memo(function VideoJs(props: Props) {
         type: sourceType,
       },
     ],
+    autoplay: false,
     poster: poster, // thumb looks bad in app, and if autoplay, flashing poster is annoying
     plugins: { eventTracking: true },
   };
diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx
index a4ced1aaa..3fc4598bb 100644
--- a/ui/component/viewers/videoViewer/view.jsx
+++ b/ui/component/viewers/videoViewer/view.jsx
@@ -61,6 +61,9 @@ function VideoViewer(props: Props) {
   const [isPlaying, setIsPlaying] = useState(false);
   const [showAutoplayCountdown, setShowAutoplayCountdown] = 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 previousUri = usePrevious(uri);
@@ -101,7 +104,6 @@ function VideoViewer(props: Props) {
   }
 
   function onPlay() {
-    console.log('on play!!!');
     setIsLoading(false);
     setIsPlaying(true);
     setShowAutoplayCountdown(false);
@@ -113,9 +115,9 @@ function VideoViewer(props: Props) {
   }
 
   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
-    if (autoplaySetting || autoplayIfEmbedded) {
+    if (shouldPlay) {
       const promise = player.play();
       if (promise !== undefined) {
         promise
@@ -123,13 +125,14 @@ function VideoViewer(props: Props) {
             // Autoplay started
           })
           .catch(function(error) {
+            setIsLoading(false);
             setIsPlaying(false);
             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:firstplay', doTrackingFirstPlay.bind(player));
     player.on('ended', onEnded);
@@ -160,8 +163,8 @@ function VideoViewer(props: Props) {
       {showAutoplayCountdown && <AutoplayCountdown uri={uri} />}
       {isEndededEmbed && <FileViewerEmbeddedEnded uri={uri} />}
       {embedded && !isEndededEmbed && <FileViewerEmbeddedTitle uri={uri} />}
-      {/* change message at any time */}
-      {isLoading && <LoadingScreen status={__('Loading')} />}
+      {/* disable this loading behavior because it breaks when player.play() promise hangs */}
+      {false && isLoading && <LoadingScreen status={__('Loading')} />}
       <VideoJs
         source={source}
         isAudio={isAudio}