Add create episode button

package.json

@@ -26,6 +26,7 @@
     "minio": "^8.0.0",
     "mongodb": "6.8",
     "podcast": "^2.0.1",
+    "slugify": "^1.6.6",
     "translitit-cyrillic-ukrainian-to-latin": "^0.1.0"
   },
   "devDependencies": {

src/core/episodeRepo.js

@@ -72,7 +72,7 @@ export function updateTimeCodeBySlug(showSlug, episodeSlug, index, time, descrip
   );
 }
 
-export function updateLinkBySlug(showSlug, episodeSlug, index, link, title) {
+export function updateLinkBySlug(showSlug, episodeSlug, index, link, text) {
   return Database.collection('posts').updateOne(
     {
       showSlug: showSlug,
@@ -81,7 +81,7 @@ export function updateLinkBySlug(showSlug, episodeSlug, index, link, title) {
     {
       $set: {
         [`links.${index}.link`]: link,
-        [`links.${index}.title`]: title
+        [`links.${index}.text`]: text,
       }
     }
   );
@@ -107,3 +107,17 @@ export function unpublishPodcast(showSlug, episodeSlug) {
   return Database.collection('posts').updateOne({ showSlug: showSlug, slug: episodeSlug }, { $set: { visibility: 'private' } });
 }
 
+export function createPodcast(showSlug, name, slug, links) {
+  return Database.collection('posts').insertOne({
+    showSlug: showSlug,
+    title: name,
+    slug: slug,
+    links: links,
+    charters: [],
+    visibility: 'private',
+    publish_date: new Date(),
+    type: 'public',
+  });
+}
+
+

src/core/generator.js

@@ -145,7 +145,7 @@ function buildRssDescription(post) {
     description += '<h3>Згадано в випуску</h3>';
     description += '<ul>'
     post.links.forEach(link => {
-      description += `<a href="${link.link}">${link.title}</a>`;
+      description += `<a href="${link.link}">${link.text}</a>`;
       description += '<br>';
     });
     description += '</ul>'

src/core/podcastRepo.js

@@ -7,3 +7,4 @@ export async function getShowInfo(podcastDomain) {
 export async function getShowBySlug(showSlug) {
   return Database.collection('shows').findOne({ slug: showSlug });
 }
+

src/core/showRepo.js

@@ -5,7 +5,7 @@ export async function getAllShows() {
 }
 
 export async function getShowBySlug(slug) {
-  return Database.collection('shows').findOne({ slug });
+  return Database.collection('shows').findOne({ slug: slug });
 }
 
 export async function getShowInfo(podcastDomain) {

src/minio/utils.js

@@ -2,6 +2,7 @@ import { S3Client, GetObjectCommand, PutObjectCommand, HeadObjectCommand } from
 
 import dotenv from 'dotenv';
 import Fs from 'fs'
+import url from 'url';
 
 dotenv.config();
 
@@ -20,7 +21,10 @@ const client = new S3Client({
 });
 
 export function buildObjectURL(path) {
-  return `${startUrl.replace(/\/$/, '')}/${path.replace(/^\//, '')}`;
+  if (!path) {
+    return undefined;
+  }
+  return url.resolve(startUrl, path);
 }
 
 export async function getFileSizeInByte(key) {

src/routers/admin/dashboard.js

@@ -1,5 +1,6 @@
-import { getAllPosts } from "../../core/episodeRepo.js";
+import { getAllPosts, createPodcast } from "../../core/episodeRepo.js";
 import { getAllShows, getShowBySlug } from "../../core/showRepo.js";
+import slugify from 'slugify';
 
 import dotenv from 'dotenv';
 dotenv.config();
@@ -26,9 +27,7 @@ async function dashboardView(request, h) {
   )
 }
 
-async function adminPodcastList(request, h) {
-  const showSlug = request.params.showSlug;
-
+async function adminPodcastListBySlug(showSlug, h, layout) {
   const show = await getShowBySlug(showSlug);
   const posts = await getAllPosts(showSlug);
 
@@ -46,14 +45,32 @@ async function adminPodcastList(request, h) {
       posts: uiPosts,
       createPodcastButton: {
         title: 'Create Podcast',
+        showSlug: showSlug,
       }
     },
     {
-      layout: 'admin'
+      layout: layout
     }
   )
 }
 
+async function createPodcastHandler(request, h) {
+  const { episodeName } = request.payload;
+  const showSlug = request.params.showSlug;
+  const show = await getShowBySlug(showSlug);
+
+  const slug = slugify(episodeName);
+
+  await createPodcast(show.slug, episodeName, slug, show.links);
+
+  return adminPodcastListBySlug(showSlug, h, false);
+}
+
+async function adminPodcastList(request, h) {
+  const showSlug = request.params.showSlug;
+  return adminPodcastListBySlug(showSlug, h, "admin");
+}
+
 export function adminDashboard(server) {
   server.route({
     method: 'GET',
@@ -72,5 +89,13 @@ export function adminDashboard(server) {
       auth: 'adminSession',
     }
   })
+  server.route({
+    method: 'POST',
+    path: '/admin/show/{showSlug}/episode',
+    handler: createPodcastHandler,
+    options: {
+      auth: 'adminSession',
+    }
+  })
 }
 

src/routers/admin/detail/getDetails.js

@@ -38,7 +38,7 @@ async function getPodcastDetails(request, h) {
           episodeSlug: podcast.slug,
           index: index,
           link: link.link,
-          text: link.title,
+          text: link.text,
         }
       }),
       isAudioBuildInProgress: podcast.montage_status === 'in_progress',

src/routers/admin/preview.js

@@ -34,7 +34,7 @@ async function podcastDetailsHandler(request, h) {
         .map(link => {
           return {
             link: link.link,
-            title: link.title,
+            text: link.text,
           }
         }),
     },

src/routers/details.js

@@ -37,7 +37,7 @@ async function podcastDetailsHandler(request, h) {
         .map(link => {
           return {
             link: link.link,
-            title: link.title,
+            text: link.text,
           }
         }),
     },

src/templates/layouts/admin.html

@@ -8,18 +8,18 @@
   <script src="https://unpkg.com/[email protected]"></script>
 </head>
 
-<body class="bg-gray-100 text-gray-900 font-sans min-h-screen flex flex-col">
-  {{> admin_head}}
+<body>
+  <div class="bg-gray-100 text-gray-900 font-sans min-h-screen flex flex-col" id="#root">
+    {{> admin_head}}
 
-  <div class="container max-w-screen-xl mx-auto flex-grow">
-    {{{ content }}}
-  </div>
-
-  <div id="dialog-container"></div>
+    <div class="container max-w-screen-xl mx-auto flex-grow">
+      {{{ content }}}
+    </div>
 
-  <footer class="bg-black p-4 text-center mt-auto">
-    <p class="text-white">&copy; 2024 DIY podcast hosting</p>
-  </footer>
+    <footer class="bg-black p-4 text-center mt-auto">
+      <p class="text-white">&copy; 2024 DIY podcast hosting</p>
+    </footer>
+  </div>
 </body>
 
 </html>

src/templates/pages/admin/admin_podcast_list.html

@@ -1,9 +1,11 @@
-{{> btn_create_podcast createPodcastButton}}
+<div class="p-2" id="adminPodcastList">
+  {{> btn_create_podcast createPodcastButton}}
 
-<div class="grid grid-cols-1 gap-4">
-  {{#each posts}}
-  <a href="{{detailUrl}}" class="no-underline bg-white p-8 rounded shadow-md">
-    <h2 class="text-xl font-bold line-clamp-3">{{title}}</h2>
-  </a>
-  {{/each}}
+  <div class="grid grid-cols-1 gap-4">
+    {{#each posts}}
+    <a href="{{detailUrl}}" class="no-underline bg-white p-8 rounded shadow-md">
+      <h2 class="text-xl font-bold line-clamp-3">{{title}}</h2>
+    </a>
+    {{/each}}
+  </div>
 </div>

src/templates/pages/podcastDetails.html

@@ -1,57 +1,57 @@
 <div>
-    <div class="flex flex-col md:flex-row w-full">
-        <div class="hidden md:block md:w-3/10 py-2">
-            <img src="{{imageUrl}}" alt="Logo" class="w-64 aspect-square">
-        </div>
-        <div class="w-full md:w-7/10 bg-random2 p-4">
-            <h2 class="text-xl font-bold mb-2 text-green-500">{{ title }}</h2>
-            <ul class="space-y-4">
-                {{#each chapters}}
-                <li class="flex items-start">
-                    <button class="inline-block px-4 py-2 text-white bg-green-500 rounded mr-4 w-24 text-center">
-                        <span class="text-white chapter-time" data-time="{{timeInSeconds}}">{{time}}</span>
-                    </button>
-                    <p class=" flex-1 text-black text-lg">{{title}}</p>
-                </li>
-                {{/each}}
-            </ul>
-        </div>
+  <div class="flex flex-col md:flex-row w-full">
+    <div class="hidden md:block md:w-3/10 py-2">
+      <img src="{{imageUrl}}" alt="Logo" class="w-64 aspect-square">
     </div>
+    <div class="w-full md:w-7/10 bg-random2 p-4">
+      <h2 class="text-xl font-bold mb-2 text-green-500">{{ title }}</h2>
+      <ul class="space-y-4">
+        {{#each chapters}}
+        <li class="flex items-start">
+          <button class="inline-block px-4 py-2 text-white bg-green-500 rounded mr-4 w-24 text-center">
+            <span class="text-white chapter-time" data-time="{{timeInSeconds}}">{{time}}</span>
+          </button>
+          <p class=" flex-1 text-black text-lg">{{title}}</p>
+        </li>
+        {{/each}}
+      </ul>
+    </div>
+  </div>
 
-    <div class="w-full sm:p-0 sm:m-0 mx-auto-2 lg:px-0">
-        <div id="audio-player-container">
-            <audio id="audio-player" controls class="w-full">
-                <source src="{{audioUrl}}" type="audio/mpeg">
-                Your browser does not support the audio element.
-            </audio>
-        </div>
+  <div class="w-full sm:p-0 sm:m-0 mx-auto-2 lg:px-0">
+    <div id="audio-player-container">
+      <audio id="audio-player" controls class="w-full">
+        <source src="{{audioUrl}}" type="audio/mpeg">
+        Your browser does not support the audio element.
+      </audio>
+    </div>
 
-        <div class="w-full sm:w-9/12 sm:p-0 sm:m-0 mx-auto-2 lg:px-0">
-            <h2 class="text-xl font-bold mb-2 text-green-500">Корисні посилання з цього випуску</h2>
-            <ul class="space-y-4">
-                {{#each links}}
-                <li class="flex items-start">
-                    <a href="{{link}}" target="_blank"
-                       class="inline-block px-4 py-2 text-white bg-green-500 rounded mr-4 text-center">
-                        <span class="text-white">{{title}}</span>
-                    </a>
-                </li>
-                {{/each}}
-            </ul>
-        </div>
+    <div class="w-full sm:w-9/12 sm:p-0 sm:m-0 mx-auto-2 lg:px-0">
+      <h2 class="text-xl font-bold mb-2 text-green-500">Корисні посилання з цього випуску</h2>
+      <ul class="space-y-4">
+        {{#each links}}
+        <li class="flex items-start">
+          <a href="{{link}}" target="_blank"
+            class="inline-block px-4 py-2 text-white bg-green-500 rounded mr-4 text-center">
+            <span class="text-white">{{text}}</span>
+          </a>
+        </li>
+        {{/each}}
+      </ul>
     </div>
+  </div>
 
-    <script>
-      document.addEventListener('DOMContentLoaded', function () {
-        let chapterTimes = document.querySelectorAll('.chapter-time');
-        let audioPlayer = document.getElementById('audio-player');
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      let chapterTimes = document.querySelectorAll('.chapter-time');
+      let audioPlayer = document.getElementById('audio-player');
 
-        chapterTimes.forEach(function (chapterTime) {
-          chapterTime.addEventListener('click', function () {
-            audioPlayer.currentTime = parseFloat(this.getAttribute('data-time'));
-            audioPlayer.play();
-          });
+      chapterTimes.forEach(function (chapterTime) {
+        chapterTime.addEventListener('click', function () {
+          audioPlayer.currentTime = parseFloat(this.getAttribute('data-time'));
+          audioPlayer.play();
         });
       });
-    </script>
+    });
+  </script>
 </div>

src/templates/widgets/btn_create_podcast.html

@@ -1,4 +1,8 @@
-<button hx-swap="#dialog-container" hx-post="/admin/show/{{showSlug}}/episode-new"
-  class="common-button w-full px-4 py-2 my-2 transition-all duration-300 ease-in-out">
-  {{title}}
-</button>
+<div class="flex flex-col">
+  <input type="text" id="episodeName" name="episodeName" class="max-full px-2 py-1 border focus:border-black rounded"
+    placeholder="Enter episode name" />
+  <button hx-post="/admin/show/{{showSlug}}/episode" hx-include="[name=episodeName]" hx-target="#adminPodcastList"
+    class="common-button w-full px-4 py-2 my-2 transition-all duration-300 ease-in-out">
+    {{title}}
+  </button>
+</div>