1 files changed, 76 insertions, 0 deletions

diff --git a/client/src/standalone/videos/shared/player-html.ts b/client/src/standalone/videos/shared/player-html.ts
new file mode 100644
index 000000000..110124417
--- /dev/null
+++ b/client/src/standalone/videos/shared/player-html.ts
@@ -0,0 +1,76 @@
+import { peertubeTranslate } from '../../../../../shared/core-utils/i18n'
+import { VideoDetails } from '../../../../../shared/models'
+import { Translations } from './translations'
+
+export class PlayerHTML {
+  private readonly wrapperElement: HTMLElement
+
+  private playerElement: HTMLVideoElement
+
+  constructor (private readonly videoWrapperId: string) {
+    this.wrapperElement = document.getElementById(this.videoWrapperId)
+  }
+
+  getPlayerElement () {
+    return this.playerElement
+  }
+
+  setPlayerElement (playerElement: HTMLVideoElement) {
+    this.playerElement = playerElement
+  }
+
+  removePlayerElement () {
+    this.playerElement = null
+  }
+
+  addPlayerElementToDOM () {
+    this.wrapperElement.appendChild(this.playerElement)
+  }
+
+  displayError (text: string, translations: Translations) {
+    console.error(text)
+
+    // Remove video element
+    if (this.playerElement) {
+      this.removeElement(this.playerElement)
+      this.playerElement = undefined
+    }
+
+    const translatedText = peertubeTranslate(text, translations)
+    const translatedSorry = peertubeTranslate('Sorry', translations)
+
+    document.title = translatedSorry + ' - ' + translatedText
+
+    const errorBlock = document.getElementById('error-block')
+    errorBlock.style.display = 'flex'
+
+    const errorTitle = document.getElementById('error-title')
+    errorTitle.innerHTML = peertubeTranslate('Sorry', translations)
+
+    const errorText = document.getElementById('error-content')
+    errorText.innerHTML = translatedText
+
+    this.wrapperElement.style.display = 'none'
+  }
+
+  buildPlaceholder (video: VideoDetails) {
+    const placeholder = this.getPlaceholderElement()
+
+    const url = window.location.origin + video.previewPath
+    placeholder.style.backgroundImage = `url("${url}")`
+    placeholder.style.display = 'block'
+  }
+
+  removePlaceholder () {
+    const placeholder = this.getPlaceholderElement()
+    placeholder.style.display = 'none'
+  }
+
+  private getPlaceholderElement () {
+    return document.getElementById('placeholder-preview')
+  }
+
+  private removeElement (element: HTMLElement) {
+    element.parentElement.removeChild(element)
+  }
+}