From f0a3988066f72a28bb44520af072f18d91d77dde Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 7 Mar 2019 17:06:00 +0100 Subject: [PATCH] Add to playlist dropdown --- CREDITS.md | 7 +- .../+my-account/my-account-routing.module.ts | 12 ++ ...nt-notification-preferences.component.scss | 2 +- ...account-video-playlist-edit.component.html | 1 + ...unt-video-playlist-elements.component.html | 16 ++ ...unt-video-playlist-elements.component.scss | 2 + ...count-video-playlist-elements.component.ts | 62 ++++++ .../my-account-video-playlists.component.html | 4 +- .../my-account-video-playlists.component.ts | 17 +- .../src/app/+my-account/my-account.module.ts | 6 +- .../forms/timestamp-input.component.html | 4 + .../forms/timestamp-input.component.scss | 8 + .../shared/forms/timestamp-input.component.ts | 61 ++++++ .../shared/images/global-icon.component.html | 0 .../shared/images/global-icon.component.ts | 3 +- client/src/app/shared/shared.module.ts | 20 ++ .../subscribe-button.component.ts | 2 +- .../user-subscription.service.ts | 6 +- .../users/user-notifications.component.scss | 2 +- .../video-add-to-playlist.component.html | 74 +++++++ .../video-add-to-playlist.component.scss | 98 +++++++++ .../video-add-to-playlist.component.ts | 195 ++++++++++++++++++ .../video-playlist-miniature.component.html | 6 +- .../video-playlist-miniature.component.scss | 11 + .../video-playlist-miniature.component.ts | 8 + .../video-playlist/video-playlist.model.ts | 5 + .../video-playlist/video-playlist.service.ts | 77 ++++++- client/src/app/shared/video/video.service.ts | 19 ++ .../modal/video-share.component.html | 12 +- .../modal/video-share.component.scss | 5 + .../modal/video-share.component.ts | 11 +- .../video-watch-routing.module.ts | 11 +- .../+video-watch/video-watch.component.html | 20 +- .../+video-watch/video-watch.component.scss | 11 +- .../+video-watch/video-watch.component.ts | 14 +- .../src/app/videos/videos-routing.module.ts | 6 +- client/src/assets/images/global/add.html | 6 +- .../src/assets/images/video/playlist-add.html | 10 + .../src/assets/images/video/watch-later.html | 11 + .../assets/player/peertube-player-manager.ts | 9 +- client/src/assets/player/peertube-plugin.ts | 16 +- .../assets/player/peertube-videojs-typings.ts | 7 +- client/src/assets/player/utils.ts | 20 +- .../player/webtorrent/webtorrent-plugin.ts | 4 +- client/src/sass/include/_mixins.scss | 1 - client/src/sass/include/_variables.scss | 2 + client/src/standalone/videos/embed.ts | 3 + server/controllers/api/users/index.ts | 2 + .../api/users/my-video-playlists.ts | 47 +++++ server/controllers/api/video-playlist.ts | 34 ++- server/helpers/custom-validators/misc.ts | 10 +- server/initializers/constants.ts | 2 +- .../validators/videos/video-playlists.ts | 23 ++- server/models/video/video-playlist.ts | 23 +++ .../playlist/video-exist-in-playlist.model.ts | 7 + 55 files changed, 961 insertions(+), 94 deletions(-) create mode 100644 client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html create mode 100644 client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss create mode 100644 client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts create mode 100644 client/src/app/shared/forms/timestamp-input.component.html create mode 100644 client/src/app/shared/forms/timestamp-input.component.scss create mode 100644 client/src/app/shared/forms/timestamp-input.component.ts delete mode 100644 client/src/app/shared/images/global-icon.component.html create mode 100644 client/src/app/shared/video-playlist/video-add-to-playlist.component.html create mode 100644 client/src/app/shared/video-playlist/video-add-to-playlist.component.scss create mode 100644 client/src/app/shared/video-playlist/video-add-to-playlist.component.ts create mode 100644 client/src/assets/images/video/playlist-add.html create mode 100644 client/src/assets/images/video/watch-later.html create mode 100644 server/controllers/api/users/my-video-playlists.ts create mode 100644 shared/models/videos/playlist/video-exist-in-playlist.model.ts diff --git a/CREDITS.md b/CREDITS.md index 716f3fca2..1f7aaad7a 100644 --- a/CREDITS.md +++ b/CREDITS.md @@ -206,6 +206,9 @@ # Design -By [Olivier Massain](https://twitter.com/omassain) + * [Olivier Massain](https://twitter.com/omassain) -Icons from [Robbie Pearce](https://robbiepearce.com/softies/) +# Icons + + * [Robbie Pearce](https://robbiepearce.com/softies/) + * playlist add by Google diff --git a/client/src/app/+my-account/my-account-routing.module.ts b/client/src/app/+my-account/my-account-routing.module.ts index 0193afff7..3f921b13f 100644 --- a/client/src/app/+my-account/my-account-routing.module.ts +++ b/client/src/app/+my-account/my-account-routing.module.ts @@ -22,6 +22,9 @@ import { import { MyAccountVideoPlaylistUpdateComponent } from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component' +import { + MyAccountVideoPlaylistElementsComponent +} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component' const myAccountRoutes: Routes = [ { @@ -81,6 +84,15 @@ const myAccountRoutes: Routes = [ } } }, + { + path: 'video-playlists/:videoPlaylistId', + component: MyAccountVideoPlaylistElementsComponent, + data: { + meta: { + title: 'Playlist elements' + } + } + }, { path: 'video-playlists/create', component: MyAccountVideoPlaylistCreateComponent, diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss index 6feb16ab1..0274f47c5 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss @@ -4,7 +4,7 @@ .custom-row { display: flex; align-items: center; - border-bottom: 1px solid rgba(0, 0, 0, 0.10); + border-bottom: 1px solid $separator-border-color; &:first-child { font-size: 16px; diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html index b76488c78..5d1184218 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html @@ -60,5 +60,6 @@ + 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 new file mode 100644 index 000000000..28ea7a857 --- /dev/null +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html @@ -0,0 +1,16 @@ +
No videos in this playlist.
+ +
+
+ + +
+
{{ video.playlistElement.position }}
+ + {{ video.name }} + + {{ video.name }} + +
+
+
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 new file mode 100644 index 000000000..5e6774739 --- /dev/null +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss @@ -0,0 +1,2 @@ +@import '_variables'; +@import '_mixins'; 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 new file mode 100644 index 000000000..8b70a9b1a --- /dev/null +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts @@ -0,0 +1,62 @@ +import { Component, OnDestroy, OnInit } from '@angular/core' +import { Notifier } from '@app/core' +import { AuthService } from '../../core/auth' +import { ConfirmService } from '../../core/confirm' +import { ComponentPagination } from '@app/shared/rest/component-pagination.model' +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' + +@Component({ + selector: 'my-account-video-playlist-elements', + templateUrl: './my-account-video-playlist-elements.component.html', + styleUrls: [ './my-account-video-playlist-elements.component.scss' ] +}) +export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestroy { + videos: Video[] = [] + + pagination: ComponentPagination = { + currentPage: 1, + itemsPerPage: 10, + totalItems: null + } + + private videoPlaylistId: string | number + private paramsSub: Subscription + + constructor ( + private authService: AuthService, + private notifier: Notifier, + private confirmService: ConfirmService, + private route: ActivatedRoute, + private videoService: VideoService + ) {} + + ngOnInit () { + this.paramsSub = this.route.params.subscribe(routeParams => { + this.videoPlaylistId = routeParams[ 'videoPlaylistId' ] + this.loadElements() + }) + } + + ngOnDestroy () { + if (this.paramsSub) this.paramsSub.unsubscribe() + } + + onNearOfBottom () { + // Last page + if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return + + this.pagination.currentPage += 1 + this.loadElements() + } + + private loadElements () { + this.videoService.getPlaylistVideos(this.videoPlaylistId, this.pagination) + .subscribe(({ totalVideos, videos }) => { + this.videos = this.videos.concat(videos) + this.pagination.totalItems = totalVideos + }) + } +} diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html index ab5d9cc5a..7d1bed12a 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html @@ -5,10 +5,10 @@ -
+
- +
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts index 761ce90e8..e30656b92 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts @@ -69,17 +69,20 @@ export class MyAccountVideoPlaylistsComponent implements OnInit { return playlist.type.id === VideoPlaylistType.REGULAR } - private loadVideoPlaylists () { - this.authService.userInformationLoaded - .pipe(flatMap(() => this.videoPlaylistService.listAccountPlaylists(this.user.account))) - .subscribe(res => this.videoPlaylists = res.data) - } - - private ofNearOfBottom () { + onNearOfBottom () { // Last page if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return this.pagination.currentPage += 1 this.loadVideoPlaylists() } + + private loadVideoPlaylists () { + this.authService.userInformationLoaded + .pipe(flatMap(() => this.videoPlaylistService.listAccountPlaylists(this.user.account, '-updatedAt'))) + .subscribe(res => { + this.videoPlaylists = this.videoPlaylists.concat(res.data) + this.pagination.totalItems = res.total + }) + } } diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts index 3dbce2b92..ba8300111 100644 --- a/client/src/app/+my-account/my-account.module.ts +++ b/client/src/app/+my-account/my-account.module.ts @@ -32,6 +32,9 @@ import { MyAccountVideoPlaylistUpdateComponent } from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component' import { MyAccountVideoPlaylistsComponent } from '@app/+my-account/my-account-video-playlists/my-account-video-playlists.component' +import { + MyAccountVideoPlaylistElementsComponent +} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component' @NgModule({ imports: [ @@ -68,7 +71,8 @@ import { MyAccountVideoPlaylistsComponent } from '@app/+my-account/my-account-vi MyAccountVideoPlaylistCreateComponent, MyAccountVideoPlaylistUpdateComponent, - MyAccountVideoPlaylistsComponent + MyAccountVideoPlaylistsComponent, + MyAccountVideoPlaylistElementsComponent ], exports: [ diff --git a/client/src/app/shared/forms/timestamp-input.component.html b/client/src/app/shared/forms/timestamp-input.component.html new file mode 100644 index 000000000..c57a4b32c --- /dev/null +++ b/client/src/app/shared/forms/timestamp-input.component.html @@ -0,0 +1,4 @@ + diff --git a/client/src/app/shared/forms/timestamp-input.component.scss b/client/src/app/shared/forms/timestamp-input.component.scss new file mode 100644 index 000000000..7115777fd --- /dev/null +++ b/client/src/app/shared/forms/timestamp-input.component.scss @@ -0,0 +1,8 @@ +p-inputmask { + /deep/ input { + width: 80px; + font-size: 15px; + + border: none; + } +} diff --git a/client/src/app/shared/forms/timestamp-input.component.ts b/client/src/app/shared/forms/timestamp-input.component.ts new file mode 100644 index 000000000..8d67a96ac --- /dev/null +++ b/client/src/app/shared/forms/timestamp-input.component.ts @@ -0,0 +1,61 @@ +import { ChangeDetectorRef, Component, forwardRef, Input, OnInit } from '@angular/core' +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' +import { secondsToTime, timeToInt } from '../../../assets/player/utils' + +@Component({ + selector: 'my-timestamp-input', + styleUrls: [ './timestamp-input.component.scss' ], + templateUrl: './timestamp-input.component.html', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => TimestampInputComponent), + multi: true + } + ] +}) +export class TimestampInputComponent implements ControlValueAccessor, OnInit { + @Input() maxTimestamp: number + @Input() timestamp: number + @Input() disabled = false + + timestampString: string + + constructor (private changeDetector: ChangeDetectorRef) {} + + ngOnInit () { + this.writeValue(this.timestamp || 0) + } + + propagateChange = (_: any) => { /* empty */ } + + writeValue (timestamp: number) { + this.timestamp = timestamp + + this.timestampString = secondsToTime(this.timestamp, true, ':') + } + + registerOnChange (fn: (_: any) => void) { + this.propagateChange = fn + } + + registerOnTouched () { + // Unused + } + + onModelChange () { + this.timestamp = timeToInt(this.timestampString) + + this.propagateChange(this.timestamp) + } + + onBlur () { + if (this.maxTimestamp && this.timestamp > this.maxTimestamp) { + this.writeValue(this.maxTimestamp) + + this.changeDetector.detectChanges() + + this.propagateChange(this.timestamp) + } + } +} diff --git a/client/src/app/shared/images/global-icon.component.html b/client/src/app/shared/images/global-icon.component.html deleted file mode 100644 index e69de29bb..000000000 diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts index e8ada0324..3fda7ee4d 100644 --- a/client/src/app/shared/images/global-icon.component.ts +++ b/client/src/app/shared/images/global-icon.component.ts @@ -25,7 +25,8 @@ const icons = { 'like': require('../../../assets/images/video/like.html'), 'more': require('../../../assets/images/video/more.html'), 'share': require('../../../assets/images/video/share.html'), - 'upload': require('../../../assets/images/video/upload.html') + 'upload': require('../../../assets/images/video/upload.html'), + 'playlist-add': require('../../../assets/images/video/playlist-add.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 60a7bd6e2..1f9eee0b7 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -9,6 +9,7 @@ import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.d import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes' import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared' +import { KeyFilterModule } from 'primeng/keyfilter' import { AUTH_INTERCEPTOR_PROVIDER } from './auth' import { ButtonComponent } from './buttons/button.component' @@ -49,6 +50,7 @@ import { VideoValidatorsService } from '@app/shared/forms' import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar' +import { InputMaskModule } from 'primeng/inputmask' import { ScreenService } from '@app/shared/misc/screen.service' import { VideoCaptionsValidatorsService } from '@app/shared/forms/form-validators/video-captions-validators.service' import { VideoCaptionService } from '@app/shared/video-caption' @@ -74,6 +76,8 @@ import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist. import { ImageUploadComponent } from '@app/shared/images/image-upload.component' 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' @NgModule({ imports: [ @@ -90,6 +94,8 @@ import { VideoPlaylistMiniatureComponent } from '@app/shared/video-playlist/vide NgbTooltipModule, PrimeSharedModule, + InputMaskModule, + KeyFilterModule, NgPipesModule ], @@ -100,11 +106,14 @@ import { VideoPlaylistMiniatureComponent } from '@app/shared/video-playlist/vide VideoThumbnailComponent, VideoMiniatureComponent, VideoPlaylistMiniatureComponent, + VideoAddToPlaylistComponent, FeedComponent, + ButtonComponent, DeleteButtonComponent, EditButtonComponent, + ActionDropdownComponent, NumberFormatterPipe, ObjectLengthPipe, @@ -113,8 +122,11 @@ import { VideoPlaylistMiniatureComponent } from '@app/shared/video-playlist/vide InfiniteScrollerDirective, TextareaAutoResizeDirective, HelpComponent, + ReactiveFileComponent, PeertubeCheckboxComponent, + TimestampInputComponent, + SubscribeButtonComponent, RemoteSubscribeComponent, InstanceFeaturesTableComponent, @@ -142,6 +154,8 @@ import { VideoPlaylistMiniatureComponent } from '@app/shared/video-playlist/vide NgbTooltipModule, PrimeSharedModule, + InputMaskModule, + KeyFilterModule, BytesPipe, KeysPipe, @@ -151,18 +165,24 @@ import { VideoPlaylistMiniatureComponent } from '@app/shared/video-playlist/vide VideoThumbnailComponent, VideoMiniatureComponent, VideoPlaylistMiniatureComponent, + VideoAddToPlaylistComponent, FeedComponent, + ButtonComponent, DeleteButtonComponent, EditButtonComponent, + ActionDropdownComponent, MarkdownTextareaComponent, InfiniteScrollerDirective, TextareaAutoResizeDirective, HelpComponent, + ReactiveFileComponent, PeertubeCheckboxComponent, + TimestampInputComponent, + SubscribeButtonComponent, RemoteSubscribeComponent, InstanceFeaturesTableComponent, diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.ts b/client/src/app/shared/user-subscription/subscribe-button.component.ts index 8f1754c7f..ef470ee44 100644 --- a/client/src/app/shared/user-subscription/subscribe-button.component.ts +++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts @@ -38,7 +38,7 @@ export class SubscribeButtonComponent implements OnInit { ngOnInit () { if (this.isUserLoggedIn()) { - this.userSubscriptionService.isSubscriptionExists(this.uri) + this.userSubscriptionService.doesSubscriptionExist(this.uri) .subscribe( res => this.subscribed = res[this.uri], diff --git a/client/src/app/shared/user-subscription/user-subscription.service.ts b/client/src/app/shared/user-subscription/user-subscription.service.ts index 3d05f071e..cfd5b100f 100644 --- a/client/src/app/shared/user-subscription/user-subscription.service.ts +++ b/client/src/app/shared/user-subscription/user-subscription.service.ts @@ -28,7 +28,7 @@ export class UserSubscriptionService { this.existsObservable = this.existsSubject.pipe( bufferTime(500), filter(uris => uris.length !== 0), - switchMap(uris => this.areSubscriptionExist(uris)), + switchMap(uris => this.doSubscriptionsExist(uris)), share() ) } @@ -69,13 +69,13 @@ export class UserSubscriptionService { ) } - isSubscriptionExists (nameWithHost: string) { + doesSubscriptionExist (nameWithHost: string) { this.existsSubject.next(nameWithHost) return this.existsObservable.pipe(first()) } - private areSubscriptionExist (uris: string[]): Observable { + private doSubscriptionsExist (uris: string[]): Observable { const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL + '/exist' let params = new HttpParams() diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss index 315d504c9..88f38d9cf 100644 --- a/client/src/app/shared/users/user-notifications.component.scss +++ b/client/src/app/shared/users/user-notifications.component.scss @@ -13,7 +13,7 @@ align-items: center; font-size: inherit; padding: 15px 5px 15px 10px; - border-bottom: 1px solid rgba(0, 0, 0, 0.10); + border-bottom: 1px solid $separator-border-color; &.unread { background-color: rgba(0, 0, 0, 0.05); diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html new file mode 100644 index 000000000..ed3cd8dc5 --- /dev/null +++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html @@ -0,0 +1,74 @@ +
+
+
Save to
+ +
+ + + Options +
+
+ +
+
+ + + +
+ +
+ + + +
+
+
+ +
+ + +
+ {{ playlist.displayName }} + +
+ {{ formatTimestamp(playlist) }} +
+
+
+ +
+ + + Create a new playlist +
+ +
+
+ + +
+ {{ formErrors['display-name'] }} +
+
+ + +
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss new file mode 100644 index 000000000..68dcda1eb --- /dev/null +++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss @@ -0,0 +1,98 @@ +@import '_variables'; +@import '_mixins'; + +.header { + min-width: 240px; + padding: 6px 24px 10px 24px; + + margin-bottom: 10px; + border-bottom: 1px solid $separator-border-color; + + .first-row { + display: flex; + align-items: center; + + .title { + font-size: 18px; + flex-grow: 1; + } + + .options { + font-size: 14px; + cursor: pointer; + + my-global-icon { + @include apply-svg-color(#333); + + width: 16px; + height: 16px; + } + } + } + + .options-row { + margin-top: 10px; + + > div { + display: flex; + align-items: center; + } + } +} + +.dropdown-item { + padding: 6px 24px; +} + +.playlist { + display: flex; + cursor: pointer; + + my-peertube-checkbox { + margin-right: 10px; + } + + .display-name { + display: flex; + align-items: flex-end; + + .timestamp-info { + font-size: 0.9em; + color: $grey-foreground-color; + margin-left: 5px; + } + } +} + +.new-playlist-button, +.new-playlist-block { + padding-top: 10px; + margin-top: 10px; + border-top: 1px solid $separator-border-color; +} + +.new-playlist-button { + cursor: pointer; + + my-global-icon { + @include apply-svg-color(#333); + + position: relative; + left: -1px; + top: -1px; + margin-right: 4px; + width: 21px; + height: 21px; + } +} + +input[type=text] { + @include peertube-input-text(200px); + + display: block; +} + +input[type=submit] { + @include peertube-button; + @include orange-button; +} diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts new file mode 100644 index 000000000..c6fb6dbed --- /dev/null +++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts @@ -0,0 +1,195 @@ +import { Component, Input, OnInit } from '@angular/core' +import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' +import { AuthService, Notifier } from '@app/core' +import { forkJoin } from 'rxjs' +import { Video, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPrivacy } from '@shared/models' +import { FormReactive, FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/forms' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { secondsToTime, timeToInt } from '../../../assets/player/utils' + +type PlaylistSummary = { + id: number + inPlaylist: boolean + displayName: string + + startTimestamp?: number + stopTimestamp?: number +} + +@Component({ + selector: 'my-video-add-to-playlist', + styleUrls: [ './video-add-to-playlist.component.scss' ], + templateUrl: './video-add-to-playlist.component.html' +}) +export class VideoAddToPlaylistComponent extends FormReactive implements OnInit { + @Input() video: Video + @Input() currentVideoTimestamp: number + + isNewPlaylistBlockOpened = false + videoPlaylists: PlaylistSummary[] = [] + timestampOptions: { + startTimestampEnabled: boolean + startTimestamp: number + stopTimestampEnabled: boolean + stopTimestamp: number + } + displayOptions = false + + constructor ( + protected formValidatorService: FormValidatorService, + private authService: AuthService, + private notifier: Notifier, + private i18n: I18n, + private videoPlaylistService: VideoPlaylistService, + private videoPlaylistValidatorsService: VideoPlaylistValidatorsService + ) { + super() + } + + get user () { + return this.authService.getUser() + } + + ngOnInit () { + this.resetOptions(true) + + this.buildForm({ + 'display-name': this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME + }) + + forkJoin([ + this.videoPlaylistService.listAccountPlaylists(this.user.account, '-updatedAt'), + this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id) + ]) + .subscribe( + ([ playlistsResult, existResult ]) => { + for (const playlist of playlistsResult.data) { + const existingPlaylist = existResult[ this.video.id ].find(p => p.playlistId === playlist.id) + + this.videoPlaylists.push({ + id: playlist.id, + displayName: playlist.displayName, + inPlaylist: !!existingPlaylist, + startTimestamp: existingPlaylist ? existingPlaylist.startTimestamp : undefined, + stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined + }) + } + } + ) + } + + openChange (opened: boolean) { + if (opened === false) { + this.isNewPlaylistBlockOpened = false + this.displayOptions = false + } + } + + openCreateBlock (event: Event) { + event.preventDefault() + + this.isNewPlaylistBlockOpened = true + } + + togglePlaylist (event: Event, playlist: PlaylistSummary) { + event.preventDefault() + + if (playlist.inPlaylist === true) { + this.removeVideoFromPlaylist(playlist) + } else { + this.addVideoInPlaylist(playlist) + } + + playlist.inPlaylist = !playlist.inPlaylist + this.resetOptions() + } + + createPlaylist () { + const displayName = this.form.value[ 'display-name' ] + + const videoPlaylistCreate: VideoPlaylistCreate = { + displayName, + privacy: VideoPlaylistPrivacy.PRIVATE + } + + this.videoPlaylistService.createVideoPlaylist(videoPlaylistCreate).subscribe( + res => { + this.videoPlaylists.push({ + id: res.videoPlaylist.id, + displayName, + inPlaylist: false + }) + + this.isNewPlaylistBlockOpened = false + }, + + err => this.notifier.error(err.message) + ) + } + + resetOptions (resetTimestamp = false) { + this.displayOptions = false + + this.timestampOptions = {} as any + this.timestampOptions.startTimestampEnabled = false + this.timestampOptions.stopTimestampEnabled = false + + if (resetTimestamp) { + this.timestampOptions.startTimestamp = 0 + this.timestampOptions.stopTimestamp = this.video.duration + } + } + + formatTimestamp (playlist: PlaylistSummary) { + const start = playlist.startTimestamp ? secondsToTime(playlist.startTimestamp) : '' + const stop = playlist.stopTimestamp ? secondsToTime(playlist.stopTimestamp) : '' + + return `(${start}-${stop})` + } + + private removeVideoFromPlaylist (playlist: PlaylistSummary) { + this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, this.video.id) + .subscribe( + () => { + this.notifier.success(this.i18n('Video removed from {{name}}', { name: playlist.displayName })) + + playlist.inPlaylist = false + }, + + err => { + this.notifier.error(err.message) + + playlist.inPlaylist = true + } + ) + } + + private addVideoInPlaylist (playlist: PlaylistSummary) { + const body: VideoPlaylistElementCreate = { videoId: this.video.id } + + if (this.timestampOptions.startTimestampEnabled) body.startTimestamp = this.timestampOptions.startTimestamp + if (this.timestampOptions.stopTimestampEnabled) body.stopTimestamp = this.timestampOptions.stopTimestamp + + this.videoPlaylistService.addVideoInPlaylist(playlist.id, body) + .subscribe( + () => { + playlist.inPlaylist = true + + playlist.startTimestamp = body.startTimestamp + playlist.stopTimestamp = body.stopTimestamp + + const message = body.startTimestamp || body.stopTimestamp + ? this.i18n('Video added in {{n}} at timestamps {{t}}', { n: playlist.displayName, t: this.formatTimestamp(playlist) }) + : this.i18n('Video added in {{n}}', { n: playlist.displayName }) + + this.notifier.success(message) + }, + + err => { + this.notifier.error(err.message) + + playlist.inPlaylist = false + } + ) + } +} diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/video-playlist/video-playlist-miniature.component.html index 1a39f5fe5..a136f9233 100644 --- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.html +++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.html @@ -1,6 +1,6 @@ -
+
@@ -15,7 +15,7 @@
- + {{ playlist.displayName }}
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss index a47206577..f8cd47f73 100644 --- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss +++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss @@ -5,6 +5,17 @@ .miniature { display: inline-block; + &.no-videos:not(.to-manage){ + a { + cursor: default !important; + } + } + + &.to-manage .play-overlay, + &.no-videos { + display: none; + } + .miniature-thumbnail { @include miniature-thumbnail; diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-miniature.component.ts index b3bba7c87..cb5803400 100644 --- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.ts +++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.ts @@ -8,4 +8,12 @@ import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' }) export class VideoPlaylistMiniatureComponent { @Input() playlist: VideoPlaylist + @Input() toManage = false + + getPlaylistUrl () { + if (this.toManage) return [ '/my-account/video-playlists', this.playlist.uuid ] + if (this.playlist.videosLength === 0) return null + + return [ '/videos/watch/playlist', this.playlist.uuid ] + } } diff --git a/client/src/app/shared/video-playlist/video-playlist.model.ts b/client/src/app/shared/video-playlist/video-playlist.model.ts index 9d0b02789..ec8013e89 100644 --- a/client/src/app/shared/video-playlist/video-playlist.model.ts +++ b/client/src/app/shared/video-playlist/video-playlist.model.ts @@ -46,6 +46,7 @@ export class VideoPlaylist implements ServerVideoPlaylist { this.isLocal = hash.isLocal this.displayName = hash.displayName + this.description = hash.description this.privacy = hash.privacy @@ -70,5 +71,9 @@ export class VideoPlaylist implements ServerVideoPlaylist { } this.privacy.label = peertubeTranslate(this.privacy.label, translations) + + if (this.type.id === VideoPlaylistType.WATCH_LATER) { + this.displayName = peertubeTranslate(this.displayName, translations) + } } } diff --git a/client/src/app/shared/video-playlist/video-playlist.service.ts b/client/src/app/shared/video-playlist/video-playlist.service.ts index 8b66e122c..f7b37f83a 100644 --- a/client/src/app/shared/video-playlist/video-playlist.service.ts +++ b/client/src/app/shared/video-playlist/video-playlist.service.ts @@ -1,9 +1,9 @@ -import { catchError, map, switchMap } from 'rxjs/operators' +import { bufferTime, catchError, filter, first, map, share, switchMap } from 'rxjs/operators' import { Injectable } from '@angular/core' -import { Observable } from 'rxjs' +import { Observable, ReplaySubject, Subject } from 'rxjs' import { RestExtractor } from '../rest/rest-extractor.service' -import { HttpClient } from '@angular/common/http' -import { ResultList } from '../../../../../shared' +import { HttpClient, HttpParams } from '@angular/common/http' +import { ResultList, VideoPlaylistElementCreate, VideoPlaylistElementUpdate } from '../../../../../shared' import { environment } from '../../../environments/environment' import { VideoPlaylist as VideoPlaylistServerModel } from '@shared/models/videos/playlist/video-playlist.model' import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' @@ -15,16 +15,31 @@ import { ServerService } from '@app/core' import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' import { AccountService } from '@app/shared/account/account.service' import { Account } from '@app/shared/account/account.model' +import { RestService } from '@app/shared/rest' +import { VideoExistInPlaylist } from '@shared/models/videos/playlist/video-exist-in-playlist.model' @Injectable() export class VideoPlaylistService { static BASE_VIDEO_PLAYLIST_URL = environment.apiUrl + '/api/v1/video-playlists/' + static MY_VIDEO_PLAYLIST_URL = environment.apiUrl + '/api/v1/users/me/video-playlists/' + + // Use a replay subject because we "next" a value before subscribing + private videoExistsInPlaylistSubject: Subject = new ReplaySubject(1) + private readonly videoExistsInPlaylistObservable: Observable constructor ( private authHttp: HttpClient, private serverService: ServerService, - private restExtractor: RestExtractor - ) { } + private restExtractor: RestExtractor, + private restService: RestService + ) { + this.videoExistsInPlaylistObservable = this.videoExistsInPlaylistSubject.pipe( + bufferTime(500), + filter(videoIds => videoIds.length !== 0), + switchMap(videoIds => this.doVideosExistInPlaylist(videoIds)), + share() + ) + } listChannelPlaylists (videoChannel: VideoChannel): Observable> { const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.nameWithHost + '/video-playlists' @@ -36,10 +51,13 @@ export class VideoPlaylistService { ) } - listAccountPlaylists (account: Account): Observable> { + listAccountPlaylists (account: Account, sort: string): Observable> { const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-playlists' - return this.authHttp.get>(url) + let params = new HttpParams() + params = this.restService.addRestGetParams(params, undefined, sort) + + return this.authHttp.get>(url, { params }) .pipe( switchMap(res => this.extractPlaylists(res)), catchError(err => this.restExtractor.handleError(err)) @@ -59,9 +77,8 @@ export class VideoPlaylistService { createVideoPlaylist (body: VideoPlaylistCreate) { const data = objectToFormData(body) - return this.authHttp.post(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL, data) + return this.authHttp.post<{ videoPlaylist: { id: number } }>(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL, data) .pipe( - map(this.restExtractor.extractDataBool), catchError(err => this.restExtractor.handleError(err)) ) } @@ -84,6 +101,36 @@ export class VideoPlaylistService { ) } + addVideoInPlaylist (playlistId: number, body: VideoPlaylistElementCreate) { + return this.authHttp.post(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos', body) + .pipe( + map(this.restExtractor.extractDataBool), + catchError(err => this.restExtractor.handleError(err)) + ) + } + + updateVideoOfPlaylist (playlistId: number, videoId: number, body: VideoPlaylistElementUpdate) { + return this.authHttp.put(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/' + videoId, body) + .pipe( + map(this.restExtractor.extractDataBool), + catchError(err => this.restExtractor.handleError(err)) + ) + } + + removeVideoFromPlaylist (playlistId: number, videoId: number) { + return this.authHttp.delete(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + playlistId + '/videos/' + videoId) + .pipe( + map(this.restExtractor.extractDataBool), + catchError(err => this.restExtractor.handleError(err)) + ) + } + + doesVideoExistInPlaylist (videoId: number) { + this.videoExistsInPlaylistSubject.next(videoId) + + return this.videoExistsInPlaylistObservable.pipe(first()) + } + extractPlaylists (result: ResultList) { return this.serverService.localeObservable .pipe( @@ -105,4 +152,14 @@ export class VideoPlaylistService { return this.serverService.localeObservable .pipe(map(translations => new VideoPlaylist(playlist, translations))) } + + private doVideosExistInPlaylist (videoIds: number[]): Observable { + const url = VideoPlaylistService.MY_VIDEO_PLAYLIST_URL + 'videos-exist' + let params = new HttpParams() + + params = this.restService.addObjectParams(params, { videoIds }) + + return this.authHttp.get(url, { params }) + .pipe(catchError(err => this.restExtractor.handleError(err))) + } } diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts index 960846e21..ef489648c 100644 --- a/client/src/app/shared/video/video.service.ts +++ b/client/src/app/shared/video/video.service.ts @@ -31,6 +31,8 @@ import { ServerService } from '@app/core' import { UserSubscriptionService } from '@app/shared/user-subscription/user-subscription.service' import { VideoChannel } from '@app/shared/video-channel/video-channel.model' import { I18n } from '@ngx-translate/i18n-polyfill' +import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' +import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' export interface VideosProvider { getVideos ( @@ -170,6 +172,23 @@ export class VideoService implements VideosProvider { ) } + getPlaylistVideos ( + videoPlaylistId: number | string, + videoPagination: ComponentPagination + ): Observable<{ videos: Video[], totalVideos: number }> { + const pagination = this.restService.componentPaginationToRestPagination(videoPagination) + + let params = new HttpParams() + params = this.restService.addRestGetParams(params, pagination) + + return this.authHttp + .get>(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylistId + '/videos', { params }) + .pipe( + switchMap(res => this.extractVideos(res)), + catchError(err => this.restExtractor.handleError(err)) + ) + } + getUserSubscriptionVideos ( videoPagination: ComponentPagination, sort: VideoSortField diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html index 9f3c37fe8..955b2b80c 100644 --- a/client/src/app/videos/+video-watch/modal/video-share.component.html +++ b/client/src/app/videos/+video-watch/modal/video-share.component.html @@ -6,11 +6,19 @@
-
+
+ + +
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.scss b/client/src/app/videos/+video-watch/modal/video-share.component.scss index 4937506b9..472a45920 100644 --- a/client/src/app/videos/+video-watch/modal/video-share.component.scss +++ b/client/src/app/videos/+video-watch/modal/video-share.component.scss @@ -13,4 +13,9 @@ display: flex; justify-content: center; margin-top: 10px; + align-items: center; + + my-timestamp-input { + margin-left: 10px; + } } diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.ts b/client/src/app/videos/+video-watch/modal/video-share.component.ts index c6205e355..6565d7f88 100644 --- a/client/src/app/videos/+video-watch/modal/video-share.component.ts +++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts @@ -16,10 +16,8 @@ export class VideoShareComponent { @Input() video: VideoDetails = null + currentVideoTimestamp: number startAtCheckbox = false - currentVideoTimestampString: string - - private currentVideoTimestamp: number constructor ( private modalService: NgbModal, @@ -28,8 +26,7 @@ export class VideoShareComponent { ) { } show (currentVideoTimestamp?: number) { - this.currentVideoTimestamp = Math.floor(currentVideoTimestamp) - this.currentVideoTimestampString = durationToString(this.currentVideoTimestamp) + this.currentVideoTimestamp = currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0 this.modalService.open(this.modal) } @@ -52,10 +49,6 @@ export class VideoShareComponent { this.notifier.success(this.i18n('Copied')) } - getStartCheckboxLabel () { - return this.i18n('Start at {{timestamp}}', { timestamp: this.currentVideoTimestampString }) - } - private getVideoTimestampIfEnabled () { if (this.startAtCheckbox === true) return this.currentVideoTimestamp diff --git a/client/src/app/videos/+video-watch/video-watch-routing.module.ts b/client/src/app/videos/+video-watch/video-watch-routing.module.ts index bdd4f945e..0d7809044 100644 --- a/client/src/app/videos/+video-watch/video-watch-routing.module.ts +++ b/client/src/app/videos/+video-watch/video-watch-routing.module.ts @@ -7,7 +7,16 @@ import { VideoWatchComponent } from './video-watch.component' const videoWatchRoutes: Routes = [ { - path: '', + path: 'playlist/:uuid', + component: VideoWatchComponent, + canActivate: [ MetaGuard ] + }, + { + path: ':uuid/comments/:commentId', + redirectTo: ':uuid' + }, + { + path: ':uuid', component: VideoWatchComponent, canActivate: [ MetaGuard ] } diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index fffcc1275..615b88bd6 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -65,17 +65,31 @@
-
+
Support
-
+
Share
-
+
+
+ + Save +
+ +
+ +
+
+ +
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index 33d77e62c..ff321fdbc 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -176,7 +176,7 @@ $other-videos-width: 260px; display: flex; align-items: center; - .action-button:not(:first-child), .action-more { + .action-button:not(:first-child), .action-dropdown { margin-left: 10px; } @@ -212,12 +212,19 @@ $other-videos-width: 260px; } } + &.action-button-save { + my-global-icon { + top: 0 !important; + right: -1px; + } + } + .icon-text { margin-left: 3px; } } - .action-more { + .action-dropdown { display: inline-block; .dropdown-menu .dropdown-item { diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index 0f04441ba..359217f3b 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -59,6 +59,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { remoteServerDown = false hotkeys: Hotkey[] + private currentTime: number private paramsSub: Subscription constructor ( @@ -114,10 +115,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ) .subscribe(([ video, captionsResult ]) => { const startTime = this.route.snapshot.queryParams.start + const stopTime = this.route.snapshot.queryParams.stop const subtitle = this.route.snapshot.queryParams.subtitle const playerMode = this.route.snapshot.queryParams.mode - this.onVideoFetched(video, captionsResult.data, { startTime, subtitle, playerMode }) + this.onVideoFetched(video, captionsResult.data, { startTime, stopTime, subtitle, playerMode }) .catch(err => this.handleError(err)) }) }) @@ -219,7 +221,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { showShareModal () { const currentTime = this.player ? this.player.currentTime() : undefined - this.videoShareModal.show(currentTime) + this.videoShareModal.show(this.currentTime) } showDownloadModal (event: Event) { @@ -371,7 +373,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private async onVideoFetched ( video: VideoDetails, videoCaptions: VideoCaption[], - urlOptions: { startTime?: number, subtitle?: string, playerMode?: string } + urlOptions: { startTime?: number, stopTime?: number, subtitle?: string, playerMode?: string } ) { this.video = video @@ -379,6 +381,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.descriptionLoading = false this.completeDescriptionShown = false this.remoteServerDown = false + this.currentTime = undefined let startTime = urlOptions.startTime || (this.video.userHistory ? this.video.userHistory.currentTime : 0) // If we are at the end of the video, reset the timer @@ -420,6 +423,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { inactivityTimeout: 2500, poster: this.video.previewUrl, startTime, + stopTime: urlOptions.stopTime, theaterMode: true, captions: videoCaptions.length !== 0, @@ -466,6 +470,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.zone.runOutsideAngular(async () => { this.player = await PeertubePlayerManager.initialize(mode, options) this.player.on('customError', ({ err }: { err: any }) => this.handleError(err)) + + this.player.on('timeupdate', () => { + this.currentTime = Math.floor(this.player.currentTime()) + }) }) this.setVideoDescriptionHTML() diff --git a/client/src/app/videos/videos-routing.module.ts b/client/src/app/videos/videos-routing.module.ts index 58988ffd1..69a9232ce 100644 --- a/client/src/app/videos/videos-routing.module.ts +++ b/client/src/app/videos/videos-routing.module.ts @@ -78,11 +78,7 @@ const videosRoutes: Routes = [ } }, { - path: 'watch/:uuid/comments/:commentId', - redirectTo: 'watch/:uuid' - }, - { - path: 'watch/:uuid', + path: 'watch', loadChildren: 'app/videos/+video-watch/video-watch.module#VideoWatchModule', data: { preload: 3000 diff --git a/client/src/assets/images/global/add.html b/client/src/assets/images/global/add.html index bfb0a52bc..34f497056 100644 --- a/client/src/assets/images/global/add.html +++ b/client/src/assets/images/global/add.html @@ -2,9 +2,9 @@ - - - + + + diff --git a/client/src/assets/images/video/playlist-add.html b/client/src/assets/images/video/playlist-add.html new file mode 100644 index 000000000..ada845c75 --- /dev/null +++ b/client/src/assets/images/video/playlist-add.html @@ -0,0 +1,10 @@ + + + + + + + + diff --git a/client/src/assets/images/video/watch-later.html b/client/src/assets/images/video/watch-later.html new file mode 100644 index 000000000..927afebe4 --- /dev/null +++ b/client/src/assets/images/video/watch-later.html @@ -0,0 +1,11 @@ + + + + + + + Created by Yaroslav Samoylov + from the Noun Project diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts index 7631d095f..6cdd54372 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts @@ -49,6 +49,7 @@ export type CommonOptions = { inactivityTimeout: number poster: string startTime: number | string + stopTime: number | string theaterMode: boolean captions: boolean @@ -199,10 +200,10 @@ export class PeertubePlayerManager { autoplay, // Use peertube plugin autoplay because we get the file by webtorrent videoViewUrl: commonOptions.videoViewUrl, videoDuration: commonOptions.videoDuration, - startTime: commonOptions.startTime, userWatching: commonOptions.userWatching, subtitle: commonOptions.subtitle, - videoCaptions: commonOptions.videoCaptions + videoCaptions: commonOptions.videoCaptions, + stopTime: commonOptions.stopTime } } @@ -210,6 +211,7 @@ export class PeertubePlayerManager { const p2pMediaLoader: P2PMediaLoaderPluginOptions = { redundancyBaseUrls: options.p2pMediaLoader.redundancyBaseUrls, type: 'application/x-mpegURL', + startTime: commonOptions.startTime, src: p2pMediaLoaderOptions.playlistUrl } @@ -254,7 +256,8 @@ export class PeertubePlayerManager { autoplay, videoDuration: commonOptions.videoDuration, playerElement: commonOptions.playerElement, - videoFiles: webtorrentOptions.videoFiles + videoFiles: webtorrentOptions.videoFiles, + startTime: commonOptions.startTime } Object.assign(plugins, { webtorrent }) diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts index 92ac57cf5..3991e4627 100644 --- a/client/src/assets/player/peertube-plugin.ts +++ b/client/src/assets/player/peertube-plugin.ts @@ -22,7 +22,6 @@ import { const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin') class PeerTubePlugin extends Plugin { - private readonly startTime: number = 0 private readonly videoViewUrl: string private readonly videoDuration: number private readonly CONSTANTS = { @@ -35,13 +34,11 @@ class PeerTubePlugin extends Plugin { private videoViewInterval: any private userWatchingVideoInterval: any - private qualityObservationTimer: any private lastResolutionChange: ResolutionUpdateData constructor (player: videojs.Player, options: PeerTubePluginOptions) { super(player, options) - this.startTime = timeToInt(options.startTime) this.videoViewUrl = options.videoViewUrl this.videoDuration = options.videoDuration this.videoCaptions = options.videoCaptions @@ -84,6 +81,14 @@ class PeerTubePlugin extends Plugin { saveMuteInStore(this.player.muted()) }) + if (options.stopTime) { + const stopTime = timeToInt(options.stopTime) + + this.player.on('timeupdate', () => { + if (this.player.currentTime() > stopTime) this.player.pause() + }) + } + this.player.textTracks().on('change', () => { const showing = this.player.textTracks().tracks_.find((t: { kind: string, mode: string }) => { return t.kind === 'captions' && t.mode === 'showing' @@ -109,10 +114,7 @@ class PeerTubePlugin extends Plugin { } dispose () { - clearTimeout(this.qualityObservationTimer) - - clearInterval(this.videoViewInterval) - + if (this.videoViewInterval) clearInterval(this.videoViewInterval) if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval) } diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts index 79a5a6c4d..a96b0bc8c 100644 --- a/client/src/assets/player/peertube-videojs-typings.ts +++ b/client/src/assets/player/peertube-videojs-typings.ts @@ -41,12 +41,13 @@ type PeerTubePluginOptions = { autoplay: boolean videoViewUrl: string videoDuration: number - startTime: number | string userWatching?: UserWatching subtitle?: string videoCaptions: VideoJSCaption[] + + stopTime: number | string } type WebtorrentPluginOptions = { @@ -56,12 +57,16 @@ type WebtorrentPluginOptions = { videoDuration: number videoFiles: VideoFile[] + + startTime: number | string } type P2PMediaLoaderPluginOptions = { redundancyBaseUrls: string[] type: string src: string + + startTime: number | string } type VideoJSPluginOptions = { diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts index 8d87567c2..54f131310 100644 --- a/client/src/assets/player/utils.ts +++ b/client/src/assets/player/utils.ts @@ -42,7 +42,7 @@ function timeToInt (time: number | string) { if (!time) return 0 if (typeof time === 'number') return time - const reg = /^((\d+)h)?((\d+)m)?((\d+)s?)?$/ + const reg = /^((\d+)[h:])?((\d+)[m:])?((\d+)s?)?$/ const matches = time.match(reg) if (!matches) return 0 @@ -54,18 +54,27 @@ function timeToInt (time: number | string) { return hours * 3600 + minutes * 60 + seconds } -function secondsToTime (seconds: number) { +function secondsToTime (seconds: number, full = false, symbol?: string) { let time = '' + const hourSymbol = (symbol || 'h') + const minuteSymbol = (symbol || 'm') + const secondsSymbol = full ? '' : 's' + let hours = Math.floor(seconds / 3600) - if (hours >= 1) time = hours + 'h' + if (hours >= 1) time = hours + hourSymbol + else if (full) time = '0' + hourSymbol seconds %= 3600 let minutes = Math.floor(seconds / 60) - if (minutes >= 1) time += minutes + 'm' + if (minutes >= 1 && minutes < 10 && full) time += '0' + minutes + minuteSymbol + else if (minutes >= 1) time += minutes + minuteSymbol + else if (full) time += '00' + minuteSymbol seconds %= 60 - if (seconds >= 1) time += seconds + 's' + if (seconds >= 1 && seconds < 10 && full) time += '0' + seconds + secondsSymbol + else if (seconds >= 1) time += seconds + secondsSymbol + else if (full) time += '00' return time } @@ -131,6 +140,7 @@ export { getRtcConfig, toTitleCase, timeToInt, + secondsToTime, buildVideoLink, buildVideoEmbed, videoFileMaxByResolution, diff --git a/client/src/assets/player/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts index c69bf31fa..c7182acc9 100644 --- a/client/src/assets/player/webtorrent/webtorrent-plugin.ts +++ b/client/src/assets/player/webtorrent/webtorrent-plugin.ts @@ -6,7 +6,7 @@ import * as WebTorrent from 'webtorrent' import { VideoFile } from '../../../../../shared/models/videos/video.model' import { renderVideo } from './video-renderer' import { LoadedQualityData, PlayerNetworkInfo, VideoJSComponentInterface, WebtorrentPluginOptions } from '../peertube-videojs-typings' -import { getRtcConfig, videoFileMaxByResolution, videoFileMinByResolution } from '../utils' +import { getRtcConfig, timeToInt, videoFileMaxByResolution, videoFileMinByResolution } from '../utils' import { PeertubeChunkStore } from './peertube-chunk-store' import { getAverageBandwidthInStore, @@ -73,6 +73,8 @@ class WebTorrentPlugin extends Plugin { constructor (player: videojs.Player, options: WebtorrentPluginOptions) { super(player, options) + this.startTime = timeToInt(options.startTime) + // Disable auto play on iOS this.autoplay = options.autoplay && this.isIOS() === false this.playerRefusedP2P = !getStoredWebTorrentEnabled() diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 59b2f42a5..3eefdb6fb 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -515,4 +515,3 @@ align-items: center; } } - diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index 56ca4c2d3..deabbf6d4 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -44,6 +44,8 @@ $footer-margin: 30px; $footer-border-color: $header-border-color; +$separator-border-color: rgba(0, 0, 0, 0.10); + $video-thumbnail-height: 122px; $video-thumbnail-width: 223px; diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index 32bf42e12..28c10c75c 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts @@ -168,6 +168,7 @@ class PeerTubeEmbed { subtitle: string enableApi = false startTime: number | string = 0 + stopTime: number | string mode: PlayerMode scope = 'peertube' @@ -262,6 +263,7 @@ class PeerTubeEmbed { this.scope = this.getParamString(params, 'scope', this.scope) this.subtitle = this.getParamString(params, 'subtitle') this.startTime = this.getParamString(params, 'start') + this.stopTime = this.getParamString(params, 'stop') this.mode = this.getParamString(params, 'mode') === 'p2p-media-loader' ? 'p2p-media-loader' : 'webtorrent' } catch (err) { @@ -306,6 +308,7 @@ class PeerTubeEmbed { loop: this.loop, captions: videoCaptions.length !== 0, startTime: this.startTime, + stopTime: this.stopTime, subtitle: this.subtitle, videoCaptions, diff --git a/server/controllers/api/users/index.ts b/server/controllers/api/users/index.ts index 5758c8227..f7edbddf3 100644 --- a/server/controllers/api/users/index.ts +++ b/server/controllers/api/users/index.ts @@ -38,6 +38,7 @@ import { auditLoggerFactory, getAuditIdFromRes, UserAuditView } from '../../../h import { meRouter } from './me' import { deleteUserToken } from '../../../lib/oauth-model' import { myBlocklistRouter } from './my-blocklist' +import { myVideoPlaylistsRouter } from './my-video-playlists' import { myVideosHistoryRouter } from './my-history' import { myNotificationsRouter } from './my-notifications' import { Notifier } from '../../../lib/notifier' @@ -60,6 +61,7 @@ usersRouter.use('/', myNotificationsRouter) usersRouter.use('/', mySubscriptionsRouter) usersRouter.use('/', myBlocklistRouter) usersRouter.use('/', myVideosHistoryRouter) +usersRouter.use('/', myVideoPlaylistsRouter) usersRouter.use('/', meRouter) usersRouter.get('/autocomplete', diff --git a/server/controllers/api/users/my-video-playlists.ts b/server/controllers/api/users/my-video-playlists.ts new file mode 100644 index 000000000..1ec175f64 --- /dev/null +++ b/server/controllers/api/users/my-video-playlists.ts @@ -0,0 +1,47 @@ +import * as express from 'express' +import { asyncMiddleware, authenticate } from '../../../middlewares' +import { UserModel } from '../../../models/account/user' +import { doVideosInPlaylistExistValidator } from '../../../middlewares/validators/videos/video-playlists' +import { VideoPlaylistModel } from '../../../models/video/video-playlist' +import { VideoExistInPlaylist } from '../../../../shared/models/videos/playlist/video-exist-in-playlist.model' + +const myVideoPlaylistsRouter = express.Router() + +myVideoPlaylistsRouter.get('/me/video-playlists/videos-exist', + authenticate, + doVideosInPlaylistExistValidator, + asyncMiddleware(doVideosInPlaylistExist) +) + +// --------------------------------------------------------------------------- + +export { + myVideoPlaylistsRouter +} + +// --------------------------------------------------------------------------- + +async function doVideosInPlaylistExist (req: express.Request, res: express.Response) { + const videoIds = req.query.videoIds as number[] + const user = res.locals.oauth.token.User as UserModel + + const results = await VideoPlaylistModel.listPlaylistIdsOf(user.Account.id, videoIds) + + const existObject: VideoExistInPlaylist = {} + + for (const videoId of videoIds) { + existObject[videoId] = [] + } + + for (const result of results) { + for (const element of result.VideoPlaylistElements) { + existObject[element.videoId].push({ + playlistId: result.id, + startTimestamp: element.startTimestamp, + stopTimestamp: element.stopTimestamp + }) + } + } + + return res.json(existObject) +} diff --git a/server/controllers/api/video-playlist.ts b/server/controllers/api/video-playlist.ts index 145764d35..49432d3aa 100644 --- a/server/controllers/api/video-playlist.ts +++ b/server/controllers/api/video-playlist.ts @@ -291,23 +291,26 @@ async function addVideoInPlaylist (req: express.Request, res: express.Response) videoId: video.id }, { transaction: t }) - // If the user did not set a thumbnail, automatically take the video thumbnail - if (playlistElement.position === 1) { - const playlistThumbnailPath = join(CONFIG.STORAGE.THUMBNAILS_DIR, videoPlaylist.getThumbnailName()) - - if (await pathExists(playlistThumbnailPath) === false) { - logger.info('Generating default thumbnail to playlist %s.', videoPlaylist.url) - - const videoThumbnailPath = join(CONFIG.STORAGE.THUMBNAILS_DIR, video.getThumbnailName()) - await copy(videoThumbnailPath, playlistThumbnailPath) - } - } + videoPlaylist.updatedAt = new Date() + await videoPlaylist.save({ transaction: t }) await sendUpdateVideoPlaylist(videoPlaylist, t) return playlistElement }) + // If the user did not set a thumbnail, automatically take the video thumbnail + if (playlistElement.position === 1) { + const playlistThumbnailPath = join(CONFIG.STORAGE.THUMBNAILS_DIR, videoPlaylist.getThumbnailName()) + + if (await pathExists(playlistThumbnailPath) === false) { + logger.info('Generating default thumbnail to playlist %s.', videoPlaylist.url) + + const videoThumbnailPath = join(CONFIG.STORAGE.THUMBNAILS_DIR, video.getThumbnailName()) + await copy(videoThumbnailPath, playlistThumbnailPath) + } + } + logger.info('Video added in playlist %s at position %d.', videoPlaylist.uuid, playlistElement.position) return res.json({ @@ -328,6 +331,9 @@ async function updateVideoPlaylistElement (req: express.Request, res: express.Re const element = await videoPlaylistElement.save({ transaction: t }) + videoPlaylist.updatedAt = new Date() + await videoPlaylist.save({ transaction: t }) + await sendUpdateVideoPlaylist(videoPlaylist, t) return element @@ -349,6 +355,9 @@ async function removeVideoFromPlaylist (req: express.Request, res: express.Respo // Decrease position of the next elements await VideoPlaylistElementModel.increasePositionOf(videoPlaylist.id, positionToDelete, null, -1, t) + videoPlaylist.updatedAt = new Date() + await videoPlaylist.save({ transaction: t }) + await sendUpdateVideoPlaylist(videoPlaylist, t) logger.info('Video playlist element %d of playlist %s deleted.', videoPlaylistElement.position, videoPlaylist.uuid) @@ -390,6 +399,9 @@ async function reorderVideosPlaylist (req: express.Request, res: express.Respons // Decrease positions of elements after the old position of our ordered elements (decrease) await VideoPlaylistElementModel.increasePositionOf(videoPlaylist.id, oldPosition, null, -reorderLength, t) + videoPlaylist.updatedAt = new Date() + await videoPlaylist.save({ transaction: t }) + await sendUpdateVideoPlaylist(videoPlaylist, t) }) diff --git a/server/helpers/custom-validators/misc.ts b/server/helpers/custom-validators/misc.ts index 76647fea2..3a3deab0c 100644 --- a/server/helpers/custom-validators/misc.ts +++ b/server/helpers/custom-validators/misc.ts @@ -49,12 +49,19 @@ function toValueOrNull (value: string) { return value } -function toArray (value: string) { +function toArray (value: any) { if (value && isArray(value) === false) return [ value ] return value } +function toIntArray (value: any) { + if (!value) return [] + if (isArray(value) === false) return [ validator.toInt(value) ] + + return value.map(v => validator.toInt(v)) +} + function isFileValid ( files: { [ fieldname: string ]: Express.Multer.File[] } | Express.Multer.File[], mimeTypeRegex: string, @@ -97,5 +104,6 @@ export { isBooleanValid, toIntOrNull, toArray, + toIntArray, isFileValid } diff --git a/server/initializers/constants.ts b/server/initializers/constants.ts index 54c390540..169a98ceb 100644 --- a/server/initializers/constants.ts +++ b/server/initializers/constants.ts @@ -56,7 +56,7 @@ const SORTABLE_COLUMNS = { USER_NOTIFICATIONS: [ 'createdAt' ], - VIDEO_PLAYLISTS: [ 'createdAt' ] + VIDEO_PLAYLISTS: [ 'displayName', 'createdAt', 'updatedAt' ] } const OAUTH_LIFETIME = { diff --git a/server/middlewares/validators/videos/video-playlists.ts b/server/middlewares/validators/videos/video-playlists.ts index 22b8b8ff1..87d2c7b51 100644 --- a/server/middlewares/validators/videos/video-playlists.ts +++ b/server/middlewares/validators/videos/video-playlists.ts @@ -4,9 +4,9 @@ import { UserRight } from '../../../../shared' import { logger } from '../../../helpers/logger' import { UserModel } from '../../../models/account/user' import { areValidationErrors } from '../utils' -import { isVideoExist, isVideoImage } from '../../../helpers/custom-validators/videos' +import { isVideoExist, isVideoFileInfoHashValid, isVideoImage } from '../../../helpers/custom-validators/videos' import { CONSTRAINTS_FIELDS } from '../../../initializers' -import { isIdOrUUIDValid, isUUIDValid, toValueOrNull } from '../../../helpers/custom-validators/misc' +import { isArrayOf, isIdOrUUIDValid, isIdValid, isUUIDValid, toArray, toValueOrNull, toIntArray } from '../../../helpers/custom-validators/misc' import { isVideoPlaylistDescriptionValid, isVideoPlaylistExist, @@ -23,6 +23,7 @@ import { VideoModel } from '../../../models/video/video' import { authenticatePromiseIfNeeded } from '../../oauth' import { VideoPlaylistPrivacy } from '../../../../shared/models/videos/playlist/video-playlist-privacy.model' import { VideoPlaylistType } from '../../../../shared/models/videos/playlist/video-playlist-type.model' +import { areValidActorHandles } from '../../../helpers/custom-validators/activitypub/actor' const videoPlaylistsAddValidator = getCommonPlaylistEditAttributes().concat([ async (req: express.Request, res: express.Response, next: express.NextFunction) => { @@ -305,6 +306,20 @@ const commonVideoPlaylistFiltersValidator = [ } ] +const doVideosInPlaylistExistValidator = [ + query('videoIds') + .customSanitizer(toIntArray) + .custom(v => isArrayOf(v, isIdValid)).withMessage('Should have a valid video ids array'), + + (req: express.Request, res: express.Response, next: express.NextFunction) => { + logger.debug('Checking areVideosInPlaylistExistValidator parameters', { parameters: req.query }) + + if (areValidationErrors(req, res)) return + + return next() + } +] + // --------------------------------------------------------------------------- export { @@ -319,7 +334,9 @@ export { videoPlaylistElementAPGetValidator, - commonVideoPlaylistFiltersValidator + commonVideoPlaylistFiltersValidator, + + doVideosInPlaylistExistValidator } // --------------------------------------------------------------------------- diff --git a/server/models/video/video-playlist.ts b/server/models/video/video-playlist.ts index 4d2ea0a66..aa42687cd 100644 --- a/server/models/video/video-playlist.ts +++ b/server/models/video/video-playlist.ts @@ -317,6 +317,29 @@ export class VideoPlaylistModel extends Model { }) } + static listPlaylistIdsOf (accountId: number, videoIds: number[]) { + const query = { + attributes: [ 'id' ], + where: { + ownerAccountId: accountId + }, + include: [ + { + attributes: [ 'videoId', 'startTimestamp', 'stopTimestamp' ], + model: VideoPlaylistElementModel.unscoped(), + where: { + videoId: { + [Sequelize.Op.any]: videoIds + } + }, + required: true + } + ] + } + + return VideoPlaylistModel.findAll(query) + } + static doesPlaylistExist (url: string) { const query = { attributes: [], diff --git a/shared/models/videos/playlist/video-exist-in-playlist.model.ts b/shared/models/videos/playlist/video-exist-in-playlist.model.ts new file mode 100644 index 000000000..71240f51d --- /dev/null +++ b/shared/models/videos/playlist/video-exist-in-playlist.model.ts @@ -0,0 +1,7 @@ +export type VideoExistInPlaylist = { + [videoId: number ]: { + playlistId: number + startTimestamp?: number + stopTimestamp?: number + }[] +}