create two thumbnails in different resolutions when uploading the video and display them in the frontend

backend/videoflix/content/tasks.py

@@ -18,19 +18,24 @@ def remove_first_mp4(filename):
 def create_thumbnail(source):
     video_file_path = source.video_file.path
     thumbnail_dir = settings.THUMBNAIL_DIR
-        
-    thumbnail_filename = os.path.splitext(os.path.basename(video_file_path))[0] + '.jpg'
-    thumbnail_path = os.path.join(thumbnail_dir, thumbnail_filename)
-    absolute_thumbnail_path = os.path.abspath(thumbnail_path)
+
+    base_filename = os.path.splitext(os.path.basename(video_file_path))[0]
+    thumbnail_1920_filename = base_filename + '_1920p.jpg'
+    thumbnail_1920_path = os.path.join(thumbnail_dir, thumbnail_1920_filename)
+    thumbnail_480_filename = base_filename + '_480p.jpg'
+    thumbnail_480_path = os.path.join(thumbnail_dir, thumbnail_480_filename)
 
     if not os.path.exists(thumbnail_dir):
         os.makedirs(thumbnail_dir)
 
     try:
-        ffmpeg.input(video_file_path, ss=1).output(absolute_thumbnail_path, vf='scale=300:-1', vframes=1).run(overwrite_output=True)
-        source.thumbnail = os.path.relpath(thumbnail_path, start=settings.MEDIA_ROOT)
+        ffmpeg.input(video_file_path, ss=1).output(thumbnail_1920_path, vf='scale=1920:-1', vframes=1).run(overwrite_output=True)
+        ffmpeg.input(video_file_path, ss=1).output(thumbnail_480_path, vf='scale=480:-1', vframes=1).run(overwrite_output=True)
+
+        source.thumbnail_1920 = os.path.relpath(thumbnail_1920_path, start=settings.MEDIA_ROOT)
+        source.thumbnail_480 = os.path.relpath(thumbnail_480_path, start=settings.MEDIA_ROOT)
+
         source.save()
 
-        print("New video and thumbnail generated")
     except ffmpeg._run.Error as e:
-        print(f"An error occurred: {e.stderr.decode()}")
+        print(f"Ein Fehler ist aufgetreten: {e.stderr.decode()}")

frontend/src/app/components/home/browse/browse.component.html

@@ -21,7 +21,10 @@
       </div>
     </div>
     <video width="100%" height="100%" controls autoplay>
-      <source src="{{ playMovie }}" type="video/mp4" />
+      <source
+        src="{{ playMovie.replace('.mp4', '_1080p.mp4') }}"
+        type="video/mp4"
+      />
       Your browser does not support the video tag.
     </video>
   </div>

frontend/src/app/components/home/browse/categories/categories.component.html

@@ -7,7 +7,9 @@
       <div class="movie" (click)="openCurrentMovie(movie.id)">
         <img
           [ngClass]="{ selected: movie.id === currentMovie }"
-          src="{{ environmentBaseUrl + movie.thumbnail }}"
+          src="{{
+            environmentBaseUrl + movie.thumbnail.replace('.jpg', '_480p.jpg')
+          }} }}"
           alt=""
         />
       </div>
@@ -25,7 +27,9 @@
       <div class="movie" (click)="openCurrentMovie(movie.id)">
         <img
           [ngClass]="{ selected: movie.id === currentMovie }"
-          src="{{ environmentBaseUrl + movie.thumbnail }}"
+          src="{{
+            environmentBaseUrl + movie.thumbnail.replace('.jpg', '_480p.jpg')
+          }}"
           alt=""
         />
       </div>

frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html

@@ -2,7 +2,10 @@
   class="movie-banner"
   [ngStyle]="{
     'background-image':
-      'url(' + environmentBaseUrl + currentMovie[0]?.thumbnail + ')'
+      'url(' +
+      environmentBaseUrl +
+      currentMovie[0]?.thumbnail.replace('.jpg', '_1920p.jpg') +
+      ')'
   }"
 >
   @if (currentMovie.length > 0) {