From 693263e936763a851e3c8c020e3739def8bd4eca Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 4 Apr 2019 10:44:18 +0200 Subject: Refactor videos selection components --- .../my-account-videos.component.html | 63 ++++++++---------- .../my-account-videos.component.scss | 76 +++------------------- .../my-account-videos.component.ts | 72 ++++++-------------- 3 files changed, 57 insertions(+), 154 deletions(-) (limited to 'client/src/app/+my-account') diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html index 3a4054de8..d7993fdc2 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html @@ -1,39 +1,30 @@ -
No results.
+ + + + + Delete + + + + + + + + + + + -
-
-
- -
- - - - -
-
- - Cancel - - - - - Delete - -
-
- -
- - - - - -
-
-
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss index 405ded3f8..87398e7c8 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss @@ -1,75 +1,19 @@ @import '_variables'; @import '_mixins'; -.action-selection-mode { - width: 174px; - display: flex; - justify-content: flex-end; +.action-button-delete-selection { + display: inline-block; - .action-selection-mode-child { - position: fixed; + @include peertube-button; + @include orange-button; + @include button-with-icon(21px); - .action-button { - display: inline-block; - } - - .action-button-cancel-selection { - @include peertube-button; - @include grey-button; - - margin-right: 10px; - } - - .action-button-delete-selection { - @include peertube-button; - @include orange-button; - @include button-with-icon(21px); - - my-global-icon { - @include apply-svg-color(#fff); - } - } - } -} - -.video { - @include row-blocks; - - &:first-child { - margin-top: 47px; - } - - .checkbox-container { - display: flex; - align-items: center; - margin-right: 20px; - margin-left: 12px; - } - - my-video-miniature { - flex-grow: 1; - } - - .video-buttons { - min-width: 190px; - - *:not(:last-child) { - margin-right: 10px; - } + my-global-icon { + @include apply-svg-color(#fff); } } -@media screen and (max-width: $small-view) { - .video { - flex-direction: column; - height: auto; - - .checkbox-container { - display: none; - } - - .video-buttons { - margin-top: 10px; - } - } +my-delete-button, +my-edit-button { + margin-right: 10px; } diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts index bbe86af73..5f29364a8 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts @@ -1,31 +1,33 @@ import { concat, Observable } from 'rxjs' import { tap, toArray } from 'rxjs/operators' -import { Component, Inject, LOCALE_ID, OnDestroy, OnInit, ViewChild } from '@angular/core' +import { Component, ViewChild } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { immutableAssign } from '@app/shared/misc/utils' import { ComponentPagination } from '@app/shared/rest/component-pagination.model' import { Notifier, ServerService } from '@app/core' import { AuthService } from '../../core/auth' import { ConfirmService } from '../../core/confirm' -import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { Video } from '../../shared/video/video.model' import { VideoService } from '../../shared/video/video.service' import { I18n } from '@ngx-translate/i18n-polyfill' -import { VideoPrivacy, VideoState } from '../../../../../shared/models/videos' import { ScreenService } from '@app/shared/misc/screen.service' import { VideoChangeOwnershipComponent } from './video-change-ownership/video-change-ownership.component' import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component' +import { SelectionType, VideosSelectionComponent } from '@app/shared/video/videos-selection.component' +import { VideoSortField } from '@app/shared/video/sort-field.type' +import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook' @Component({ selector: 'my-account-videos', templateUrl: './my-account-videos.component.html', styleUrls: [ './my-account-videos.component.scss' ] }) -export class MyAccountVideosComponent extends AbstractVideoList implements OnInit, OnDestroy { +export class MyAccountVideosComponent implements DisableForReuseHook { + @ViewChild('videosSelection') videosSelection: VideosSelectionComponent @ViewChild('videoChangeOwnershipModal') videoChangeOwnershipModal: VideoChangeOwnershipComponent titlePage: string - checkedVideos: { [ id: number ]: boolean } = {} + selection: SelectionType = {} pagination: ComponentPagination = { currentPage: 1, itemsPerPage: 5, @@ -40,6 +42,8 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni state: true, blacklistInfo: true } + videos: Video[] = [] + getVideosObservableFunction = this.getVideosObservable.bind(this) constructor ( protected router: Router, @@ -50,43 +54,28 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni protected screenService: ScreenService, private i18n: I18n, private confirmService: ConfirmService, - private videoService: VideoService, - @Inject(LOCALE_ID) private localeId: string + private videoService: VideoService ) { - super() - this.titlePage = this.i18n('My videos') } - ngOnInit () { - super.ngOnInit() - } - - ngOnDestroy () { - super.ngOnDestroy() + disableForReuse () { + this.videosSelection.disableForReuse() } - abortSelectionMode () { - this.checkedVideos = {} + enabledForReuse () { + this.videosSelection.enabledForReuse() } - isInSelectionMode () { - return Object.keys(this.checkedVideos).some(k => this.checkedVideos[ k ] === true) - } - - getVideosObservable (page: number) { + getVideosObservable (page: number, sort: VideoSortField) { const newPagination = immutableAssign(this.pagination, { currentPage: page }) - return this.videoService.getMyVideos(newPagination, this.sort) - } - - generateSyndicationList () { - throw new Error('Method not implemented.') + return this.videoService.getMyVideos(newPagination, sort) } async deleteSelectedVideos () { - const toDeleteVideosIds = Object.keys(this.checkedVideos) - .filter(k => this.checkedVideos[ k ] === true) + const toDeleteVideosIds = Object.keys(this.selection) + .filter(k => this.selection[ k ] === true) .map(k => parseInt(k, 10)) const res = await this.confirmService.confirm( @@ -109,7 +98,7 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni () => { this.notifier.success(this.i18n('{{deleteLength}} videos deleted.', { deleteLength: toDeleteVideosIds.length })) - this.abortSelectionMode() + this.selection = {} }, err => this.notifier.error(err.message) @@ -127,7 +116,7 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni .subscribe( () => { this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: video.name })) - this.reloadVideos() + this.removeVideoFromArray(video.id) }, error => this.notifier.error(error.message) @@ -139,27 +128,6 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni this.videoChangeOwnershipModal.show(video) } - getStateLabel (video: Video) { - let suffix: string - - if (video.privacy.id !== VideoPrivacy.PRIVATE && video.state.id === VideoState.PUBLISHED) { - suffix = this.i18n('Published') - } else if (video.scheduledUpdate) { - const updateAt = new Date(video.scheduledUpdate.updateAt.toString()).toLocaleString(this.localeId) - suffix = this.i18n('Publication scheduled on ') + updateAt - } else if (video.state.id === VideoState.TO_TRANSCODE && video.waitTranscoding === true) { - suffix = this.i18n('Waiting transcoding') - } else if (video.state.id === VideoState.TO_TRANSCODE) { - suffix = this.i18n('To transcode') - } else if (video.state.id === VideoState.TO_IMPORT) { - suffix = this.i18n('To import') - } else { - return '' - } - - return ' - ' + suffix - } - private removeVideoFromArray (id: number) { this.videos = this.videos.filter(v => v.id !== id) } -- cgit v1.2.3