Add an option to provide responsive embed (#5690)

* Add option to provide responsive embed

* Fix typo

* More understandable parameter
This commit is contained in:
Wicklow 2023-03-14 08:32:16 +00:00 committed by GitHub
parent e72ace5a50
commit cadc1a1b0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 52 additions and 18 deletions

View File

@ -72,13 +72,21 @@
></my-peertube-checkbox>
</div>
<div class="form-group">
<my-peertube-checkbox
*ngIf="isInPlaylistEmbedTab()"
inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
i18n-labelText labelText="Only display embed URL"
></my-peertube-checkbox>
</div>
<ng-container *ngIf="isInPlaylistEmbedTab()">
<div class="form-group">
<my-peertube-checkbox
inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
i18n-labelText labelText="Only display embed URL"
></my-peertube-checkbox>
</div>
<div class="form-group">
<my-peertube-checkbox
inputName="responsive" [(ngModel)]="customizations.responsive"
i18n-labelText labelText="Responsive embed"
></my-peertube-checkbox>
</div>
</ng-container>
<my-plugin-placeholder pluginId="share-modal-playlist-settings"></my-plugin-placeholder>
</div>
@ -228,6 +236,13 @@
</div>
<ng-container *ngIf="isInVideoEmbedTab()">
<div class="form-group">
<my-peertube-checkbox
inputName="responsive" [(ngModel)]="customizations.responsive"
i18n-labelText labelText="Responsive embed"
></my-peertube-checkbox>
</div>
<div class="form-group">
<my-peertube-checkbox
inputName="title" [(ngModel)]="customizations.title"

View File

@ -29,6 +29,7 @@ type Customizations = {
warningTitle: boolean
controlBar: boolean
peertubeLink: boolean
responsive: boolean
includeVideoInPlaylist: boolean
}
@ -100,6 +101,7 @@ export class VideoShareComponent {
warningTitle: true,
controlBar: true,
peertubeLink: true,
responsive: false,
includeVideoInPlaylist: false
}, {
@ -152,10 +154,11 @@ export class VideoShareComponent {
)
}
async getVideoIframeCode () {
async getVideoEmbedCode (options: { responsive: boolean }) {
const { responsive } = options
return this.hooks.wrapFun(
buildVideoOrPlaylistEmbed,
{ embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name },
{ embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name, responsive },
'video-watch',
'filter:share.video-embed-code.build.params',
'filter:share.video-embed-code.build.result'
@ -186,10 +189,11 @@ export class VideoShareComponent {
)
}
async getPlaylistEmbedCode () {
async getPlaylistEmbedCode (options: { responsive: boolean }) {
const { responsive } = options
return this.hooks.wrapFun(
buildVideoOrPlaylistEmbed,
{ embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName },
{ embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName, responsive },
'video-watch',
'filter:share.video-playlist-embed-code.build.params',
'filter:share.video-playlist-embed-code.build.result'
@ -204,15 +208,15 @@ export class VideoShareComponent {
if (this.playlist) {
this.playlistUrl = await this.getPlaylistUrl()
this.playlistEmbedUrl = await this.getPlaylistEmbedUrl()
this.playlistEmbedHTML = await this.getPlaylistEmbedCode()
this.playlistEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(this.playlistEmbedHTML)
this.playlistEmbedHTML = await this.getPlaylistEmbedCode({ responsive: this.customizations.responsive })
this.playlistEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getPlaylistEmbedCode({ responsive: false }))
}
if (this.video) {
this.videoUrl = await this.getVideoUrl()
this.videoEmbedUrl = await this.getVideoEmbedUrl()
this.videoEmbedHTML = await this.getVideoIframeCode()
this.videoEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(this.videoEmbedHTML)
this.videoEmbedHTML = await this.getVideoEmbedCode({ responsive: this.customizations.responsive })
this.videoEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getVideoEmbedCode({ responsive: false }))
}
}

View File

@ -3,19 +3,34 @@ import { HTMLServerConfig, Video, VideoPrivacy } from '@shared/models'
function buildVideoOrPlaylistEmbed (options: {
embedUrl: string
embedTitle: string
responsive?: boolean
}) {
const { embedUrl, embedTitle } = options
const { embedUrl, embedTitle, responsive = false } = options
const iframe = document.createElement('iframe')
iframe.title = embedTitle
iframe.width = '560'
iframe.height = '315'
iframe.width = responsive ? '100%' : '560'
iframe.height = responsive ? '100%' : '315'
iframe.src = embedUrl
iframe.frameBorder = '0'
iframe.allowFullscreen = true
iframe.sandbox.add('allow-same-origin', 'allow-scripts', 'allow-popups')
if (responsive) {
const wrapper = document.createElement('div')
wrapper.style.position = 'relative'
wrapper.style['padding-top'] = '56.25%'
iframe.style.position = 'absolute'
iframe.style.inset = '0'
wrapper.appendChild(iframe)
return wrapper.outerHTML
}
return iframe.outerHTML
}