From f17fffcc18848f3d7ed8952d734e6cf6e29b884d Mon Sep 17 00:00:00 2001
From: Gordon Lin <75815453+gordlin@users.noreply.github.com>
Date: Mon, 25 Nov 2024 15:20:34 -0500
Subject: [PATCH] Limit video upload size

Fix
---
 src/components/video-editor.vue | 16 +++++++++++++++-
 src/lang/lang.csv               |  2 ++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/video-editor.vue b/src/components/video-editor.vue
index ae4264ea..7f07db7b 100644
--- a/src/components/video-editor.vue
+++ b/src/components/video-editor.vue
@@ -31,11 +31,12 @@
                 </span>
                 <span class="align-middle inline-block">
                     <span>
-                        <div>{{ $t('editor.video.label.drag') }}</div>
+                        <div class="text-center">{{ $t('editor.video.label.drag') }}</div>
                         <div>
                             {{ $t('editor.label.or') }}
                             <span class="text-blue-700 font-bold">{{ $t('editor.label.browse') }}</span>
                             {{ $t('editor.label.upload') }}
+                            {{ ' ' + $t('editor.video.label.sizeLimit', { size: fileSizeLimit }) }}
                         </div>
                     </span>
                     <input ref="videoFileInput" type="file" class="cursor-pointer" @change="onFileChange" />
@@ -94,6 +95,7 @@
 import { Options, Prop, Vue } from 'vue-property-decorator';
 import { ConfigFileStructure, SourceCounts, VideoFile, VideoPanel } from '@/definitions';
 
+import Message from 'vue-m-message';
 import draggable from 'vuedraggable';
 import VideoPreviewV from './helpers/video-preview.vue';
 
@@ -115,6 +117,7 @@ export default class VideoEditorV extends Vue {
     edited = false;
 
     fileType = '';
+    fileSizeLimit = 75; // File size limit in MB
     videoPreviewLoading = false;
     videoPreviewPromise = undefined as Promise<VideoFile> | undefined;
     videoPreview = {} as VideoFile | Record<string, never>;
@@ -196,6 +199,17 @@ export default class VideoEditorV extends Vue {
 
     onFileChange(e: Event): void {
         const file = Array.from((e.target as HTMLInputElement).files as ArrayLike<File>)[0];
+
+        // Block files which are too big
+        if (file.size > this.fileSizeLimit * 1024 * 1024) {
+            Message.error(
+                this.$t('editor.video.sizeExceeded') +
+                    ' ' +
+                    this.$t('editor.video.label.sizeLimit', { size: this.fileSizeLimit })
+            );
+            return;
+        }
+
         this.addUploadedFile(file, 'src');
         this.onVideoEdited();
     }
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
index d748cb97..2ff4e572 100644
--- a/src/lang/lang.csv
+++ b/src/lang/lang.csv
@@ -145,9 +145,11 @@ editor.image.slideshowCaption,Slideshow Caption,1,Légende du diaporama,1
 editor.image.loadingError,An error occurred when trying to load image,1,Une erreur est survenue lors du chargement de l’image.,1
 editor.video.title,Video Title,1,Titre de la vidéo,1
 editor.video.label.drag,Drag your video file here,1,Glissez votre fichier vidéo ici,1
+editor.video.label.sizeLimit,({size}MB limit),1,(limite {size}MB),0
 editor.video.label.captions,Video Captions,1,Sous-titres,1
 editor.video.label.transcript,Video Transcript,1,Transcription,1
 editor.video.label.upload,Upload,1,Télécharger,1
+editor.video.sizeExceeded,File too big!,1,Fichier trop gros !,0
 editor.video.delete,Delete Video,1,Supprimer la vidéo,1
 editor.video.pasteUrl,Paste the URL to a video,1,Collez l'url d'une vidéo,0
 editor.chart.delete,Delete Chart,1,Supprimer le graphique,1