6 files changed, 137 insertions, 7 deletions

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 8a6cb5c32..276d01408 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
@@ -42,7 +42,15 @@
         <my-delete-button (click)="deleteVideo(video)"></my-delete-button>
 
         <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button>
+
+        <my-button i18n label="Change ownership"
+                   className="action-button-change-ownership"
+                   icon="icon-im-with-her"
+                   (click)="changeOwnership($event, video)"
+        ></my-button>
       </div>
     </div>
   </div>
 </div>
+
+<my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership>
\ No newline at end of file
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 cd805be73..8d0dec07d 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
@@ -35,12 +35,6 @@
   }
 }
 
-/deep/ .action-button {
-  &.action-button-delete {
-    margin-right: 10px;
-  }
-}
-
 .video {
   @include row-blocks;
 
@@ -96,6 +90,10 @@
 
   .video-buttons {
     min-width: 190px;
+
+    *:not(:last-child) {
+      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 01e1ef1da..7560f0128 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,6 +1,6 @@
 import { from as observableFrom, Observable } from 'rxjs'
 import { concatAll, tap } from 'rxjs/operators'
-import { Component, OnDestroy, OnInit, Inject, LOCALE_ID } from '@angular/core'
+import { Component, OnDestroy, OnInit, Inject, LOCALE_ID, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { Location } from '@angular/common'
 import { immutableAssign } from '@app/shared/misc/utils'
@@ -14,6 +14,7 @@ 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'
 
 @Component({
   selector: 'my-account-videos',
@@ -33,6 +34,8 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
   protected baseVideoWidth = -1
   protected baseVideoHeight = 155
 
+  @ViewChild('videoChangeOwnershipModal') videoChangeOwnershipModal: VideoChangeOwnershipComponent
+
   constructor (
     protected router: Router,
     protected route: ActivatedRoute,
@@ -133,6 +136,11 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
         )
   }
 
+  changeOwnership (event: Event, video: Video) {
+    event.preventDefault()
+    this.videoChangeOwnershipModal.show(video)
+  }
+
   getStateLabel (video: Video) {
     let suffix: string
 
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
new file mode 100644
index 000000000..69b198faa
--- /dev/null
+++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
@@ -0,0 +1,31 @@
+<ng-template #modal let-close="close" let-dismiss="dismiss">
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Change ownership</h4>
+    <span class="close" aria-label="Close" role="button" (click)="dismiss()"></span>
+  </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 inputs">
+    <div class="form-group inputs">
+      <span i18n class="action-button action-button-cancel" (click)="dismiss()">
+        Cancel
+      </span>
+
+      <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-account/my-account-videos/video-change-ownership/video-change-ownership.component.scss b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.scss
new file mode 100644
index 000000000..a79fec179
--- /dev/null
+++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/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-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
new file mode 100644
index 000000000..0aa4c32ee
--- /dev/null
+++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
@@ -0,0 +1,75 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
+import { NotificationsService } from 'angular2-notifications'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { FormReactive, UserService } from '../../../shared/index'
+import { Video } from '@app/shared/video/video.model'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { FormValidatorService, VideoChangeOwnershipValidatorsService } from '@app/shared'
+import { VideoOwnershipService } from '@app/shared/video-ownership'
+
+@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') modal: ElementRef
+
+  usernamePropositions: string[]
+
+  error: string = null
+
+  private video: Video | undefined = undefined
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private videoChangeOwnershipValidatorsService: VideoChangeOwnershipValidatorsService,
+    private videoOwnershipService: VideoOwnershipService,
+    private notificationsService: NotificationsService,
+    private userService: UserService,
+    private modalService: NgbModal,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      username: this.videoChangeOwnershipValidatorsService.USERNAME
+    })
+    this.usernamePropositions = []
+  }
+
+  show (video: Video) {
+    this.video = video
+    this.modalService
+      .open(this.modal)
+      .result
+      .then(() => this.changeOwnership())
+      .catch((_) => _) // Called when closing (cancel) the modal without validating, do nothing
+  }
+
+  search (event) {
+    const query = event.query
+    this.userService.autocomplete(query)
+      .subscribe(
+        (usernames) => {
+          this.usernamePropositions = usernames
+        },
+
+        err => this.notificationsService.error('Error', err.message)
+      )
+  }
+
+  changeOwnership () {
+    const username = this.form.value['username']
+
+    this.videoOwnershipService
+      .changeOwnership(this.video.id, username)
+      .subscribe(
+        () => this.notificationsService.success(this.i18n('Success'), this.i18n('Ownership changed.')),
+
+        err => this.notificationsService.error(this.i18n('Error'), err.message)
+      )
+  }
+}