6 files changed, 486 insertions, 0 deletions

diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
new file mode 100644
index 000000000..c7c5a0b69
--- /dev/null
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
@@ -0,0 +1,33 @@
+<ng-template #modal let-close="close" let-dismiss="dismiss">
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Change ownership</h4>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
+  </div>
+
+  <div class="modal-body" [formGroup]="form">
+    <div class="form-group">
+      <label i18n for="next-ownership-username">Select the next owner</label>
+      <p-autoComplete formControlName="username" [suggestions]="usernamePropositions"
+                      (completeMethod)="search($event)" id="next-ownership-username"></p-autoComplete>
+      <div *ngIf="formErrors.username" class="form-error">
+        {{ formErrors.username }}
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-footer">
+    <div class="form-group inputs">
+      <input
+        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        (click)="dismiss()" (key.enter)="dismiss()"
+      >
+
+      <input
+        type="submit" i18n-value value="Submit" class="action-button-submit"
+        [disabled]="!form.valid"
+        (click)="close()"
+      />
+    </div>
+  </div>
+</ng-template>
diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
new file mode 100644
index 000000000..a79fec179
--- /dev/null
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
@@ -0,0 +1,10 @@
+@import '_variables';
+@import '_mixins';
+
+p-autocomplete {
+  display: block;
+}
+
+.form-group {
+  margin: 20px 0;
+}
\ No newline at end of file
diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.ts b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.ts
new file mode 100644
index 000000000..84237dee1
--- /dev/null
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.ts
@@ -0,0 +1,69 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
+import { Notifier, UserService } from '@app/core'
+import { OWNERSHIP_CHANGE_USERNAME_VALIDATOR } from '@app/shared/form-validators/video-ownership-change-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { Video, VideoOwnershipService } from '@app/shared/shared-main'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+
+@Component({
+  selector: 'my-video-change-ownership',
+  templateUrl: './video-change-ownership.component.html',
+  styleUrls: [ './video-change-ownership.component.scss' ]
+})
+export class VideoChangeOwnershipComponent extends FormReactive implements OnInit {
+  @ViewChild('modal', { static: true }) modal: ElementRef
+
+  usernamePropositions: string[]
+
+  error: string = null
+
+  private video: Video | undefined = undefined
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private videoOwnershipService: VideoOwnershipService,
+    private notifier: Notifier,
+    private userService: UserService,
+    private modalService: NgbModal
+    ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      username: OWNERSHIP_CHANGE_USERNAME_VALIDATOR
+    })
+    this.usernamePropositions = []
+  }
+
+  show (video: Video) {
+    this.video = video
+    this.modalService
+      .open(this.modal, { centered: true })
+      .result
+      .then(() => this.changeOwnership())
+      .catch((_) => _) // Called when closing (cancel) the modal without validating, do nothing
+  }
+
+  search (event: { query: string }) {
+    const query = event.query
+    this.userService.autocomplete(query)
+      .subscribe(
+        usernames => this.usernamePropositions = usernames,
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  changeOwnership () {
+    const username = this.form.value['username']
+
+    this.videoOwnershipService
+      .changeOwnership(this.video.id, username)
+      .subscribe(
+        () => this.notifier.success($localize`Ownership change request sent.`),
+
+        err => this.notifier.error(err.message)
+      )
+  }
+}
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html
new file mode 100644
index 000000000..977f7b03b
--- /dev/null
+++ b/client/src/app/+my-library/my-videos/my-videos.component.html
@@ -0,0 +1,58 @@
+<h1>
+  <span>
+    <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
+    <ng-container i18n>My videos</ng-container>
+    <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
+  </span>
+
+  <div>
+    <a routerLink="/my-library/video-imports" class="button-link">
+      <my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon>
+      <ng-container i18n>My imports</ng-container>
+    </a>
+
+    <a routerLink="/my-library/ownership" class="button-link">
+      <my-global-icon iconName="users" aria-hidden="true"></my-global-icon>
+      <ng-container i18n>Ownership changes</ng-container>
+    </a>
+  </div>
+</h1>
+
+<div class="videos-header d-flex justify-content-between">
+  <div class="has-feedback has-clear">
+    <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch"
+      (ngModelChange)="onVideosSearchChanged()" />
+    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
+    <span class="sr-only" i18n>Clear filters</span>
+  </div>
+</div>
+
+<my-videos-selection
+  [pagination]="pagination"
+  [(selection)]="selection"
+  [(videosModel)]="videos"
+  [miniatureDisplayOptions]="miniatureDisplayOptions"
+  [titlePage]="titlePage"
+  [getVideosObservableFunction]="getVideosObservableFunction"
+  [ownerDisplayType]="ownerDisplayType"
+  #videosSelection
+>
+  <ng-template ptTemplate="globalButtons">
+    <span class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()">
+      <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
+      <ng-container i18n>Delete</ng-container>
+    </span>
+  </ng-template>
+
+  <ng-template ptTemplate="rowButtons" let-video>
+    <div class="action-button">
+      <my-edit-button label [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button>
+
+      <my-action-dropdown [actions]="videoActions" [entry]="{ video: video }"></my-action-dropdown>
+    </div>
+  </ng-template>
+</my-videos-selection>
+
+
+<my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership>
+<my-live-stream-information #liveStreamInformationModal></my-live-stream-information>
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss
new file mode 100644
index 000000000..59fc5fe80
--- /dev/null
+++ b/client/src/app/+my-library/my-videos/my-videos.component.scss
@@ -0,0 +1,138 @@
+@import '_variables';
+@import '_mixins';
+
+input[type=text] {
+  @include peertube-input-text(300px);
+}
+
+h1 {
+  display: flex;
+  justify-content: space-between;
+
+  .button-link {
+    @include peertube-button-link;
+    @include grey-button;
+    @include button-with-icon(18px, 3px, -1px);
+
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}
+
+.action-button-delete-selection {
+  display: inline-block;
+
+  @include peertube-button;
+  @include orange-button;
+  @include button-with-icon(21px);
+
+  my-global-icon {
+    @include apply-svg-color(#fff);
+  }
+}
+
+::ng-deep {
+  .video {
+    flex-wrap: wrap;
+  }
+
+  .action-button span {
+    white-space: nowrap;
+  }
+
+  .video-miniature {
+    &.display-as-row {
+      // width: min-content !important;
+      width: 100% !important;
+
+      .video-bottom .video-miniature-information {
+        width: max-content !important;
+        min-width: unset !important;
+      }
+    }
+
+    .video-bottom {
+      max-width: 350px;
+    }
+  }
+}
+
+.action-button {
+  display: flex;
+  margin-left: 55px;
+  margin-top: 10px;
+  align-self: flex-end;
+}
+
+my-edit-button {
+  margin-right: 10px;
+}
+
+@media screen and (max-width: $small-view) {
+  h1 {
+    flex-direction: column;
+
+    > span,
+    .button-link {
+      margin-bottom: 10px;
+    }
+  }
+
+  .action-button {
+    flex-direction: column;
+    align-self: center;
+    align-items: center;
+    margin-left: 0px;
+  }
+
+  my-edit-button {
+    margin: 15px 0 5px 0;
+    width: 100%;
+    text-align: center;
+
+    ::ng-deep {
+      .action-button {
+        /* same width than a.video-thumbnail */
+        width: $video-thumbnail-width;
+      }
+    }
+  }
+
+  ::ng-deep {
+    .video-miniature {
+      align-items: center;
+
+      .video-bottom,
+      .video-bottom .video-miniature-information {
+        /* same width than a.video-thumbnail */
+        max-width: $video-thumbnail-width !important;
+      }
+    }
+  }
+}
+
+// Adapt my-video-miniature on small screens with menu
+@media screen and (min-width: $small-view) and (max-width: #{breakpoint(lg) + ($not-expanded-horizontal-margins / 3) * 2}) {
+  :host-context(.main-col:not(.expanded)) {
+    ::ng-deep {
+      .video-miniature {
+        flex-direction: column;
+
+        .video-miniature-name {
+          max-width: $video-thumbnail-width;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $mobile-view) {
+  .videos-header {
+    flex-direction: column;
+
+    input[type=text] {
+      width: 100% !important;
+    }
+  }
+}
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts
new file mode 100644
index 000000000..e89bb12e1
--- /dev/null
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@@ -0,0 +1,178 @@
+import { concat, Observable, Subject } from 'rxjs'
+import { debounceTime, tap, toArray } from 'rxjs/operators'
+import { Component, OnInit, ViewChild } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+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({
+  templateUrl: './my-videos.component.html',
+  styleUrls: [ './my-videos.component.scss' ]
+})
+export class MyVideosComponent 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: 10,
+    totalItems: null
+  }
+  miniatureDisplayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    privacyLabel: false,
+    privacyText: true,
+    state: true,
+    blacklistInfo: true
+  }
+  ownerDisplayType: OwnerDisplayType = 'videoChannel'
+
+  videoActions: DropdownAction<{ video: Video }>[] = []
+
+  videos: Video[] = []
+  videosSearch: string
+  videosSearchChanged = new Subject<string>()
+  getVideosObservableFunction = this.getVideosObservable.bind(this)
+
+  constructor (
+    protected router: Router,
+    protected serverService: ServerService,
+    protected route: ActivatedRoute,
+    protected authService: AuthService,
+    protected notifier: Notifier,
+    protected screenService: ScreenService,
+    private confirmService: ConfirmService,
+    private videoService: VideoService
+  ) {
+    this.titlePage = $localize`My videos`
+  }
+
+  ngOnInit () {
+    this.buildActions()
+
+    this.videosSearchChanged
+      .pipe(debounceTime(500))
+      .subscribe(() => {
+        this.videosSelection.reloadVideos()
+      })
+  }
+
+  resetSearch () {
+    this.videosSearch = ''
+    this.onVideosSearchChanged()
+  }
+
+  onVideosSearchChanged () {
+    this.videosSearchChanged.next()
+  }
+
+  disableForReuse () {
+    this.videosSelection.disableForReuse()
+  }
+
+  enabledForReuse () {
+    this.videosSelection.enabledForReuse()
+  }
+
+  getVideosObservable (page: number, sort: VideoSortField) {
+    const newPagination = immutableAssign(this.pagination, { currentPage: page })
+
+    return this.videoService.getMyVideos(newPagination, sort, this.videosSearch)
+      .pipe(
+        tap(res => this.pagination.totalItems = res.total)
+      )
+  }
+
+  async deleteSelectedVideos () {
+    const toDeleteVideosIds = Object.keys(this.selection)
+                                    .filter(k => this.selection[ k ] === true)
+                                    .map(k => parseInt(k, 10))
+
+    const res = await this.confirmService.confirm(
+      $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`,
+      $localize`Delete`
+    )
+    if (res === false) return
+
+    const observables: Observable<any>[] = []
+    for (const videoId of toDeleteVideosIds) {
+      const o = this.videoService.removeVideo(videoId)
+                    .pipe(tap(() => this.removeVideoFromArray(videoId)))
+
+      observables.push(o)
+    }
+
+    concat(...observables)
+      .pipe(toArray())
+      .subscribe(
+        () => {
+          this.notifier.success($localize`${toDeleteVideosIds.length} videos deleted.`)
+          this.selection = {}
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  async deleteVideo (video: Video) {
+    const res = await this.confirmService.confirm(
+      $localize`Do you really want to delete ${video.name}?`,
+      $localize`Delete`
+    )
+    if (res === false) return
+
+    this.videoService.removeVideo(video.id)
+        .subscribe(
+          () => {
+            this.notifier.success($localize`Video ${video.name} deleted.`)
+            this.removeVideoFromArray(video.id)
+          },
+
+          error => this.notifier.error(error.message)
+        )
+  }
+
+  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'
+      }
+    ]
+  }
+}