Add/update/delete/list my playlists

5 files changed, 249 insertions, 0 deletions

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 @@
+<div class="miniature">
+  <a
+    [routerLink]="[ '/videos/watch' ]" [attr.title]="playlist.displayName"
+    class="miniature-thumbnail"
+  >
+    <img alt="" [attr.aria-labelledby]="playlist.displayName" [attr.src]="playlist.thumbnailUrl" />
+
+    <div class="miniature-playlist-info-overlay">
+      <ng-container i18n>{playlist.videosLength, plural, =0 {No videos} =1 {1 video} other {{{playlist.videosLength}} videos}}</ng-container>
+    </div>
+
+    <div class="play-overlay">
+      <div class="icon"></div>
+    </div>
+  </a>
+
+  <div class="miniature-bottom">
+    <a tabindex="-1" class="miniature-name" [routerLink]="[ '/videos/watch' ]" [attr.title]="playlist.displayName">
+      {{ playlist.displayName }}
+    </a>
+  </div>
+</div>
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<VideoPlaylistPrivacy>
+
+  thumbnailPath: string
+
+  videosLength: number
+
+  type: VideoConstant<VideoPlaylistType>
+
+  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<ResultList<VideoPlaylist>> {
+    const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.nameWithHost + '/video-playlists'
+
+    return this.authHttp.get<ResultList<VideoPlaylist>>(url)
+               .pipe(
+                 switchMap(res => this.extractPlaylists(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  listAccountPlaylists (account: Account): Observable<ResultList<VideoPlaylist>> {
+    const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-playlists'
+
+    return this.authHttp.get<ResultList<VideoPlaylist>>(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<VideoPlaylist>(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<VideoPlaylistServerModel>) {
+    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)))
+  }
+}