diff options
Diffstat (limited to 'client/src/assets/player/peertube-player-manager.ts')
-rw-r--r-- | client/src/assets/player/peertube-player-manager.ts | 83 |
1 files changed, 2 insertions, 81 deletions
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts index d715adf56..b9a289aa0 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts | |||
@@ -1,4 +1,3 @@ | |||
1 | import 'videojs-hotkeys/videojs.hotkeys' | ||
2 | import 'videojs-dock' | 1 | import 'videojs-dock' |
3 | import '@peertube/videojs-contextmenu' | 2 | import '@peertube/videojs-contextmenu' |
4 | import './upnext/end-card' | 3 | import './upnext/end-card' |
@@ -23,6 +22,7 @@ import './videojs-components/theater-button' | |||
23 | import './playlist/playlist-plugin' | 22 | import './playlist/playlist-plugin' |
24 | import './mobile/peertube-mobile-plugin' | 23 | import './mobile/peertube-mobile-plugin' |
25 | import './mobile/peertube-mobile-buttons' | 24 | import './mobile/peertube-mobile-buttons' |
25 | import './hotkeys/peertube-hotkeys-plugin' | ||
26 | import videojs from 'video.js' | 26 | import videojs from 'video.js' |
27 | import { HlsJsEngineSettings } from '@peertube/p2p-media-loader-hlsjs' | 27 | import { HlsJsEngineSettings } from '@peertube/p2p-media-loader-hlsjs' |
28 | import { PluginsManager } from '@root-helpers/plugins-manager' | 28 | import { PluginsManager } from '@root-helpers/plugins-manager' |
@@ -192,6 +192,7 @@ export class PeertubePlayerManager { | |||
192 | }) | 192 | }) |
193 | 193 | ||
194 | if (isMobile()) player.peertubeMobile() | 194 | if (isMobile()) player.peertubeMobile() |
195 | if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin() | ||
195 | 196 | ||
196 | player.bezels() | 197 | player.bezels() |
197 | 198 | ||
@@ -286,10 +287,6 @@ export class PeertubePlayerManager { | |||
286 | plugins.playlist = commonOptions.playlist | 287 | plugins.playlist = commonOptions.playlist |
287 | } | 288 | } |
288 | 289 | ||
289 | if (commonOptions.enableHotkeys === true) { | ||
290 | PeertubePlayerManager.addHotkeysOptions(plugins) | ||
291 | } | ||
292 | |||
293 | if (isHLS) { | 290 | if (isHLS) { |
294 | const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule) | 291 | const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule) |
295 | 292 | ||
@@ -638,82 +635,6 @@ export class PeertubePlayerManager { | |||
638 | player.contextmenuUI({ content }) | 635 | player.contextmenuUI({ content }) |
639 | } | 636 | } |
640 | 637 | ||
641 | private static addHotkeysOptions (plugins: VideoJSPluginOptions) { | ||
642 | const isNaked = (event: KeyboardEvent, key: string) => | ||
643 | (!event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey && event.key === key) | ||
644 | |||
645 | Object.assign(plugins, { | ||
646 | hotkeys: { | ||
647 | skipInitialFocus: true, | ||
648 | enableInactiveFocus: false, | ||
649 | captureDocumentHotkeys: true, | ||
650 | documentHotkeysFocusElementFilter: (e: HTMLElement) => { | ||
651 | const tagName = e.tagName.toLowerCase() | ||
652 | return e.id === 'content' || tagName === 'body' || tagName === 'video' | ||
653 | }, | ||
654 | |||
655 | enableVolumeScroll: false, | ||
656 | enableModifiersForNumbers: false, | ||
657 | |||
658 | rewindKey: function (event: KeyboardEvent) { | ||
659 | return isNaked(event, 'ArrowLeft') | ||
660 | }, | ||
661 | |||
662 | forwardKey: function (event: KeyboardEvent) { | ||
663 | return isNaked(event, 'ArrowRight') | ||
664 | }, | ||
665 | |||
666 | fullscreenKey: function (event: KeyboardEvent) { | ||
667 | // fullscreen with the f key or Ctrl+Enter | ||
668 | return isNaked(event, 'f') || (!event.altKey && event.ctrlKey && event.key === 'Enter') | ||
669 | }, | ||
670 | |||
671 | customKeys: { | ||
672 | increasePlaybackRateKey: { | ||
673 | key: function (event: KeyboardEvent) { | ||
674 | return isNaked(event, '>') | ||
675 | }, | ||
676 | handler: function (player: videojs.Player) { | ||
677 | const newValue = Math.min(player.playbackRate() + 0.1, 5) | ||
678 | player.playbackRate(parseFloat(newValue.toFixed(2))) | ||
679 | } | ||
680 | }, | ||
681 | decreasePlaybackRateKey: { | ||
682 | key: function (event: KeyboardEvent) { | ||
683 | return isNaked(event, '<') | ||
684 | }, | ||
685 | handler: function (player: videojs.Player) { | ||
686 | const newValue = Math.max(player.playbackRate() - 0.1, 0.10) | ||
687 | player.playbackRate(parseFloat(newValue.toFixed(2))) | ||
688 | } | ||
689 | }, | ||
690 | previousFrame: { | ||
691 | key: function (event: KeyboardEvent) { | ||
692 | return event.key === ',' | ||
693 | }, | ||
694 | handler: function (player: videojs.Player) { | ||
695 | player.pause() | ||
696 | // Calculate movement distance (assuming 30 fps) | ||
697 | const dist = 1 / 30 | ||
698 | player.currentTime(player.currentTime() - dist) | ||
699 | } | ||
700 | }, | ||
701 | nextFrame: { | ||
702 | key: function (event: KeyboardEvent) { | ||
703 | return event.key === '.' | ||
704 | }, | ||
705 | handler: function (player: videojs.Player) { | ||
706 | player.pause() | ||
707 | // Calculate movement distance (assuming 30 fps) | ||
708 | const dist = 1 / 30 | ||
709 | player.currentTime(player.currentTime() + dist) | ||
710 | } | ||
711 | } | ||
712 | } | ||
713 | } | ||
714 | }) | ||
715 | } | ||
716 | |||
717 | private static getAutoPlayValue (autoplay: any) { | 638 | private static getAutoPlayValue (autoplay: any) { |
718 | if (autoplay !== true) return autoplay | 639 | if (autoplay !== true) return autoplay |
719 | 640 | ||