From dd4cd9314cd91727104d90ae3db40311b5b15a94 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 29 Apr 2020 10:00:48 -0400
Subject: [PATCH] style fixes

---
 ui/component/sideNavigation/view.jsx      |  6 +-
 ui/component/viewers/videoViewer/view.jsx | 76 ++++++++++-------------
 ui/scss/component/_file-render.scss       |  8 ++-
 3 files changed, 44 insertions(+), 46 deletions(-)

diff --git a/ui/component/sideNavigation/view.jsx b/ui/component/sideNavigation/view.jsx
index d630d09bc..36ddcfb51 100644
--- a/ui/component/sideNavigation/view.jsx
+++ b/ui/component/sideNavigation/view.jsx
@@ -120,6 +120,9 @@ function SideNavigation(props: Props) {
               ...buildLink(PAGES.LIBRARY, __('Library'), ICONS.LIBRARY),
             },
             // @endif
+            {
+              ...(expanded ? { ...buildLink(PAGES.SETTINGS, __('Settings'), ICONS.SETTINGS) } : {}),
+            },
           ].map(
             linkProps =>
               linkProps.navigate && (
@@ -164,9 +167,6 @@ function SideNavigation(props: Props) {
               {
                 ...buildLink(PAGES.PUBLISH, __('Publish'), ICONS.PUBLISH),
               },
-              {
-                ...buildLink(PAGES.SETTINGS, __('Settings'), ICONS.SETTINGS),
-              },
               {
                 ...buildLink(PAGES.HELP, __('Help'), ICONS.HELP),
               },
diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx
index ace41df44..423225d43 100644
--- a/ui/component/viewers/videoViewer/view.jsx
+++ b/ui/component/viewers/videoViewer/view.jsx
@@ -57,7 +57,6 @@ function VideoViewer(props: Props) {
   } = props;
   const claimId = claim && claim.claim_id;
   const isAudio = contentType.includes('audio');
-
   const forcePlayer = FORCE_CONTENT_TYPE_PLAYER.includes(contentType);
   const [isPlaying, setIsPlaying] = useState(false);
   const [showAutoplayCountdown, setShowAutoplayCountdown] = useState(false);
@@ -85,7 +84,6 @@ function VideoViewer(props: Props) {
 
   function doTrackingFirstPlay(e: Event, data: any) {
     analytics.videoStartEvent(claimId, data.secondsToLoad);
-
     doAnalyticsView(uri, data.secondsToLoad).then(() => {
       claimRewards();
     });
@@ -110,54 +108,48 @@ function VideoViewer(props: Props) {
     setIsPlaying(false);
   }
 
-  const onPlayerReady = useCallback((player: Player) => {
-    if (!embedded) {
-      player.muted(muted);
-      player.volume(volume);
-    }
+  const onPlayerReady = useCallback(
+    (player: Player) => {
+      if (!embedded) {
+        player.muted(muted);
+        player.volume(volume);
+      }
 
-    const shouldPlay = !embedded || autoplayIfEmbedded;
-    // https://blog.videojs.com/autoplay-best-practices-with-video-js/#Programmatic-Autoplay-and-Success-Failure-Detection
-    if (shouldPlay) {
-      const playPromise = player.play();
-      const timeoutPromise = new Promise((resolve, reject) => {
-        setTimeout(() => reject(PLAY_TIMEOUT_ERROR), 1000);
-      });
+      const shouldPlay = !embedded || autoplayIfEmbedded;
+      // https://blog.videojs.com/autoplay-best-practices-with-video-js/#Programmatic-Autoplay-and-Success-Failure-Detection
+      if (shouldPlay) {
+        const playPromise = player.play();
+        const timeoutPromise = new Promise((resolve, reject) => {
+          setTimeout(() => reject(PLAY_TIMEOUT_ERROR), 1000);
+        });
 
-      Promise.race([playPromise, timeoutPromise]).catch(error => {
-        if (error === PLAY_TIMEOUT_ERROR) {
-          // The player promise hung
-          // This is probably in firefox
-          // The second attempt usually works
-          player.play();
-        } else {
-          // Autoplay was actually blocked by the browser
-          // Reset everything so the user sees the thumbnail/play button and can start it on their own
+        Promise.race([playPromise, timeoutPromise]).catch(error => {
           setIsLoading(false);
           setIsPlaying(false);
+        });
+      }
+
+      setIsLoading(shouldPlay); // if we are here outside of an embed, we're playing
+      player.on('tracking:buffered', doTrackingBuffered);
+      player.on('tracking:firstplay', doTrackingFirstPlay);
+      player.on('ended', onEnded);
+      player.on('play', onPlay);
+      player.on('pause', onPause);
+      player.on('volumechange', () => {
+        if (player && player.volume() !== volume) {
+          changeVolume(player.volume());
+        }
+        if (player && player.muted() !== muted) {
+          changeMute(player.muted());
         }
       });
-    }
 
-    setIsLoading(shouldPlay); // if we are here outside of an embed, we're playing
-    player.on('tracking:buffered', doTrackingBuffered);
-    player.on('tracking:firstplay', doTrackingFirstPlay);
-    player.on('ended', onEnded);
-    player.on('play', onPlay);
-    player.on('pause', onPause);
-    player.on('volumechange', () => {
-      if (player && player.volume() !== volume) {
-        changeVolume(player.volume());
+      if (position) {
+        player.currentTime(position);
       }
-      if (player && player.muted() !== muted) {
-        changeMute(player.muted());
-      }
-    });
-
-    if (position) {
-      player.currentTime(position);
-    }
-  }, []);
+    },
+    [uri]
+  );
 
   return (
     <div
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index 63d0ad4f3..8a545cc5a 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -343,7 +343,6 @@
   .vjs-big-play-button {
     @extend .button--icon;
     @extend .button--play;
-    background-color: rgba(0, 0, 0, 0.6);
     border: none;
     position: static;
     z-index: 2;
@@ -359,6 +358,13 @@
   .video-js.vjs-paused {
     .vjs-big-play-button {
       display: block;
+      background-color: rgba(0, 0, 0, 0.6);
+    }
+  }
+
+  .video-js:hover {
+    .vjs-big-play-button {
+      background-color: var(--color-primary);
     }
   }
 }