1 import { peertubeTranslate } from '../../../../../shared/core-utils/i18n'
2 import { VideoDetails } from '../../../../../shared/models'
3 import { Translations } from './translations'
5 export class PlayerHTML {
6 private readonly wrapperElement: HTMLElement
8 private playerElement: HTMLVideoElement
9 private informationElement: HTMLDivElement
11 constructor (private readonly videoWrapperId: string) {
12 this.wrapperElement = document.getElementById(this.videoWrapperId)
16 return this.playerElement
19 setPlayerElement (playerElement: HTMLVideoElement) {
20 this.playerElement = playerElement
23 removePlayerElement () {
24 this.playerElement = null
27 addPlayerElementToDOM () {
28 this.wrapperElement.appendChild(this.playerElement)
31 displayError (text: string, translations: Translations) {
34 // Remove video element
35 if (this.playerElement) {
36 this.removeElement(this.playerElement)
37 this.playerElement = undefined
40 const translatedText = peertubeTranslate(text, translations)
41 const translatedSorry = peertubeTranslate('Sorry', translations)
43 document.title = translatedSorry + ' - ' + translatedText
45 const errorBlock = document.getElementById('error-block')
46 errorBlock.style.display = 'flex'
48 const errorTitle = document.getElementById('error-title')
49 errorTitle.innerHTML = peertubeTranslate('Sorry', translations)
51 const errorText = document.getElementById('error-content')
52 errorText.innerHTML = translatedText
54 this.wrapperElement.style.display = 'none'
57 buildPlaceholder (video: VideoDetails) {
58 const placeholder = this.getPlaceholderElement()
60 const url = window.location.origin + video.previewPath
61 placeholder.style.backgroundImage = `url("${url}")`
62 placeholder.style.display = 'block'
65 removePlaceholder () {
66 const placeholder = this.getPlaceholderElement()
67 placeholder.style.display = 'none'
70 displayInformation (text: string, translations: Translations) {
71 if (this.informationElement) this.removeInformation()
73 this.informationElement = document.createElement('div')
74 this.informationElement.className = 'player-information'
75 this.informationElement.innerText = peertubeTranslate(text, translations)
77 document.body.appendChild(this.informationElement)
80 removeInformation () {
81 this.removeElement(this.informationElement)
84 private getPlaceholderElement () {
85 return document.getElementById('placeholder-preview')
88 private removeElement (element: HTMLElement) {
89 element.parentElement.removeChild(element)