From 947b0645c407fcf10565d57aba03b73ed07375f6 Mon Sep 17 00:00:00 2001
From: DispatchCommit <dispatchcommit@gmail.com>
Date: Fri, 15 May 2020 18:55:45 -0700
Subject: [PATCH] v1.17.0 Upgrade player UI

Upgrade player to match current color scheme
Improve UX by retaining event listeners for scroll
Fix mouseout handling
Slightly increase player UI size
Add additional padding to edges of control bar
Improve control bar positioning
Fix live stream triggering offline bumps after just leaving an offline stream
Remove featureflag for stream stats
define player accent color with SASS var
---
 assets/style/stream-player.scss             | 48 ++++++++++++++-------
 components/BitPlayer/BitwaveVideoPlayer.vue |  7 +--
 components/Channel/StreamInfo.vue           |  2 +-
 package.json                                |  2 +-
 pages/_watch/index.vue                      |  1 +
 store/index.js                              |  5 +--
 6 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/assets/style/stream-player.scss b/assets/style/stream-player.scss
index 362739af..a5be74c7 100644
--- a/assets/style/stream-player.scss
+++ b/assets/style/stream-player.scss
@@ -1,19 +1,32 @@
+$accent-color: #13a9fe;
+
 .video-js {
-  font-size: 11px;
+  font-size: 12px;
   overflow: hidden;
 
   // Control Bar (container)
   .vjs-control-bar {
-    background-color: rgba(20, 20, 20, 0.45);
+    background: none;
+
+    &::before {
+      position: absolute;
+      bottom: 0;
+      content: '';
+      height: 5rem;
+      width: 100%;
+      background: rgba(20, 20, 20, 0.45);
+      background: linear-gradient(0deg, rgba(0,0,0,.85) 10%, rgba(0,0,0,0) 100%);
+    }
   }
 
   // Progress Bar
   .vjs-progress-control.vjs-control {
     position: absolute;
-    display: block;
+    display: flex;
+    align-items: center;
     width: 100%;
-    height: 50%;
-    transform: translateY(-75%);
+    height: 1rem;
+    bottom: 90%;
 
     // Circle play head
     .vjs-play-progress::before {
@@ -29,15 +42,14 @@
 
     // Progress Slider
     .vjs-slider {
-      margin: 0 5px;
-      top: 50%;
+      margin: 0 1rem;
     }
   }
 
   // Load progress color
   .vjs-load-progress,
   .vjs-load-progress div {
-    background-color: rgba(60, 60, 60, 0.5);
+    background-color: rgba(160, 160, 160, 0.5);
   }
 
   // Progress Bar Background
@@ -47,13 +59,13 @@
 
   // Primary Color Progress
   .vjs-slider-bar {
-    background-color: #ffeb3b;
+    background-color: $accent-color;
   }
 
   // Inner Progress Bar
   .vjs-play-progress {
-    background-color: #ffeb3b;
-    color: #ffeb3b;
+    background-color: $accent-color;
+    color: $accent-color;
   }
 
   // Spacer
@@ -89,7 +101,7 @@
 
 // Tooltip
 .vjs-mouse-display .vjs-time-tooltip {
-  color: #ffeb3b;
+  color: $accent-color;
 }
 
 // Tooltip
@@ -107,18 +119,22 @@
 // Transitions control bar between active / inactive
 .vjs-has-started {
   .vjs-control-bar {
-    //transform: translateY(0);
     opacity: 1;
-    transition: .3s;
+    transition: .1s;
   }
 
   &.vjs-user-inactive.vjs-playing {
     .vjs-control-bar {
-      //transform: translateY(127%);
       opacity: 0;
       transition: .3s;
     }
   }
+
+  &.vjs-user-active.vjs-playing {
+    .vjs-control-bar {
+
+    }
+  }
 }
 
 
@@ -136,7 +152,7 @@
 
 
 a {
-  color: yellow;
+  color: $accent-color;
   text-decoration: none;
 }
 
diff --git a/components/BitPlayer/BitwaveVideoPlayer.vue b/components/BitPlayer/BitwaveVideoPlayer.vue
index d730a9d1..e7a84b16 100644
--- a/components/BitPlayer/BitwaveVideoPlayer.vue
+++ b/components/BitPlayer/BitwaveVideoPlayer.vue
@@ -240,14 +240,14 @@
         };
 
         // Player is active (mouseover)
-        this.player.on( 'useractive', () => {
+        /*this.player.on( 'useractive', () => {
           volumeControlElement.addEventListener( 'wheel', handleVolumeScroll );
         });
 
         // Player is inactive
         this.player.on( 'userinactive', () => {
           volumeControlElement.removeEventListener( 'wheel', handleVolumeScroll );
-        });
+        });*/
 
         // Add event listener by default in case user loads with cursor over stream
         volumeControlElement.addEventListener( 'wheel', handleVolumeScroll, true );
@@ -270,7 +270,7 @@
         controlBar.customControlSpacer.on( 'mouseenter', removeVolumePanelHover );
 
         // remove UI instantly when mouse leaves player
-        this.player.on( 'mouseleave', () => this.player.userActive(false) );
+        this.player.on( 'mouseleave', () => this.$nextTick( () => this.player.userActive( false ) ) );
         //--------------------------------------------------------------------
 
 
@@ -289,6 +289,7 @@
           this.setPiP( true );
           this.setDetach( false );
         });
+
         this.player.on( 'leavepictureinpicture', () => {
           this.setPiP( false );
         });
diff --git a/components/Channel/StreamInfo.vue b/components/Channel/StreamInfo.vue
index 2bc1ef7d..0fdc25fb 100644
--- a/components/Channel/StreamInfo.vue
+++ b/components/Channel/StreamInfo.vue
@@ -136,7 +136,7 @@
 
       <!-- Debug Stream -->
       <v-tab-item
-        v-if="featureFlag && !replay"
+        v-if="!replay"
       >
         <div
           style="min-height: 500px"
diff --git a/package.json b/package.json
index 2ce2a60b..00fc6bdc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bitwave.tv",
-  "version": "1.16.1",
+  "version": "1.17.0",
   "description": "An open platform live streaming service for creators to freely express themselves.",
   "author": "Dispatch",
   "scripts": {
diff --git a/pages/_watch/index.vue b/pages/_watch/index.vue
index 5cba4b9b..1e4b46a9 100644
--- a/pages/_watch/index.vue
+++ b/pages/_watch/index.vue
@@ -668,6 +668,7 @@
     beforeDestroy () {
       window.removeEventListener( 'orientationchange', this.onOrientationChange );
       if ( this.streamDataListener ) this.streamDataListener();
+      if ( this.offlineResetInterval ) clearInterval( this.offlineResetInterval );
     },
   }
 </script>
diff --git a/store/index.js b/store/index.js
index eced65ca..c96f72e1 100644
--- a/store/index.js
+++ b/store/index.js
@@ -323,9 +323,6 @@ export const actions = {
       dispatch( $actions.updateViewers ),
     ];
 
-    // Hydrate emotes for logged in users
-    // if ( authUser && user ) runParallel.push( dispatch( `${Chat.namespace}/${Chat.$actions.updateEmoteList}` ) );
-
     // Run all our API actions in parallel
     await Promise.all( runParallel );
   },
@@ -380,7 +377,7 @@ export const actions = {
     commit( $mutations.setAuth, auth );
     this.$cookies.set( 'auth',  auth );
 
-    user =  JSON.parse( JSON.stringify( user ) );
+    user = JSON.parse( JSON.stringify( user ) );
 
     if ( unsubscribeUser ) {
       console.warn( 'Already had firebase listener!' );