Fix resolution for portrait videos

[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 5ebc247f2d4a29937f3c4e320231d001c221d8a6..f12fb09ae23919d6ec229ece597e37c82d916e75 100644 (file)
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -1,5 +1,3 @@
-import { VideoFile } from '../../../../shared/models/videos'
-import videojs from 'video.js'
 import 'videojs-hotkeys/videojs.hotkeys'
 import 'videojs-dock'
 import 'videojs-contextmenu-ui'
@@ -20,14 +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'
+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'
@@ -300,7 +301,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
@@ -452,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,
 
@@ -511,15 +526,12 @@ export class PeertubePlayerManager {
   private static getAutoPlayValue (autoplay: any) {
     if (autoplay !== true) return autoplay
 
-    const isIOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
-    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
-
     // Giving up with iOS
-    if (isIOS) return false
+    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'
+    if (isSafari()) return 'any'
 
     return 'play'
   }