feat: queued state has been added, pre add queue state

Author: Venipa

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ytdlp-gui",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "description": "venipa-electron-template",
   "main": "./out/main/index.js",
   "author": "Venipa <admin@venipa.net>",

src/main/stores/queue-database.helpers.ts

@@ -6,7 +6,8 @@ import {
   InferInsertModel,
   InferSelectModel,
   isNotNull,
-  like
+  like,
+  not
 } from 'drizzle-orm'
 import { omit } from 'lodash'
 import { db } from './queue-database'
@@ -30,11 +31,29 @@ function findDownloadByUrl(url: string, state?: string | string[]) {
     )
     .all()
 }
-function findDownloadByExactUrl(url: string) {
+function findDownloadByExactUrl(url: string, dbFileId?: SelectDownload['id']) {
   return db
     .select()
     .from(downloads)
-    .where(and(eq(downloads.url, url), isNotNull(downloads.meta)))
+    .where(
+      and(
+        eq(downloads.url, url),
+        isNotNull(downloads.meta),
+        ...((dbFileId !== undefined && [not(eq(downloads.id, dbFileId))]) || [])
+      )
+    )
+    .orderBy(desc(downloads.created))
+    .get()
+}
+function findDownloadById(dbFileId: SelectDownload['id']) {
+  return db
+    .select()
+    .from(downloads)
+    .where(
+      and(
+        eq(downloads.id, dbFileId)
+      )
+    )
     .orderBy(desc(downloads.created))
     .get()
 }
@@ -56,6 +75,7 @@ export const queries = {
     updateDownload,
     deleteDownload,
     findDownloadByUrl,
-    findDownloadByExactUrl
+    findDownloadByExactUrl,
+    findDownloadById
   }
 }

src/main/trpc/ytdlp.api.ts

@@ -32,9 +32,10 @@ export const ytdlpRouter = router({
         url: z.string().url().array()
       })
     )
-    .mutation(async ({ input: { url }, ctx }) => {
+    .mutation(async ({ input: { url: urls }, ctx }) => {
+      const dbEntries = await addToDatabase(urls)
       const files = await queuePromiseStack(
-        url.map((u) => () => queueYtdlMetaCheck(u).catch(() => null)),
+        dbEntries.map((u) => () => queueYtdlMetaCheck(u).catch(() => null)),
         MAX_PARALLEL_DOWNLOADS
       ).then((files) => files.filter((s) => !!s))
       const asyncResult = ytdlpDownloadQueue.addAll(
@@ -231,14 +232,42 @@ const deleteDownloadItem = (dbFile: SelectDownload) =>
       })
     }
   })
+const addToDatabase = async (urls: string[]) => {
+  const [items] = await db.batch(
+    urls
+      .map((url) => {
+        if (typeof url !== 'string' || !/^https/gi.test(url)) return null
+        return queries.downloads.createDownload({
+          filepath: '',
+          filesize: 0,
+          meta: {} as any,
+          metaId: '',
+          source: new URL(url).hostname,
+          title: url,
+          url,
+          state: 'queued',
+          type: null,
+          error: null,
+          retryCount: 0
+        })
+      })
+      .filter(Boolean) as any
+  )
+  ytdlpEvents.emit('list', items)
+  log.debug('addToDatabase', { items })
+  return items as SelectDownload[]
+}
 const queueYtdlMetaCheck = async (
-  url: string
+  createdDbFile: SelectDownload
 ): Promise<{ dbFile: SelectDownload; videoInfo: VideoInfo }> => {
-  if (typeof url !== 'string' || !/^https/gi.test(url)) throw new Error('Invalid url format')
+  const { url } = createdDbFile
+  log.debug('meta', `added url`, url, createdDbFile)
+  if (!createdDbFile.url) throw new Error('Invalid url format')
   ytdlpEvents.emit('status', { action: 'getVideoInfo', state: 'progressing' })
-  log.debug('meta', `added url ${url}`)
-  const existingDbFile = await queries.downloads.findDownloadByExactUrl(url)
-  let [dbFile] = await queries.downloads.createDownload({
+  let dbFile = await queries.downloads.findDownloadById(createdDbFile.id)
+  if (!dbFile) throw new Error('Entry has been not found or has been removed')
+  const existingDbFile = await queries.downloads.findDownloadByExactUrl(url, dbFile.id)
+  Object.assign(dbFile, {
     metaId: existingDbFile?.metaId ?? '',
     meta: existingDbFile?.meta ?? ({} as any),
     filepath: existingDbFile?.filepath ?? '',
@@ -247,10 +276,10 @@ const queueYtdlMetaCheck = async (
     state: 'fetching_meta',
     title: existingDbFile?.title ?? url,
     type: null,
-    url,
     error: null,
     retryCount: 0
   })
+  await queries.downloads.updateDownload(dbFile.id, dbFile)
   ytdlpEvents.emit('list', [dbFile])
   if (!dbFile.meta?.filename) {
     const { value: videoInfo, error: videoInfoError } = await ytdl.getVideoInfo(url)
@@ -372,8 +401,9 @@ const queueYtdlDownload = async (dbFile: SelectDownload, videoInfo: VideoInfo) =
   pushLogToClient(`[${dbFile.id}=${dbFile.metaId}] finished download: ${dbFile.title}`, 'success')
   return await updateEntry()
 }
-function handleYtAddEvent(url: string) {
-  queueYtdlMetaCheck(url).then(({ dbFile, videoInfo }) => {
+async function handleYtAddEvent(url: string) {
+  const [newDbFile] = await addToDatabase([url])
+  await queueYtdlMetaCheck(newDbFile).then(({ dbFile, videoInfo }) => {
     const asyncResult = ytdlpDownloadQueue.add(() => queueYtdlDownload(dbFile, videoInfo))
     if (ytdlpDownloadQueue.isPaused) ytdlpDownloadQueue.start()
     return asyncResult

src/main/trpc/ytdlp.core.ts

@@ -14,7 +14,7 @@ export const checkBrokenLinks = async () => {
   const itemCount = await db
     .update(downloads)
     .set({ state: 'cancelled' })
-    .where(inArray(downloads.state, ['downloading', 'fetching_meta']))
+    .where(inArray(downloads.state, ['downloading', 'fetching_meta', 'queued']))
   logger.info(`Updated state of ${itemCount.rowsAffected} to cancelled`)
 }
 

src/renderer/src/pages/components/add-link.tsx

@@ -14,7 +14,7 @@ import SelectDownloadBox from './select-download-path'
 const httpsRegex = /^https?/i
 export default function AddLink({ showDownloadPath }: { showDownloadPath?: boolean }) {
   const { settings, setSetting } = useApp()
-  const { mutateAsync: queueDownloadFromUrl, isLoading } = trpc.ytdl.downloadMedia.useMutation({
+  const { mutateAsync: queueDownloadFromUrl } = trpc.ytdl.downloadMedia.useMutation({
     onError(error, variables, context) {
       toast.error(error.data!.code, { description: error.message })
     }
@@ -63,7 +63,6 @@ export default function AddLink({ showDownloadPath }: { showDownloadPath?: boole
         <div className="flex-auto"></div>
         <QTooltip content="Enable/Disable clipboard monitoring">
           <Button
-            disabled={isLoading}
             variant={'ghost'}
             onClick={() =>
               setSetting('features.clipboardMonitor', !settings.features.clipboardMonitor)

src/renderer/src/pages/components/link-list.tsx

@@ -15,6 +15,7 @@ import {
   LucideFileX,
   LucideFolderOpen,
   LucideGlobe,
+  LucideListPlus,
   LucideRedo2,
   LucideSquare,
   LucideX
@@ -43,6 +44,7 @@ export function LinkListItem(props: YTDLItem & { key: any }) {
   const cancelled = useMemo(() => state === 'cancelled', [state, status])
   const downloading = useMemo(() => state === 'downloading', [state, status])
   const processingMeta = useMemo(() => state === 'fetching_meta', [state, status])
+  const queued = useMemo(() => state === 'queued', [state, status])
   const faviconUrl = useMemo(
     () =>
       source && `https://icons.duckduckgo.com/ip3/${source.replace(TrimSubdomainRegex, '')}.ico`,
@@ -65,6 +67,12 @@ export function LinkListItem(props: YTDLItem & { key: any }) {
           <div className="size-5 p-1 flex flex-col items-center justify-center bg-green-500 text-white rounded-full">
             <LucideCheck className="stroke-[4px]" />
           </div>
+        ) : queued ? (
+          <QTooltip className="cursor-default" content={'Queued'} side="right">
+            <div className="flex flex-col items-center justify-center size-10 relative">
+              <LucideListPlus className="size-5 text-secondary-foreground" />
+            </div>
+          </QTooltip>
         ) : downloading && status ? (
           <QTooltip className="cursor-default" content={'Download Progress'} side="right">
             <div className="flex flex-col items-center justify-center size-10 relative">
@@ -177,7 +185,7 @@ export function LinkListItem(props: YTDLItem & { key: any }) {
             <LucideFileX className="stroke-current" />
           </ButtonLoading>
         )}
-        {(error || cancelled) && (
+        {(error || cancelled || queued) && (
           <ButtonLoading
             variant={'ghost'}
             size={'sm'}

src/renderer/src/pages/components/status-bar.tsx

@@ -66,7 +66,7 @@ export default function StatusBar() {
           </>
         ) : updateProgress && !updateDone ? (
           <>
-            <Appear>Downloading... {(updateProgress.percent as number).toFixed(2).padStart(5, ' ')}%</Appear>
+            <Appear>Downloading... {(updateProgress.percent as number).toFixed(2).padStart(6, ' ')}%</Appear>
             <div className="h-10 w-px bg-muted"></div>
           </>
         ) : updateAvailable && !updateDone ? (