Add ability to delete a specific video file

3 files changed, 34 insertions, 1 deletions

diff --git a/client/src/app/+admin/overview/videos/video-list.component.html b/client/src/app/+admin/overview/videos/video-list.component.html
index fdd682ee2..06b9ab347 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.html
+++ b/client/src/app/+admin/overview/videos/video-list.component.html
@@ -107,6 +107,11 @@
             <ul>
               <li *ngFor="let file of video.files">
                 {{ file.resolution.label }}: {{ file.size | bytes: 1 }}
+
+                <my-global-icon
+                  i18n-ngbTooltip ngbTooltip="Delete this file" iconName="delete" role="button"
+                  (click)="removeVideoFile(video, file, 'webtorrent')"
+                ></my-global-icon>
               </li>
             </ul>
           </div>
@@ -117,6 +122,11 @@
             <ul>
               <li *ngFor="let file of video.streamingPlaylists[0].files">
                 {{ file.resolution.label }}: {{ file.size | bytes: 1 }}
+
+                <my-global-icon
+                  i18n-ngbTooltip ngbTooltip="Delete this file" iconName="delete" role="button"
+                  (click)="removeVideoFile(video, file, 'hls')"
+                ></my-global-icon>
               </li>
             </ul>
           </div>
diff --git a/client/src/app/+admin/overview/videos/video-list.component.scss b/client/src/app/+admin/overview/videos/video-list.component.scss
index dcd41a1b4..d538ca30a 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.scss
+++ b/client/src/app/+admin/overview/videos/video-list.component.scss
@@ -13,6 +13,13 @@ my-embed {
 
 .video-info > div {
   display: flex;
+
+  my-global-icon {
+    width: 16px;
+    margin-left: 3px;
+    position: relative;
+    top: -2px;
+  }
 }
 
 .loading {
diff --git a/client/src/app/+admin/overview/videos/video-list.component.ts b/client/src/app/+admin/overview/videos/video-list.component.ts
index 67e52d100..ed7ec54a1 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.ts
+++ b/client/src/app/+admin/overview/videos/video-list.component.ts
@@ -8,7 +8,7 @@ import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { VideoBlockComponent, VideoBlockService } from '@app/shared/shared-moderation'
 import { VideoActionsDisplayType } from '@app/shared/shared-video-miniature'
-import { UserRight, VideoPrivacy, VideoState, VideoStreamingPlaylistType } from '@shared/models'
+import { UserRight, VideoFile, VideoPrivacy, VideoState, VideoStreamingPlaylistType } from '@shared/models'
 import { VideoAdminService } from './video-admin.service'
 
 @Component({
@@ -196,6 +196,22 @@ export class VideoListComponent extends RestTable implements OnInit {
       })
   }
 
+  async removeVideoFile (video: Video, file: VideoFile, type: 'hls' | 'webtorrent') {
+    const message = $localize`Are you sure you want to delete this ${file.resolution.label} file?`
+    const res = await this.confirmService.confirm(message, $localize`Delete file`)
+    if (res === false) return
+
+    this.videoService.removeFile(video.uuid, file.id, type)
+      .subscribe({
+        next: () => {
+          this.notifier.success($localize`File removed.`)
+          this.reloadData()
+        },
+
+        error: err => this.notifier.error(err.message)
+      })
+  }
+
   private async removeVideos (videos: Video[]) {
     const message = prepareIcu($localize`Are you sure you want to delete {count, plural, =1 {this video} other {these {count} videos}}?`)(
       { count: videos.length },