9 files changed, 43 insertions, 8 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index e057e394e..82f467e16 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -491,6 +491,23 @@
               </my-peertube-checkbox>
             </div>
 
+            <ng-container formGroupName="webtorrent">
+              <div class="form-group" >
+                <my-peertube-checkbox
+                  inputName="transcodingWebTorrentEnabled" formControlName="enabled"
+                  i18n-labelText labelText="WebTorrent support enabled"
+                >
+                  <ng-template ptTemplate="help">
+                    <ng-container i18n>
+                      <strong>Experimental, we suggest you to not disable webtorrent support for now</strong>
+
+                      <p>If you also enabled HLS support, it will multiply videos storage by 2</p>
+                    </ng-container>
+                  </ng-template>
+                </my-peertube-checkbox>
+              </div>
+            </ng-container>
+
             <ng-container formGroupName="hls">
               <div class="form-group" >
                 <my-peertube-checkbox
@@ -499,7 +516,7 @@
                 >
                   <ng-template ptTemplate="help">
                     <ng-container i18n>
-                      <strong>Requires ffmpeg >= 4.1 and multiplies videos storage by 2!</strong>
+                      <strong>Requires ffmpeg >= 4.1</strong>
 
                       <p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with the current default player:</p>
                       <ul>
@@ -507,6 +524,8 @@
                         <li>Faster playback in particular with long videos</li>
                         <li>More stable playback (less bugs/infinite loading)</li>
                       </ul>
+
+                      <p>If you also enabled WebTorrent support, it will multiply videos storage by 2</p>
                     </ng-container>
                   </ng-template>
                 </my-peertube-checkbox>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index f3fb849bb..8411c4f4f 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -169,6 +169,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
         resolutions: {},
         hls: {
           enabled: null
+        },
+        webtorrent: {
+          enabled: null
         }
       },
       autoBlacklist: {
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 7fb95fe4e..8e76bebb1 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -65,6 +65,9 @@ export class ServerService {
       enabledResolutions: [],
       hls: {
         enabled: false
+      },
+      webtorrent: {
+        enabled: true
       }
     },
     avatar: {
diff --git a/client/src/app/shared/video/modals/video-download.component.html b/client/src/app/shared/video/modals/video-download.component.html
index 935d01330..3619f24e5 100644
--- a/client/src/app/shared/video/modals/video-download.component.html
+++ b/client/src/app/shared/video/modals/video-download.component.html
@@ -9,7 +9,7 @@
       <div class="input-group input-group-sm">
         <div class="input-group-prepend peertube-select-container">
           <select [(ngModel)]="resolutionId">
-            <option *ngFor="let file of video?.files" [value]="file.resolution.id">{{ file.resolution.label }}</option>
+            <option *ngFor="let file of getVideoFiles()" [value]="file.resolution.id">{{ file.resolution.label }}</option>
           </select>
         </div>
         <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
diff --git a/client/src/app/shared/video/modals/video-download.component.ts b/client/src/app/shared/video/modals/video-download.component.ts
index 4022a11e8..0e9e44de7 100644
--- a/client/src/app/shared/video/modals/video-download.component.ts
+++ b/client/src/app/shared/video/modals/video-download.component.ts
@@ -24,12 +24,18 @@ export class VideoDownloadComponent {
     private i18n: I18n
   ) { }
 
+  getVideoFiles () {
+    if (!this.video) return []
+
+    return this.video.getFiles()
+  }
+
   show (video: VideoDetails) {
     this.video = video
 
     this.activeModal = this.modalService.open(this.modal)
 
-    this.resolutionId = this.video.files[0].resolution.id
+    this.resolutionId = this.getVideoFiles()[0].resolution.id
   }
 
   onClose () {
@@ -45,7 +51,7 @@ export class VideoDownloadComponent {
     // HTML select send us a string, so convert it to a number
     this.resolutionId = parseInt(this.resolutionId.toString(), 10)
 
-    const file = this.video.files.find(f => f.resolution.id === this.resolutionId)
+    const file = this.getVideoFiles().find(f => f.resolution.id === this.resolutionId)
     if (!file) {
       console.error('Could not find file with resolution %d.', this.resolutionId)
       return
diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts
index e4d443a06..c2a85d8e8 100644
--- a/client/src/app/shared/video/video-details.model.ts
+++ b/client/src/app/shared/video/video-details.model.ts
@@ -55,4 +55,8 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
   hasHlsPlaylist () {
     return !!this.getHlsPlaylist()
   }
+
+  getFiles () {
+    if (this.files.length === 0) return this.getHlsPlaylist().files
+  }
 }
diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts
index 81c66ff20..6ec187f40 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -56,7 +56,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
 
           this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE
 
-          const videoFiles = (video as VideoDetails).files
+          const videoFiles = (video as VideoDetails).getFiles()
           if (videoFiles.length > 1) { // Already transcoded
             this.waitTranscodingEnabled = false
           }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index ac474b427..5b98a7bd4 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -221,7 +221,7 @@
   </div>
 </div>
 
-<ng-template [ngIf]="video !== null">
+<ng-container *ngIf="video !== null">
   <my-video-support #videoSupportModal [video]="video"></my-video-support>
   <my-video-share #videoShareModal [video]="video" [videoCaptions]="videoCaptions"></my-video-share>
-</ng-template>
+</ng-container>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index af4afd456..c78f5b9a2 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -469,7 +469,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
         redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
         trackerAnnounce: this.video.trackerUrls,
-        videoFiles: this.video.files
+        videoFiles: hlsPlaylist.files
       } as P2PMediaLoaderOptions
 
       Object.assign(options, { p2pMediaLoader })