VideoJS: Hotkeys, add focus, remove padding, big play button on pause

OlarisTV · May 18, 2020 · cf50daf · cf50daf
1 parent 96a49ca
commit cf50daf
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/src/Components/Media/MediaItem/Styles.js b/src/Components/Media/MediaItem/Styles.js
@@ -25,7 +25,7 @@ export const CloseVideo = styled(FontAwesomeIcon)`
 
 export const VideoWrap = styled.article`
     position: fixed;
-    padding: 1rem;
+    padding: 0;
     top: 0;
     left: 0;
     right: 0;

diff --git a/src/Components/Media/MediaItem/Video/Player.jsx b/src/Components/Media/MediaItem/Video/Player.jsx
@@ -49,13 +49,15 @@ class Player extends Component {
                     showAutoItem: true,
                 },
             },
-
             controls: true,
             controlBar: {
                 volumePanel: {
                     inline: false
                 }
             },
+            userActions: {
+                hotkeys: true
+            },
             html5: {
                 hls: {
                     enableLowInitialPlaylist: true,
@@ -73,6 +75,7 @@ class Player extends Component {
             videoJsOptions.html5.hls.bandwidth = 1e12;
         }
         this.player = videojs(this.videoNode, videoJsOptions, function onPlayerReady() {
+            this.focus();
             this.debugOverlay();
             this.qualityLevels();
             this.httpSourceSelector();

diff --git a/src/Styles/_components/_video.scss b/src/Styles/_components/_video.scss
@@ -1696,4 +1696,4 @@ video::-webkit-media-text-track-display {
   * {
     background: transparent !important;
   }
-}
+}