implement montage public audiot

src/core/episodeRepo.js

@@ -59,3 +59,7 @@ export function getPostBySlug(slug) {
   return Database.collection('posts').findOne({ slug: slug });
 }
 
+export function updateMontageStatusBySlug(slug, status) {
+  return Database.collection('posts').updateOne({ slug: slug }, { $set: { montage_status: status } });
+}
+

src/minio/ffmpegApply.js

@@ -10,7 +10,7 @@ import Fs from 'fs'
 export async function applyFFmpegToFileInMinio(inputKey, outputKey, ffmpegCommand) {
   console.log('Applying ffmpeg to file in minio');
   const folder = `.tmp/test-key/`;
-  Fs.rm(folder, { recursive: true }, (err) => { });
+  Fs.rmSync(folder, { recursive: true, force: true });
 
   await downloadFile(inputKey, `${folder}/${inputKey}`);
 

src/montage/publicAudioGenerator.js

@@ -0,0 +1,60 @@
+import { updateMontageStatusBySlug } from '../core/episodeRepo.js';
+import { applyFFmpegToFileInMinio } from '../minio/ffmpegApply.js';
+
+async function createPublicAudioJob(podcast) {
+  const chapters = podcast.charters;
+
+  let complexFilterString = '';
+  let publicIndex = 1;
+
+  chapters.forEach((chapter, index) => {
+    if (chapter.isPublic !== false) {
+      const chapterStartSecond = chapter.timeInSeconds;
+      const chapterEndSecond = chapters[index + 1]?.timeInSeconds;
+
+      const filterStart = `[0]atrim=start=${chapterStartSecond}`;
+
+      let filterMainPart = ''
+
+      if (chapterEndSecond !== undefined) {
+        filterMainPart = `${filterStart}:end=${chapterEndSecond}`;
+      } else {
+        filterMainPart = `${filterStart}`;
+      }
+
+      complexFilterString += `${filterMainPart},asetpts=PTS-STARTPTS[a${publicIndex}]; `;
+      publicIndex++;
+    }
+  });
+
+  // add part with [a0]...[a<publicIndex>]
+  for (let i = 1; i < publicIndex; i++) {
+    complexFilterString += `[a${i}]`;
+  }
+
+  complexFilterString += `concat=n=${publicIndex - 1}:v=0:a=1`;
+
+  await applyFFmpegToFileInMinio(podcast.origin_file, `episodes/${podcast.slug}.mp3`, complexFilterString)
+}
+
+export async function createPublicAudio(podcast) {
+  await modifyPodcastStatus(podcast.slug, 'in_progress');
+
+  createPublicAudioJob(podcast)
+    .then(async () => {
+      await modifyPodcastStatus(podcast.slug, 'success');
+      console.log('Public audio creation successful.');
+    })
+    .catch(async (error) => {
+      await modifyPodcastStatus(podcast.slug, 'failure');
+      console.error('Public audio creation failed:', error);
+    });
+
+  return { status: 'in-progress' };
+}
+
+async function modifyPodcastStatus(slug, status) {
+  updateMontageStatusBySlug(slug, status);
+  console.log(`Updating podcast status to ${status} for ${slug}`);
+}
+

src/public/styles.css

@@ -487,6 +487,24 @@ input {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.common-button:disabled {
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+  background-color: transparent;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.common-button:disabled:hover {
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+  background-color: transparent;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -641,6 +659,14 @@ input {
   inset: 0px;
 }
 
+.left-0 {
+  left: 0px;
+}
+
+.top-0 {
+  top: 0px;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -726,6 +752,10 @@ input {
   aspect-ratio: 1 / 1;
 }
 
+.h-1\.5 {
+  height: 0.375rem;
+}
+
 .h-5 {
   height: 1.25rem;
 }
@@ -810,6 +840,10 @@ input {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -840,6 +874,11 @@ input {
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@@ -1033,6 +1072,20 @@ input {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 html {
   overflow-y: scroll;
 }
@@ -1053,6 +1106,21 @@ html {
   line-height: 1.25;
 }
 
+@keyframes progress {
+  0% {
+    left: -100%;
+  }
+
+  100% {
+    left: 100%;
+  }
+}
+
+.progress-bar {
+  width: 100%;
+  animation: progress 2s infinite linear;
+}
+
 .hover\:bg-blue-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));

src/routers/admin/detail/getDetails.js

@@ -35,7 +35,8 @@ async function podcastDetailsHandler(request, h) {
           link: link.link,
           text: link.title,
         }
-      })
+      }),
+      isAudioBuildInProgress: podcast.montage_status === 'in_progress',
     },
     { layout: 'admin' }
   )

src/routers/admin/details.js

@@ -2,8 +2,7 @@ import { updatePodcastNameBySlug } from "../../core/episodeRepo.js";
 import { adminPodcastGetInfoController } from "./detail/getDetails.js";
 import { editPodcastMetaInfo } from "./detail/edit_meta.js";
 import { getPostBySlug } from "../../core/episodeRepo.js";
-import { buildPublicChapters } from "../../core/generator.js";
-import { applyFFmpegToFileInMinio } from "../../minio/ffmpegApply.js";
+import { createPublicAudio } from "../../montage/publicAudioGenerator.js";
 
 async function updatePodcastName(request, h) {
   const slug = request.params.slug;
@@ -14,59 +13,38 @@ async function updatePodcastName(request, h) {
   return h.response().code(200).header('HX-Trigger', 'update-preview');
 }
 
-async function createPublicAudio(podcast) {
-  const chapters = podcast.charters;
-
-  let complexFilterString = '';
-  let publicIndex = 1;
-
-  chapters.forEach((chapter, index) => {
-    if (chapter.isPublic !== false) {
-      const chapterStartSecond = chapter.timeInSeconds;
-      const chapterEndSecond = chapters[index + 1]?.timeInSeconds;
-
-      const filterStart = `[0]atrim=start=${chapterStartSecond}`;
-
-      let filterMainPart = ''
-
-      if (chapterEndSecond !== undefined) {
-        filterMainPart = `${filterStart}:end=${chapterEndSecond}`;
-      } else {
-        filterMainPart = `${filterStart}`;
-      }
-
-      complexFilterString += `${filterMainPart},asetpts=PTS-STARTPTS[a${publicIndex}]; `;
-      publicIndex++;
-    }
-  });
+async function updateFiles(request, h) {
+  const slug = request.params.slug;
 
-  // add part with [a0]...[a<publicIndex>]
-  for (let i = 1; i < publicIndex; i++) {
-    complexFilterString += `[a${i}]`;
-  }
+  const podcast = await getPostBySlug(slug);
 
-  complexFilterString += `concat=n=${publicIndex - 1}:v=0:a=1`;
+  await createPublicAudio(podcast);
 
-  await applyFFmpegToFileInMinio(podcast.origin_file, `episodes/${podcast.slug}.mp3`, complexFilterString)
+  return h.response().code(200).header('HX-Trigger', 'update-progress');
 }
 
-async function updateFiles(request, h) {
+async function getProgress(request, h) {
   const slug = request.params.slug;
 
   const podcast = await getPostBySlug(slug);
 
-  const publicChapters = buildPublicChapters(podcast.charters);
-
-  console.log('publicChapters', publicChapters);
-
-  await createPublicAudio(podcast);
-
-  return h.response().code(200)
+  if (podcast.montage_status === 'in_progress') {
+    return h.view(
+      'progress',
+      {},
+      {
+        layout: false
+      }
+    )
+  } else {
+    return h.response().code(200)
+  }
 }
 
 export function editPodcastDetails(server) {
   adminPodcastGetInfoController(server)
   editPodcastMetaInfo(server)
+
   server.route({
     method: 'PUT',
     path: '/admin/podcast/{slug}/update-name',
@@ -84,4 +62,13 @@ export function editPodcastDetails(server) {
       auth: 'adminSession',
     }
   });
+
+  server.route({
+    method: 'GET',
+    path: '/admin/podcast/{slug}/progress',
+    handler: getProgress,
+    options: {
+      auth: 'adminSession',
+    }
+  });
 }

src/routers/home.js

@@ -8,7 +8,7 @@ async function podcastListHandler(request, h) {
   const posts = await getPublicPosts();
   const postsWithChartersDescription = posts.map(post => ({
     ...post,
-    chartersDescription: post.charters ? post.charters.map(charter => charter.description).join(' ') : '',
+   chartersDescription: post.charters ? post.charters.map(charter => charter.description).join(' ') : '',
     url: post.type === 'public' ? `/podcast/${post.slug}` : 'https://www.patreon.com/androidstory',
   }));
 

src/styles.css

@@ -25,7 +25,19 @@
   }
 
   .common-button {
-    @apply bg-transparent text-black border border-black rounded hover:bg-black hover:text-white
+    @apply bg-transparent text-black border border-black rounded;
+  }
+
+  .common-button:hover {
+    @apply bg-black text-white;
+  }
+
+  .common-button:disabled {
+    @apply bg-transparent text-gray-400 border border-black;
+  }
+
+  .common-button:disabled:hover {
+    @apply bg-transparent text-gray-400 border border-black;
   }
 }
 
@@ -40,3 +52,18 @@ html {
 .input-field {
   @apply rounded py-2 px-3 leading-tight
 }
+
+@keyframes progress {
+  0% {
+    left: -100%;
+  }
+
+  100% {
+    left: 100%;
+  }
+}
+
+.progress-bar {
+  width: 100%;
+  animation: progress 2s infinite linear;
+}

src/templates/layouts/layout.html

@@ -1,15 +1,18 @@
 <html>
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Android story podcast</title>
-    <link href="/public/styles.css" rel="stylesheet">
-    <script src="https://unpkg.com/[email protected]"></script>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Android story podcast</title>
+  <link href="/public/styles.css" rel="stylesheet">
+  <script src="https://unpkg.com/[email protected]"></script>
 </head>
+
 <body class="bg-gray-100 text-gray-900 font-sans">
-{{> head}}
-<div class="container max-w-screen-xl mx-auto py-8">
+  {{> head}}
+  <div class="container max-w-screen-xl mx-auto py-8">
     {{{ content }}}
-</div>
+  </div>
 </body>
-</html>
+
+</html>