Add hotkeys in video player

Double click for full screen

4 files changed, 9 insertions, 3 deletions

diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 6f5fe0b97..7929c1fa1 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/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: {}
             }
           }
 
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 25e65abd8..34c993f3c 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/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 {
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 715464ce8..bc1496d70 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/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;
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index f44aca9c3..e27eadc8b 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/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 () {