Fix episode creation with titles greater than the maximum allowable l…

…ength

routes/api/bookmarks/_id/put-bookmark.js

@@ -133,6 +133,20 @@ export async function putBookmark (fastify, opts) {
         }
       }
 
+      await client.query('commit')
+      fastify.metrics.bookmarkEditCounter.inc()
+
+      // Look up the newly created bookmark instead of trying to re-assemble it here.
+      const updatedBookmarkQuery = getBookmarksQuery({
+        ownerId: userId,
+        bookmarkId,
+        sensitive: true,
+        perPage: 1
+      })
+
+      const createdResults = await fastify.pg.query(updatedBookmarkQuery)
+      const createdBookmark = createdResults.rows.pop()
+
       if (bookmark?.createEpisode) {
         const { id: episodeId, medium: episodeMedium, url: episodeURL } = await createEpisode({
           client,
@@ -151,25 +165,13 @@ export async function putBookmark (fastify, opts) {
             fastify,
             userID: userId,
             episodeID: episodeId,
+            bookmarkTitle: createdBookmark.title,
             medium: episodeMedium,
             url: episodeURL,
             log: request.log
           })
         })
       }
-      await client.query('commit')
-      fastify.metrics.bookmarkEditCounter.inc()
-
-      // Look up the newly created bookmark instead of trying to re-assemble it here.
-      const updatedBookmarkQuery = getBookmarksQuery({
-        ownerId: userId,
-        bookmarkId,
-        sensitive: true,
-        perPage: 1
-      })
-
-      const createdResults = await fastify.pg.query(updatedBookmarkQuery)
-      const createdBookmark = createdResults.rows.pop()
 
       reply.status(200)
 

routes/api/bookmarks/put-bookmarks.js

@@ -173,6 +173,7 @@ export async function putBookmarks (fastify, opts) {
             return resolveEpisode({
               fastify,
               userID: userId,
+              bookmarkTitle: title,
               episodeID: episodeId,
               url: episodeURL,
               medium: episodeMedium,

routes/api/episodes/resolve-episode.js

@@ -7,6 +7,7 @@ import { getFileKey } from '../../../plugins/yt-dlp/index.js'
  * @param  {object} options.pg        a postgres client
  * @param  {object} options.log       a pino client, like from the request
  * @param  {string} options.userID    ID of user
+ * @param  {string} options.bookmarkTitle  Title of the bookmark
  * @param  {string} options.episodeID ID of episode
  * @param  {string} options.url       The URL of the episode to resolve
  * @param  {string} options.medium    The medium to attempt to resolve
@@ -17,6 +18,7 @@ export async function resolveEpisode ({
   pg, // optional tx client
   log, // optional request logging instance
   userID,
+  bookmarkTitle,
   episodeID,
   url,
   medium
@@ -38,9 +40,13 @@ export async function resolveEpisode ({
       const filename = `${metadata.title}.${metadata.ext}`
       videoData.push(SQL`filename = ${filename}`)
     }
-    if (metadata.title != null) {
+    console.log({
+      metaTitle: metadata.title,
+      bookmarkTitle
+    })
+    if (metadata.title != null && metadata.title !== bookmarkTitle) {
       // TODO: when bookmarks have auto-extract, maybe remove this
-      videoData.push(SQL`title = ${metadata.title}`)
+      videoData.push(SQL`title = ${metadata.title.trim().substring(0, 255)}`)
     }
     if (metadata.ext != null) videoData.push(SQL`ext = ${metadata.ext}`)
     if (metadata._type != null) videoData.push(SQL`src_type = ${resolveType(metadata)}`)

web/components/bookmark/bookmark-edit.css

@@ -63,7 +63,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 }
 

web/components/bookmark/bookmark-view.js

@@ -67,8 +67,7 @@ export const bookmarkView = Component(({
       ${b.episodes?.length > 0
         ? html`${b.episodes.map(
             ep => html.for(ep, ep.id)`${episodeTitle({ episode: ep, small: true })}`
-          )
-      }`
+          )}`
         : null
       }
       ${b.archive_urls?.length > 0

web/components/episode-title/index.css

@@ -1,9 +1,19 @@
 /* episode-title.css */
-.bc-episode-title-text {
-  word-break: break-word;
+
+.bc-episode-title-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.bc-episode-title-container a {
   color: var(--bc-episodes-color);
 }
 
-.bc-episode-title-small {
+.bc-episode-title-container-small {
+  -webkit-line-clamp: 1;
   font-size: 0.8em;
 }
+

web/components/episode-title/index.js

@@ -3,26 +3,21 @@
 import { Component, html } from 'uland-isomorphic'
 import cn from 'classnames'
 
-export const episodeTitle = Component(({
-  episode: {
-    id,
-    url,
-    error,
-    ready,
-    type,
-    medium,
-    display_title
-  } = {},
-  small
-} = {}) => {
-  const href = small === true
-    ? `/episodes/view/?id=${id}`
-    : url
+export const episodeTitle = Component(
+  (
+    {
+      episode: { id, url, error, ready, type, medium, display_title } = {},
+      small
+    } = {}
+  ) => {
+    const href = small === true
+      ? `/episodes/view/?id=${id}`
+      : url
 
-  return html`
+    return html`
     <div class="${cn({
       'bc-episode-title-container': true,
-      'bc-episode-title-small': small
+      'bc-episode-title-container-small': small
     })}">
         ${
           error
@@ -31,7 +26,8 @@ export const episodeTitle = Component(({
               ? '✅'
               : '⏱️'
         }
-        ${type === 'redirect'
+        ${
+          type === 'redirect'
           ? '☁️'
           : type === 'raw'
             ? '🍣'
@@ -46,9 +42,11 @@ export const episodeTitle = Component(({
               ? '💿'
               : null
         }
-        <a class="bc-episode-title-text" href="${href}" target="${small ? null : '_blank'}"}>
+
+        <a href="${href}" target="${small ? null : '_blank'}">
           ${display_title}
         </a>
       </div>
   `
-})
+  }
+)

web/components/episode/episode-view.css

@@ -10,7 +10,6 @@
 
 
 .bc-episode-url-display {
-  margin-top: -0.5em;
   margin-bottom: 5px;
   overflow: hidden;
   text-overflow: ellipsis;