From 830b4faff15fb9c81d88e8e69fcdf94aad32bef8 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 6 Mar 2019 15:36:44 +0100 Subject: Add/update/delete/list my playlists --- client/src/app/shared/buttons/button.component.ts | 2 +- .../src/app/shared/forms/form-validators/index.ts | 1 + .../video-playlist-validators.service.ts | 52 ++++++++++ .../app/shared/icons/global-icon.component.html | 0 .../app/shared/icons/global-icon.component.scss | 4 - .../src/app/shared/icons/global-icon.component.ts | 48 --------- .../app/shared/images/global-icon.component.html | 0 .../app/shared/images/global-icon.component.scss | 4 + .../src/app/shared/images/global-icon.component.ts | 48 +++++++++ .../app/shared/images/image-upload.component.html | 9 ++ .../app/shared/images/image-upload.component.scss | 18 ++++ .../app/shared/images/image-upload.component.ts | 69 +++++++++++++ client/src/app/shared/misc/utils.ts | 2 +- client/src/app/shared/shared.module.ts | 20 +++- .../video-playlist-miniature.component.html | 22 +++++ .../video-playlist-miniature.component.scss | 34 +++++++ .../video-playlist-miniature.component.ts | 11 +++ .../shared/video-playlist/video-playlist.model.ts | 74 ++++++++++++++ .../video-playlist/video-playlist.service.ts | 108 +++++++++++++++++++++ .../src/app/shared/video/abstract-video-list.scss | 1 + .../shared/video/video-miniature.component.scss | 22 +---- .../shared/video/video-thumbnail.component.html | 6 +- .../shared/video/video-thumbnail.component.scss | 72 ++------------ client/src/app/shared/video/video.model.ts | 5 +- 24 files changed, 486 insertions(+), 146 deletions(-) create mode 100644 client/src/app/shared/forms/form-validators/video-playlist-validators.service.ts delete mode 100644 client/src/app/shared/icons/global-icon.component.html delete mode 100644 client/src/app/shared/icons/global-icon.component.scss delete mode 100644 client/src/app/shared/icons/global-icon.component.ts create mode 100644 client/src/app/shared/images/global-icon.component.html create mode 100644 client/src/app/shared/images/global-icon.component.scss create mode 100644 client/src/app/shared/images/global-icon.component.ts create mode 100644 client/src/app/shared/images/image-upload.component.html create mode 100644 client/src/app/shared/images/image-upload.component.scss create mode 100644 client/src/app/shared/images/image-upload.component.ts create mode 100644 client/src/app/shared/video-playlist/video-playlist-miniature.component.html create mode 100644 client/src/app/shared/video-playlist/video-playlist-miniature.component.scss create mode 100644 client/src/app/shared/video-playlist/video-playlist-miniature.component.ts create mode 100644 client/src/app/shared/video-playlist/video-playlist.model.ts create mode 100644 client/src/app/shared/video-playlist/video-playlist.service.ts (limited to 'client/src/app/shared') diff --git a/client/src/app/shared/buttons/button.component.ts b/client/src/app/shared/buttons/button.component.ts index a91e9c7eb..c2b69d31a 100644 --- a/client/src/app/shared/buttons/button.component.ts +++ b/client/src/app/shared/buttons/button.component.ts @@ -1,5 +1,5 @@ import { Component, Input } from '@angular/core' -import { GlobalIconName } from '@app/shared/icons/global-icon.component' +import { GlobalIconName } from '@app/shared/images/global-icon.component' @Component({ selector: 'my-button', diff --git a/client/src/app/shared/forms/form-validators/index.ts b/client/src/app/shared/forms/form-validators/index.ts index fdcbedb71..e3de3ae13 100644 --- a/client/src/app/shared/forms/form-validators/index.ts +++ b/client/src/app/shared/forms/form-validators/index.ts @@ -10,6 +10,7 @@ export * from './video-blacklist-validators.service' export * from './video-channel-validators.service' export * from './video-comment-validators.service' export * from './video-validators.service' +export * from './video-playlist-validators.service' export * from './video-captions-validators.service' export * from './video-change-ownership-validators.service' export * from './video-accept-ownership-validators.service' diff --git a/client/src/app/shared/forms/form-validators/video-playlist-validators.service.ts b/client/src/app/shared/forms/form-validators/video-playlist-validators.service.ts new file mode 100644 index 000000000..726084b47 --- /dev/null +++ b/client/src/app/shared/forms/form-validators/video-playlist-validators.service.ts @@ -0,0 +1,52 @@ +import { I18n } from '@ngx-translate/i18n-polyfill' +import { Validators } from '@angular/forms' +import { Injectable } from '@angular/core' +import { BuildFormValidator } from '@app/shared' + +@Injectable() +export class VideoPlaylistValidatorsService { + readonly VIDEO_PLAYLIST_DISPLAY_NAME: BuildFormValidator + readonly VIDEO_PLAYLIST_PRIVACY: BuildFormValidator + readonly VIDEO_PLAYLIST_DESCRIPTION: BuildFormValidator + readonly VIDEO_PLAYLIST_CHANNEL_ID: BuildFormValidator + + constructor (private i18n: I18n) { + this.VIDEO_PLAYLIST_DISPLAY_NAME = { + VALIDATORS: [ + Validators.required, + Validators.minLength(1), + Validators.maxLength(120) + ], + MESSAGES: { + 'required': this.i18n('Display name is required.'), + 'minlength': this.i18n('Display name must be at least 1 character long.'), + 'maxlength': this.i18n('Display name cannot be more than 120 characters long.') + } + } + + this.VIDEO_PLAYLIST_PRIVACY = { + VALIDATORS: [ + Validators.required + ], + MESSAGES: { + 'required': this.i18n('Privacy is required.') + } + } + + this.VIDEO_PLAYLIST_DESCRIPTION = { + VALIDATORS: [ + Validators.minLength(3), + Validators.maxLength(1000) + ], + MESSAGES: { + 'minlength': i18n('Description must be at least 3 characters long.'), + 'maxlength': i18n('Description cannot be more than 1000 characters long.') + } + } + + this.VIDEO_PLAYLIST_CHANNEL_ID = { + VALIDATORS: [ ], + MESSAGES: { } + } + } +} diff --git a/client/src/app/shared/icons/global-icon.component.html b/client/src/app/shared/icons/global-icon.component.html deleted file mode 100644 index e69de29bb..000000000 diff --git a/client/src/app/shared/icons/global-icon.component.scss b/client/src/app/shared/icons/global-icon.component.scss deleted file mode 100644 index 6805fb6f7..000000000 --- a/client/src/app/shared/icons/global-icon.component.scss +++ /dev/null @@ -1,4 +0,0 @@ -/deep/ svg { - width: inherit; - height: inherit; -} diff --git a/client/src/app/shared/icons/global-icon.component.ts b/client/src/app/shared/icons/global-icon.component.ts deleted file mode 100644 index e8ada0324..000000000 --- a/client/src/app/shared/icons/global-icon.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { Component, ElementRef, Input, OnInit } from '@angular/core' - -const icons = { - 'add': require('../../../assets/images/global/add.html'), - 'syndication': require('../../../assets/images/global/syndication.html'), - 'help': require('../../../assets/images/global/help.html'), - 'sparkle': require('../../../assets/images/global/sparkle.html'), - 'alert': require('../../../assets/images/global/alert.html'), - 'cloud-error': require('../../../assets/images/global/cloud-error.html'), - 'user-add': require('../../../assets/images/global/user-add.html'), - 'no': require('../../../assets/images/global/no.html'), - 'cloud-download': require('../../../assets/images/global/cloud-download.html'), - 'undo': require('../../../assets/images/global/undo.html'), - 'circle-tick': require('../../../assets/images/global/circle-tick.html'), - 'cog': require('../../../assets/images/global/cog.html'), - 'download': require('../../../assets/images/global/download.html'), - 'edit': require('../../../assets/images/global/edit.html'), - 'im-with-her': require('../../../assets/images/global/im-with-her.html'), - 'delete': require('../../../assets/images/global/delete.html'), - 'cross': require('../../../assets/images/global/cross.html'), - 'validate': require('../../../assets/images/global/validate.html'), - 'tick': require('../../../assets/images/global/tick.html'), - 'dislike': require('../../../assets/images/video/dislike.html'), - 'heart': require('../../../assets/images/video/heart.html'), - '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') -} - -export type GlobalIconName = keyof typeof icons - -@Component({ - selector: 'my-global-icon', - template: '', - styleUrls: [ './global-icon.component.scss' ] -}) -export class GlobalIconComponent implements OnInit { - @Input() iconName: GlobalIconName - - constructor (private el: ElementRef) {} - - ngOnInit () { - const nativeElement = this.el.nativeElement - - nativeElement.innerHTML = icons[this.iconName] - } -} diff --git a/client/src/app/shared/images/global-icon.component.html b/client/src/app/shared/images/global-icon.component.html new file mode 100644 index 000000000..e69de29bb diff --git a/client/src/app/shared/images/global-icon.component.scss b/client/src/app/shared/images/global-icon.component.scss new file mode 100644 index 000000000..6805fb6f7 --- /dev/null +++ b/client/src/app/shared/images/global-icon.component.scss @@ -0,0 +1,4 @@ +/deep/ svg { + width: inherit; + height: inherit; +} diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts new file mode 100644 index 000000000..e8ada0324 --- /dev/null +++ b/client/src/app/shared/images/global-icon.component.ts @@ -0,0 +1,48 @@ +import { Component, ElementRef, Input, OnInit } from '@angular/core' + +const icons = { + 'add': require('../../../assets/images/global/add.html'), + 'syndication': require('../../../assets/images/global/syndication.html'), + 'help': require('../../../assets/images/global/help.html'), + 'sparkle': require('../../../assets/images/global/sparkle.html'), + 'alert': require('../../../assets/images/global/alert.html'), + 'cloud-error': require('../../../assets/images/global/cloud-error.html'), + 'user-add': require('../../../assets/images/global/user-add.html'), + 'no': require('../../../assets/images/global/no.html'), + 'cloud-download': require('../../../assets/images/global/cloud-download.html'), + 'undo': require('../../../assets/images/global/undo.html'), + 'circle-tick': require('../../../assets/images/global/circle-tick.html'), + 'cog': require('../../../assets/images/global/cog.html'), + 'download': require('../../../assets/images/global/download.html'), + 'edit': require('../../../assets/images/global/edit.html'), + 'im-with-her': require('../../../assets/images/global/im-with-her.html'), + 'delete': require('../../../assets/images/global/delete.html'), + 'cross': require('../../../assets/images/global/cross.html'), + 'validate': require('../../../assets/images/global/validate.html'), + 'tick': require('../../../assets/images/global/tick.html'), + 'dislike': require('../../../assets/images/video/dislike.html'), + 'heart': require('../../../assets/images/video/heart.html'), + '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') +} + +export type GlobalIconName = keyof typeof icons + +@Component({ + selector: 'my-global-icon', + template: '', + styleUrls: [ './global-icon.component.scss' ] +}) +export class GlobalIconComponent implements OnInit { + @Input() iconName: GlobalIconName + + constructor (private el: ElementRef) {} + + ngOnInit () { + const nativeElement = this.el.nativeElement + + nativeElement.innerHTML = icons[this.iconName] + } +} diff --git a/client/src/app/shared/images/image-upload.component.html b/client/src/app/shared/images/image-upload.component.html new file mode 100644 index 000000000..c09c862c4 --- /dev/null +++ b/client/src/app/shared/images/image-upload.component.html @@ -0,0 +1,9 @@ +
+ + + +
+
diff --git a/client/src/app/shared/images/image-upload.component.scss b/client/src/app/shared/images/image-upload.component.scss new file mode 100644 index 000000000..b63963bca --- /dev/null +++ b/client/src/app/shared/images/image-upload.component.scss @@ -0,0 +1,18 @@ +@import '_variables'; +@import '_mixins'; + +.root { + height: auto; + display: flex; + align-items: center; + + .preview { + border: 2px solid grey; + border-radius: 4px; + margin-left: 50px; + + &.no-image { + background-color: #ececec; + } + } +} diff --git a/client/src/app/shared/images/image-upload.component.ts b/client/src/app/shared/images/image-upload.component.ts new file mode 100644 index 000000000..2da1592ff --- /dev/null +++ b/client/src/app/shared/images/image-upload.component.ts @@ -0,0 +1,69 @@ +import { Component, forwardRef, Input } from '@angular/core' +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' +import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser' +import { ServerService } from '@app/core' + +@Component({ + selector: 'my-image-upload', + styleUrls: [ './image-upload.component.scss' ], + templateUrl: './image-upload.component.html', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => ImageUploadComponent), + multi: true + } + ] +}) +export class ImageUploadComponent implements ControlValueAccessor { + @Input() inputLabel: string + @Input() inputName: string + @Input() previewWidth: string + @Input() previewHeight: string + + imageSrc: SafeResourceUrl + + private file: File + + constructor ( + private sanitizer: DomSanitizer, + private serverService: ServerService + ) {} + + get videoImageExtensions () { + return this.serverService.getConfig().video.image.extensions + } + + get maxVideoImageSize () { + return this.serverService.getConfig().video.image.size.max + } + + onFileChanged (file: File) { + this.file = file + + this.propagateChange(this.file) + this.updatePreview() + } + + propagateChange = (_: any) => { /* empty */ } + + writeValue (file: any) { + this.file = file + this.updatePreview() + } + + registerOnChange (fn: (_: any) => void) { + this.propagateChange = fn + } + + registerOnTouched () { + // Unused + } + + private updatePreview () { + if (this.file) { + const url = URL.createObjectURL(this.file) + this.imageSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url) + } + } +} diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts index 7cc6055c2..8a1d342c9 100644 --- a/client/src/app/shared/misc/utils.ts +++ b/client/src/app/shared/misc/utils.ts @@ -17,7 +17,7 @@ function getParameterByName (name: string, url: string) { return decodeURIComponent(results[2].replace(/\+/g, ' ')) } -function populateAsyncUserVideoChannels (authService: AuthService, channel: { id: number, label: string, support: string }[]) { +function populateAsyncUserVideoChannels (authService: AuthService, channel: { id: number, label: string, support?: string }[]) { return new Promise(res => { authService.userInformationLoaded .subscribe( diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 1c4e3df1a..60a7bd6e2 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -45,6 +45,7 @@ import { VideoChangeOwnershipValidatorsService, VideoChannelValidatorsService, VideoCommentValidatorsService, + VideoPlaylistValidatorsService, VideoValidatorsService } from '@app/shared/forms' import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar' @@ -68,8 +69,11 @@ import { UserNotificationsComponent } from '@app/shared/users/user-notifications import { InstanceService } from '@app/shared/instance/instance.service' import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/shared/renderer' import { ConfirmComponent } from '@app/shared/confirm/confirm.component' -import { GlobalIconComponent } from '@app/shared/icons/global-icon.component' import { SmallLoaderComponent } from '@app/shared/misc/small-loader.component' +import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' +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' @NgModule({ imports: [ @@ -92,8 +96,11 @@ import { SmallLoaderComponent } from '@app/shared/misc/small-loader.component' declarations: [ LoaderComponent, SmallLoaderComponent, + VideoThumbnailComponent, VideoMiniatureComponent, + VideoPlaylistMiniatureComponent, + FeedComponent, ButtonComponent, DeleteButtonComponent, @@ -116,7 +123,9 @@ import { SmallLoaderComponent } from '@app/shared/misc/small-loader.component' TopMenuDropdownComponent, UserNotificationsComponent, ConfirmComponent, - GlobalIconComponent + + GlobalIconComponent, + ImageUploadComponent ], exports: [ @@ -138,8 +147,11 @@ import { SmallLoaderComponent } from '@app/shared/misc/small-loader.component' LoaderComponent, SmallLoaderComponent, + VideoThumbnailComponent, VideoMiniatureComponent, + VideoPlaylistMiniatureComponent, + FeedComponent, ButtonComponent, DeleteButtonComponent, @@ -159,7 +171,9 @@ import { SmallLoaderComponent } from '@app/shared/misc/small-loader.component' TopMenuDropdownComponent, UserNotificationsComponent, ConfirmComponent, + GlobalIconComponent, + ImageUploadComponent, NumberFormatterPipe, ObjectLengthPipe, @@ -177,6 +191,7 @@ import { SmallLoaderComponent } from '@app/shared/misc/small-loader.component' VideoService, AccountService, VideoChannelService, + VideoPlaylistService, VideoCaptionService, VideoImportService, UserSubscriptionService, @@ -186,6 +201,7 @@ import { SmallLoaderComponent } from '@app/shared/misc/small-loader.component' LoginValidatorsService, ResetPasswordValidatorsService, UserValidatorsService, + VideoPlaylistValidatorsService, VideoAbuseValidatorsService, VideoChannelValidatorsService, VideoCommentValidatorsService, 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 new file mode 100644 index 000000000..1a39f5fe5 --- /dev/null +++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.html @@ -0,0 +1,22 @@ +
+ + + +
+ {playlist.videosLength, plural, =0 {No videos} =1 {1 video} other {{{playlist.videosLength}} videos}} +
+ +
+
+
+ + +
+ + {{ 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 new file mode 100644 index 000000000..a47206577 --- /dev/null +++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss @@ -0,0 +1,34 @@ +@import '_variables'; +@import '_mixins'; +@import '_miniature'; + +.miniature { + display: inline-block; + + .miniature-thumbnail { + @include miniature-thumbnail; + + .miniature-playlist-info-overlay { + @include static-thumbnail-overlay; + + position: absolute; + right: 0; + bottom: 0; + height: $video-thumbnail-height; + padding: 0 10px; + display: flex; + align-items: center; + font-size: 15px; + } + } + + .miniature-bottom { + width: 200px; + margin-top: 2px; + line-height: normal; + + .miniature-name { + @include miniature-name; + } + } +} 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 new file mode 100644 index 000000000..b3bba7c87 --- /dev/null +++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.ts @@ -0,0 +1,11 @@ +import { Component, Input } from '@angular/core' +import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' + +@Component({ + selector: 'my-video-playlist-miniature', + styleUrls: [ './video-playlist-miniature.component.scss' ], + templateUrl: './video-playlist-miniature.component.html' +}) +export class VideoPlaylistMiniatureComponent { + @Input() playlist: VideoPlaylist +} diff --git a/client/src/app/shared/video-playlist/video-playlist.model.ts b/client/src/app/shared/video-playlist/video-playlist.model.ts new file mode 100644 index 000000000..9d0b02789 --- /dev/null +++ b/client/src/app/shared/video-playlist/video-playlist.model.ts @@ -0,0 +1,74 @@ +import { + VideoChannelSummary, + VideoConstant, + VideoPlaylist as ServerVideoPlaylist, + VideoPlaylistPrivacy, + VideoPlaylistType +} from '../../../../../shared/models/videos' +import { AccountSummary, peertubeTranslate } from '@shared/models' +import { Actor } from '@app/shared/actor/actor.model' +import { getAbsoluteAPIUrl } from '@app/shared/misc/utils' + +export class VideoPlaylist implements ServerVideoPlaylist { + id: number + uuid: string + isLocal: boolean + + displayName: string + description: string + privacy: VideoConstant + + thumbnailPath: string + + videosLength: number + + type: VideoConstant + + createdAt: Date | string + updatedAt: Date | string + + ownerAccount: AccountSummary + videoChannel?: VideoChannelSummary + + thumbnailUrl: string + + ownerBy: string + ownerAvatarUrl: string + + videoChannelBy?: string + videoChannelAvatarUrl?: string + + constructor (hash: ServerVideoPlaylist, translations: {}) { + const absoluteAPIUrl = getAbsoluteAPIUrl() + + this.id = hash.id + this.uuid = hash.uuid + this.isLocal = hash.isLocal + + this.displayName = hash.displayName + this.description = hash.description + this.privacy = hash.privacy + + this.thumbnailPath = hash.thumbnailPath + this.thumbnailUrl = absoluteAPIUrl + hash.thumbnailPath + + this.videosLength = hash.videosLength + + this.type = hash.type + + this.createdAt = new Date(hash.createdAt) + this.updatedAt = new Date(hash.updatedAt) + + this.ownerAccount = hash.ownerAccount + this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host) + this.ownerAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.ownerAccount) + + if (hash.videoChannel) { + this.videoChannel = hash.videoChannel + this.videoChannelBy = Actor.CREATE_BY_STRING(hash.videoChannel.name, hash.videoChannel.host) + this.videoChannelAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.videoChannel) + } + + this.privacy.label = peertubeTranslate(this.privacy.label, 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 new file mode 100644 index 000000000..8b66e122c --- /dev/null +++ b/client/src/app/shared/video-playlist/video-playlist.service.ts @@ -0,0 +1,108 @@ +import { catchError, map, switchMap } from 'rxjs/operators' +import { Injectable } from '@angular/core' +import { Observable } from 'rxjs' +import { RestExtractor } from '../rest/rest-extractor.service' +import { HttpClient } from '@angular/common/http' +import { ResultList } 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' +import { VideoChannel } from '@app/shared/video-channel/video-channel.model' +import { VideoPlaylistCreate } from '@shared/models/videos/playlist/video-playlist-create.model' +import { VideoPlaylistUpdate } from '@shared/models/videos/playlist/video-playlist-update.model' +import { objectToFormData } from '@app/shared/misc/utils' +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' + +@Injectable() +export class VideoPlaylistService { + static BASE_VIDEO_PLAYLIST_URL = environment.apiUrl + '/api/v1/video-playlists/' + + constructor ( + private authHttp: HttpClient, + private serverService: ServerService, + private restExtractor: RestExtractor + ) { } + + listChannelPlaylists (videoChannel: VideoChannel): Observable> { + const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.nameWithHost + '/video-playlists' + + return this.authHttp.get>(url) + .pipe( + switchMap(res => this.extractPlaylists(res)), + catchError(err => this.restExtractor.handleError(err)) + ) + } + + listAccountPlaylists (account: Account): Observable> { + const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-playlists' + + return this.authHttp.get>(url) + .pipe( + switchMap(res => this.extractPlaylists(res)), + catchError(err => this.restExtractor.handleError(err)) + ) + } + + getVideoPlaylist (id: string | number) { + const url = VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + id + + return this.authHttp.get(url) + .pipe( + switchMap(res => this.extractPlaylist(res)), + catchError(err => this.restExtractor.handleError(err)) + ) + } + + createVideoPlaylist (body: VideoPlaylistCreate) { + const data = objectToFormData(body) + + return this.authHttp.post(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL, data) + .pipe( + map(this.restExtractor.extractDataBool), + catchError(err => this.restExtractor.handleError(err)) + ) + } + + updateVideoPlaylist (videoPlaylist: VideoPlaylist, body: VideoPlaylistUpdate) { + const data = objectToFormData(body) + + return this.authHttp.put(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylist.id, data) + .pipe( + map(this.restExtractor.extractDataBool), + catchError(err => this.restExtractor.handleError(err)) + ) + } + + removeVideoPlaylist (videoPlaylist: VideoPlaylist) { + return this.authHttp.delete(VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylist.id) + .pipe( + map(this.restExtractor.extractDataBool), + catchError(err => this.restExtractor.handleError(err)) + ) + } + + extractPlaylists (result: ResultList) { + return this.serverService.localeObservable + .pipe( + map(translations => { + const playlistsJSON = result.data + const total = result.total + const playlists: VideoPlaylist[] = [] + + for (const playlistJSON of playlistsJSON) { + playlists.push(new VideoPlaylist(playlistJSON, translations)) + } + + return { data: playlists, total } + }) + ) + } + + extractPlaylist (playlist: VideoPlaylistServerModel) { + return this.serverService.localeObservable + .pipe(map(translations => new VideoPlaylist(playlist, translations))) + } +} diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss index 292ede698..65842af35 100644 --- a/client/src/app/shared/video/abstract-video-list.scss +++ b/client/src/app/shared/video/abstract-video-list.scss @@ -1,4 +1,5 @@ @import '_mixins'; +@import '_miniature'; .videos { text-align: center; diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss index c118fc3a1..7d857a74e 100644 --- a/client/src/app/shared/video/video-miniature.component.scss +++ b/client/src/app/shared/video/video-miniature.component.scss @@ -1,5 +1,6 @@ @import '_variables'; @import '_mixins'; +@import '_miniature'; .video-miniature { display: inline-block; @@ -14,26 +15,7 @@ line-height: normal; .video-miniature-name { - @include ellipsis-multiline( - $font-size: 1rem, - $line-height: 1, - $lines-to-show: 2 - ); - transition: color 0.2s; - font-size: 16px; - font-weight: $font-semibold; - color: var(--mainForegroundColor); - margin-top: 5px; - margin-bottom: 5px; - - &:hover { - text-decoration: none; - } - - &.blur-filter { - filter: blur(3px); - padding-left: 4px; - } + @include miniature-name; } .video-miniature-created-at-views { diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html index a15df725e..a6757fc4a 100644 --- a/client/src/app/shared/video/video-thumbnail.component.html +++ b/client/src/app/shared/video/video-thumbnail.component.html @@ -4,9 +4,11 @@ > -
{{ video.durationLabel }}
+
{{ video.durationLabel }}
-
+
+
+
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss index b9fd9182f..0113427a3 100644 --- a/client/src/app/shared/video/video-thumbnail.component.scss +++ b/client/src/app/shared/video/video-thumbnail.component.scss @@ -1,66 +1,9 @@ @import '_variables'; @import '_mixins'; - -$play-overlay-transition: 0.2s ease; -$play-overlay-height: 26px; -$play-overlay-width: 18px; +@import '_miniature'; .video-thumbnail { - @include disable-outline; - - display: inline-block; - position: relative; - border-radius: 3px; - overflow: hidden; - width: $video-thumbnail-width; - height: $video-thumbnail-height; - background-color: #ececec; - transition: filter $play-overlay-transition; - - &:hover { - text-decoration: none !important; - - filter: brightness(85%); - - .play-overlay { - opacity: 1; - - transform: translate(-50%, -50%) scale(1); - } - } - - &.focus-visible { - box-shadow: 0 0 0 2px var(--mainColor); - } - - img { - width: $video-thumbnail-width; - height: $video-thumbnail-height; - - &.blur-filter { - filter: blur(5px); - transform : scale(1.03); - } - } - - .play-overlay { - width: 0; - height: 0; - - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%) scale(0.5); - - transition: all $play-overlay-transition; - - border-top: ($play-overlay-height / 2) solid transparent; - border-bottom: ($play-overlay-height / 2) solid transparent; - - border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95); - - opacity: 0; - } + @include miniature-thumbnail; .progress-bar { height: 3px; @@ -75,16 +18,15 @@ $play-overlay-width: 18px; } } - .video-thumbnail-overlay { + .video-thumbnail-duration-overlay { + @include static-thumbnail-overlay; + position: absolute; right: 5px; bottom: 5px; - display: inline-block; - background-color: rgba(0, 0, 0, 0.7); - color: #fff; + padding: 0 5px; + border-radius: 3px; font-size: 12px; font-weight: $font-bold; - border-radius: 3px; - padding: 0 5px; } } diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts index 460c09258..c936a8207 100644 --- a/client/src/app/shared/video/video.model.ts +++ b/client/src/app/shared/video/video.model.ts @@ -117,9 +117,8 @@ export class Video implements VideoServerModel { this.privacy.label = peertubeTranslate(this.privacy.label, translations) this.scheduledUpdate = hash.scheduledUpdate - this.originallyPublishedAt = hash.originallyPublishedAt ? - new Date(hash.originallyPublishedAt.toString()) - : null + this.originallyPublishedAt = hash.originallyPublishedAt ? new Date(hash.originallyPublishedAt.toString()) : null + if (this.state) this.state.label = peertubeTranslate(this.state.label, translations) this.blacklisted = hash.blacklisted -- cgit v1.2.3