Add hotkeys in video player

Double click for full screen

client/package.json

@@ -78,6 +78,7 @@
     "uglifyjs-webpack-plugin": "^1.1.2",
     "video.js": "^6.2.0",
     "videojs-dock": "^2.0.2",
+    "videojs-hotkeys": "^0.2.20",
     "webpack": "^3.3.0",
     "webpack-bundle-analyzer": "^2.9.1",
     "webtorrent": "^0.98.0",

client/src/app/videos/+video-watch/video-watch.component.ts

@@ -5,6 +5,7 @@ import { NotificationsService } from 'angular2-notifications'
 import { Observable } from 'rxjs/Observable'
 import { Subscription } from 'rxjs/Subscription'
 import * as videojs from 'video.js'
+import 'videojs-hotkeys'
 import { UserVideoRateType, VideoRateType } from '../../../../../shared'
 import '../../../assets/player/peertube-videojs-plugin'
 import { AuthService, ConfirmService } from '../../core'
@@ -327,7 +328,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
                 videoFiles: this.video.files,
                 playerElement: this.playerElement,
                 peerTubeLink: false
-              }
+              },
+              hotkeys: {}
             }
           }
 

client/src/assets/player/peertube-videojs-plugin.ts

@@ -3,7 +3,6 @@
 import * as videojs from 'video.js'
 import * as WebTorrent from 'webtorrent'
 import { VideoFile } from '../../../../shared/models/videos/video.model'
-
 import { renderVideo } from './video-renderer'
 
 interface VideoJSComponentInterface {

client/src/sass/video-js-custom.scss

@@ -111,6 +111,7 @@ $control-bar-height: 34px;
     }
 
     .vjs-play-control {
+      outline: 0;
       font-size: $font-size;
       padding: 0 17px;
       margin-right: 5px;
@@ -191,6 +192,8 @@ $control-bar-height: 34px;
     }
 
     .vjs-mute-control {
+      outline: 0;
+
       .vjs-icon-placeholder {
         display: inline-block;
         width: 22px;
@@ -274,6 +277,7 @@ $control-bar-height: 34px;
 
     .vjs-fullscreen-control {
       width: 37px;
+      outline: 0;
 
       .vjs-icon-placeholder {
         display: inline-block;

client/src/standalone/videos/embed.ts

@@ -42,7 +42,8 @@ loadVideoInfo(videoId, (err, videoInfo) => {
         videoFiles: videoInfo.files,
         playerElement: videoElement,
         peerTubeLink: true
-      }
+      },
+      hotkeys: {}
     }
   }
   videojs('video-container', videojsOptions, function () {

client/yarn.lock

@@ -7203,6 +7203,10 @@ videojs-font@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/videojs-font/-/videojs-font-2.0.0.tgz#af7461ef9d4b95e0334bffb78b2f2ff0364a9034"
 
+videojs-hotkeys@^0.2.20:
+  version "0.2.20"
+  resolved "https://registry.yarnpkg.com/videojs-hotkeys/-/videojs-hotkeys-0.2.20.tgz#1dce9d42c29da392cf1742b89ba292c6706c8973"
+
 videojs-ie8@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/videojs-ie8/-/videojs-ie8-1.1.2.tgz#a23d3d8608ad7192b69c6077fc4eb848998d35d9"