diff --git a/ui/component/viewers/videoViewer/index.js b/ui/component/viewers/videoViewer/index.js index 1238ee8a4..54c91c73e 100644 --- a/ui/component/viewers/videoViewer/index.js +++ b/ui/component/viewers/videoViewer/index.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { makeSelectFileInfoForUri } from 'lbry-redux'; +import { makeSelectFileInfoForUri, makeSelectThumbnailForUri } from 'lbry-redux'; import { doChangeVolume, doChangeMute } from 'redux/actions/app'; import { selectVolume, selectMute } from 'redux/selectors/app'; import { savePosition, doSetPlayingUri } from 'redux/actions/content'; @@ -11,6 +11,7 @@ const select = (state, props) => ({ position: makeSelectContentPositionForUri(props.uri)(state), muted: selectMute(state), hasFileInfo: Boolean(makeSelectFileInfoForUri(props.uri)(state)), + thumbnail: makeSelectThumbnailForUri(props.uri)(state), }); const perform = dispatch => ({ diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx index 79533e14b..5bb7d593c 100644 --- a/ui/component/viewers/videoViewer/view.jsx +++ b/ui/component/viewers/videoViewer/view.jsx @@ -20,11 +20,12 @@ const SEEK_BACKWARD_KEYCODE = ARROW_LEFT_KEYCODE; const SEEK_STEP = 10; // time to seek in seconds -const VIDEO_JS_OPTIONS = { - autoplay: true, +const VIDEO_JS_OPTIONS: { poster?: string } = { + autoplay: 'any', controls: true, preload: 'auto', playbackRates: [0.25, 0.5, 0.75, 1, 1.1, 1.25, 1.5, 2], + responsive: true, }; type Props = { @@ -38,13 +39,25 @@ type Props = { setPlayingUri: (string | null) => void, source: string, contentType: string, + thumbnail: string, hasFileInfo: boolean, onEndedCB: any, }; function VideoViewer(props: Props) { - const { contentType, source, setPlayingUri, onEndedCB, changeVolume, changeMute, volume, muted } = props; + const { contentType, source, setPlayingUri, onEndedCB, changeVolume, changeMute, volume, muted, thumbnail } = props; const videoRef = useRef(); + const isAudio = contentType.includes('audio'); + let forceTypes = [ + 'video/quicktime', + 'application/x-ext-mkv', + 'video/x-matroska', + 'application/octet-stream', + 'video/x-ms-wmv', + 'video/x-msvideo', + 'video/mpeg', + ]; + const forceMp4 = forceTypes.includes(contentType); const [requireRedraw, setRequireRedraw] = useState(false); let player; @@ -88,11 +101,15 @@ function VideoViewer(props: Props) { sources: [ { src: source, - type: contentType, + type: forceMp4 ? 'video/mp4' : contentType, }, ], }; + if (isAudio) { + videoJsOptions.poster = thumbnail; + } + if (!requireRedraw) { player = videojs(videoNode, videoJsOptions, function() { const self = this; @@ -172,7 +189,7 @@ function VideoViewer(props: Props) {