From 82f443de1aba70ce75c72a4a7f669385600ab3c6 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 7 Aug 2020 16:29:30 +0200 Subject: Add buttons in playlist page To delete/edit/share the playlist --- client/src/app/shared/shared-share-modal/index.ts | 3 + .../shared-share-modal.module.ts | 27 +++ .../shared-share-modal/video-share.component.html | 232 +++++++++++++++++++++ .../shared-share-modal/video-share.component.scss | 79 +++++++ .../shared-share-modal/video-share.component.ts | 148 +++++++++++++ 5 files changed, 489 insertions(+) create mode 100644 client/src/app/shared/shared-share-modal/index.ts create mode 100644 client/src/app/shared/shared-share-modal/shared-share-modal.module.ts create mode 100644 client/src/app/shared/shared-share-modal/video-share.component.html create mode 100644 client/src/app/shared/shared-share-modal/video-share.component.scss create mode 100644 client/src/app/shared/shared-share-modal/video-share.component.ts (limited to 'client/src/app/shared/shared-share-modal') diff --git a/client/src/app/shared/shared-share-modal/index.ts b/client/src/app/shared/shared-share-modal/index.ts new file mode 100644 index 000000000..e13c08acc --- /dev/null +++ b/client/src/app/shared/shared-share-modal/index.ts @@ -0,0 +1,3 @@ +export * from './video-share.component' + +export * from './shared-share-modal.module' diff --git a/client/src/app/shared/shared-share-modal/shared-share-modal.module.ts b/client/src/app/shared/shared-share-modal/shared-share-modal.module.ts new file mode 100644 index 000000000..e269eecac --- /dev/null +++ b/client/src/app/shared/shared-share-modal/shared-share-modal.module.ts @@ -0,0 +1,27 @@ +import { QRCodeModule } from 'angularx-qrcode' +import { NgModule } from '@angular/core' +import { SharedFormModule } from '../shared-forms' +import { SharedGlobalIconModule } from '../shared-icons' +import { SharedMainModule } from '../shared-main/shared-main.module' +import { VideoShareComponent } from './video-share.component' + +@NgModule({ + imports: [ + QRCodeModule, + + SharedMainModule, + SharedFormModule, + SharedGlobalIconModule + ], + + declarations: [ + VideoShareComponent + ], + + exports: [ + VideoShareComponent + ], + + providers: [ ] +}) +export class SharedShareModal { } diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html new file mode 100644 index 000000000..4174458b5 --- /dev/null +++ b/client/src/app/shared/shared-share-modal/video-share.component.html @@ -0,0 +1,232 @@ + +
+

Share

+ +
+ + +
+ +
+
Share the playlist
+ +
+ + + URL + + +
+ + +
+ + + + + QR-Code + + +
+ +
+ + + + + Embed + + +
+ + +
+ The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites). +
+
+ + + +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+
Share the video
+ +
+ + + URL + + +
+ +
+ + + + + QR-Code + + +
+ +
+ + + + + Embed + + +
+ + +
+ The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites). +
+
+ + + +
+ +
+ +
+
+
+ + + + +
+ +
+ + +
+ +
+
+
+ +
+
+
+ + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + + + + More customization + + + + + + + + Less customization + + +
+
+
+
+ + diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss new file mode 100644 index 000000000..091d4dc3b --- /dev/null +++ b/client/src/app/shared/shared-share-modal/video-share.component.scss @@ -0,0 +1,79 @@ +@import '_mixins'; +@import '_variables'; + +my-input-readonly-copy { + width: 100%; +} + +.title-page.title-page-single { + margin-top: 0; +} + +.playlist { + margin-bottom: 50px; +} + +.peertube-select-container { + @include peertube-select-container(200px); +} + +.qr-code-group { + text-align: center; +} + +.nav-content { + margin-top: 30px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.alert { + margin-top: 20px; +} + +.filters { + margin-top: 30px; + + .advanced-filters-button { + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; + font-size: 16px; + font-weight: $font-semibold; + cursor: pointer; + + .glyphicon { + margin-right: 5px; + } + } + + .form-group { + margin-bottom: 0; + height: 34px; + display: flex; + align-items: center; + } + + .video-caption-block { + display: flex; + align-items: center; + + .peertube-select-container { + margin-left: 10px; + } + } + + .start-at, + .stop-at { + width: 300px; + display: flex; + align-items: center; + + my-timestamp-input { + margin-left: 10px; + } + } +} diff --git a/client/src/app/shared/shared-share-modal/video-share.component.ts b/client/src/app/shared/shared-share-modal/video-share.component.ts new file mode 100644 index 000000000..8d8e8a3a5 --- /dev/null +++ b/client/src/app/shared/shared-share-modal/video-share.component.ts @@ -0,0 +1,148 @@ +import { Component, ElementRef, Input, ViewChild } from '@angular/core' +import { VideoDetails } from '@app/shared/shared-main' +import { VideoPlaylist } from '@app/shared/shared-video-playlist' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' +import { VideoCaption } from '@shared/models' +import { buildPlaylistLink, buildVideoLink, buildVideoOrPlaylistEmbed } from '../../../assets/player/utils' + +type Customizations = { + startAtCheckbox: boolean + startAt: number + + stopAtCheckbox: boolean + stopAt: number + + subtitleCheckbox: boolean + subtitle: string + + loop: boolean + autoplay: boolean + muted: boolean + title: boolean + warningTitle: boolean + controls: boolean + peertubeLink: boolean +} + +type TabId = 'url' | 'qrcode' | 'embed' + +@Component({ + selector: 'my-video-share', + templateUrl: './video-share.component.html', + styleUrls: [ './video-share.component.scss' ] +}) +export class VideoShareComponent { + @ViewChild('modal', { static: true }) modal: ElementRef + + @Input() video: VideoDetails = null + @Input() videoCaptions: VideoCaption[] = [] + @Input() playlist: VideoPlaylist = null + + activeVideoId: TabId = 'url' + activePlaylistId: TabId = 'url' + + customizations: Customizations + isAdvancedCustomizationCollapsed = true + includeVideoInPlaylist = false + + private playlistPosition: number = null + + constructor (private modalService: NgbModal) { } + + show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) { + let subtitle: string + if (this.videoCaptions && this.videoCaptions.length !== 0) { + subtitle = this.videoCaptions[0].language.id + } + + this.customizations = { + startAtCheckbox: false, + startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0, + + stopAtCheckbox: false, + stopAt: this.video?.duration, + + subtitleCheckbox: false, + subtitle, + + loop: false, + autoplay: false, + muted: false, + + // Embed options + title: true, + warningTitle: true, + controls: true, + peertubeLink: true + } + + this.playlistPosition = currentPlaylistPosition + + this.modalService.open(this.modal, { centered: true }) + } + + getVideoIframeCode () { + const options = this.getVideoOptions(this.video.embedUrl) + + const embedUrl = buildVideoLink(options) + return buildVideoOrPlaylistEmbed(embedUrl) + } + + getPlaylistIframeCode () { + const options = this.getPlaylistOptions(this.playlist.embedUrl) + + const embedUrl = buildPlaylistLink(options) + return buildVideoOrPlaylistEmbed(embedUrl) + } + + getVideoUrl () { + const baseUrl = window.location.origin + '/videos/watch/' + this.video.uuid + const options = this.getVideoOptions(baseUrl) + + return buildVideoLink(options) + } + + getPlaylistUrl () { + const base = window.location.origin + '/videos/watch/playlist/' + this.playlist.uuid + + if (!this.includeVideoInPlaylist) return base + + return base + '?videoId=' + this.video.uuid + } + + notSecure () { + return window.location.protocol === 'http:' + } + + isVideoInEmbedTab () { + return this.activeVideoId === 'embed' + } + + private getPlaylistOptions (baseUrl?: string) { + return { + baseUrl, + + playlistPosition: this.playlistPosition || undefined + } + } + + private getVideoOptions (baseUrl?: string) { + return { + baseUrl, + + startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined, + stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined, + + subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined, + + loop: this.customizations.loop, + autoplay: this.customizations.autoplay, + muted: this.customizations.muted, + + title: this.customizations.title, + warningTitle: this.customizations.warningTitle, + controls: this.customizations.controls, + peertubeLink: this.customizations.peertubeLink + } + } +} -- cgit v1.2.3