actually disable autoplay in embeds
This commit is contained in:
parent
bf0ff8ee84
commit
a1e24d6dcc
2 changed files with 27 additions and 4 deletions
|
@ -1,11 +1,12 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React, { useRef, useEffect, useState } from 'react';
|
import React, { useRef, useEffect, useState, useContext } from 'react';
|
||||||
import { stopContextMenu } from 'util/context-menu';
|
import { stopContextMenu } from 'util/context-menu';
|
||||||
import videojs from 'video.js/dist/alt/video.core.novtt.min.js';
|
import videojs from 'video.js/dist/alt/video.core.novtt.min.js';
|
||||||
import 'video.js/dist/alt/video-js-cdn.min.css';
|
import 'video.js/dist/alt/video-js-cdn.min.css';
|
||||||
import eventTracking from 'videojs-event-tracking';
|
import eventTracking from 'videojs-event-tracking';
|
||||||
import isUserTyping from 'util/detect-typing';
|
import isUserTyping from 'util/detect-typing';
|
||||||
import analytics from 'analytics';
|
import analytics from 'analytics';
|
||||||
|
import { EmbedContext } from 'page/embedWrapper/view';
|
||||||
|
|
||||||
const F11_KEYCODE = 122;
|
const F11_KEYCODE = 122;
|
||||||
const SPACE_BAR_KEYCODE = 32;
|
const SPACE_BAR_KEYCODE = 32;
|
||||||
|
@ -21,8 +22,15 @@ const SEEK_FORWARD_KEYCODE = ARROW_RIGHT_KEYCODE;
|
||||||
const SEEK_BACKWARD_KEYCODE = ARROW_LEFT_KEYCODE;
|
const SEEK_BACKWARD_KEYCODE = ARROW_LEFT_KEYCODE;
|
||||||
|
|
||||||
const SEEK_STEP = 10; // time to seek in seconds
|
const SEEK_STEP = 10; // time to seek in seconds
|
||||||
|
type VideoJSOptions = {
|
||||||
const VIDEO_JS_OPTIONS: { poster?: string } = {
|
controls: boolean,
|
||||||
|
autoplay: boolean,
|
||||||
|
preload: string,
|
||||||
|
playbackRates: Array<number>,
|
||||||
|
responsive: boolean,
|
||||||
|
poster?: string,
|
||||||
|
};
|
||||||
|
const VIDEO_JS_OPTIONS: VideoJSOptions = {
|
||||||
controls: true,
|
controls: true,
|
||||||
autoplay: true,
|
autoplay: true,
|
||||||
preload: 'auto',
|
preload: 'auto',
|
||||||
|
@ -51,6 +59,11 @@ function VideoViewer(props: Props) {
|
||||||
const claimId = claim && claim.claim_id;
|
const claimId = claim && claim.claim_id;
|
||||||
const videoRef = useRef();
|
const videoRef = useRef();
|
||||||
const isAudio = contentType.includes('audio');
|
const isAudio = contentType.includes('audio');
|
||||||
|
const embedded = useContext(EmbedContext);
|
||||||
|
if (embedded) {
|
||||||
|
VIDEO_JS_OPTIONS.autoplay = false;
|
||||||
|
}
|
||||||
|
|
||||||
let forceTypes = [
|
let forceTypes = [
|
||||||
'video/quicktime',
|
'video/quicktime',
|
||||||
'application/x-ext-mkv',
|
'application/x-ext-mkv',
|
||||||
|
|
|
@ -7,6 +7,8 @@ type Props = {
|
||||||
resolveUri: string => void,
|
resolveUri: string => void,
|
||||||
claim: Claim,
|
claim: Claim,
|
||||||
};
|
};
|
||||||
|
// $FlowFixMe apparently flow thinks this is wrong.
|
||||||
|
export const EmbedContext = React.createContext();
|
||||||
const EmbedWrapperPage = (props: Props) => {
|
const EmbedWrapperPage = (props: Props) => {
|
||||||
const { resolveUri, claim, uri } = props;
|
const { resolveUri, claim, uri } = props;
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -15,7 +17,15 @@ const EmbedWrapperPage = (props: Props) => {
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return <div className={'embed__wrapper'}>{claim && <FileRender uri={uri} embedded />}</div>;
|
return (
|
||||||
|
<div className={'embed__wrapper'}>
|
||||||
|
{claim && (
|
||||||
|
<EmbedContext.Provider value>
|
||||||
|
<FileRender uri={uri} embedded />
|
||||||
|
</EmbedContext.Provider>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default EmbedWrapperPage;
|
export default EmbedWrapperPage;
|
||||||
|
|
Loading…
Add table
Reference in a new issue