Handle basic playlist in embed

[github/Chocobozzz/PeerTube.git] / client / src / assets / player / peertube-player-manager.ts

diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 6d9236a9da9deea36da764d65b917b9f5b7d2d72..dcfa3a59316f913f23f2c85b5f35ccfc7f8d9c18 100644 (file)
--- 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,14 +18,23 @@ 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 { isDefaultLocale } from '../../../../shared/models/i18n/i18n'
-import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
-import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder'
+import './playlist/playlist-plugin'
+import videojs from 'video.js'
+import { isDefaultLocale } from '@shared/core-utils/i18n'
+import { VideoFile } from '@shared/models'
 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,
+  PlaylistPluginOptions,
+  UserWatching,
+  VideoJSCaption,
+  VideoJSPluginOptions
+} from './peertube-videojs-typings'
 import { TranslationsManager } from './translations-manager'
+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'
@@ -71,6 +78,9 @@ export interface CommonOptions extends CustomizationOptions {
 
   autoplay: boolean
   nextVideo?: Function
+
+  playlist?: PlaylistPluginOptions
+
   videoDuration: number
   enableHotkeys: boolean
   inactivityTimeout: number
@@ -99,9 +109,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
@@ -121,7 +131,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
@@ -171,7 +181,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)
@@ -184,10 +194,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 = {
@@ -203,6 +213,10 @@ export class PeertubePlayerManager {
       }
     }
 
+    if (commonOptions.playlist) {
+      plugins.playlist = commonOptions.playlist
+    }
+
     if (commonOptions.enableHotkeys === true) {
       PeertubePlayerManager.addHotkeysOptions(plugins)
     }
@@ -232,9 +246,7 @@ export class PeertubePlayerManager {
         ? commonOptions.muted
         : undefined, // Undefined so the player knows it has to check the local storage
 
-      autoplay: autoplay === true
-        ? 'play' // Use 'any' instead of true to get notifier by videojs if autoplay fails
-        : autoplay,
+      autoplay: this.getAutoPlayValue(autoplay),
 
       poster: commonOptions.poster,
       inactivityTimeout: commonOptions.inactivityTimeout,
@@ -302,7 +314,13 @@ export class PeertubePlayerManager {
     }
     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
@@ -417,7 +435,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'),
@@ -427,7 +445,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() }))
         }
       },
@@ -442,7 +460,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)
         }
       })
@@ -454,6 +472,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,
 
@@ -509,6 +535,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'
+  }
 }
 
 // ############################################################################