Import torrents with webtorrent

6 files changed, 49 insertions, 10 deletions

diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
index 00b2d7cb0..b2b6c3d60 100644
--- a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
+++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
@@ -5,7 +5,7 @@
   <ng-template pTemplate="header">
     <tr>
       <th style="width: 40px;"></th>
-      <th i18n>URL</th>
+      <th i18n>Target</th>
       <th i18n>Video</th>
       <th i18n style="width: 150px">State</th>
       <th i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
@@ -22,7 +22,10 @@
       </td>
 
       <td>
-        <a [href]="videoImport.targetUrl" target="_blank" rel="noopener noreferrer">{{ videoImport.targetUrl }}</a>
+        <a *ngIf="videoImport.targetUrl; else torrent" [href]="videoImport.targetUrl" target="_blank" rel="noopener noreferrer">{{ videoImport.targetUrl }}</a>
+        <ng-template #torrent>
+          <span [title]="videoImport.torrentName || videoImport.magnetUri">{{ videoImport.torrentName || videoImport.magnetUri }}</span>
+        </ng-template>
       </td>
 
       <td *ngIf="isVideoImportPending(videoImport)">
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
index 409e4de5e..2f0c9abb5 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
@@ -2,8 +2,16 @@
   <div class="import-video-torrent">
     <div class="icon icon-upload"></div>
 
-    <div class="form-group">
-      <label i18n for="magnetUri">Magnet URI</label>
+    <div class="button-file">
+      <span i18n>Select the torrent to import</span>
+      <input #torrentfileInput type="file" name="torrentfile" id="torrentfile" accept=".torrent" (change)="fileChange()" />
+    </div>
+    <span class="button-file-extension">(.torrent)</span>
+
+    <div class="torrent-or-magnet">Or</div>
+
+    <div class="form-group form-group-magnet-uri">
+      <label i18n for="magnetUri">Paste magnet URI</label>
       <my-help
         helpType="custom" i18n-customHtml
         customHtml="You can import any torrent file that points to a mp4 file. You should make sure you have diffusion rights over the content it points to, otherwise it could cause legal trouble to yourself and your instance."
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
index 1ef5adc25..262b0b68e 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
@@ -20,6 +20,26 @@ $width-size: 190px;
     background-image: url('../../../../assets/images/video/upload.svg');
   }
 
+  .button-file {
+    @include peertube-button-file(auto);
+
+    min-width: 190px;
+  }
+
+  .button-file-extension {
+    display: block;
+    font-size: 12px;
+    margin-top: 5px;
+  }
+
+  .torrent-or-magnet {
+    margin: 10px 0;
+  }
+
+  .form-group-magnet-uri {
+    margin-bottom: 40px;
+  }
+
   input[type=text] {
     @include peertube-input-text($width-size);
     display: block;
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
index 330c37718..9623c2bf4 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core'
+import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
 import { NotificationsService } from 'angular2-notifications'
 import { VideoPrivacy, VideoUpdate } from '../../../../../../shared/models/videos'
@@ -23,6 +23,7 @@ import { VideoImportService } from '@app/shared/video-import'
 })
 export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate {
   @Output() firstStepDone = new EventEmitter<string>()
+  @ViewChild('torrentfileInput') torrentfileInput
 
   videoFileName: string
   magnetUri = ''
@@ -33,7 +34,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
 
   video: VideoEdit
 
-  protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PRIVATE
+  protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC
 
   constructor (
     protected formValidatorService: FormValidatorService,
@@ -62,7 +63,14 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
     return !!this.magnetUri
   }
 
-  importVideo () {
+  fileChange () {
+    const torrentfile = this.torrentfileInput.nativeElement.files[0] as File
+    if (!torrentfile) return
+
+    this.importVideo(torrentfile)
+  }
+
+  importVideo (torrentfile?: Blob) {
     this.isImportingVideo = true
 
     const videoUpdate: VideoUpdate = {
@@ -74,7 +82,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
 
     this.loadingBar.start()
 
-    this.videoImportService.importVideoTorrent(this.magnetUri, videoUpdate).subscribe(
+    this.videoImportService.importVideoTorrent(torrentfile || this.magnetUri, videoUpdate).subscribe(
       res => {
         this.loadingBar.complete()
         this.firstStepDone.emit(res.video.name)
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
index 842ede732..97b402bfe 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
@@ -33,7 +33,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
 
   video: VideoEdit
 
-  protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PRIVATE
+  protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC
 
   constructor (
     protected formValidatorService: FormValidatorService,
diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss
index 02ee295f9..443361f50 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -49,7 +49,7 @@ $background-color:  #F7F7F7;
     background-color: $background-color;
     border-radius: 3px;
     width: 100%;
-    height: 440px;
+    min-height: 440px;
     display: flex;
     justify-content: center;
     align-items: center;