<div class="header">
<div class="first-row">
<div i18n class="title">Save to</div>
-
- <div class="options" (click)="displayOptions = !displayOptions">
- <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
-
- <span i18n>Options</span>
- </div>
</div>
+ </div>
- <div class="options-row" *ngIf="displayOptions">
- <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 class="input-container">
+ <input type="text" placeholder="Search playlists" i18n-placeholder [(ngModel)]="videoPlaylistSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" />
+ </div>
- <div>
+ <div class="playlists">
+ <div
+ *ngFor="let playlist of videoPlaylists"
+ class="playlist dropdown-item" [ngClass]="{ 'has-optional-row': playlist.optionalRowDisplayed }"
+ >
+ <div class="primary-row">
<my-peertube-checkbox
- inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
- i18n-labelText labelText="Stop at"
+ [disabled]="isPresentMultipleTimes(playlist) || playlist.optionalRowDisplayed" [inputName]="getPrimaryInputName(playlist)"
+ [ngModel]="isPrimaryCheckboxChecked(playlist)" [onPushWorkaround]="true"
+ (click)="toggleMainPlaylist($event, playlist)"
></my-peertube-checkbox>
- <my-timestamp-input
- [timestamp]="timestampOptions.stopTimestamp"
- [maxTimestamp]="video.duration"
- [disabled]="!timestampOptions.stopTimestampEnabled"
- [(ngModel)]="timestampOptions.stopTimestamp"
- ></my-timestamp-input>
+ <label class="display-name" (click)="toggleMainPlaylist($event, playlist)">
+ {{ playlist.displayName }}
+ </label>
+
+ <div class="optional-row-icon" *ngIf="isPrimaryCheckboxChecked(playlist)" (click)="toggleOptionalRow(playlist)">
+ <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
+ </div>
</div>
- </div>
- </div>
- <div class="input-container">
- <input type="text" placeholder="Search playlists" i18n-placeholder [(ngModel)]="videoPlaylistSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" />
- </div>
+ <div class="optional-rows" *ngIf="playlist.optionalRowDisplayed">
+ <div class="labels">
+ <div i18n>Start at</div>
+ <div i18n>Stop at</div>
+ </div>
- <div class="playlists">
- <div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)">
- <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist" [onPushWorkaround]="true"></my-peertube-checkbox>
+ <div *ngFor="let element of buildOptionalRowElements(playlist)">
+ <my-peertube-checkbox
+ [inputName]="getOptionalInputName(playlist, element)"
+ [ngModel]="element.enabled" [onPushWorkaround]="true"
+ (click)="toggleOptionalPlaylist($event, playlist, element, startAt.timestamp, stopAt.timestamp)"
+ ></my-peertube-checkbox>
- <div class="display-name">
- {{ playlist.displayName }}
+ <my-timestamp-input
+ [maxTimestamp]="video.duration"
+ [(ngModel)]="element.startTimestamp"
+ (inputBlur)="onElementTimestampUpdate(playlist, element)"
+ #startAt
+ ></my-timestamp-input>
- <div *ngIf="playlist.inPlaylist && (playlist.startTimestamp || playlist.stopTimestamp)" class="timestamp-info">
- {{ formatTimestamp(playlist) }}
+ <my-timestamp-input
+ [maxTimestamp]="video.duration"
+ [(ngModel)]="element.stopTimestamp"
+ (inputBlur)="onElementTimestampUpdate(playlist, element)"
+ #stopAt
+ ></my-timestamp-input>
</div>
</div>
</div>
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'
import { AuthService, DisableForReuseHook, Notifier } from '@app/core'
import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
-import { Video, VideoExistInPlaylist, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPrivacy } from '@shared/models'
+import { Video, VideoExistInPlaylist, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPrivacy, VideoPlaylistElementUpdate } from '@shared/models'
import { secondsToTime } from '../../../assets/player/utils'
import { VIDEO_PLAYLIST_DISPLAY_NAME_VALIDATOR } from '../form-validators/video-playlist-validators'
import { CachedPlaylist, VideoPlaylistService } from './video-playlist.service'
+import { invoke, last } from 'lodash'
const logger = debug('peertube:playlists:VideoAddToPlaylistComponent')
+type PlaylistElement = {
+ enabled: boolean
+ playlistElementId?: number
+ startTimestamp?: number
+ stopTimestamp?: number
+}
+
type PlaylistSummary = {
id: number
- inPlaylist: boolean
displayName: string
+ optionalRowDisplayed: boolean
- playlistElementId?: number
- startTimestamp?: number
- stopTimestamp?: number
+ elements: PlaylistElement[]
}
@Component({
@Input() lazyLoad = false
isNewPlaylistBlockOpened = false
+
videoPlaylistSearch: string
videoPlaylistSearchChanged = new Subject<string>()
+
videoPlaylists: PlaylistSummary[] = []
- timestampOptions: {
- startTimestampEnabled: boolean
- startTimestamp: number
- stopTimestampEnabled: boolean
- stopTimestamp: number
- }
- displayOptions = false
private disabled = false
this.videoPlaylists = []
this.videoPlaylistSearch = undefined
- this.resetOptions(true)
this.load()
this.cd.markForCheck()
load () {
logger('Loading component')
- this.listenToPlaylistChanges()
+ this.listenToVideoPlaylistChange()
this.videoPlaylistService.listMyPlaylistWithCache(this.user, this.videoPlaylistSearch)
.subscribe(playlistsResult => {
openChange (opened: boolean) {
if (opened === false) {
this.isNewPlaylistBlockOpened = false
- this.displayOptions = false
}
}
this.isNewPlaylistBlockOpened = true
}
- togglePlaylist (event: Event, playlist: PlaylistSummary) {
- event.preventDefault()
+ toggleMainPlaylist (e: Event, playlist: PlaylistSummary) {
+ e.preventDefault()
+
+ if (this.isPresentMultipleTimes(playlist) || playlist.optionalRowDisplayed) return
- if (playlist.inPlaylist === true) {
- this.removeVideoFromPlaylist(playlist)
+ if (playlist.elements.length === 0) {
+ const element: PlaylistElement = {
+ enabled: true,
+ playlistElementId: undefined,
+ startTimestamp: 0,
+ stopTimestamp: this.video.duration
+ }
+
+ this.addVideoInPlaylist(playlist, element)
} else {
- this.addVideoInPlaylist(playlist)
+ this.removeVideoFromPlaylist(playlist, playlist.elements[0].playlistElementId)
+ playlist.elements = []
}
- playlist.inPlaylist = !playlist.inPlaylist
- this.resetOptions()
+ this.cd.markForCheck()
+ }
+
+ toggleOptionalPlaylist (e: Event, playlist: PlaylistSummary, element: PlaylistElement, startTimestamp: number, stopTimestamp: number) {
+ e.preventDefault()
+
+ if (element.enabled) {
+ this.removeVideoFromPlaylist(playlist, element.playlistElementId)
+ element.enabled = false
+
+ // Hide optional rows pane when the user unchecked all the playlists
+ if (this.isPrimaryCheckboxChecked(playlist) === false) {
+ playlist.optionalRowDisplayed = false
+ }
+ } else {
+ const element: PlaylistElement = {
+ enabled: true,
+ playlistElementId: undefined,
+ startTimestamp,
+ stopTimestamp
+ }
+
+ this.addVideoInPlaylist(playlist, element)
+ }
this.cd.markForCheck()
}
)
}
- resetOptions (resetTimestamp = false) {
- this.displayOptions = false
+ onVideoPlaylistSearchChanged () {
+ this.videoPlaylistSearchChanged.next()
+ }
- this.timestampOptions = {} as any
- this.timestampOptions.startTimestampEnabled = false
- this.timestampOptions.stopTimestampEnabled = false
+ isPrimaryCheckboxChecked (playlist: PlaylistSummary) {
+ return playlist.elements.filter(e => e.enabled)
+ .length !== 0
+ }
- if (resetTimestamp) {
- this.timestampOptions.startTimestamp = 0
- this.timestampOptions.stopTimestamp = this.video.duration
- }
+ toggleOptionalRow (playlist: PlaylistSummary) {
+ playlist.optionalRowDisplayed = !playlist.optionalRowDisplayed
+
+ this.cd.markForCheck()
}
- formatTimestamp (playlist: PlaylistSummary) {
- const start = playlist.startTimestamp ? secondsToTime(playlist.startTimestamp) : ''
- const stop = playlist.stopTimestamp ? secondsToTime(playlist.stopTimestamp) : ''
+ getPrimaryInputName (playlist: PlaylistSummary) {
+ return 'in-playlist-primary-' + playlist.id
+ }
- return `(${start}-${stop})`
+ getOptionalInputName (playlist: PlaylistSummary, element?: PlaylistElement) {
+ const suffix = element
+ ? '-' + element.playlistElementId
+ : ''
+
+ return 'in-playlist-optional-' + playlist.id + suffix
}
- onVideoPlaylistSearchChanged () {
- this.videoPlaylistSearchChanged.next()
+ buildOptionalRowElements (playlist: PlaylistSummary) {
+ const elements = playlist.elements
+
+ const lastElement = elements.length === 0
+ ? undefined
+ : elements[elements.length - 1]
+
+ // Build an empty last element
+ if (!lastElement || lastElement.enabled === true) {
+ elements.push({
+ enabled: false,
+ startTimestamp: 0,
+ stopTimestamp: this.video.duration
+ })
+ }
+
+ return elements
+ }
+
+ isPresentMultipleTimes (playlist: PlaylistSummary) {
+ return playlist.elements.filter(e => e.enabled === true).length > 1
+ }
+
+ onElementTimestampUpdate (playlist: PlaylistSummary, element: PlaylistElement) {
+ if (!element.playlistElementId || element.enabled === false) return
+
+ const body: VideoPlaylistElementUpdate = {
+ startTimestamp: element.startTimestamp,
+ stopTimestamp: element.stopTimestamp
+ }
+
+ this.videoPlaylistService.updateVideoOfPlaylist(playlist.id, element.playlistElementId, body, this.video.id)
+ .subscribe(
+ () => {
+ this.notifier.success($localize`Timestamps updated`)
+ },
+
+ err => {
+ this.notifier.error(err.message)
+ },
+
+ () => this.cd.markForCheck()
+ )
}
- private removeVideoFromPlaylist (playlist: PlaylistSummary) {
- if (!playlist.playlistElementId) return
+ private isOptionalRowDisplayed (playlist: PlaylistSummary) {
+ const elements = playlist.elements.filter(e => e.enabled)
+
+ if (elements.length > 1) return true
- this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, playlist.playlistElementId, this.video.id)
+ if (elements.length === 1) {
+ const element = elements[0]
+
+ if (
+ (element.startTimestamp && element.startTimestamp !== 0) ||
+ (element.stopTimestamp && element.stopTimestamp !== this.video.duration)
+ ) {
+ return true
+ }
+ }
+
+ return false
+ }
+
+ private removeVideoFromPlaylist (playlist: PlaylistSummary, elementId: number) {
+ this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, elementId, this.video.id)
.subscribe(
() => {
this.notifier.success($localize`Video removed from ${playlist.displayName}`)
)
}
- private listenToPlaylistChanges () {
+ private listenToVideoPlaylistChange () {
this.unsubscribePlaylistChanges()
this.listenToPlaylistChangeSub = this.videoPlaylistService.listenToVideoPlaylistChange(this.video.id)
private rebuildPlaylists (existResult: VideoExistInPlaylist[]) {
logger('Got existing results for %d.', this.video.id, existResult)
+ const oldPlaylists = this.videoPlaylists
+
this.videoPlaylists = []
for (const playlist of this.playlistsData) {
- const existingPlaylist = existResult.find(p => p.playlistId === playlist.id)
+ const existingPlaylists = existResult.filter(p => p.playlistId === playlist.id)
- this.videoPlaylists.push({
+ const playlistSummary = {
id: playlist.id,
+ optionalRowDisplayed: false,
displayName: playlist.displayName,
- inPlaylist: !!existingPlaylist,
- playlistElementId: existingPlaylist ? existingPlaylist.playlistElementId : undefined,
- startTimestamp: existingPlaylist ? existingPlaylist.startTimestamp : undefined,
- stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
- })
+ elements: existingPlaylists.map(e => ({
+ enabled: true,
+ playlistElementId: e.playlistElementId,
+ startTimestamp: e.startTimestamp || 0,
+ stopTimestamp: e.stopTimestamp || this.video.duration
+ }))
+ }
+
+ const oldPlaylist = oldPlaylists.find(p => p.id === playlist.id)
+ playlistSummary.optionalRowDisplayed = oldPlaylist
+ ? oldPlaylist.optionalRowDisplayed
+ : this.isOptionalRowDisplayed(playlistSummary)
+
+ this.videoPlaylists.push(playlistSummary)
}
logger('Rebuilt playlist state for video %d.', this.video.id, this.videoPlaylists)
this.cd.markForCheck()
}
- private addVideoInPlaylist (playlist: PlaylistSummary) {
+ private addVideoInPlaylist (playlist: PlaylistSummary, element: PlaylistElement) {
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
+ if (element.startTimestamp) body.startTimestamp = element.startTimestamp
+ if (element.stopTimestamp && element.stopTimestamp !== this.video.duration) body.stopTimestamp = element.stopTimestamp
this.videoPlaylistService.addVideoInPlaylist(playlist.id, body)
.subscribe(
- () => {
+ res => {
const message = body.startTimestamp || body.stopTimestamp
- ? $localize`Video added in ${playlist.displayName} at timestamps ${this.formatTimestamp(playlist)}`
+ ? $localize`Video added in ${playlist.displayName} at timestamps ${this.formatTimestamp(element)}`
: $localize`Video added in ${playlist.displayName}`
this.notifier.success(message)
+
+ if (element) element.playlistElementId = res.videoPlaylistElement.id
},
err => {
() => this.cd.markForCheck()
)
}
+
+ private formatTimestamp (element: PlaylistElement) {
+ const start = element.startTimestamp ? secondsToTime(element.startTimestamp) : ''
+ const stop = element.stopTimestamp ? secondsToTime(element.stopTimestamp) : ''
+
+ return `(${start}-${stop})`
+ }
}
projects / github / Chocobozzz / PeerTube.git / commitdiff
