diff --git a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts index 7c7ae6ec6..1f67286d2 100644 --- a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts +++ b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts @@ -116,7 +116,23 @@ export class CustomMarkupService { const data = el.dataset as EmbedMarkupData const { component, loadedPromise } = this.dynamicElementService.createElement(EmbedMarkupComponent) - this.dynamicElementService.setModel(component, { uuid: data.uuid, type }) + this.dynamicElementService.setModel(component, { + uuid: data.uuid, + type, + responsive: this.buildBoolean(data.responsive), + startAt: data.startAt, + stopAt: data.stopAt, + subtitle: data.subtitle, + autoplay: this.buildBoolean(data.autoplay), + muted: this.buildBoolean(data.muted), + loop: this.buildBoolean(data.loop), + title: this.buildBoolean(data.title), + p2p: this.buildBoolean(data.p2p), + warningTitle: this.buildBoolean(data.warningTitle), + controlBar: this.buildBoolean(data.controlBar), + peertubeLink: this.buildBoolean(data.peertubeLink), + playlistPosition: this.buildNumber(data.playlistPosition) + }) return { component, loadedPromise } } diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/embed-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/embed-markup.component.ts index 64ef969c9..fefee9e69 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/embed-markup.component.ts +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/embed-markup.component.ts @@ -1,7 +1,13 @@ -import { environment } from 'src/environments/environment' import { Component, ElementRef, OnInit, inject, input } from '@angular/core' +import { + buildPlaylistEmbedLink, + buildVideoEmbedLink, + decoratePlaylistLink, + decorateVideoLink, + timeToInt +} from '@peertube/peertube-core-utils' import { buildVideoOrPlaylistEmbed } from '@root-helpers/video' -import { buildPlaylistEmbedLink, buildVideoEmbedLink } from '@peertube/peertube-core-utils' +import { environment } from 'src/environments/environment' import { CustomMarkupComponent } from './shared' @Component({ @@ -14,14 +20,59 @@ export class EmbedMarkupComponent implements CustomMarkupComponent, OnInit { readonly uuid = input(undefined) readonly type = input<'video' | 'playlist'>('video') + readonly responsive = input(undefined) + readonly startAt = input(undefined) + readonly stopAt = input(undefined) + readonly subtitle = input(undefined) + readonly autoplay = input(undefined) + readonly muted = input(undefined) + readonly loop = input(undefined) + readonly title = input(undefined) + readonly p2p = input(undefined) + readonly warningTitle = input(undefined) + readonly controlBar = input(undefined) + readonly peertubeLink = input(undefined) + readonly playlistPosition = input(undefined) loaded: undefined ngOnInit () { - const link = this.type() === 'video' - ? buildVideoEmbedLink({ uuid: this.uuid() }, environment.originServerUrl) - : buildPlaylistEmbedLink({ uuid: this.uuid() }, environment.originServerUrl) + this.el.nativeElement.innerHTML = buildVideoOrPlaylistEmbed({ + embedUrl: this.buildLink(), + embedTitle: this.uuid(), + responsive: this.responsive() ?? false + }) + } - this.el.nativeElement.innerHTML = buildVideoOrPlaylistEmbed({ embedUrl: link, embedTitle: this.uuid() }) + private buildLink () { + if (this.type() === 'playlist') { + return decoratePlaylistLink({ + url: buildPlaylistEmbedLink({ uuid: this.uuid() }, environment.originServerUrl), + playlistPosition: this.playlistPosition() + }) + } + + const startTime = this.startAt() + ? timeToInt(this.startAt()) + : undefined + + const stopTime = this.stopAt() + ? timeToInt(this.stopAt()) + : undefined + + return decorateVideoLink({ + url: buildVideoEmbedLink({ uuid: this.uuid() }, environment.originServerUrl), + startTime, + stopTime, + subtitle: this.subtitle(), + loop: this.loop(), + autoplay: this.autoplay(), + muted: this.muted(), + title: this.title(), + warningTitle: this.warningTitle(), + controlBar: this.controlBar(), + peertubeLink: this.peertubeLink(), + p2p: this.p2p() + }) } } diff --git a/packages/models/src/custom-markup/custom-markup-data.model.ts b/packages/models/src/custom-markup/custom-markup-data.model.ts index 64e18f74a..00dd2e35a 100644 --- a/packages/models/src/custom-markup/custom-markup-data.model.ts +++ b/packages/models/src/custom-markup/custom-markup-data.model.ts @@ -3,6 +3,19 @@ type StringBoolean = 'true' | 'false' export type EmbedMarkupData = { // Video or playlist uuid uuid: string + responsive?: StringBoolean + startAt?: string + stopAt?: string + subtitle?: string + autoplay?: StringBoolean + muted?: StringBoolean + loop?: StringBoolean + title?: StringBoolean + p2p?: StringBoolean + warningTitle?: StringBoolean + controlBar?: StringBoolean + peertubeLink?: StringBoolean + playlistPosition?: string // number } export type VideoMiniatureMarkupData = {