]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blobdiff - client/src/assets/player/peertube-player-manager.ts
Add fixme info
[github/Chocobozzz/PeerTube.git] / client / src / assets / player / peertube-player-manager.ts
index c45e8f53edcde393eb629f555c93f265a6bb998c..b9a289aa0fe13e48943e50c776e037f2645980fe 100644 (file)
@@ -1,13 +1,12 @@
-import 'videojs-hotkeys/videojs.hotkeys'
 import 'videojs-dock'
-import 'videojs-contextmenu-pt'
-import 'videojs-contrib-quality-levels'
+import '@peertube/videojs-contextmenu'
 import './upnext/end-card'
 import './upnext/upnext-plugin'
 import './stats/stats-card'
 import './stats/stats-plugin'
 import './bezels/bezels-plugin'
 import './peertube-plugin'
+import './peertube-resolutions-plugin'
 import './videojs-components/next-previous-video-button'
 import './videojs-components/p2p-info-button'
 import './videojs-components/peertube-link-button'
@@ -21,6 +20,9 @@ import './videojs-components/settings-panel'
 import './videojs-components/settings-panel-child'
 import './videojs-components/theater-button'
 import './playlist/playlist-plugin'
+import './mobile/peertube-mobile-plugin'
+import './mobile/peertube-mobile-buttons'
+import './hotkeys/peertube-hotkeys-plugin'
 import videojs from 'video.js'
 import { HlsJsEngineSettings } from '@peertube/p2p-media-loader-hlsjs'
 import { PluginsManager } from '@root-helpers/plugins-manager'
@@ -31,7 +33,7 @@ import { copyToClipboard } from '../../root-helpers/utils'
 import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
 import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder'
 import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
-import { getAverageBandwidthInStore, getStoredP2PEnabled, saveAverageBandwidth } from './peertube-player-local-storage'
+import { getAverageBandwidthInStore, saveAverageBandwidth } from './peertube-player-local-storage'
 import {
   NextPreviousVideoButtonOptions,
   P2PMediaLoaderPluginOptions,
@@ -43,7 +45,7 @@ import {
   VideoJSPluginOptions
 } from './peertube-videojs-typings'
 import { TranslationsManager } from './translations-manager'
-import { buildVideoOrPlaylistEmbed, getRtcConfig, isIOS, isSafari } from './utils'
+import { buildVideoOrPlaylistEmbed, getRtcConfig, isIOS, isMobile, isSafari } from './utils'
 
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
 (videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
@@ -86,6 +88,7 @@ export interface CommonOptions extends CustomizationOptions {
   onPlayerElementChange: (element: HTMLVideoElement) => void
 
   autoplay: boolean
+  p2pEnabled: boolean
 
   nextVideo?: () => void
   hasNextVideo?: () => boolean
@@ -188,11 +191,16 @@ export class PeertubePlayerManager {
           videoEmbedTitle: options.common.embedTitle
         })
 
+        if (isMobile()) player.peertubeMobile()
+        if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin()
+
         player.bezels()
+
         player.stats({
           videoUUID: options.common.videoUUID,
           videoIsLive: options.common.isLive,
-          mode
+          mode,
+          p2pEnabled: options.common.p2pEnabled
         })
 
         player.on('p2pInfo', (_, data: PlayerNetworkInfo) => {
@@ -279,10 +287,6 @@ export class PeertubePlayerManager {
       plugins.playlist = commonOptions.playlist
     }
 
-    if (commonOptions.enableHotkeys === true) {
-      PeertubePlayerManager.addHotkeysOptions(plugins)
-    }
-
     if (isHLS) {
       const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
 
@@ -319,6 +323,7 @@ export class PeertubePlayerManager {
       controlBar: {
         children: this.getControlBarChildren(mode, {
           videoShortUUID: commonOptions.videoShortUUID,
+          p2pEnabled: commonOptions.p2pEnabled,
 
           captions: commonOptions.captions,
           peertubeLink: commonOptions.peertubeLink,
@@ -361,8 +366,7 @@ export class PeertubePlayerManager {
     }
 
     let consumeOnly = false
-    // FIXME: typings
-    if (navigator && (navigator as any).connection && (navigator as any).connection.type === 'cellular') {
+    if ((navigator as any)?.connection?.type === 'cellular') {
       console.log('We are on a cellular connection: disabling seeding.')
       consumeOnly = true
     }
@@ -374,8 +378,8 @@ export class PeertubePlayerManager {
         rtcConfig: getRtcConfig(),
         requiredSegmentsPriority: 1,
         simultaneousHttpDownloads: 1,
-        segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager),
-        useP2P: getStoredP2PEnabled(),
+        segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager, 1),
+        useP2P: commonOptions.p2pEnabled,
         consumeOnly
       },
       segments: {
@@ -435,11 +439,10 @@ export class PeertubePlayerManager {
     const p2pMediaLoaderOptions = options.p2pMediaLoader
 
     const autoplay = this.getAutoPlayValue(commonOptions.autoplay) === 'play'
-      ? true
-      : false
 
     const webtorrent = {
       autoplay,
+      playerRefusedP2P: commonOptions.p2pEnabled === false,
       videoDuration: commonOptions.videoDuration,
       playerElement: commonOptions.playerElement,
       videoFiles: webtorrentOptions.videoFiles.length !== 0
@@ -453,16 +456,17 @@ export class PeertubePlayerManager {
   }
 
   private static getControlBarChildren (mode: PlayerMode, options: {
+    p2pEnabled: boolean
     videoShortUUID: string
 
     peertubeLink: boolean
     theaterButton: boolean
     captions: boolean
 
-    nextVideo?: Function
+    nextVideo?: () => void
     hasNextVideo?: () => boolean
 
-    previousVideo?: Function
+    previousVideo?: () => void
     hasPreviousVideo?: () => boolean
   }) {
     const settingEntries = []
@@ -487,7 +491,7 @@ export class PeertubePlayerManager {
       }
 
       Object.assign(children, {
-        'previousVideoButton': buttonOptions
+        previousVideoButton: buttonOptions
       })
     }
 
@@ -505,35 +509,37 @@ export class PeertubePlayerManager {
       }
 
       Object.assign(children, {
-        'nextVideoButton': buttonOptions
+        nextVideoButton: buttonOptions
       })
     }
 
     Object.assign(children, {
-      'currentTimeDisplay': {},
-      'timeDivider': {},
-      'durationDisplay': {},
-      'liveDisplay': {},
+      currentTimeDisplay: {},
+      timeDivider: {},
+      durationDisplay: {},
+      liveDisplay: {},
 
-      'flexibleWidthSpacer': {},
-      'progressControl': {
+      flexibleWidthSpacer: {},
+      progressControl: {
         children: {
-          'seekBar': {
+          seekBar: {
             children: {
               [loadProgressBar]: {},
-              'mouseTimeDisplay': {},
-              'playProgressBar': {}
+              mouseTimeDisplay: {},
+              playProgressBar: {}
             }
           }
         }
       },
 
-      'p2PInfoButton': {},
+      p2PInfoButton: {
+        p2pEnabled: options.p2pEnabled
+      },
 
-      'muteToggle': {},
-      'volumeControl': {},
+      muteToggle: {},
+      volumeControl: {},
 
-      'settingsButton': {
+      settingsButton: {
         setup: {
           maxHeightOffset: 40
         },
@@ -543,18 +549,18 @@ export class PeertubePlayerManager {
 
     if (options.peertubeLink === true) {
       Object.assign(children, {
-        'peerTubeLinkButton': { shortUUID: options.videoShortUUID } as PeerTubeLinkButtonOptions
+        peerTubeLinkButton: { shortUUID: options.videoShortUUID } as PeerTubeLinkButtonOptions
       })
     }
 
     if (options.theaterButton === true) {
       Object.assign(children, {
-        'theaterButton': {}
+        theaterButton: {}
       })
     }
 
     Object.assign(children, {
-      'fullscreenToggle': {}
+      fullscreenToggle: {}
     })
 
     return children
@@ -629,71 +635,6 @@ export class PeertubePlayerManager {
     player.contextmenuUI({ content })
   }
 
-  private static addHotkeysOptions (plugins: VideoJSPluginOptions) {
-    const isNaked = (event: KeyboardEvent, key: string) =>
-      (!event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey && event.key === key)
-
-    Object.assign(plugins, {
-      hotkeys: {
-        skipInitialFocus: true,
-        enableInactiveFocus: false,
-        captureDocumentHotkeys: true,
-        documentHotkeysFocusElementFilter: (e: HTMLElement) => {
-          const tagName = e.tagName.toLowerCase()
-          return e.id === 'content' || tagName === 'body' || tagName === 'video'
-        },
-
-        enableVolumeScroll: false,
-        enableModifiersForNumbers: false,
-
-        rewindKey: function (event: KeyboardEvent) {
-          return isNaked(event, 'ArrowLeft')
-        },
-
-        forwardKey: function (event: KeyboardEvent) {
-          return isNaked(event, 'ArrowRight')
-        },
-
-        fullscreenKey: function (event: KeyboardEvent) {
-          // fullscreen with the f key or Ctrl+Enter
-          return isNaked(event, 'f') || (!event.altKey && event.ctrlKey && event.key === 'Enter')
-        },
-
-        customKeys: {
-          increasePlaybackRateKey: {
-            key: function (event: KeyboardEvent) {
-              return isNaked(event, '>')
-            },
-            handler: function (player: videojs.Player) {
-              const newValue = Math.min(player.playbackRate() + 0.1, 5)
-              player.playbackRate(parseFloat(newValue.toFixed(2)))
-            }
-          },
-          decreasePlaybackRateKey: {
-            key: function (event: KeyboardEvent) {
-              return isNaked(event, '<')
-            },
-            handler: function (player: videojs.Player) {
-              const newValue = Math.max(player.playbackRate() - 0.1, 0.10)
-              player.playbackRate(parseFloat(newValue.toFixed(2)))
-            }
-          },
-          frameByFrame: {
-            key: function (event: KeyboardEvent) {
-              return isNaked(event, '.')
-            },
-            handler: function (player: videojs.Player) {
-              player.pause()
-              // Calculate movement distance (assuming 30 fps)
-              const dist = 1 / 30
-              player.currentTime(player.currentTime() + dist)
-            }
-          }
-        }
-      }
-    })
-  }
-
   private static getAutoPlayValue (autoplay: any) {
     if (autoplay !== true) return autoplay