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.
This commit is contained in:
Dispatch 2021-01-27 05:49:30 -08:00 committed by GitHub
parent d04b0f09ba
commit 4cf9a455bc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 8 deletions

View file

@ -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();

View file

@ -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) {
<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>
);