fix for hls support

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -311,28 +311,34 @@ export default React.memo<Props>(function VideoJs(props: Props) {
       // $FlowFixMe
       containerRef.current.appendChild(wrapper);
 
-      player = videojs(el, videoJsOptions, () => {
+      fetch(source).then(response => {
-        if (player) {
+        if (response.redirected && response.url && response.url.endsWith('m3u8')) {
-          player.one('play', onInitialPlay);
+          videoJsOptions.sources[0].type = 'application/x-mpegURL';
-          player.on('volumechange', onVolumeChange);
-          player.on('error', onError);
-          player.on('ended', onEnded);
-          LbryVolumeBarClass.replaceExisting(player);
-          player.mobileUi(); // Inits mobile version. No-op if Desktop.
-
-          onPlayerReady(player);
         }
+
+        player = videojs(el, videoJsOptions, () => {
+          if (player) {
+            player.one('play', onInitialPlay);
+            player.on('volumechange', onVolumeChange);
+            player.on('error', onError);
+            player.on('ended', onEnded);
+            LbryVolumeBarClass.replaceExisting(player);
+            player.mobileUi(); // Inits mobile version. No-op if Desktop.
+
+            onPlayerReady(player);
+          }
+        });
+
+        window.player = player;
+
+        // fixes #3498 (https://github.com/lbryio/lbry-desktop/issues/3498)
+        // summary: on firefox the focus would stick to the fullscreen button which caused buggy behavior with spacebar
+        // $FlowFixMe
+        player.on('fullscreenchange', () => document.activeElement && document.activeElement.blur());
+
+        window.addEventListener('keydown', handleKeyDown);
       });
 
-      window.player = player;
-
-      // fixes #3498 (https://github.com/lbryio/lbry-desktop/issues/3498)
-      // summary: on firefox the focus would stick to the fullscreen button which caused buggy behavior with spacebar
-      // $FlowFixMe
-      player.on('fullscreenchange', () => document.activeElement && document.activeElement.blur());
-
-      window.addEventListener('keydown', handleKeyDown);
-
       return () => {
         window.removeEventListener('keydown', handleKeyDown);
 

ui/scss/component/_file-render.scss

@@ -53,6 +53,8 @@
 }
 
 .file-render--video {
+  background-color: black;
+
   &:after {
     content: '';
     position: absolute;