From e2f01c47e08d26a30ad47068d195b3d21d0df8a1 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 13 Mar 2019 14:18:58 +0100
Subject: Playlist support in watch page

---
 ...video-playlist-element-miniature.component.html |  73 ++++++++++
 ...video-playlist-element-miniature.component.scss | 124 +++++++++++++++++
 .../video-playlist-element-miniature.component.ts  | 149 +++++++++++++++++++++
 3 files changed, 346 insertions(+)
 create mode 100644 client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
 create mode 100644 client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
 create mode 100644 client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts

(limited to 'client/src/app/shared/video-playlist')

diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
new file mode 100644
index 000000000..1f178675f
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
@@ -0,0 +1,73 @@
+<div class="video" [ngClass]="{ playing: playing }">
+  <a [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()">
+    <div class="position">
+      <my-global-icon *ngIf="playing" iconName="play"></my-global-icon>
+      <ng-container *ngIf="!playing">{{ video.playlistElement.position }}</ng-container>
+    </div>
+
+    <my-video-thumbnail
+      [video]="video" [nsfw]="isVideoBlur(video)"
+      [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
+    ></my-video-thumbnail>
+
+    <div class="video-info">
+      <a tabindex="-1" class="video-info-name"
+         [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
+         [attr.title]="video.name"
+      >{{ video.name }}</a>
+
+      <a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
+      <span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ video.byAccount }}</span>
+
+      <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(video)}}</span>
+    </div>
+  </a>
+
+  <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right" (openChange)="onDropdownOpenChange()"
+       autoClose="outside">
+    <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>
+
+    <div ngbDropdownMenu>
+      <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, video)">
+        <my-global-icon iconName="edit"></my-global-icon>
+        <ng-container i18n>Edit starts/stops at</ng-container>
+      </div>
+
+      <div class="timestamp-options" *ngIf="displayTimestampOptions">
+        <div>
+          <my-peertube-checkbox
+            inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
+            i18n-labelText labelText="Start at"
+          ></my-peertube-checkbox>
+
+          <my-timestamp-input
+            [timestamp]="timestampOptions.startTimestamp"
+            [maxTimestamp]="video.duration"
+            [disabled]="!timestampOptions.startTimestampEnabled"
+            [(ngModel)]="timestampOptions.startTimestamp"
+          ></my-timestamp-input>
+        </div>
+
+        <div>
+          <my-peertube-checkbox
+            inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
+            i18n-labelText labelText="Stop at"
+          ></my-peertube-checkbox>
+
+          <my-timestamp-input
+            [timestamp]="timestampOptions.stopTimestamp"
+            [maxTimestamp]="video.duration"
+            [disabled]="!timestampOptions.stopTimestampEnabled"
+            [(ngModel)]="timestampOptions.stopTimestamp"
+          ></my-timestamp-input>
+        </div>
+
+        <input type="submit" i18n-value value="Save" (click)="updateTimestamps(video)">
+      </div>
+
+      <span class="dropdown-item" (click)="removeFromPlaylist(video)">
+            <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete from {{playlist?.displayName}}</ng-container>
+          </span>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
new file mode 100644
index 000000000..eb869f69a
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
@@ -0,0 +1,124 @@
+@import '_variables';
+@import '_mixins';
+@import '_miniature';
+
+.video {
+  display: flex;
+  align-items: center;
+  background-color: var(--mainBackgroundColor);
+  padding: 10px;
+  border-bottom: 1px solid $separator-border-color;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+
+    .more {
+      display: block;
+    }
+  }
+
+  &.playing {
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+
+  a {
+    @include disable-default-a-behaviour;
+
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    flex-grow: 1;
+
+    .position {
+      font-weight: $font-semibold;
+      margin-right: 10px;
+      color: $grey-foreground-color;
+      min-width: 20px;
+
+      my-global-icon {
+        @include apply-svg-color($grey-foreground-color);
+
+        width: 17px;
+        position: relative;
+        left: -2px;
+      }
+    }
+
+    my-video-thumbnail {
+      @include thumbnail-size-component(130px, 72px);
+
+      display: flex; // Avoids an issue with line-height that adds space below the element
+      margin-right: 10px;
+    }
+
+    .video-info {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+
+      a {
+        color: var(--mainForegroundColor);
+        width: fit-content;
+
+        &:hover {
+          text-decoration: underline !important;
+        }
+      }
+
+      .video-info-name {
+        font-size: 18px;
+        font-weight: $font-semibold;
+
+        @include ellipsis;
+      }
+
+      .video-info-account, .video-info-timestamp {
+        color: $grey-foreground-color;
+      }
+    }
+  }
+
+  .more {
+    justify-self: flex-end;
+    margin-left: auto;
+    cursor: pointer;
+    display: none;
+
+    &.show {
+      display: block;
+    }
+
+    .icon-more {
+      @include apply-svg-color($grey-foreground-color);
+
+      display: flex;
+
+      &::after {
+        border: none;
+      }
+    }
+
+    .dropdown-item {
+      @include dropdown-with-icon-item;
+    }
+
+    .timestamp-options {
+      padding-top: 0;
+      padding-left: 35px;
+      margin-bottom: 15px;
+
+      > div {
+        display: flex;
+        align-items: center;
+      }
+
+      input {
+        @include peertube-button;
+        @include orange-button;
+
+        margin-top: 10px;
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
new file mode 100644
index 000000000..c0cfd855d
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
@@ -0,0 +1,149 @@
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'
+import { Video } from '@app/shared/video/video.model'
+import { VideoPlaylistElementUpdate } from '@shared/models'
+import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
+import { ActivatedRoute } from '@angular/router'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoService } from '@app/shared/video/video.service'
+import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
+import { secondsToTime } from '../../../assets/player/utils'
+
+@Component({
+  selector: 'my-video-playlist-element-miniature',
+  styleUrls: [ './video-playlist-element-miniature.component.scss' ],
+  templateUrl: './video-playlist-element-miniature.component.html'
+})
+export class VideoPlaylistElementMiniatureComponent {
+  @ViewChild('moreDropdown') moreDropdown: NgbDropdown
+
+  @Input() playlist: VideoPlaylist
+  @Input() video: Video
+  @Input() owned = false
+  @Input() playing = false
+  @Input() rowLink = false
+  @Input() accountLink = true
+
+  @Output() elementRemoved = new EventEmitter<Video>()
+
+  displayTimestampOptions = false
+
+  timestampOptions: {
+    startTimestampEnabled: boolean
+    startTimestamp: number
+    stopTimestampEnabled: boolean
+    stopTimestamp: number
+  } = {} as any
+
+  constructor (
+    private authService: AuthService,
+    private serverService: ServerService,
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private route: ActivatedRoute,
+    private i18n: I18n,
+    private videoService: VideoService,
+    private videoPlaylistService: VideoPlaylistService
+  ) {}
+
+  buildRouterLink () {
+    if (!this.playlist) return null
+
+    return [ '/videos/watch/playlist', this.playlist.uuid ]
+  }
+
+  buildRouterQuery () {
+    if (!this.video) return {}
+
+    return {
+      videoId: this.video.uuid,
+      start: this.video.playlistElement.startTimestamp,
+      stop: this.video.playlistElement.stopTimestamp
+    }
+  }
+
+  isVideoBlur (video: Video) {
+    return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig())
+  }
+
+  removeFromPlaylist (video: Video) {
+    this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, video.id)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Video removed from {{name}}', { name: this.playlist.displayName }))
+
+            this.elementRemoved.emit(this.video)
+          },
+
+          err => this.notifier.error(err.message)
+        )
+
+    this.moreDropdown.close()
+  }
+
+  updateTimestamps (video: Video) {
+    const body: VideoPlaylistElementUpdate = {}
+
+    body.startTimestamp = this.timestampOptions.startTimestampEnabled ? this.timestampOptions.startTimestamp : null
+    body.stopTimestamp = this.timestampOptions.stopTimestampEnabled ? this.timestampOptions.stopTimestamp : null
+
+    this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, video.id, body)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Timestamps updated'))
+
+            video.playlistElement.startTimestamp = body.startTimestamp
+            video.playlistElement.stopTimestamp = body.stopTimestamp
+          },
+
+          err => this.notifier.error(err.message)
+        )
+
+    this.moreDropdown.close()
+  }
+
+  formatTimestamp (video: Video) {
+    const start = video.playlistElement.startTimestamp
+    const stop = video.playlistElement.stopTimestamp
+
+    const startFormatted = secondsToTime(start, true, ':')
+    const stopFormatted = secondsToTime(stop, true, ':')
+
+    if (start === null && stop === null) return ''
+
+    if (start !== null && stop === null) return this.i18n('Starts at ') + startFormatted
+    if (start === null && stop !== null) return this.i18n('Stops at ') + stopFormatted
+
+    return this.i18n('Starts at ') + startFormatted + this.i18n(' and stops at ') + stopFormatted
+  }
+
+  onDropdownOpenChange () {
+    this.displayTimestampOptions = false
+  }
+
+  toggleDisplayTimestampsOptions (event: Event, video: Video) {
+    event.preventDefault()
+
+    this.displayTimestampOptions = !this.displayTimestampOptions
+
+    if (this.displayTimestampOptions === true) {
+      this.timestampOptions = {
+        startTimestampEnabled: false,
+        stopTimestampEnabled: false,
+        startTimestamp: 0,
+        stopTimestamp: video.duration
+      }
+
+      if (video.playlistElement.startTimestamp) {
+        this.timestampOptions.startTimestampEnabled = true
+        this.timestampOptions.startTimestamp = video.playlistElement.startTimestamp
+      }
+
+      if (video.playlistElement.stopTimestamp) {
+        this.timestampOptions.stopTimestampEnabled = true
+        this.timestampOptions.stopTimestamp = video.playlistElement.stopTimestamp
+      }
+    }
+  }
+}
-- 
cgit v1.2.3