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 835e9e34a..9eae45fed 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -469,6 +469,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
this.zone.runOutsideAngular(async () => {
this.player = await PeertubePlayerManager.initialize(playerMode, playerOptions, player => this.player = player)
this.player.focus()
+ this.player.bezels()
this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))
diff --git a/client/src/assets/player/bezels/bezels-plugin.ts b/client/src/assets/player/bezels/bezels-plugin.ts
new file mode 100644
index 000000000..4317d60f9
--- /dev/null
+++ b/client/src/assets/player/bezels/bezels-plugin.ts
@@ -0,0 +1,93 @@
+// @ts-ignore
+import * as videojs from 'video.js'
+import { VideoJSComponentInterface } from '../peertube-videojs-typings'
+
+function getPauseBezel () {
+ return `
+
+ `
+}
+
+function getPlayBezel () {
+ return `
+
+ `
+}
+
+// @ts-ignore-start
+const Component = videojs.getComponent('Component')
+class PauseBezel extends Component {
+ options_: any
+ container: HTMLBodyElement
+
+ constructor (player: videojs.Player, options: any) {
+ super(player, options)
+ this.options_ = options
+
+ player.on('pause', (_: any) => {
+ if (player.seeking()) return
+ this.container.innerHTML = getPauseBezel()
+ this.showBezel()
+ })
+
+ player.on('play', (_: any) => {
+ if (player.seeking()) return
+ this.container.innerHTML = getPlayBezel()
+ this.showBezel()
+ })
+ }
+
+ createEl () {
+ const container = super.createEl('div', {
+ className: 'vjs-bezels-content'
+ })
+ this.container = container
+ container.style.display = 'none'
+
+ return container
+ }
+
+ showBezel () {
+ this.container.style.display = 'inherit'
+ setTimeout(() => {
+ this.container.style.display = 'none'
+ }, 500) // matching the animation duration
+ }
+}
+// @ts-ignore-end
+
+videojs.registerComponent('PauseBezel', PauseBezel)
+
+const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
+class BezelsPlugin extends Plugin {
+ constructor (player: videojs.Player, options: any = {}) {
+ super(player, options)
+
+ this.player.ready(() => {
+ player.addClass('vjs-bezels')
+ })
+
+ player.addChild('PauseBezel', options)
+ }
+}
+
+videojs.registerPlugin('bezels', BezelsPlugin)
+export { BezelsPlugin }
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index b1551185a..ac3609c04 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -6,6 +6,7 @@ import 'videojs-dock'
import 'videojs-contextmenu-ui'
import 'videojs-contrib-quality-levels'
import './upnext/upnext-plugin'
+import './bezels/bezels-plugin'
import './peertube-plugin'
import './videojs-components/peertube-link-button'
import './videojs-components/resolution-menu-button'
diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss
new file mode 100644
index 000000000..f1b1dcb4a
--- /dev/null
+++ b/client/src/sass/player/bezels.scss
@@ -0,0 +1,42 @@
+@keyframes bezels-fadeout {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ transform: scale(2);
+ }
+}
+
+.vjs-bezel {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ width: 52px;
+ height: 52px;
+ z-index: 19;
+ margin-left: -26px;
+ margin-top: -26px;
+ background: rgba(0,0,0,.5);
+ border-radius: 26px;
+ animation: bezels-fadeout .5s linear 1 normal forwards;
+ pointer-events: none;
+}
+
+.vjs-bezel-icon {
+ width: 36px;
+ height: 36px;
+ margin: 8px;
+
+ svg .vjs-svg-fill {
+ fill: #fff;
+ }
+}
+
+.video-js {
+
+ .vjs-bezel-content {
+
+ }
+
+}
\ No newline at end of file
diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss
index 886a76536..58ce3ac96 100644
--- a/client/src/sass/player/index.scss
+++ b/client/src/sass/player/index.scss
@@ -3,4 +3,5 @@
@import './context-menu';
@import './settings-menu';
@import './spinner';
-@import './upnext';
\ No newline at end of file
+@import './upnext';
+@import './bezels.scss';
\ No newline at end of file
diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss
index ecce22aa8..f1f2e0fe2 100644
--- a/client/src/sass/player/upnext.scss
+++ b/client/src/sass/player/upnext.scss
@@ -95,8 +95,9 @@ $browser-context: 16;
width: 98px;
height: 98px;
margin: -49px 0 0 -49px;
- transition: stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1);
cursor: pointer;
+
+ @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1));
}
}