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
bitwave-tv · May 16, 2020 · 947b064 · 947b064
1 parent 4b8274a
commit 947b064
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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!' );