From c5a1ae500e68b759f76851552be6dd10631d34f4 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 11 Mar 2019 16:23:33 +0100 Subject: Playlist videos component --- ...-account-video-playlist-elements.component.html | 57 ++++++++-- ...-account-video-playlist-elements.component.scss | 94 ++++++++++++++++ ...my-account-video-playlist-elements.component.ts | 120 ++++++++++++++++++++- 3 files changed, 262 insertions(+), 9 deletions(-) (limited to 'client/src/app/+my-account') 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 28ea7a857..e2d09a36d 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 @@ -1,16 +1,61 @@ -
No videos in this playlist.
+
No videos in this playlist.
- +
{{ video.playlistElement.position }}
-
-
{{ video.playlistElement.position }}
- - {{ video.name }} + +
{{ 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 5e6774739..3be10078e 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 @@ -1,2 +1,96 @@ @import '_variables'; @import '_mixins'; +@import '_miniature'; + +.videos { + .video { + display: flex; + align-items: center; + 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; + } + + 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; + } + } + } + } +} 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 8b70a9b1a..76aff3d4f 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,5 +1,5 @@ -import { Component, OnDestroy, OnInit } from '@angular/core' -import { Notifier } from '@app/core' +import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core' +import { Notifier, ServerService } from '@app/core' import { AuthService } from '../../core/auth' import { ConfirmService } from '../../core/confirm' import { ComponentPagination } from '@app/shared/rest/component-pagination.model' @@ -7,6 +7,12 @@ import { Video } from '@app/shared/video/video.model' import { Subscription } from 'rxjs' import { ActivatedRoute } from '@angular/router' 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' @Component({ selector: 'my-account-video-playlist-elements', @@ -14,7 +20,10 @@ import { VideoService } from '@app/shared/video/video.service' styleUrls: [ './my-account-video-playlist-elements.component.scss' ] }) export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestroy { + @ViewChild('moreDropdown') moreDropdown: NgbDropdown + videos: Video[] = [] + playlist: VideoPlaylist pagination: ComponentPagination = { currentPage: 1, @@ -22,21 +31,35 @@ 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 constructor ( private authService: AuthService, + private serverService: ServerService, private notifier: Notifier, private confirmService: ConfirmService, private route: ActivatedRoute, - private videoService: VideoService + private i18n: I18n, + private videoService: VideoService, + private videoPlaylistService: VideoPlaylistService ) {} ngOnInit () { this.paramsSub = this.route.params.subscribe(routeParams => { this.videoPlaylistId = routeParams[ 'videoPlaylistId' ] this.loadElements() + + this.loadPlaylistInfo() }) } @@ -44,6 +67,46 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro if (this.paramsSub) this.paramsSub.unsubscribe() } + 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) + }, + + 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() + } + onNearOfBottom () { // Last page if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return @@ -52,6 +115,50 @@ 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 }) => { @@ -59,4 +166,11 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro this.pagination.totalItems = totalVideos }) } + + private loadPlaylistInfo () { + this.videoPlaylistService.getVideoPlaylist(this.videoPlaylistId) + .subscribe(playlist => { + this.playlist = playlist + }) + } } -- cgit v1.2.3