Adjust player UX

Remove currentTimeDisplay, timeDivider, durationDisplay, remainingTimeDisplay from live player so we do not update unseen components. Change Y translation animation to a control bar fade in / out
bitwave-tv · Mar 15, 2020 · dac7e85 · dac7e85
1 parent 45dd911
commit dac7e85
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/assets/style/stream-player.scss b/assets/style/stream-player.scss
@@ -107,13 +107,15 @@
 // Transitions control bar between active / inactive
 .vjs-has-started {
   .vjs-control-bar {
-    transform: translateY(0);
+    //transform: translateY(0);
+    opacity: 1;
     transition: .3s;
   }
 
   &.vjs-user-inactive.vjs-playing {
     .vjs-control-bar {
-      transform: translateY(127%);
+      //transform: translateY(127%);
+      opacity: 0;
       transition: .3s;
     }
   }

diff --git a/pages/_watch/index.vue b/pages/_watch/index.vue
@@ -273,6 +273,12 @@
           poster: this.poster,
           inactivityTimeout: 2000,
           suppressNotSupportedError: true,
+          controlBar: {
+            currentTimeDisplay : false,
+            timeDivider: false,
+            durationDisplay: false,
+            remainingTimeDisplay: false,
+          },
           userActions: {
             hotkeys: true,
           },