From e2f01c47e08d26a30ad47068d195b3d21d0df8a1 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 13 Mar 2019 14:18:58 +0100 Subject: [PATCH] Playlist support in watch page --- ...unt-video-playlist-elements.component.html | 57 +---- ...unt-video-playlist-elements.component.scss | 94 --------- ...count-video-playlist-elements.component.ts | 102 +-------- .../shared/images/global-icon.component.ts | 3 +- client/src/app/shared/shared.module.ts | 3 + ...-playlist-element-miniature.component.html | 73 +++++++ ...-playlist-element-miniature.component.scss | 124 +++++++++++ ...eo-playlist-element-miniature.component.ts | 149 +++++++++++++ .../video/infinite-scroller.directive.ts | 3 +- .../video/video-thumbnail.component.html | 2 +- .../shared/video/video-thumbnail.component.ts | 11 +- .../video-watch-routing.module.ts | 8 +- .../+video-watch/video-watch.component.html | 34 ++- .../+video-watch/video-watch.component.scss | 54 ++++- .../+video-watch/video-watch.component.ts | 197 +++++++++++++++--- client/src/assets/images/global/play.html | 9 + .../p2p-media-loader-plugin.ts | 12 +- client/src/assets/player/peertube-plugin.ts | 10 +- client/src/sass/include/_miniature.scss | 13 +- client/src/sass/include/_mixins.scss | 4 +- 20 files changed, 668 insertions(+), 294 deletions(-) create mode 100644 client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html create mode 100644 client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss create mode 100644 client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts create mode 100644 client/src/assets/images/global/play.html diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html index 67a8b1a91..bc26e198e 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html @@ -5,60 +5,7 @@ cdkDropList (cdkDropListDropped)="drop($event)" >
-
{{ video.playlistElement.position }}
- - - -
- {{ video.name }} - - {{ formatTimestamp(video)}} -
- -
- - -
-
- Edit starts/stops at -
- -
-
- - - -
- -
- - - -
- - -
- - - Delete from {{playlist?.displayName}} - -
-
+ +
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss index 4ac89d08f..b05af0490 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss @@ -2,100 +2,6 @@ @import '_mixins'; @import '_miniature'; -.video, .cdk-drag-preview { - display: flex; - align-items: center; - background-color: var(--mainBackgroundColor); - cursor: pointer; - padding: 10px; - border-bottom: 1px solid $separator-border-color; - - &:hover { - background-color: rgba(0, 0, 0, 0.05); - - .more { - display: block; - } - } - - .position { - font-weight: $font-semibold; - margin-right: 10px; - color: $grey-foreground-color; - min-width: 20px; - } - - my-video-thumbnail { - display: flex; // Avoids an issue with line-height that adds space below the element - margin-right: 10px; - - /deep/ .video-thumbnail { - @include miniature-thumbnail(130px, 72px); - } - } - - .video-info { - display: flex; - flex-direction: column; - - a { - @include disable-default-a-behaviour; - - color: var(--mainForegroundColor); - } - - .video-info-name { - font-size: 18px; - font-weight: $font-semibold; - } - - .video-info-account, .video-info-timestamp { - color: $grey-foreground-color; - } - } - - .more { - justify-self: flex-end; - margin-left: auto; - cursor: pointer; - display: none; - - &.show { - display: block; - } - - .icon-more { - @include apply-svg-color($grey-foreground-color); - - &::after { - border: none; - } - } - - .dropdown-item { - @include dropdown-with-icon-item; - } - - .timestamp-options { - padding-top: 0; - padding-left: 35px; - margin-bottom: 15px; - - > div { - display: flex; - align-items: center; - } - - input { - @include peertube-button; - @include orange-button; - - margin-top: 10px; - } - } - } -} - // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples .cdk-drag-preview { box-sizing: border-box; diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts index 4076a3721..dcf470be3 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core' +import { Component, OnDestroy, OnInit } from '@angular/core' import { Notifier, ServerService } from '@app/core' import { AuthService } from '../../core/auth' import { ConfirmService } from '../../core/confirm' @@ -10,9 +10,6 @@ import { VideoService } from '@app/shared/video/video.service' import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' import { I18n } from '@ngx-translate/i18n-polyfill' -import { secondsToTime } from '../../../assets/player/utils' -import { VideoPlaylistElementUpdate } from '@shared/models' -import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap' import { CdkDragDrop, CdkDragMove } from '@angular/cdk/drag-drop' import { throttleTime } from 'rxjs/operators' @@ -22,8 +19,6 @@ import { throttleTime } from 'rxjs/operators' styleUrls: [ './my-account-video-playlist-elements.component.scss' ] }) export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestroy { - @ViewChild('moreDropdown') moreDropdown: NgbDropdown - videos: Video[] = [] playlist: VideoPlaylist @@ -33,15 +28,6 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro totalItems: null } - displayTimestampOptions = false - - timestampOptions: { - startTimestampEnabled: boolean - startTimestamp: number - stopTimestampEnabled: boolean - stopTimestamp: number - } = {} as any - private videoPlaylistId: string | number private paramsSub: Subscription private dragMoveSubject = new Subject() @@ -124,45 +110,9 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro // } } - isVideoBlur (video: Video) { - return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig()) - } - - removeFromPlaylist (video: Video) { - this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, video.id) - .subscribe( - () => { - this.notifier.success(this.i18n('Video removed from {{name}}', { name: this.playlist.displayName })) - - this.videos = this.videos.filter(v => v.id !== video.id) - this.reorderClientPositions() - }, - - err => this.notifier.error(err.message) - ) - - this.moreDropdown.close() - } - - updateTimestamps (video: Video) { - const body: VideoPlaylistElementUpdate = {} - - body.startTimestamp = this.timestampOptions.startTimestampEnabled ? this.timestampOptions.startTimestamp : null - body.stopTimestamp = this.timestampOptions.stopTimestampEnabled ? this.timestampOptions.stopTimestamp : null - - this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, video.id, body) - .subscribe( - () => { - this.notifier.success(this.i18n('Timestamps updated')) - - video.playlistElement.startTimestamp = body.startTimestamp - video.playlistElement.stopTimestamp = body.stopTimestamp - }, - - err => this.notifier.error(err.message) - ) - - this.moreDropdown.close() + onElementRemoved (video: Video) { + this.videos = this.videos.filter(v => v.id !== video.id) + this.reorderClientPositions() } onNearOfBottom () { @@ -173,50 +123,6 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro this.loadElements() } - formatTimestamp (video: Video) { - const start = video.playlistElement.startTimestamp - const stop = video.playlistElement.stopTimestamp - - const startFormatted = secondsToTime(start, true, ':') - const stopFormatted = secondsToTime(stop, true, ':') - - if (start === null && stop === null) return '' - - if (start !== null && stop === null) return this.i18n('Starts at ') + startFormatted - if (start === null && stop !== null) return this.i18n('Stops at ') + stopFormatted - - return this.i18n('Starts at ') + startFormatted + this.i18n(' and stops at ') + stopFormatted - } - - onDropdownOpenChange () { - this.displayTimestampOptions = false - } - - toggleDisplayTimestampsOptions (event: Event, video: Video) { - event.preventDefault() - - this.displayTimestampOptions = !this.displayTimestampOptions - - if (this.displayTimestampOptions === true) { - this.timestampOptions = { - startTimestampEnabled: false, - stopTimestampEnabled: false, - startTimestamp: 0, - stopTimestamp: video.duration - } - - if (video.playlistElement.startTimestamp) { - this.timestampOptions.startTimestampEnabled = true - this.timestampOptions.startTimestamp = video.playlistElement.startTimestamp - } - - if (video.playlistElement.stopTimestamp) { - this.timestampOptions.stopTimestampEnabled = true - this.timestampOptions.stopTimestamp = video.playlistElement.stopTimestamp - } - } - } - private loadElements () { this.videoService.getPlaylistVideos(this.videoPlaylistId, this.pagination) .subscribe(({ totalVideos, videos }) => { diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts index 093e88033..3fa6fea96 100644 --- a/client/src/app/shared/images/global-icon.component.ts +++ b/client/src/app/shared/images/global-icon.component.ts @@ -27,7 +27,8 @@ const icons = { 'more-vertical': require('../../../assets/images/global/more-vertical.html'), 'share': require('../../../assets/images/video/share.html'), 'upload': require('../../../assets/images/video/upload.html'), - 'playlist-add': require('../../../assets/images/video/playlist-add.html') + 'playlist-add': require('../../../assets/images/video/playlist-add.html'), + 'play': require('../../../assets/images/global/play.html') } export type GlobalIconName = keyof typeof icons diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 05da0d829..3647fc786 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -77,6 +77,7 @@ import { GlobalIconComponent } from '@app/shared/images/global-icon.component' import { VideoPlaylistMiniatureComponent } from '@app/shared/video-playlist/video-playlist-miniature.component' import { VideoAddToPlaylistComponent } from '@app/shared/video-playlist/video-add-to-playlist.component' import { TimestampInputComponent } from '@app/shared/forms/timestamp-input.component' +import { VideoPlaylistElementMiniatureComponent } from '@app/shared/video-playlist/video-playlist-element-miniature.component' @NgModule({ imports: [ @@ -105,6 +106,7 @@ import { TimestampInputComponent } from '@app/shared/forms/timestamp-input.compo VideoMiniatureComponent, VideoPlaylistMiniatureComponent, VideoAddToPlaylistComponent, + VideoPlaylistElementMiniatureComponent, FeedComponent, @@ -163,6 +165,7 @@ import { TimestampInputComponent } from '@app/shared/forms/timestamp-input.compo VideoMiniatureComponent, VideoPlaylistMiniatureComponent, VideoAddToPlaylistComponent, + VideoPlaylistElementMiniatureComponent, FeedComponent, diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html new file mode 100644 index 000000000..1f178675f --- /dev/null +++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html @@ -0,0 +1,73 @@ +
+ +
+ + {{ video.playlistElement.position }} +
+ + + +
+ {{ video.name }} + + + + + {{ formatTimestamp(video)}} +
+ + +
+ + +
+
+ + Edit starts/stops at +
+ +
+
+ + + +
+ +
+ + + +
+ + +
+ + + Delete from {{playlist?.displayName}} + +
+
+
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss new file mode 100644 index 000000000..eb869f69a --- /dev/null +++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss @@ -0,0 +1,124 @@ +@import '_variables'; +@import '_mixins'; +@import '_miniature'; + +.video { + display: flex; + align-items: center; + background-color: var(--mainBackgroundColor); + padding: 10px; + border-bottom: 1px solid $separator-border-color; + + &:hover { + background-color: rgba(0, 0, 0, 0.05); + + .more { + display: block; + } + } + + &.playing { + background-color: rgba(0, 0, 0, 0.02); + } + + a { + @include disable-default-a-behaviour; + + min-width: 0; + display: flex; + align-items: center; + cursor: pointer; + flex-grow: 1; + + .position { + font-weight: $font-semibold; + margin-right: 10px; + color: $grey-foreground-color; + min-width: 20px; + + my-global-icon { + @include apply-svg-color($grey-foreground-color); + + width: 17px; + position: relative; + left: -2px; + } + } + + my-video-thumbnail { + @include thumbnail-size-component(130px, 72px); + + display: flex; // Avoids an issue with line-height that adds space below the element + margin-right: 10px; + } + + .video-info { + display: flex; + flex-direction: column; + min-width: 0; + + a { + color: var(--mainForegroundColor); + width: fit-content; + + &:hover { + text-decoration: underline !important; + } + } + + .video-info-name { + font-size: 18px; + font-weight: $font-semibold; + + @include ellipsis; + } + + .video-info-account, .video-info-timestamp { + color: $grey-foreground-color; + } + } + } + + .more { + justify-self: flex-end; + margin-left: auto; + cursor: pointer; + display: none; + + &.show { + display: block; + } + + .icon-more { + @include apply-svg-color($grey-foreground-color); + + display: flex; + + &::after { + border: none; + } + } + + .dropdown-item { + @include dropdown-with-icon-item; + } + + .timestamp-options { + padding-top: 0; + padding-left: 35px; + margin-bottom: 15px; + + > div { + display: flex; + align-items: center; + } + + input { + @include peertube-button; + @include orange-button; + + margin-top: 10px; + } + } + } +} diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts new file mode 100644 index 000000000..c0cfd855d --- /dev/null +++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts @@ -0,0 +1,149 @@ +import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core' +import { Video } from '@app/shared/video/video.model' +import { VideoPlaylistElementUpdate } from '@shared/models' +import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core' +import { ActivatedRoute } from '@angular/router' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { VideoService } from '@app/shared/video/video.service' +import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' +import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap' +import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' +import { secondsToTime } from '../../../assets/player/utils' + +@Component({ + selector: 'my-video-playlist-element-miniature', + styleUrls: [ './video-playlist-element-miniature.component.scss' ], + templateUrl: './video-playlist-element-miniature.component.html' +}) +export class VideoPlaylistElementMiniatureComponent { + @ViewChild('moreDropdown') moreDropdown: NgbDropdown + + @Input() playlist: VideoPlaylist + @Input() video: Video + @Input() owned = false + @Input() playing = false + @Input() rowLink = false + @Input() accountLink = true + + @Output() elementRemoved = new EventEmitter