add upload video and move media component to other file

VovaStelmashchuk · Oct 21, 2024 · 44b3f54 · 44b3f54
1 parent a42aef5
commit 44b3f54
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 21 deletions.
diff --git a/src/core/episodeRepo.js b/src/core/episodeRepo.js
@@ -54,6 +54,18 @@ export function updatePodcastNameBySlug(showSlug, episodeSlug, podcastName) {
   );
 }
 
+export function updateVideoPathBySlug(showSlug, episodeSlug, videoPath) {
+  return Database.collection('posts').updateOne(
+    {
+      showSlug: showSlug,
+      slug: episodeSlug
+    },
+    {
+      $set: { videoPath: videoPath }
+    }
+  );
+}
+
 export function updateTimeCodeBySlug(showSlug, episodeSlug, index, time, description, isPublicValue) {
   const timeInSeconds = time.split(':').reduce((acc, time) => (60 * acc) + +time, 0);
   return Database.collection('posts').updateOne(

diff --git a/src/routers/admin/detail/file.js b/src/routers/admin/detail/file.js
@@ -1,14 +1,34 @@
 import fs from 'fs'
 import path from 'path'
+import { uploadFileFromPath } from "../../../minio/utils.js";
+import { updateVideoPathBySlug } from '../../../core/episodeRepo.js';
+import dotenv from 'dotenv';
+
+dotenv.config();
+const startUrl = process.env.S3_START_URL;
+
+function fileSuffix() {
+  const count = 64;
+  let result = '';
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const charactersLength = characters.length;
+  for (let i = 0; i < count; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength))
+  }
+  return result
+}
 
 async function uploadVideo(request, h) {
   try {
     const data = request.payload;
 
     if (data.video) {
+      const fileFormat = "mp4";
+      const showSlug = request.params.showSlug;
+      const episodeSlug = request.params.episodeSlug;
+      const saveFileName = `${episodeSlug}-${fileSuffix()}.${fileFormat}`;
       const file = data.video;
       console.log(file);
-      const filename = 'test.mov';
 
       const uploadDir = `uploads/`;
       fs.mkdirSync(uploadDir, { recursive: true });
@@ -17,7 +37,7 @@ async function uploadVideo(request, h) {
         fs.mkdirSync(uploadDir);
       }
 
-      const filePath = path.join(uploadDir, filename);
+      const filePath = path.join(uploadDir, saveFileName);
       const fileStream = fs.createWriteStream(filePath);
 
       // Pipe the file to the file system
@@ -27,16 +47,24 @@ async function uploadVideo(request, h) {
         file.on('end', () => resolve());
       });
 
-      return h
-        .response({
-          status: 'success',
-          message: 'File uploaded successfully',
-          data: {
-            filename: filename,
-            path: filePath,
-          },
-        })
-        .code(200);
+      const s3FileKey = `${showSlug}/videos/${saveFileName}`
+      await uploadFileFromPath(s3FileKey, filePath, "video/mov");
+      await updateVideoPathBySlug(showSlug, episodeSlug, s3FileKey);
+
+      console.log(`File uploaded to S3: ${s3FileKey}`);
+
+      return h.view(
+        'media_component',
+        {
+          showAudio: false,
+          showVideo: true,
+          videoUrl: `${startUrl}/${s3FileKey}`,
+          showUploadVideoButton: false,
+        },
+        {
+          layout: false
+        }
+      )
     } else {
       return h
         .response({ status: 'fail', message: 'No file received' })
@@ -53,7 +81,7 @@ async function uploadVideo(request, h) {
 export function uploadVideoController(server) {
   server.route({
     method: 'POST',
-    path: '/upload-video',
+    path: '/admin/show/{showSlug}/episode/{episodeSlug}/upload',
     handler: uploadVideo,
     options: {
       auth: 'adminSession',

diff --git a/src/routers/admin/detail/getDetails.js b/src/routers/admin/detail/getDetails.js
@@ -8,20 +8,47 @@ async function getPodcastDetails(request, h) {
 
   const podcast = await getPostBySlug(showSlug, episodeSlug);
 
+  let media = {
+    showAudio: false,
+    showVideo: false,
+    showUploadVideoButton: true,
+    audioUrl: buildObjectURL(podcast.originFilePath),
+    uploadUrl: `/admin/show/${showSlug}/episode/${episodeSlug}/upload`,
+  }
+  if (podcast.videoPath && podcast.originFilePath) {
+    media = {
+      showAudio: true,
+      showVideo: true,
+      showUploadVideoButton: false,
+      videoUrl: buildObjectURL(podcast.videoPath),
+      audioUrl: buildObjectURL(podcast.originFilePath),
+    }
+  }
+  if (podcast.videoPath) {
+    media = {
+      showAudio: false,
+      showVideo: true,
+      showUploadVideoButton: false,
+      videoUrl: buildObjectURL(podcast.videoPath),
+    }
+  }
+  if (podcast.originFilePath) {
+    media = {
+      showAudio: true,
+      showVideo: false,
+      showUploadVideoButton: false,
+      audioUrl: buildObjectURL(podcast.originFilePath),
+    }
+  }
+
   return h.view(
     'admin/admin_podcast_detail',
     {
       title: podcast.title,
       slug: podcast.slug,
       showSlug: showSlug,
       episodeSlug: podcast.slug,
-      media: {
-        showAudio: false,
-        showVideo: false,
-        showUploadVideoButton: true,
-        audioUrl: buildObjectURL(podcast.originFilePath),
-        uploadUrl: `/admin/show/${showSlug}/episode/${episodeSlug}/upload`,
-      },
+      media: media,
       timecodes: podcast.charters.map((chapter, index) => {
         const splitTime = chapter.time.split(':');
         const hour = splitTime[0];

diff --git a/src/templates/widgets/media_component.html b/src/templates/widgets/media_component.html
@@ -22,7 +22,7 @@
 
 {{#if showUploadVideoButton}}
 <div class="w-full">
-  <form action="{{uploadUrl}}" method="POST" enctype="multipart/form-data">
+  <form action="{{uploadUrl}}" method="POST" enctype="multipart/form-data" hx-post="{{uploadUrl}}" hx-swap="outerHTML">
     <input type="file" name="video" accept=".mov" required />
     <button type="submit" class="common-button w-full px-4 py-2 my-2 transition-all duration-300 ease-in-out">Upload
       Video</button>