X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fassets%2Fplayer%2Fpeertube-player-manager.ts;h=f12fb09ae23919d6ec229ece597e37c82d916e75;hb=dca0fe12ec2e47be51884c4eb05ebe6f358cb9de;hp=4e6387a5383f364b9b413af14159ba02b0dabef6;hpb=cf59a2a0c367683ba35758419499bf6087c192ec;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 4e6387a53..f12fb09ae 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -1,6 +1,4 @@
-import { VideoFile } from '../../../../shared/models/videos'
-import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js'
-import 'videojs-hotkeys'
+import 'videojs-hotkeys/videojs.hotkeys'
 import 'videojs-dock'
 import 'videojs-contextmenu-ui'
 import 'videojs-contrib-quality-levels'
@@ -20,17 +18,17 @@ import './videojs-components/settings-menu-item'
 import './videojs-components/settings-panel'
 import './videojs-components/settings-panel-child'
 import './videojs-components/theater-button'
-import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions } from './peertube-videojs-typings'
-import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig } from './utils'
+import videojs from 'video.js'
+
 import { isDefaultLocale } from '../../../../shared/models/i18n/i18n'
-import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
-import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder'
+import { VideoFile } from '../../../../shared/models/videos'
 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 { getStoredP2PEnabled } from './peertube-player-local-storage'
+import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions } from './peertube-videojs-typings'
 import { TranslationsManager } from './translations-manager'
-
-// For VideoJS
-(window as any).WebVTT = require('vtt.js/lib/vtt.js').WebVTT;
+import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig, isIOS, isSafari } from './utils'
 
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
 (videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
@@ -102,9 +100,9 @@ export type PeertubePlayerManagerOptions = {
 
 export class PeertubePlayerManager {
   private static playerElementClassName: string
-  private static onPlayerChange: (player: VideoJsPlayer) => void
+  private static onPlayerChange: (player: videojs.Player) => void
 
-  static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: VideoJsPlayer) => void) {
+  static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) {
     let p2pMediaLoader: any
 
     this.onPlayerChange = onPlayerChange
@@ -124,7 +122,7 @@ export class PeertubePlayerManager {
 
     const self = this
     return new Promise(res => {
-      videojs(options.common.playerElement, videojsOptions, function (this: VideoJsPlayer) {
+      videojs(options.common.playerElement, videojsOptions, function (this: videojs.Player) {
         const player = this
 
         let alreadyFallback = false
@@ -174,7 +172,7 @@ export class PeertubePlayerManager {
     const videojsOptions = this.getVideojsOptions(mode, options)
 
     const self = this
-    videojs(newVideoElement, videojsOptions, function (this: VideoJsPlayer) {
+    videojs(newVideoElement, videojsOptions, function (this: videojs.Player) {
       const player = this
 
       self.addContextMenu(mode, player, options.common.embedUrl)
@@ -187,10 +185,10 @@ export class PeertubePlayerManager {
     mode: PlayerMode,
     options: PeertubePlayerManagerOptions,
     p2pMediaLoaderModule?: any
-  ): VideoJsPlayerOptions {
+  ): videojs.PlayerOptions {
     const commonOptions = options.common
 
-    let autoplay = commonOptions.autoplay
+    let autoplay = this.getAutoPlayValue(commonOptions.autoplay)
     let html5 = {}
 
     const plugins: VideoJSPluginOptions = {
@@ -211,9 +209,9 @@ export class PeertubePlayerManager {
     }
 
     if (mode === 'p2p-media-loader') {
-      const { streamrootHls } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
+      const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
 
-      html5 = streamrootHls.html5
+      html5 = hlsjs.html5
     }
 
     if (mode === 'webtorrent') {
@@ -235,9 +233,7 @@ export class PeertubePlayerManager {
         ? commonOptions.muted
         : undefined, // Undefined so the player knows it has to check the local storage
 
-      autoplay: autoplay === true
-        ? 'any' // Use 'any' instead of true to get notifier by videojs if autoplay fails
-        : autoplay,
+      autoplay: this.getAutoPlayValue(autoplay),
 
       poster: commonOptions.poster,
       inactivityTimeout: commonOptions.inactivityTimeout,
@@ -303,9 +299,15 @@ export class PeertubePlayerManager {
         swarmId: p2pMediaLoaderOptions.playlistUrl
       }
     }
-    const streamrootHls = {
+    const hlsjs = {
       levelLabelHandler: (level: { height: number, width: number }) => {
-        const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === level.height)
+        const resolution = Math.min(level.height || 0, level.width || 0)
+
+        const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === resolution)
+        if (!file) {
+          console.error('Cannot find video file for level %d.', level.height)
+          return level.height
+        }
 
         let label = file.resolution.label
         if (file.fps >= 50) label += file.fps
@@ -322,7 +324,7 @@ export class PeertubePlayerManager {
       }
     }
 
-    const toAssign = { p2pMediaLoader, streamrootHls }
+    const toAssign = { p2pMediaLoader, hlsjs }
     Object.assign(plugins, toAssign)
 
     return toAssign
@@ -420,7 +422,7 @@ export class PeertubePlayerManager {
     return children
   }
 
-  private static addContextMenu (mode: PlayerMode, player: VideoJsPlayer, videoEmbedUrl: string) {
+  private static addContextMenu (mode: PlayerMode, player: videojs.Player, videoEmbedUrl: string) {
     const content = [
       {
         label: player.localize('Copy the video URL'),
@@ -430,7 +432,7 @@ export class PeertubePlayerManager {
       },
       {
         label: player.localize('Copy the video URL at the current time'),
-        listener: function (this: VideoJsPlayer) {
+        listener: function (this: videojs.Player) {
           copyToClipboard(buildVideoLink({ startTime: this.currentTime() }))
         }
       },
@@ -445,7 +447,7 @@ export class PeertubePlayerManager {
     if (mode === 'webtorrent') {
       content.push({
         label: player.localize('Copy magnet URI'),
-        listener: function (this: VideoJsPlayer) {
+        listener: function (this: videojs.Player) {
           copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri)
         }
       })
@@ -457,6 +459,14 @@ export class PeertubePlayerManager {
   private static addHotkeysOptions (plugins: VideoJSPluginOptions) {
     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,
 
@@ -512,6 +522,19 @@ export class PeertubePlayerManager {
       }
     })
   }
+
+  private static getAutoPlayValue (autoplay: any) {
+    if (autoplay !== true) return autoplay
+
+    // Giving up with iOS
+    if (isIOS()) return false
+
+    // We have issues with autoplay and Safari.
+    // any that tries to play using auto mute seems to work
+    if (isSafari()) return 'any'
+
+    return 'play'
+  }
 }
 
 // ############################################################################