diff --git a/client/package.json b/client/package.json index efdd5711b..407ce930c 100644 --- a/client/package.json +++ b/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", 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 () { diff --git a/client/yarn.lock b/client/yarn.lock index a0bfa789d..4196a3674 100644 --- a/client/yarn.lock +++ b/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"