Add embed paramaters (#6989)

* peertube-video-embed: add support for responsive data attribute

* peertube-video-embed: add support for the remaining data-* attributes

* add support for playlist position data tag

* Styling

---------

Co-authored-by: Chocobozzz <me@florianbigard.com>

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 }
   }

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<string>(undefined)
   readonly type = input<'video' | 'playlist'>('video')
+  readonly responsive = input<boolean>(undefined)
+  readonly startAt = input<string>(undefined)
+  readonly stopAt = input<string>(undefined)
+  readonly subtitle = input<string>(undefined)
+  readonly autoplay = input<boolean>(undefined)
+  readonly muted = input<boolean>(undefined)
+  readonly loop = input<boolean>(undefined)
+  readonly title = input<boolean>(undefined)
+  readonly p2p = input<boolean>(undefined)
+  readonly warningTitle = input<boolean>(undefined)
+  readonly controlBar = input<boolean>(undefined)
+  readonly peertubeLink = input<boolean>(undefined)
+  readonly playlistPosition = input<number>(undefined)
 
   loaded: undefined
 
   ngOnInit () {
-    const link = this.type() === 'video'
+    this.el.nativeElement.innerHTML = buildVideoOrPlaylistEmbed({
-      ? buildVideoEmbedLink({ uuid: this.uuid() }, environment.originServerUrl)
+      embedUrl: this.buildLink(),
-      : buildPlaylistEmbedLink({ uuid: this.uuid() }, environment.originServerUrl)
+      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()
+    })
   }
 }

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 = {