client/src/standalone/videos/shared/player-html.ts

   1 import { peertubeTranslate } from '../../../../../shared/core-utils/i18n'
   2 import { VideoDetails } from '../../../../../shared/models'
   3 import { logger } from '../../../root-helpers'
   4 import { Translations } from './translations'
   5
   6 export class PlayerHTML {
   7   private readonly wrapperElement: HTMLElement
   8
   9   private playerElement: HTMLVideoElement
  10   private informationElement: HTMLDivElement
  11
  12   constructor (private readonly videoWrapperId: string) {
  13     this.wrapperElement = document.getElementById(this.videoWrapperId)
  14   }
  15
  16   getPlayerElement () {
  17     return this.playerElement
  18   }
  19
  20   setPlayerElement (playerElement: HTMLVideoElement) {
  21     this.playerElement = playerElement
  22   }
  23
  24   removePlayerElement () {
  25     this.playerElement = null
  26   }
  27
  28   addPlayerElementToDOM () {
  29     this.wrapperElement.appendChild(this.playerElement)
  30   }
  31
  32   displayError (text: string, translations: Translations) {
  33     logger.error(text)
  34
  35     // Remove video element
  36     if (this.playerElement) {
  37       this.removeElement(this.playerElement)
  38       this.playerElement = undefined
  39     }
  40
  41     const translatedText = peertubeTranslate(text, translations)
  42     const translatedSorry = peertubeTranslate('Sorry', translations)
  43
  44     document.title = translatedSorry + ' - ' + translatedText
  45
  46     const errorBlock = document.getElementById('error-block')
  47     errorBlock.style.display = 'flex'
  48
  49     const errorTitle = document.getElementById('error-title')
  50     errorTitle.innerHTML = peertubeTranslate('Sorry', translations)
  51
  52     const errorText = document.getElementById('error-content')
  53     errorText.innerHTML = translatedText
  54
  55     this.wrapperElement.style.display = 'none'
  56   }
  57
  58   buildPlaceholder (video: VideoDetails) {
  59     const placeholder = this.getPlaceholderElement()
  60
  61     const url = window.location.origin + video.previewPath
  62     placeholder.style.backgroundImage = `url("${url}")`
  63     placeholder.style.display = 'block'
  64   }
  65
  66   removePlaceholder () {
  67     const placeholder = this.getPlaceholderElement()
  68     placeholder.style.display = 'none'
  69   }
  70
  71   displayInformation (text: string, translations: Translations) {
  72     if (this.informationElement) this.removeInformation()
  73
  74     this.informationElement = document.createElement('div')
  75     this.informationElement.className = 'player-information'
  76     this.informationElement.innerText = peertubeTranslate(text, translations)
  77
  78     document.body.appendChild(this.informationElement)
  79   }
  80
  81   removeInformation () {
  82     if (!this.informationElement) return
  83
  84     this.removeElement(this.informationElement)
  85     this.informationElement = undefined
  86   }
  87
  88   private getPlaceholderElement () {
  89     return document.getElementById('placeholder-preview')
  90   }
  91
  92   private removeElement (element: HTMLElement) {
  93     element.parentElement.removeChild(element)
  94   }
  95 }