Translated using Weblate (Turkish)

[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 b24b6966eb6272defb5617b47211edc0e27efd89..2781850b92bc34a567e9036a0065b04df4a57c63 100644 (file)
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -11,6 +11,7 @@ import './shared/control-bar/p2p-info-button'
 import './shared/control-bar/peertube-link-button'
 import './shared/control-bar/peertube-load-progress-bar'
 import './shared/control-bar/theater-button'
+import './shared/control-bar/peertube-live-display'
 import './shared/settings/resolution-menu-button'
 import './shared/settings/resolution-menu-item'
 import './shared/settings/settings-dialog'
@@ -22,7 +23,9 @@ import './shared/playlist/playlist-plugin'
 import './shared/mobile/peertube-mobile-plugin'
 import './shared/mobile/peertube-mobile-buttons'
 import './shared/hotkeys/peertube-hotkeys-plugin'
+import './shared/metrics/metrics-plugin'
 import videojs from 'video.js'
+import { logger } from '@root-helpers/logger'
 import { PluginsManager } from '@root-helpers/plugins-manager'
 import { isMobile } from '@root-helpers/web-browser'
 import { saveAverageBandwidth } from './peertube-player-local-storage'
@@ -41,6 +44,8 @@ CaptionsButton.prototype.label_ = ' '
 
 export class PeertubePlayerManager {
   private static playerElementClassName: string
+  private static playerElementAttributes: { name: string, value: string }[] = []
+
   private static onPlayerChange: (player: videojs.Player) => void
   private static alreadyPlayed = false
   private static pluginsManager: PluginsManager
@@ -57,8 +62,13 @@ export class PeertubePlayerManager {
     this.pluginsManager = options.pluginsManager
 
     this.onPlayerChange = onPlayerChange
+
     this.playerElementClassName = options.common.playerElement.className
 
+    for (const name of options.common.playerElement.getAttributeNames()) {
+      this.playerElementAttributes.push({ name, value: options.common.playerElement.getAttribute(name) })
+    }
+
     if (mode === 'webtorrent') await import('./shared/webtorrent/webtorrent-plugin')
     if (mode === 'p2p-media-loader') {
       const [ p2pMediaLoaderModule ] = await Promise.all([
@@ -87,6 +97,10 @@ export class PeertubePlayerManager {
       videojs(options.common.playerElement, videojsOptions, function (this: videojs.Player) {
         const player = this
 
+        if (!isNaN(+options.common.playbackRate)) {
+          player.playbackRate(+options.common.playbackRate)
+        }
+
         let alreadyFallback = false
 
         const handleError = () => {
@@ -109,7 +123,7 @@ export class PeertubePlayerManager {
         self.addContextMenu(videojsOptionsBuilder, player, options.common)
 
         if (isMobile()) player.peertubeMobile()
-        if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin()
+        if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin({ isLive: options.common.isLive })
         if (options.common.controlBar === false) player.controlBar.addClass('control-bar-hidden')
 
         player.bezels()
@@ -127,13 +141,45 @@ export class PeertubePlayerManager {
           saveAverageBandwidth(data.bandwidthEstimate)
         })
 
+        const offlineNotificationElem = document.createElement('div')
+        offlineNotificationElem.classList.add('vjs-peertube-offline-notification')
+        offlineNotificationElem.innerText = player.localize('You seem to be offline and the video may not work')
+
+        let offlineNotificationElemAdded = false
+
+        const handleOnline = () => {
+          if (!offlineNotificationElemAdded) return
+
+          player.el().removeChild(offlineNotificationElem)
+          offlineNotificationElemAdded = false
+
+          logger.info('The browser is online')
+        }
+
+        const handleOffline = () => {
+          if (offlineNotificationElemAdded) return
+
+          player.el().appendChild(offlineNotificationElem)
+          offlineNotificationElemAdded = true
+
+          logger.info('The browser is offline')
+        }
+
+        window.addEventListener('online', handleOnline)
+        window.addEventListener('offline', handleOffline)
+
+        player.on('dispose', () => {
+          window.removeEventListener('online', handleOnline)
+          window.removeEventListener('offline', handleOffline)
+        })
+
         return res(player)
       })
     })
   }
 
   private static async tryToRecoverHLSError (err: any, currentPlayer: videojs.Player, options: PeertubePlayerManagerOptions) {
-    if (err.code === 3) { // Decode error
+    if (err.code === MediaError.MEDIA_ERR_DECODE) {
 
       // Display a notification to user
       if (this.videojsDecodeErrors === 0) {
@@ -145,7 +191,7 @@ export class PeertubePlayerManager {
         return
       }
 
-      console.log('Fast forwarding HLS to recover from an error.')
+      logger.info('Fast forwarding HLS to recover from an error.')
 
       this.videojsDecodeErrors++
 
@@ -170,7 +216,7 @@ export class PeertubePlayerManager {
       return
     }
 
-    console.log('Fallback to webtorrent.')
+    logger.info('Fallback to webtorrent.')
 
     this.rebuildAndUpdateVideoElement(currentPlayer, options.common)
 
@@ -182,8 +228,15 @@ export class PeertubePlayerManager {
 
   private static rebuildAndUpdateVideoElement (player: videojs.Player, commonOptions: CommonOptions) {
     const newVideoElement = document.createElement('video')
+
+    // Reset class
     newVideoElement.className = this.playerElementClassName
 
+    // Reapply attributes
+    for (const { name, value } of this.playerElementAttributes) {
+      newVideoElement.setAttribute(name, value)
+    }
+
     // VideoJS wraps our video element inside a div
     let currentParentPlayerElement = commonOptions.playerElement.parentNode
     // Fix on IOS, don't ask me why