X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fassets%2Fplayer%2Fpeertube-player-manager.ts;h=dcfa3a59316f913f23f2c85b5f35ccfc7f8d9c18;hb=4572c3d0d92f5b1b79b34dbe2c7b6557a8a5b7e4;hp=0ba9bcb1142267422055d96eef196e34defa532f;hpb=28f3d1b36a70426795240c9370e47b6c4ba847f8;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 0ba9bcb11..dcfa3a593 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -1,29 +1,49 @@
-import { VideoFile } from '../../../../shared/models/videos'
-// @ts-ignore
-import * as videojs from 'video.js'
-import 'videojs-hotkeys'
+import 'videojs-hotkeys/videojs.hotkeys'
 import 'videojs-dock'
 import 'videojs-contextmenu-ui'
 import 'videojs-contrib-quality-levels'
+import './upnext/end-card'
+import './upnext/upnext-plugin'
+import './bezels/bezels-plugin'
 import './peertube-plugin'
+import './videojs-components/next-video-button'
+import './videojs-components/p2p-info-button'
 import './videojs-components/peertube-link-button'
+import './videojs-components/peertube-load-progress-bar'
 import './videojs-components/resolution-menu-button'
+import './videojs-components/resolution-menu-item'
+import './videojs-components/settings-dialog'
 import './videojs-components/settings-menu-button'
-import './videojs-components/p2p-info-button'
-import './videojs-components/peertube-load-progress-bar'
+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, videojsUntyped } from './peertube-videojs-typings'
-import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig } from './utils'
-import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
-import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
+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)
-videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
+(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
+
+const CaptionsButton = videojs.getComponent('CaptionsButton') as any
 // Change Captions to Subtitles/CC
-videojsUntyped.getComponent('CaptionsButton').prototype.controlText_ = 'Subtitles/CC'
+CaptionsButton.prototype.controlText_ = 'Subtitles/CC'
 // We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know)
-videojsUntyped.getComponent('CaptionsButton').prototype.label_ = ' '
+CaptionsButton.prototype.label_ = ' '
 
 export type PlayerMode = 'webtorrent' | 'p2p-media-loader'
 
@@ -39,29 +59,40 @@ export type P2PMediaLoaderOptions = {
   videoFiles: VideoFile[]
 }
 
-export type CommonOptions = {
+export interface CustomizationOptions {
+  startTime: number | string
+  stopTime: number | string
+
+  controls?: boolean
+  muted?: boolean
+  loop?: boolean
+  subtitle?: string
+  resume?: string
+
+  peertubeLink: boolean
+}
+
+export interface CommonOptions extends CustomizationOptions {
   playerElement: HTMLVideoElement
   onPlayerElementChange: (element: HTMLVideoElement) => void
 
   autoplay: boolean
+  nextVideo?: Function
+
+  playlist?: PlaylistPluginOptions
+
   videoDuration: number
   enableHotkeys: boolean
   inactivityTimeout: number
   poster: string
-  startTime: number | string
 
-  theaterMode: boolean
+  theaterButton: boolean
   captions: boolean
-  peertubeLink: boolean
 
   videoViewUrl: string
   embedUrl: string
 
   language?: string
-  controls?: boolean
-  muted?: boolean
-  loop?: boolean
-  subtitle?: string
 
   videoCaptions: VideoJSCaption[]
 
@@ -77,26 +108,13 @@ export type PeertubePlayerManagerOptions = {
 }
 
 export class PeertubePlayerManager {
-
-  private static videojsLocaleCache: { [ path: string ]: any } = {}
   private static playerElementClassName: string
+  private static onPlayerChange: (player: videojs.Player) => void
 
-  static getServerTranslations (serverUrl: string, locale: string) {
-    const path = PeertubePlayerManager.getLocalePath(serverUrl, locale)
-    // It is the default locale, nothing to translate
-    if (!path) return Promise.resolve(undefined)
-
-    return fetch(path + '/server.json')
-      .then(res => res.json())
-      .catch(err => {
-        console.error('Cannot get server translations', err)
-        return undefined
-      })
-  }
-
-  static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions) {
+  static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) {
     let p2pMediaLoader: any
 
+    this.onPlayerChange = onPlayerChange
     this.playerElementClassName = options.common.playerElement.className
 
     if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin')
@@ -109,33 +127,47 @@ export class PeertubePlayerManager {
 
     const videojsOptions = this.getVideojsOptions(mode, options, p2pMediaLoader)
 
-    await this.loadLocaleInVideoJS(options.common.serverUrl, options.common.language)
+    await TranslationsManager.loadLocaleInVideoJS(options.common.serverUrl, options.common.language, videojs)
 
     const self = this
     return new Promise(res => {
-      videojs(options.common.playerElement, videojsOptions, function (this: any) {
+      videojs(options.common.playerElement, videojsOptions, function (this: videojs.Player) {
         const player = this
 
-        player.tech_.on('error', () => {
-          // Fallback to webtorrent?
-          if (mode === 'p2p-media-loader') {
-            self.fallbackToWebTorrent(player, options)
-          }
+        let alreadyFallback = false
+
+        player.tech(true).one('error', () => {
+          if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options)
+          alreadyFallback = true
+        })
+
+        player.one('error', () => {
+          if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options)
+          alreadyFallback = true
         })
 
         self.addContextMenu(mode, player, options.common.embedUrl)
 
+        player.bezels()
+
         return res(player)
       })
     })
   }
 
-  private static async fallbackToWebTorrent (player: any, options: PeertubePlayerManagerOptions) {
+  private static async maybeFallbackToWebTorrent (currentMode: PlayerMode, player: any, options: PeertubePlayerManagerOptions) {
+    if (currentMode === 'webtorrent') return
+
+    console.log('Fallback to webtorrent.')
+
     const newVideoElement = document.createElement('video')
     newVideoElement.className = this.playerElementClassName
 
     // VideoJS wraps our video element inside a div
-    const currentParentPlayerElement = options.common.playerElement.parentNode
+    let currentParentPlayerElement = options.common.playerElement.parentNode
+    // Fix on IOS, don't ask me why
+    if (!currentParentPlayerElement) currentParentPlayerElement = document.getElementById(options.common.playerElement.id).parentNode
+
     currentParentPlayerElement.parentNode.insertBefore(newVideoElement, currentParentPlayerElement)
 
     options.common.playerElement = newVideoElement
@@ -149,45 +181,23 @@ export class PeertubePlayerManager {
     const videojsOptions = this.getVideojsOptions(mode, options)
 
     const self = this
-    videojs(newVideoElement, videojsOptions, function (this: any) {
+    videojs(newVideoElement, videojsOptions, function (this: videojs.Player) {
       const player = this
 
       self.addContextMenu(mode, player, options.common.embedUrl)
-    })
-  }
 
-  private static loadLocaleInVideoJS (serverUrl: string, locale: string) {
-    const path = PeertubePlayerManager.getLocalePath(serverUrl, locale)
-    // It is the default locale, nothing to translate
-    if (!path) return Promise.resolve(undefined)
-
-    let p: Promise<any>
-
-    if (PeertubePlayerManager.videojsLocaleCache[path]) {
-      p = Promise.resolve(PeertubePlayerManager.videojsLocaleCache[path])
-    } else {
-      p = fetch(path + '/player.json')
-        .then(res => res.json())
-        .then(json => {
-          PeertubePlayerManager.videojsLocaleCache[path] = json
-          return json
-        })
-        .catch(err => {
-          console.error('Cannot get player translations', err)
-          return undefined
-        })
-    }
-
-    const completeLocale = getCompleteLocale(locale)
-    return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
+      PeertubePlayerManager.onPlayerChange(player)
+    })
   }
 
-  private static getVideojsOptions (mode: PlayerMode, options: PeertubePlayerManagerOptions, p2pMediaLoaderModule?: any) {
+  private static getVideojsOptions (
+    mode: PlayerMode,
+    options: PeertubePlayerManagerOptions,
+    p2pMediaLoaderModule?: any
+  ): videojs.PlayerOptions {
     const commonOptions = options.common
-    const webtorrentOptions = options.webtorrent
-    const p2pMediaLoaderOptions = options.p2pMediaLoader
 
-    let autoplay = options.common.autoplay
+    let autoplay = this.getAutoPlayValue(commonOptions.autoplay)
     let html5 = {}
 
     const plugins: VideoJSPluginOptions = {
@@ -196,64 +206,29 @@ export class PeertubePlayerManager {
         autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
         videoViewUrl: commonOptions.videoViewUrl,
         videoDuration: commonOptions.videoDuration,
-        startTime: commonOptions.startTime,
         userWatching: commonOptions.userWatching,
         subtitle: commonOptions.subtitle,
-        videoCaptions: commonOptions.videoCaptions
+        videoCaptions: commonOptions.videoCaptions,
+        stopTime: commonOptions.stopTime
       }
     }
 
-    if (mode === 'p2p-media-loader') {
-      const p2pMediaLoader: P2PMediaLoaderPluginOptions = {
-        redundancyBaseUrls: options.p2pMediaLoader.redundancyBaseUrls,
-        type: 'application/x-mpegURL',
-        src: p2pMediaLoaderOptions.playlistUrl
-      }
-
-      const trackerAnnounce = p2pMediaLoaderOptions.trackerAnnounce
-        .filter(t => t.startsWith('ws'))
-
-      const p2pMediaLoaderConfig = {
-        loader: {
-          trackerAnnounce,
-          segmentValidator: segmentValidatorFactory(options.p2pMediaLoader.segmentsSha256Url),
-          rtcConfig: getRtcConfig(),
-          requiredSegmentsPriority: 5,
-          segmentUrlBuilder: segmentUrlBuilderFactory(options.p2pMediaLoader.redundancyBaseUrls)
-        },
-        segments: {
-          swarmId: p2pMediaLoaderOptions.playlistUrl
-        }
-      }
-      const streamrootHls = {
-        levelLabelHandler: (level: { height: number, width: number }) => {
-          const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === level.height)
+    if (commonOptions.playlist) {
+      plugins.playlist = commonOptions.playlist
+    }
 
-          let label = file.resolution.label
-          if (file.fps >= 50) label += file.fps
+    if (commonOptions.enableHotkeys === true) {
+      PeertubePlayerManager.addHotkeysOptions(plugins)
+    }
 
-          return label
-        },
-        html5: {
-          hlsjsConfig: {
-            liveSyncDurationCount: 7,
-            loader: new p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass()
-          }
-        }
-      }
+    if (mode === 'p2p-media-loader') {
+      const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
 
-      Object.assign(plugins, { p2pMediaLoader, streamrootHls })
-      html5 = streamrootHls.html5
+      html5 = hlsjs.html5
     }
 
     if (mode === 'webtorrent') {
-      const webtorrent = {
-        autoplay,
-        videoDuration: commonOptions.videoDuration,
-        playerElement: commonOptions.playerElement,
-        videoFiles: webtorrentOptions.videoFiles
-      }
-      Object.assign(plugins, { webtorrent })
+      PeertubePlayerManager.addWebTorrentOptions(plugins, options)
 
       // WebTorrent plugin handles autoplay, because we do some hackish stuff in there
       autoplay = false
@@ -263,7 +238,7 @@ export class PeertubePlayerManager {
       html5,
 
       // We don't use text track settings for now
-      textTrackSettings: false,
+      textTrackSettings: false as any, // FIXME: typings
       controls: commonOptions.controls !== undefined ? commonOptions.controls : true,
       loop: commonOptions.loop !== undefined ? commonOptions.loop : false,
 
@@ -271,88 +246,123 @@ export class PeertubePlayerManager {
         ? commonOptions.muted
         : undefined, // Undefined so the player knows it has to check the local storage
 
+      autoplay: this.getAutoPlayValue(autoplay),
+
       poster: commonOptions.poster,
-      autoplay: autoplay === true ? 'any' : autoplay, // Use 'any' instead of true to get notifier by videojs if autoplay fails
       inactivityTimeout: commonOptions.inactivityTimeout,
       playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ],
+
       plugins,
+
       controlBar: {
         children: this.getControlBarChildren(mode, {
           captions: commonOptions.captions,
           peertubeLink: commonOptions.peertubeLink,
-          theaterMode: commonOptions.theaterMode
-        })
+          theaterButton: commonOptions.theaterButton,
+          nextVideo: commonOptions.nextVideo
+        }) as any // FIXME: typings
       }
     }
 
-    if (commonOptions.enableHotkeys === true) {
-      Object.assign(videojsOptions.plugins, {
-        hotkeys: {
-          enableVolumeScroll: false,
-          enableModifiersForNumbers: false,
-
-          fullscreenKey: function (event: KeyboardEvent) {
-            // fullscreen with the f key or Ctrl+Enter
-            return event.key === 'f' || (event.ctrlKey && event.key === 'Enter')
-          },
+    if (commonOptions.language && !isDefaultLocale(commonOptions.language)) {
+      Object.assign(videojsOptions, { language: commonOptions.language })
+    }
 
-          seekStep: function (event: KeyboardEvent) {
-            // mimic VLC seek behavior, and default to 5 (original value is 5).
-            if (event.ctrlKey && event.altKey) {
-              return 5 * 60
-            } else if (event.ctrlKey) {
-              return 60
-            } else if (event.altKey) {
-              return 10
-            } else {
-              return 5
-            }
-          },
+    return videojsOptions
+  }
 
-          customKeys: {
-            increasePlaybackRateKey: {
-              key: function (event: KeyboardEvent) {
-                return event.key === '>'
-              },
-              handler: function (player: videojs.Player) {
-                player.playbackRate((player.playbackRate() + 0.1).toFixed(2))
-              }
-            },
-            decreasePlaybackRateKey: {
-              key: function (event: KeyboardEvent) {
-                return event.key === '<'
-              },
-              handler: function (player: videojs.Player) {
-                player.playbackRate((player.playbackRate() - 0.1).toFixed(2))
-              }
-            },
-            frameByFrame: {
-              key: function (event: KeyboardEvent) {
-                return event.key === '.'
-              },
-              handler: function (player: videojs.Player) {
-                player.pause()
-                // Calculate movement distance (assuming 30 fps)
-                const dist = 1 / 30
-                player.currentTime(player.currentTime() + dist)
-              }
-            }
-          }
+  private static addP2PMediaLoaderOptions (
+    plugins: VideoJSPluginOptions,
+    options: PeertubePlayerManagerOptions,
+    p2pMediaLoaderModule: any
+  ) {
+    const p2pMediaLoaderOptions = options.p2pMediaLoader
+    const commonOptions = options.common
+
+    const trackerAnnounce = p2pMediaLoaderOptions.trackerAnnounce
+                                                 .filter(t => t.startsWith('ws'))
+
+    const redundancyUrlManager = new RedundancyUrlManager(options.p2pMediaLoader.redundancyBaseUrls)
+
+    const p2pMediaLoader: P2PMediaLoaderPluginOptions = {
+      redundancyUrlManager,
+      type: 'application/x-mpegURL',
+      startTime: commonOptions.startTime,
+      src: p2pMediaLoaderOptions.playlistUrl
+    }
+
+    let consumeOnly = false
+    // FIXME: typings
+    if (navigator && (navigator as any).connection && (navigator as any).connection.type === 'cellular') {
+      console.log('We are on a cellular connection: disabling seeding.')
+      consumeOnly = true
+    }
+
+    const p2pMediaLoaderConfig = {
+      loader: {
+        trackerAnnounce,
+        segmentValidator: segmentValidatorFactory(options.p2pMediaLoader.segmentsSha256Url),
+        rtcConfig: getRtcConfig(),
+        requiredSegmentsPriority: 5,
+        segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager),
+        useP2P: getStoredP2PEnabled(),
+        consumeOnly
+      },
+      segments: {
+        swarmId: p2pMediaLoaderOptions.playlistUrl
+      }
+    }
+    const hlsjs = {
+      levelLabelHandler: (level: { height: number, width: number }) => {
+        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
+
+        return label
+      },
+      html5: {
+        hlsjsConfig: {
+          capLevelToPlayerSize: true,
+          autoStartLoad: false,
+          liveSyncDurationCount: 7,
+          loader: new p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass()
+        }
+      }
     }
 
-    if (commonOptions.language && !isDefaultLocale(commonOptions.language)) {
-      Object.assign(videojsOptions, { language: commonOptions.language })
+    const toAssign = { p2pMediaLoader, hlsjs }
+    Object.assign(plugins, toAssign)
+
+    return toAssign
+  }
+
+  private static addWebTorrentOptions (plugins: VideoJSPluginOptions, options: PeertubePlayerManagerOptions) {
+    const commonOptions = options.common
+    const webtorrentOptions = options.webtorrent
+
+    const webtorrent = {
+      autoplay: commonOptions.autoplay,
+      videoDuration: commonOptions.videoDuration,
+      playerElement: commonOptions.playerElement,
+      videoFiles: webtorrentOptions.videoFiles,
+      startTime: commonOptions.startTime
     }
 
-    return videojsOptions
+    Object.assign(plugins, { webtorrent })
   }
 
   private static getControlBarChildren (mode: PlayerMode, options: {
     peertubeLink: boolean
-    theaterMode: boolean,
-    captions: boolean
+    theaterButton: boolean,
+    captions: boolean,
+    nextVideo?: Function
   }) {
     const settingEntries = []
     const loadProgressBar = mode === 'webtorrent' ? 'peerTubeLoadProgressBar' : 'loadProgressBar'
@@ -363,7 +373,18 @@ export class PeertubePlayerManager {
     settingEntries.push('resolutionMenuButton')
 
     const children = {
-      'playToggle': {},
+      'playToggle': {}
+    }
+
+    if (options.nextVideo) {
+      Object.assign(children, {
+        'nextVideoButton': {
+          handler: options.nextVideo
+        }
+      })
+    }
+
+    Object.assign(children, {
       'currentTimeDisplay': {},
       'timeDivider': {},
       'durationDisplay': {},
@@ -393,7 +414,7 @@ export class PeertubePlayerManager {
         },
         entries: settingEntries
       }
-    }
+    })
 
     if (options.peertubeLink === true) {
       Object.assign(children, {
@@ -401,7 +422,7 @@ export class PeertubePlayerManager {
       })
     }
 
-    if (options.theaterMode === true) {
+    if (options.theaterButton === true) {
       Object.assign(children, {
         'theaterButton': {}
       })
@@ -414,7 +435,7 @@ export class PeertubePlayerManager {
     return children
   }
 
-  private static addContextMenu (mode: PlayerMode, player: any, videoEmbedUrl: string) {
+  private static addContextMenu (mode: PlayerMode, player: videojs.Player, videoEmbedUrl: string) {
     const content = [
       {
         label: player.localize('Copy the video URL'),
@@ -424,9 +445,8 @@ export class PeertubePlayerManager {
       },
       {
         label: player.localize('Copy the video URL at the current time'),
-        listener: function () {
-          const player = this as videojs.Player
-          copyToClipboard(buildVideoLink(player.currentTime()))
+        listener: function (this: videojs.Player) {
+          copyToClipboard(buildVideoLink({ startTime: this.currentTime() }))
         }
       },
       {
@@ -440,9 +460,8 @@ export class PeertubePlayerManager {
     if (mode === 'webtorrent') {
       content.push({
         label: player.localize('Copy magnet URI'),
-        listener: function () {
-          const player = this as videojs.Player
-          copyToClipboard(player.webtorrent().getCurrentVideoFile().magnetUri)
+        listener: function (this: videojs.Player) {
+          copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri)
         }
       })
     }
@@ -450,12 +469,84 @@ export class PeertubePlayerManager {
     player.contextmenuUI({ content })
   }
 
-  private static getLocalePath (serverUrl: string, locale: string) {
-    const completeLocale = getCompleteLocale(locale)
+  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,
+
+        fullscreenKey: function (event: KeyboardEvent) {
+          // fullscreen with the f key or Ctrl+Enter
+          return event.key === 'f' || (event.ctrlKey && event.key === 'Enter')
+        },
+
+        seekStep: function (event: KeyboardEvent) {
+          // mimic VLC seek behavior, and default to 5 (original value is 5).
+          if (event.ctrlKey && event.altKey) {
+            return 5 * 60
+          } else if (event.ctrlKey) {
+            return 60
+          } else if (event.altKey) {
+            return 10
+          } else {
+            return 5
+          }
+        },
+
+        customKeys: {
+          increasePlaybackRateKey: {
+            key: function (event: KeyboardEvent) {
+              return event.key === '>'
+            },
+            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 event.key === '<'
+            },
+            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 event.key === '.'
+            },
+            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
+
+    // Giving up with iOS
+    if (isIOS()) return false
 
-    if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined
+    // We have issues with autoplay and Safari.
+    // any that tries to play using auto mute seems to work
+    if (isSafari()) return 'any'
 
-    return serverUrl + '/client/locales/' + completeLocale
+    return 'play'
   }
 }