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