More layout

hifiwi-fi · Sep 20, 2022 · fa91842 · fa91842
1 parent 0f8b848
commit fa91842
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 35 deletions.
diff --git a/routes/api/bookmarks/get-bookmarks-query.js b/routes/api/bookmarks/get-bookmarks-query.js
@@ -45,7 +45,7 @@ export const getBookmarksQuery = ({
             case
             when ep.id is null then null
             else jsonb_strip_nulls(jsonb_build_object(
-              'episode_id', ep.id,
+              'id', ep.id,
               'podcast_feed_id', ep.podcast_feed_id,
               'created_at', ep.created_at,
               'updated_at', ep.updated_at,

diff --git a/routes/api/episodes/episode-props.js b/routes/api/episodes/episode-props.js
@@ -1,4 +1,5 @@
 export const commonEpisodeProps = {
+  podcast_feed_id: { type: 'string', format: 'uuid' },
   url: { type: 'string', format: 'uri' },
   title: { type: 'string', minLength: 1, maxLength: 255 },
   type: { enum: ['redirect'] },

diff --git a/web/components/bookmark/bookmark-view.css b/web/components/bookmark/bookmark-view.css
@@ -1,6 +1,7 @@
 @import '../toread';
 @import '../star';
 @import '../sensitive';
+@import '../episode-title';
 
 .bc-bookmark-view {
   padding-bottom: 4px;

diff --git a/web/components/bookmark/bookmark-view.js b/web/components/bookmark/bookmark-view.js
@@ -5,8 +5,8 @@ import { star } from '../star/index.js'
 import { sensitive } from '../sensitive/index.js'
 import { useWindow } from '../../hooks/useWindow.js'
 import { useQuery } from '../../hooks/useQuery.js'
-import format from 'format-duration'
 import cn from 'classnames'
+import { episodeTitle } from '../episode-title/index.js'
 
 export const bookmarkView = Component(({
   bookmark: b,
@@ -67,7 +67,7 @@ export const bookmarkView = Component(({
       ${b.episodes?.length > 0
         ? html`
           <div class="bc-bookmark-episodes-display">
-            ${b.episodes.map(ep => html.for(ep, ep.id)`<div>${ep.filename ? ep.filename : null}${ep.duration_in_seconds ? ` - ${format(ep.duration_in_seconds * 1000)}` : null}${ep.ready ? ep.src_type === 'video' ? ' (📼)' : ' (🎧)' : null}${ep.error ? ' (❌)' : null}</div>`)}
+            ${b.episodes.map(ep => html.for(ep, ep.id)`${episodeTitle({ episode: ep, small: true })}`)}
           </div>`
         : null
       }

diff --git a/web/components/episode-title/index.css b/web/components/episode-title/index.css
@@ -0,0 +1,9 @@
+/* episode-title.css */
+.bc-episode-title {
+  word-break: break-word;
+  color: var(--bc-episodes-color);
+}
+
+.bc-episode-title-small {
+  font-size: 0.8em;
+}
diff --git a/web/components/episode-title/index.js b/web/components/episode-title/index.js
@@ -0,0 +1,45 @@
+/* eslint-env browser */
+import { Component, html } from 'uland-isomorphic'
+import cn from 'classnames'
+
+export const episodeTitle = Component(({
+  episode: e,
+  small
+} = {}) => {
+  console.log(e)
+  const href = small === true
+    ? `/episodes/?id=${e.id}`
+    : e.url
+
+  return html`
+    <div class="${cn({
+      'bc-episode-title-container': true,
+      'bc-episode-title-small': small
+    })}">
+        ${
+          e.ready ? '✅' : '⏱'
+        }
+        ${
+          e.error ? '❌' : null
+        }
+        ${e.type === 'redirect'
+          ? '☁️'
+          : e.type === 'raw'
+            ? '🍣'
+            : e.type === 'b2_file'
+              ? '🗄'
+              : null
+        }
+        ${
+          e.medium === 'video'
+            ? '📼'
+            : e.medium === 'audio'
+              ? '💿'
+              : null
+        }
+        <a class="bc-episode-title" href="${href}" target="_blank">
+          ${e.display_title}
+        </a>
+      </div>
+  `
+})
diff --git a/web/components/episode/episode-view.css b/web/components/episode/episode-view.css
@@ -1,15 +1,13 @@
 /* episode-view.css */
 @import '../text-icon';
+@import '../episode-title';
 
 .bc-episode-view {
   padding-bottom: 4px;
   margin-bottom: 4px;
   border-bottom: 1px solid var(--accent-background);
 }
 
-.bc-episode-title {
-  word-break: break-word;
-}
 
 .bc-episode-url-display {
   margin-top: -0.5em;
@@ -23,10 +21,18 @@
 
 .bc-date,
 .bc-episode-url-display,
+.bc-episode-bookmark-title,
 .bc-episode-details-display {
   font-size: 0.8em;
 }
 
+.bc-episode-url-display {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 1px;
+}
+
 .bc-date a,
 .bc-episode-url-display a,
 .bc-episode-episodes-display {

diff --git a/web/components/episode/episode-view.js b/web/components/episode/episode-view.js
@@ -3,6 +3,7 @@ import { Component, html } from 'uland-isomorphic'
 import format from 'format-duration'
 
 import { textIcon } from '../text-icon/index.js'
+import { episodeTitle } from '../episode-title/index.js'
 
 export const episodeView = Component(({
   episode: e,
@@ -11,47 +12,30 @@ export const episodeView = Component(({
   return html`
     <div class="bc-episode-view">
 
-      <div>
-        ${
-          e.ready ? '✅' : '⏱'
-        }
-        ${
-          e.error ? '❌' : null
-        }
-        ${e.type === 'redirect'
-          ? '☁️'
-          : e.type === 'raw'
-            ? '🍣'
-            : e.type === 'b2_file'
-              ? '🗄'
-              : null
-        }
-        ${
-          e.medium === 'video'
-            ? '📼'
-            : e.medium === 'audio'
-              ? '💿'
-              : null
-        }
-        <a class="bc-episode-title" href="${e.url}" target="_blank">
-          ${e.display_title}
-        </a>
-      </div>
+      ${episodeTitle({ episode: e })}
 
       <div class="bc-episode-url-display">
+        ${e.explicit ? textIcon({ value: 'Explicit' }) : null}
         <a href="${e.url}">${e.url}</a>
       </div>
 
       <div class="bc-episode-details-display">
         <div>
-          ${e.explicit ? textIcon({ value: 'Explicit' }) : null}
+          ${e.src_type === 'video' ? ' 📼' : ' 💿'}
+          ${e.src_type && e.ext ? html`<code>${e.src_type}/${e.ext}</code>` : null}
           ${e.filename ? e.filename : null}
           ${e.duration_in_seconds ? ` - ${format(e.duration_in_seconds * 1000)}` : null}
-          ${e.ready ? e.src_type === 'video' ? ' (📼)' : ' (🎧)' : null}
-          ${e.error ? ' (❌)' : null}
         </div>
       </div>
 
+
+      <div>
+        🔖
+        <a class="bc-episode-bookmark-title" href="${`/bookmarks/view/?id=${e.bookmark.id}`}" target="_blank">
+          ${e.bookmark.title}
+        </a>
+      </div>
+
       <div class="bc-date">
         <a href="${`/episodes/view/?id=${e.id}`}">
           <time datetime="${e.created_at}">
@@ -60,6 +44,16 @@ export const episodeView = Component(({
         </a>
       </div>
 
+      ${e.error
+        ? html`
+        <div class="bc-episode-error-box">
+          <strong>Error:</strong>
+          <pre>${e.error}</pre>
+        </div>
+        `
+        : null
+      }
+
       <div>
         <button onClick=${onEdit}>Edit</button>
       </div>

diff --git a/web/global.css b/web/global.css
@@ -4,3 +4,6 @@
 @import './document.css';
 @import './components/header';
 
+:root {
+  --bc-episodes-color: hsla(87, 74%, 44%, 0.9);
+}