X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bmy-account%2Fmy-account-videos%2Fmy-account-videos.component.ts;h=84f022ad29b7afb6b97626f70a07e516160869b7;hb=f8c00564e7e66c7c9d65ea044a4c1485df0e4c7c;hp=831d5c5b0b1d7a26513616bc31b094add77ffbe4;hpb=aa0f19635ae4632e286de1599fc24f95f32a108c;p=github%2FChocobozzz%2FPeerTube.git 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 831d5c5b0..84f022ad2 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,21 +1,15 @@ import { concat, Observable, Subject } from 'rxjs' -import { tap, toArray, debounceTime } from 'rxjs/operators' -import { Component, ViewChild, OnInit } from '@angular/core' +import { debounceTime, tap, toArray } from 'rxjs/operators' +import { Component, OnInit, 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 { Video } from '../../shared/video/video.model' -import { VideoService } from '../../shared/video/video.service' -import { I18n } from '@ngx-translate/i18n-polyfill' -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 { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService } from '@app/core' import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook' +import { immutableAssign } from '@app/helpers' +import { DropdownAction, Video, VideoService } from '@app/shared/shared-main' +import { LiveStreamInformationComponent } from '@app/shared/shared-video-live' +import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature' +import { VideoSortField } from '@shared/models' +import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component' @Component({ selector: 'my-account-videos', @@ -25,23 +19,28 @@ import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook' export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent + @ViewChild('liveStreamInformationModal', { static: true }) liveStreamInformationModal: LiveStreamInformationComponent titlePage: string selection: SelectionType = {} pagination: ComponentPagination = { currentPage: 1, - itemsPerPage: 5, + itemsPerPage: 10, totalItems: null } miniatureDisplayOptions: MiniatureDisplayOptions = { date: true, views: true, - by: false, + by: true, privacyLabel: false, privacyText: true, state: true, blacklistInfo: true } + ownerDisplayType: OwnerDisplayType = 'videoChannel' + + videoActions: DropdownAction<{ video: Video }>[] = [] + videos: Video[] = [] videosSearch: string videosSearchChanged = new Subject() @@ -54,22 +53,27 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { protected authService: AuthService, protected notifier: Notifier, protected screenService: ScreenService, - private i18n: I18n, private confirmService: ConfirmService, private videoService: VideoService ) { - this.titlePage = this.i18n('My videos') + this.titlePage = $localize`My videos` } ngOnInit () { + this.buildActions() + this.videosSearchChanged - .pipe( - debounceTime(500)) + .pipe(debounceTime(500)) .subscribe(() => { this.videosSelection.reloadVideos() }) } + resetSearch () { + this.videosSearch = '' + this.onVideosSearchChanged() + } + onVideosSearchChanged () { this.videosSearchChanged.next() } @@ -97,8 +101,8 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { .map(k => parseInt(k, 10)) const res = await this.confirmService.confirm( - this.i18n('Do you really want to delete {{deleteLength}} videos?', { deleteLength: toDeleteVideosIds.length }), - this.i18n('Delete') + $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`, + $localize`Delete` ) if (res === false) return @@ -114,8 +118,7 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { .pipe(toArray()) .subscribe( () => { - this.notifier.success(this.i18n('{{deleteLength}} videos deleted.', { deleteLength: toDeleteVideosIds.length })) - + this.notifier.success($localize`${toDeleteVideosIds.length} videos deleted.`) this.selection = {} }, @@ -125,15 +128,15 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { async deleteVideo (video: Video) { const res = await this.confirmService.confirm( - this.i18n('Do you really want to delete {{videoName}}?', { videoName: video.name }), - this.i18n('Delete') + $localize`Do you really want to delete ${video.name}?`, + $localize`Delete` ) if (res === false) return this.videoService.removeVideo(video.id) .subscribe( () => { - this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: video.name })) + this.notifier.success($localize`Video ${video.name} deleted.`) this.removeVideoFromArray(video.id) }, @@ -141,12 +144,36 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { ) } - changeOwnership (event: Event, video: Video) { - event.preventDefault() + changeOwnership (video: Video) { this.videoChangeOwnershipModal.show(video) } + displayLiveInformation (video: Video) { + this.liveStreamInformationModal.show(video) + } + private removeVideoFromArray (id: number) { this.videos = this.videos.filter(v => v.id !== id) } + + private buildActions () { + this.videoActions = [ + { + label: $localize`Display live information`, + handler: ({ video }) => this.displayLiveInformation(video), + isDisplayed: ({ video }) => video.isLive, + iconName: 'live' + }, + { + label: $localize`Change ownership`, + handler: ({ video }) => this.changeOwnership(video), + iconName: 'ownership-change' + }, + { + label: $localize`Delete`, + handler: ({ video }) => this.deleteVideo(video), + iconName: 'delete' + } + ] + } }