diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx index 65f8806f5..b03c99e07 100644 --- a/ui/component/viewers/videoViewer/internal/videojs.jsx +++ b/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(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(function VideoJs(props: Props) { }, }; - videoJsOptions.muted = startMuted; - const tapToUnmuteRef = useRef(); const tapToRetryRef = useRef(); diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx index 538eb8e4a..b446f0c73 100644 --- a/ui/component/viewers/videoViewer/view.jsx +++ b/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) => { - setTimeout(() => reject(PLAY_TIMEOUT_ERROR), 2000); - }); + const timeoutPromise = new Promise((resolve, reject) => setTimeout(() => reject(PLAY_TIMEOUT_ERROR), PLAY_TIMEOUT_LIMIT)); Promise.race([playPromise, timeoutPromise]).catch(error => { if (PLAY_TIMEOUT_ERROR) { @@ -221,11 +220,12 @@ function VideoViewer(props: Props) { );