player enhancements

Tries more video types
Enables thumbnail with audio files
potentially better autoplay support

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 => ({

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 = {
+const VIDEO_JS_OPTIONS: { poster?: string } = {
-  autoplay: true,
+  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) {
     <div className="file-render__viewer" onContextMenu={stopContextMenu}>
       {!requireRedraw && (
         <div data-vjs-player>
-          <video ref={videoRef} className="video-js" />
+          {isAudio ? <audio ref={videoRef} className="video-js" /> : <video ref={videoRef} className="video-js" />}
         </div>
       )}
     </div>