add autoplay logic for embedded player (#5399)

Add autoplay logic when player is embedded.

Adds new `autoplay` prop to `VideoJs` component for specifying autoplay value.

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -45,6 +45,7 @@ type Props = {
   onPlayerReady: Player => void,
   isAudio: boolean,
   startMuted: boolean,
+  autoplay: boolean,
   toggleVideoTheaterMode: () => void,
 };
 
@@ -157,20 +158,31 @@ class LbryVolumeBarClass extends videojs.getComponent(VIDEOJS_VOLUME_BAR_CLASS)
 properties for this component should be kept to ONLY those that if changed should REQUIRE an entirely new videojs element
  */
 export default React.memo<Props>(function VideoJs(props: Props) {
-  const { startMuted, source, sourceType, poster, isAudio, onPlayerReady, toggleVideoTheaterMode } = props;
+  const {
+    autoplay,
+    startMuted,
+    source,
+    sourceType,
+    poster,
+    isAudio,
+    onPlayerReady,
+    toggleVideoTheaterMode,
+  } = props;
+
   const [reload, setReload] = useState('initial');
 
   let player: ?Player;
   const containerRef = useRef();
   const videoJsOptions = {
     ...VIDEO_JS_OPTIONS,
+    autoplay: autoplay,
+    muted: startMuted,
     sources: [
       {
         src: source,
         type: sourceType,
       },
     ],
-    autoplay: true,
     poster: poster, // thumb looks bad in app, and if autoplay, flashing poster is annoying
     plugins: {
       eventTracking: true,
@@ -178,8 +190,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     },
   };
 
-  videoJsOptions.muted = startMuted;
-
   const tapToUnmuteRef = useRef();
   const tapToRetryRef = useRef();
 

ui/component/viewers/videoViewer/view.jsx

@@ -15,6 +15,7 @@ import LoadingScreen from 'component/common/loading-screen';
 import { addTheaterModeButton } from './internal/theater-mode';
 
 const PLAY_TIMEOUT_ERROR = 'play_timeout_error';
+const PLAY_TIMEOUT_LIMIT = 2000;
 
 type Props = {
   position: number,
@@ -149,9 +150,7 @@ function VideoViewer(props: Props) {
       // https://blog.videojs.com/autoplay-best-practices-with-video-js/#Programmatic-Autoplay-and-Success-Failure-Detection
       if (shouldPlay) {
         const playPromise = player.play();
-        const timeoutPromise = new Promise((resolve, reject) => {
+        const timeoutPromise = new Promise((resolve, reject) => setTimeout(() => reject(PLAY_TIMEOUT_ERROR), PLAY_TIMEOUT_LIMIT));
-          setTimeout(() => reject(PLAY_TIMEOUT_ERROR), 2000);
-        });
 
         Promise.race([playPromise, timeoutPromise]).catch(error => {
           if (PLAY_TIMEOUT_ERROR) {
@@ -221,11 +220,12 @@ function VideoViewer(props: Props) {
       <VideoJs
         source={source}
         isAudio={isAudio}
-        poster={isAudio || (embedded && !autoplayIfEmbedded) ? thumbnail : null}
+        poster={isAudio || (embedded && !autoplayIfEmbedded) ? thumbnail : ''}
         sourceType={forcePlayer ? 'video/mp4' : contentType}
         onPlayerReady={onPlayerReady}
         startMuted={autoplayIfEmbedded}
         toggleVideoTheaterMode={toggleVideoTheaterMode}
+        autoplay={!embedded || autoplayIfEmbedded}
       />
     </div>
   );