UI styling Between Us

media/VideoPlayer.vue

 <template lang="pug">
-  vue-video-player(class="video-player video-player-box vjs-big-play-centered",
+  vue-video-player(:class="classConfig",
     ref="videoPlayer",
     :options="playerOptions",
     :playsinline="true",
@@ -27,6 +27,8 @@
   import { videoPlayer } from 'vue-video-player'
   import guessType from 'mbjs-media/src/util/guess-type'
 
+  if (process.env.FEATURE_BETWEENUS) require('./videojs-betweenus.styl')
+
   export default {
     components: {
       'vue-video-player': videoPlayer
@@ -34,6 +36,12 @@
     data () {
       return {
         type: undefined,
+        classConfig: {
+          'video-player': true,
+          'video-player-box': true,
+          'vjs-big-play-centered': true,
+          'vjs-betweenus': process.env.FEATURE_BETWEENUS
+        },
         playerOptions: {
           fluid: true,
           autoplay: this.autoplay,

media/videojs-betweenus.styl

+// FOR EXHIBITION
+.vjs-betweenus
+  .video-js
+    font-family 'Roboto'
+
+  .video-js .vjs-control-bar
+    height 40px
+
+  .video-js.vjs-paused .vjs-big-play-button
+    background #2a65ff
+    width 65px
+    height 65px
+    border 0
+    border-radius 0
+
+  .vjs-big-play-centered
+    .vjs-big-play-button
+      margin-top -33px
+      .vjs-icon-placeholder:before
+        line-height 65px !important
+
+  .vjs-button > .vjs-icon-placeholder:before
+    font-size 2.5em
+    padding-top 1px
+
+  .video-js .vjs-control-bar
+    background-color #2a65ffaa
+    .vjs-slider
+      background-color #ffffff55
+    .vjs-volume-panel
+      display: none
+    .vjs-play-control
+      .vjs-icon-placeholder:before
+        line-height 40px
+
+  .vjs-fullscreen-control .vjs-icon-placeholder:before
+    line-height 40px
+
+  .video-js .vjs-time-control
+    font-size 0.85rem
+    line-height 40px
+
+  .video-js .vjs-progress-control
+    padding-top 3px
+    .vjs-load-progress
+      background-color #ffffff55
+
+  .video-js .vjs-play-progress:before
+    font-size: 1.5em
+    right: -0.8em
+    top: -0.4em