From f59cdb19298c6ac62c7b5d93e95e4bdf9ddef79a Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 4 Jan 2021 10:12:46 -0500
Subject: [PATCH] fix for hls support

---
 .../viewers/videoViewer/internal/videojs.jsx  | 44 +++++++++++--------
 ui/scss/component/_file-render.scss           |  2 +
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx
index 0d50a4943..be9aa241a 100644
--- a/ui/component/viewers/videoViewer/internal/videojs.jsx
+++ b/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, () => {
-        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);
+      fetch(source).then(response => {
+        if (response.redirected && response.url && response.url.endsWith('m3u8')) {
+          videoJsOptions.sources[0].type = 'application/x-mpegURL';
         }
+
+        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);
 
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index bb5bc78c4..3404c34ea 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -53,6 +53,8 @@
 }
 
 .file-render--video {
+  background-color: black;
+
   &:after {
     content: '';
     position: absolute;