diff options
Diffstat (limited to 'client/src/standalone/videos/embed.ts')
-rw-r--r-- | client/src/standalone/videos/embed.ts | 47 |
1 files changed, 25 insertions, 22 deletions
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index c9a4e541c..dad717108 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts | |||
@@ -64,17 +64,11 @@ export class PeerTubeEmbed { | |||
64 | private playlistElements: VideoPlaylistElement[] | 64 | private playlistElements: VideoPlaylistElement[] |
65 | private currentPlaylistElement: VideoPlaylistElement | 65 | private currentPlaylistElement: VideoPlaylistElement |
66 | 66 | ||
67 | private wrapperElement: HTMLElement | 67 | private readonly wrapperElement: HTMLElement |
68 | 68 | ||
69 | private pluginsManager: PluginsManager | 69 | private pluginsManager: PluginsManager |
70 | 70 | ||
71 | static async main () { | 71 | constructor (private readonly videoWrapperId: string) { |
72 | const videoContainerId = 'video-wrapper' | ||
73 | const embed = new PeerTubeEmbed(videoContainerId) | ||
74 | await embed.init() | ||
75 | } | ||
76 | |||
77 | constructor (private videoWrapperId: string) { | ||
78 | this.wrapperElement = document.getElementById(this.videoWrapperId) | 72 | this.wrapperElement = document.getElementById(this.videoWrapperId) |
79 | 73 | ||
80 | try { | 74 | try { |
@@ -84,6 +78,12 @@ export class PeerTubeEmbed { | |||
84 | } | 78 | } |
85 | } | 79 | } |
86 | 80 | ||
81 | static async main () { | ||
82 | const videoContainerId = 'video-wrapper' | ||
83 | const embed = new PeerTubeEmbed(videoContainerId) | ||
84 | await embed.init() | ||
85 | } | ||
86 | |||
87 | getVideoUrl (id: string) { | 87 | getVideoUrl (id: string) { |
88 | return window.location.origin + '/api/v1/videos/' + id | 88 | return window.location.origin + '/api/v1/videos/' + id |
89 | } | 89 | } |
@@ -316,7 +316,7 @@ export class PeerTubeEmbed { | |||
316 | while (total > elements.length && i < 10) { | 316 | while (total > elements.length && i < 10) { |
317 | const result = await this.loadPlaylistElements(playlistId, elements.length) | 317 | const result = await this.loadPlaylistElements(playlistId, elements.length) |
318 | 318 | ||
319 | const json = await result.json() as ResultList<VideoPlaylistElement> | 319 | const json = await result.json() |
320 | total = json.total | 320 | total = json.total |
321 | 321 | ||
322 | elements = elements.concat(json.data) | 322 | elements = elements.concat(json.data) |
@@ -469,7 +469,7 @@ export class PeerTubeEmbed { | |||
469 | // Issue when we parsed config from HTML, fallback to API | 469 | // Issue when we parsed config from HTML, fallback to API |
470 | if (!this.config) { | 470 | if (!this.config) { |
471 | this.config = await this.refreshFetch('/api/v1/config') | 471 | this.config = await this.refreshFetch('/api/v1/config') |
472 | .then(res => res.json()) | 472 | .then(res => res.json()) |
473 | } | 473 | } |
474 | 474 | ||
475 | const videoInfoPromise = videoResponse.json() | 475 | const videoInfoPromise = videoResponse.json() |
@@ -506,7 +506,7 @@ export class PeerTubeEmbed { | |||
506 | this.currentPlaylistElement = videoPlaylistElement | 506 | this.currentPlaylistElement = videoPlaylistElement |
507 | 507 | ||
508 | this.loadVideoAndBuildPlayer(this.currentPlaylistElement.video.uuid) | 508 | this.loadVideoAndBuildPlayer(this.currentPlaylistElement.video.uuid) |
509 | .catch(err => console.error(err)) | 509 | .catch(err => console.error(err)) |
510 | } | 510 | } |
511 | } | 511 | } |
512 | : undefined | 512 | : undefined |
@@ -542,7 +542,9 @@ export class PeerTubeEmbed { | |||
542 | isLive: videoInfo.isLive, | 542 | isLive: videoInfo.isLive, |
543 | 543 | ||
544 | playerElement: this.playerElement, | 544 | playerElement: this.playerElement, |
545 | onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element, | 545 | onPlayerElementChange: (element: HTMLVideoElement) => { |
546 | this.playerElement = element | ||
547 | }, | ||
546 | 548 | ||
547 | videoDuration: videoInfo.duration, | 549 | videoDuration: videoInfo.duration, |
548 | enableHotkeys: true, | 550 | enableHotkeys: true, |
@@ -577,10 +579,13 @@ export class PeerTubeEmbed { | |||
577 | }) | 579 | }) |
578 | } | 580 | } |
579 | 581 | ||
580 | this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: videojs.Player) => this.player = player) | 582 | this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: videojs.Player) => { |
583 | this.player = player | ||
584 | }) | ||
585 | |||
581 | this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations)) | 586 | this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations)) |
582 | 587 | ||
583 | window[ 'videojsPlayer' ] = this.player | 588 | window['videojsPlayer'] = this.player |
584 | 589 | ||
585 | this.buildCSS() | 590 | this.buildCSS() |
586 | 591 | ||
@@ -656,7 +661,7 @@ export class PeerTubeEmbed { | |||
656 | this.player.dispose() | 661 | this.player.dispose() |
657 | this.playerElement = null | 662 | this.playerElement = null |
658 | this.displayError('This video is not available because the remote instance is not responding.', translations) | 663 | this.displayError('This video is not available because the remote instance is not responding.', translations) |
659 | return | 664 | |
660 | } | 665 | } |
661 | } | 666 | } |
662 | 667 | ||
@@ -694,9 +699,9 @@ export class PeerTubeEmbed { | |||
694 | 699 | ||
695 | private async buildCaptions (serverTranslations: any, captionsResponse: Response): Promise<VideoJSCaption[]> { | 700 | private async buildCaptions (serverTranslations: any, captionsResponse: Response): Promise<VideoJSCaption[]> { |
696 | if (captionsResponse.ok) { | 701 | if (captionsResponse.ok) { |
697 | const { data } = (await captionsResponse.json()) as ResultList<VideoCaption> | 702 | const { data } = await captionsResponse.json() |
698 | 703 | ||
699 | return data.map(c => ({ | 704 | return data.map((c: VideoCaption) => ({ |
700 | label: peertubeTranslate(c.language.label, serverTranslations), | 705 | label: peertubeTranslate(c.language.label, serverTranslations), |
701 | language: c.language.id, | 706 | language: c.language.id, |
702 | src: window.location.origin + c.captionPath | 707 | src: window.location.origin + c.captionPath |
@@ -733,7 +738,7 @@ export class PeerTubeEmbed { | |||
733 | 738 | ||
734 | private getResourceId () { | 739 | private getResourceId () { |
735 | const urlParts = window.location.pathname.split('/') | 740 | const urlParts = window.location.pathname.split('/') |
736 | return urlParts[ urlParts.length - 1 ] | 741 | return urlParts[urlParts.length - 1] |
737 | } | 742 | } |
738 | 743 | ||
739 | private isPlaylistEmbed () { | 744 | private isPlaylistEmbed () { |
@@ -751,7 +756,7 @@ export class PeerTubeEmbed { | |||
751 | } | 756 | } |
752 | 757 | ||
753 | private buildPeerTubeHelpers (translations?: { [ id: string ]: string }): RegisterClientHelpers { | 758 | private buildPeerTubeHelpers (translations?: { [ id: string ]: string }): RegisterClientHelpers { |
754 | function unimplemented (): any { | 759 | const unimplemented = () => { |
755 | throw new Error('This helper is not implemented in embed.') | 760 | throw new Error('This helper is not implemented in embed.') |
756 | } | 761 | } |
757 | 762 | ||
@@ -780,9 +785,7 @@ export class PeerTubeEmbed { | |||
780 | enhancedMarkdownToHTML: unimplemented | 785 | enhancedMarkdownToHTML: unimplemented |
781 | }, | 786 | }, |
782 | 787 | ||
783 | translate: (value: string) => { | 788 | translate: (value: string) => Promise.resolve(peertubeTranslate(value, translations)) |
784 | return Promise.resolve(peertubeTranslate(value, translations)) | ||
785 | } | ||
786 | } | 789 | } |
787 | } | 790 | } |
788 | } | 791 | } |