test with promise.race

ui/component/viewers/videoViewer/view.jsx

@@ -118,18 +118,25 @@ function VideoViewer(props: Props) {
     const shouldPlay = !embedded || autoplayIfEmbedded;
     // https://blog.videojs.com/autoplay-best-practices-with-video-js/#Programmatic-Autoplay-and-Success-Failure-Detection
     if (shouldPlay) {
-      const promise = player.play();
-      if (promise !== undefined) {
-        promise
-          .then(function() {
-            // Autoplay started
-          })
-          .catch(function(error) {
+      const playPromise = player.play();
+      const timeoutPromise = new Promise((resolve, reject) => {
+        setTimeout(() => reject('test'), 1000);
+      });
+
+      Promise.race([playPromise, timeoutPromise]).catch(error => {
+        if (error === 'test') {
+          // The player promise hung
+          // This is probably in firefox
+          // Try playing again, it works?
+          player.play();
+        } else {
+          // Autoplay was actually blocked by the browser.
+          // Reset everything so the user sees the thumbnail/play button and can start it on their own
           setIsLoading(false);
           setIsPlaying(false);
-            setPlayingUri(null);
-          });
         }
+        console.log('error', error);
+      });
     }
 
     setIsLoading(shouldPlay); // if we are here outside of an embed, we're playing
@@ -164,7 +171,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 */}
-      {false && isLoading && <LoadingScreen status={__('Loading')} />}
+      {isLoading && <LoadingScreen status={__('Loading')} />}
       <VideoJs
         source={source}
         isAudio={isAudio}

ui/scss/component/_file-render.scss

@@ -315,6 +315,12 @@
       display: flex;
     }
   }
+
+  // Hide video controls on safari to prevent displaying two sets of controls
+  // Apple has their own controls for all devices
+  video::-webkit-media-controls-panel-container {
+    display: none !important;
+  }
 }
 
 .file-viewer--ended-embed .vjs-big-play-button {