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

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