Reorganize watch components

4 files changed, 362 insertions, 0 deletions

diff --git a/client/src/app/+videos/+video-watch/shared/playlist/index.ts b/client/src/app/+videos/+video-watch/shared/playlist/index.ts
new file mode 100644
index 000000000..539705508
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/playlist/index.ts
@@ -0,0 +1 @@
+export * from './video-watch-playlist.component'
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
new file mode 100644
index 000000000..c270142a3
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
@@ -0,0 +1,49 @@
+<div
+  *ngIf="playlist && currentPlaylistPosition" class="playlist"
+  myInfiniteScroller [autoInit]="true" [onItself]="true" (nearOfBottom)="onPlaylistVideosNearOfBottom()"
+>
+  <div class="playlist-info">
+    <div class="playlist-display-name">
+      {{ playlist.displayName }}
+
+      <span *ngIf="isUnlistedPlaylist()" class="badge badge-warning" i18n>Unlisted</span>
+      <span *ngIf="isPrivatePlaylist()" class="badge badge-danger" i18n>Private</span>
+      <span *ngIf="isPublicPlaylist()" class="badge badge-info" i18n>Public</span>
+    </div>
+
+    <div class="playlist-by-index">
+      <div class="playlist-by">{{ playlist.ownerBy }}</div>
+      <div class="playlist-index">
+        <span>{{ currentPlaylistPosition }}</span><span>{{ playlistPagination.totalItems }}</span>
+      </div>
+    </div>
+
+    <div class="playlist-controls">
+      <my-global-icon
+        iconName="videos"
+        [class.active]="autoPlayNextVideoPlaylist"
+        (click)="switchAutoPlayNextVideoPlaylist()"
+        [ngbTooltip]="autoPlayNextVideoPlaylistSwitchText"
+        placement="bottom auto"
+        container="body"
+      ></my-global-icon>
+
+      <my-global-icon
+        iconName="repeat"
+        [class.active]="loopPlaylist"
+        (click)="switchLoopPlaylist()"
+        [ngbTooltip]="loopPlaylistSwitchText"
+        placement="bottom auto"
+        container="body"
+      ></my-global-icon>
+    </div>
+  </div>
+
+  <div *ngFor="let playlistElement of playlistElements" [ngClass]="'element-' + playlistElement.position">
+    <my-video-playlist-element-miniature
+      [playlistElement]="playlistElement" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
+      [playing]="currentPlaylistPosition === playlistElement.position" [accountLink]="false" [position]="playlistElement.position"
+      [touchScreenEditButton]="true"
+    ></my-video-playlist-element-miniature>
+  </div>
+</div>
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
new file mode 100644
index 000000000..75ed9d901
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
@@ -0,0 +1,83 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_bootstrap-variables';
+@use '_miniature' as *;
+
+.playlist {
+  min-width: 200px;
+  max-width: 470px;
+  height: 66vh;
+  background-color: pvar(--mainBackgroundColor);
+  overflow-y: auto;
+  border-bottom: 1px solid $separator-border-color;
+
+  .playlist-info {
+    padding: 5px 30px;
+    background-color: #e4e4e4;
+
+    .playlist-display-name {
+      font-size: 18px;
+      font-weight: $font-semibold;
+      margin-bottom: 5px;
+    }
+
+    .playlist-by-index {
+      color: pvar(--greyForegroundColor);
+      display: flex;
+
+      .playlist-by {
+        @include margin-right(5px);
+      }
+
+      .playlist-index span:first-child::after {
+        content: '/';
+        margin: 0 3px;
+      }
+    }
+
+    .playlist-controls {
+      display: flex;
+      margin: 10px 0;
+
+      my-global-icon:not(:last-child) {
+        @include margin-right(.5rem);
+      }
+
+      my-global-icon {
+        &:not(.active) {
+          opacity: .5;
+        }
+
+        ::ng-deep {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  my-video-playlist-element-miniature {
+    ::ng-deep {
+      .video {
+        .position {
+          @include margin-right(0);
+        }
+
+        .video-info {
+          .video-info-name {
+            font-size: 15px;
+          }
+        }
+      }
+
+      my-video-thumbnail {
+        @include thumbnail-size-component(90px, 50px);
+      }
+
+      .fake-thumbnail {
+        width: 90px;
+        height: 50px;
+      }
+    }
+  }
+}
+
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
new file mode 100644
index 000000000..0a4d6bfd1
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
@@ -0,0 +1,229 @@
+
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { Router } from '@angular/router'
+import { AuthService, ComponentPagination, LocalStorageService, Notifier, SessionStorageService, UserService } from '@app/core'
+import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
+import { peertubeLocalStorage, peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
+import { VideoPlaylistPrivacy } from '@shared/models'
+
+@Component({
+  selector: 'my-video-watch-playlist',
+  templateUrl: './video-watch-playlist.component.html',
+  styleUrls: [ './video-watch-playlist.component.scss' ]
+})
+export class VideoWatchPlaylistComponent {
+  static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'auto_play_video_playlist'
+  static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'loop_playlist'
+
+  @Input() playlist: VideoPlaylist
+
+  @Output() videoFound = new EventEmitter<string>()
+
+  playlistElements: VideoPlaylistElement[] = []
+  playlistPagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 30,
+    totalItems: null
+  }
+
+  autoPlayNextVideoPlaylist: boolean
+  autoPlayNextVideoPlaylistSwitchText = ''
+  loopPlaylist: boolean
+  loopPlaylistSwitchText = ''
+  noPlaylistVideos = false
+
+  currentPlaylistPosition: number
+
+  constructor (
+    private userService: UserService,
+    private auth: AuthService,
+    private notifier: Notifier,
+    private videoPlaylist: VideoPlaylistService,
+    private localStorageService: LocalStorageService,
+    private sessionStorageService: SessionStorageService,
+    private router: Router
+  ) {
+    // defaults to true
+    this.autoPlayNextVideoPlaylist = this.auth.isLoggedIn()
+      ? this.auth.getUser().autoPlayNextVideoPlaylist
+      : this.localStorageService.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false'
+
+    this.setAutoPlayNextVideoPlaylistSwitchText()
+
+    // defaults to false
+    this.loopPlaylist = this.sessionStorageService.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
+    this.setLoopPlaylistSwitchText()
+  }
+
+  onPlaylistVideosNearOfBottom (position?: number) {
+    // Last page
+    if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return
+
+    this.playlistPagination.currentPage += 1
+    this.loadPlaylistElements(this.playlist, false, position)
+  }
+
+  onElementRemoved (playlistElement: VideoPlaylistElement) {
+    this.playlistElements = this.playlistElements.filter(e => e.id !== playlistElement.id)
+
+    this.playlistPagination.totalItems--
+  }
+
+  isPlaylistOwned () {
+    return this.playlist.isLocal === true &&
+      this.auth.isLoggedIn() &&
+      this.playlist.ownerAccount.name === this.auth.getUser().username
+  }
+
+  isUnlistedPlaylist () {
+    return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED
+  }
+
+  isPrivatePlaylist () {
+    return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
+  }
+
+  isPublicPlaylist () {
+    return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC
+  }
+
+  loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false, position?: number) {
+    this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination)
+        .subscribe(({ total, data }) => {
+          this.playlistElements = this.playlistElements.concat(data)
+          this.playlistPagination.totalItems = total
+
+          const firstAvailableVideo = this.playlistElements.find(e => !!e.video)
+          if (!firstAvailableVideo) {
+            this.noPlaylistVideos = true
+            return
+          }
+
+          if (position) this.updatePlaylistIndex(position)
+
+          if (redirectToFirst) {
+            const extras = {
+              queryParams: {
+                start: firstAvailableVideo.startTimestamp,
+                stop: firstAvailableVideo.stopTimestamp,
+                playlistPosition: firstAvailableVideo.position
+              },
+              replaceUrl: true
+            }
+            this.router.navigate([], extras)
+          }
+        })
+  }
+
+  updatePlaylistIndex (position: number) {
+    if (this.playlistElements.length === 0 || !position) return
+
+    // Handle the reverse index
+    if (position < 0) position = this.playlist.videosLength + position + 1
+
+    for (const playlistElement of this.playlistElements) {
+      // >= if the previous videos were not valid
+      if (playlistElement.video && playlistElement.position >= position) {
+        this.currentPlaylistPosition = playlistElement.position
+
+        this.videoFound.emit(playlistElement.video.uuid)
+
+        setTimeout(() => {
+          document.querySelector('.element-' + this.currentPlaylistPosition).scrollIntoView(false)
+        }, 0)
+
+        return
+      }
+    }
+
+    // Load more videos to find our video
+    this.onPlaylistVideosNearOfBottom(position)
+  }
+
+  navigateToPreviousPlaylistVideo () {
+    const previous = this.findPlaylistVideo(this.currentPlaylistPosition - 1, 'previous')
+    if (!previous) return
+
+    const start = previous.startTimestamp
+    const stop = previous.stopTimestamp
+    this.router.navigate([],{ queryParams: { playlistPosition: previous.position, start, stop } })
+  }
+
+  findPlaylistVideo (position: number, type: 'previous' | 'next'): VideoPlaylistElement {
+    if (
+      (type === 'next' && position > this.playlistPagination.totalItems) ||
+      (type === 'previous' && position < 1)
+    ) {
+      // End of the playlist: end the recursion if we're not in the loop mode
+      if (!this.loopPlaylist) return
+
+      // Loop mode
+      position = type === 'previous'
+        ? this.playlistPagination.totalItems
+        : 1
+    }
+
+    const found = this.playlistElements.find(e => e.position === position)
+    if (found && found.video) return found
+
+    const newPosition = type === 'previous'
+      ? position - 1
+      : position + 1
+
+    return this.findPlaylistVideo(newPosition, type)
+  }
+
+  navigateToNextPlaylistVideo () {
+    const next = this.findPlaylistVideo(this.currentPlaylistPosition + 1, 'next')
+    if (!next) return
+
+    const start = next.startTimestamp
+    const stop = next.stopTimestamp
+    this.router.navigate([],{ queryParams: { playlistPosition: next.position, start, stop } })
+  }
+
+  switchAutoPlayNextVideoPlaylist () {
+    this.autoPlayNextVideoPlaylist = !this.autoPlayNextVideoPlaylist
+    this.setAutoPlayNextVideoPlaylistSwitchText()
+
+    peertubeLocalStorage.setItem(
+      VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
+      this.autoPlayNextVideoPlaylist.toString()
+    )
+
+    if (this.auth.isLoggedIn()) {
+      const details = {
+        autoPlayNextVideoPlaylist: this.autoPlayNextVideoPlaylist
+      }
+
+      this.userService.updateMyProfile(details).subscribe(
+        () => {
+          this.auth.refreshUserInformation()
+        },
+        err => this.notifier.error(err.message)
+      )
+    }
+  }
+
+  switchLoopPlaylist () {
+    this.loopPlaylist = !this.loopPlaylist
+    this.setLoopPlaylistSwitchText()
+
+    peertubeSessionStorage.setItem(
+      VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST,
+      this.loopPlaylist.toString()
+    )
+  }
+
+  private setAutoPlayNextVideoPlaylistSwitchText () {
+    this.autoPlayNextVideoPlaylistSwitchText = this.autoPlayNextVideoPlaylist
+      ? $localize`Stop autoplaying next video`
+      : $localize`Autoplay next video`
+  }
+
+  private setLoopPlaylistSwitchText () {
+    this.loopPlaylistSwitchText = this.loopPlaylist
+      ? $localize`Stop looping playlist videos`
+      : $localize`Loop playlist videos`
+  }
+}