mobile updates and processing now find a better thumbnail

Author: BetrixDev

app/components/storage-used-text.tsx

@@ -17,7 +17,7 @@ export function UploadButton() {
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
       variant="ghost"
-      className="relative inline-flex h-12 overflow-hidden rounded-lg p-[1px] focus:outline-none focus:ring-2 hover:ring-red-400 hover:ring-1 focus:ring-offset-2"
+      className="gap-2 md:order-2 relative inline-flex h-12 overflow-hidden rounded-lg p-[1px] focus:outline-none focus:ring-2 hover:ring-red-400 hover:ring-1 focus:ring-offset-2"
     >
       <span className="absolute inset-[-1000%] animate-[spin_5s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#ffcbcb_0%,#b23939_50%,#ffcbcb_100%)]" />
       <span className="text-lg inline-flex h-full w-full cursor-pointer items-center justify-center gap-2 rounded-md bg-background px-3 py-1 font-medium text-primary backdrop-blur-3xl">

app/components/upload-button.tsx

@@ -3,11 +3,15 @@ import { createServerFn } from "@tanstack/start";
 import { z } from "zod";
 import { authGuardMiddleware } from "../middleware/auth-guard";
 import { db } from "./db";
-import { desc, inArray, not } from "drizzle-orm";
+import { and, desc, eq, inArray, not, sum } from "drizzle-orm";
 import { videos, type VideoStoryboard } from "./schema";
 import { MAX_FILE_SIZE_FREE_TIER, PLAN_STORAGE_SIZES } from "./constants";
 import { clerkClient, getAuth } from "@clerk/tanstack-start/server";
-import { getIpFromHeaders, safeParseAccountTier } from "./utils";
+import {
+  getIpFromHeaders,
+  notNanOrDefault,
+  safeParseAccountTier,
+} from "./utils";
 import { getWebRequest } from "@tanstack/start/server";
 import dayjs from "dayjs";
 import { createSigner } from "fast-jwt";
@@ -215,18 +219,30 @@ export const videoQueryOptions = (videoId: string) =>
 const fetchUsageDataServerFn = createServerFn({ method: "GET" })
   .middleware([authGuardMiddleware])
   .handler(async ({ context }) => {
-    const userData = await db.query.users.findFirst({
-      where: (table, { eq }) => eq(table.id, context.userId),
-      columns: {
-        totalStorageUsed: true,
-        accountTier: true,
-      },
-    });
+    const [userData, [{ totalVideoStorageUsed }]] = await db.batch([
+      db.query.users.findFirst({
+        where: (table, { eq }) => eq(table.id, context.userId),
+        columns: {
+          accountTier: true,
+        },
+      }),
+      db
+        .select({
+          totalVideoStorageUsed: sum(videos.fileSizeBytes),
+        })
+        .from(videos)
+        .where(
+          and(
+            eq(videos.authorId, context.userId),
+            inArray(videos.status, ["ready", "processing"])
+          )
+        ),
+    ]);
 
     const maxStorage = PLAN_STORAGE_SIZES[userData?.accountTier ?? "free"];
 
     return {
-      totalStorageUsed: userData?.totalStorageUsed ?? 0,
+      totalStorageUsed: notNanOrDefault(totalVideoStorageUsed),
       maxStorage,
       maxFileUpload:
         userData?.accountTier === "free" ? MAX_FILE_SIZE_FREE_TIER : undefined,

app/lib/query-utils.ts

@@ -22,6 +22,8 @@ import { HeroHighlight } from "@/components/ui/hero-highlight";
 import { Separator } from "@/components/ui/seperator";
 import { Footer } from "@/components/footer";
 import { useEffect } from "react";
+import { HumanFileSizeMotion } from "@/components/human-file-size-motion";
+import { humanFileSize } from "@/lib/utils";
 
 export const Route = createFileRoute("/videos")({
   component: RouteComponent,
@@ -85,15 +87,21 @@ function RouteComponent() {
       <TrimVideoDialog />
       <FullPageDropzone />
       <main className="grow container space-y-8 mx-auto px-4 py-8">
-        <div className="flex gap-2 items-center justify-between">
-          <h1 className="text-2xl w-64 font-bold">Your Catalog</h1>
-          <div className="flex flex-col-reverse md:flex-row items-center md:gap-8">
-            {usageData && (
-              <StorageUsedText
-                maxStorage={usageData.maxStorage}
-                totalStorageUsed={usageData.totalStorageUsed}
-              />
-            )}
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-6">
+          <h1 className="text-2xl font-bold">Your Videos</h1>
+
+          <div className="flex flex-col gap-4 md:gap-2 md:flex-row md:items-center">
+            <div className="text-sm md:order-1 md:p-2">
+              {usageData && (
+                <div className="bg-zinc-900/50 h-12 p-2 rounded-lg flex items-center justify-center border backdrop-blur-sm">
+                  Storage used:
+                  <span className="mx-1">
+                    <HumanFileSizeMotion size={usageData.totalStorageUsed} />
+                  </span>{" "}
+                  / {humanFileSize(usageData.maxStorage)}
+                </div>
+              )}
+            </div>
             <UploadButton />
           </div>
         </div>

app/routes/videos.tsx

@@ -200,26 +200,95 @@ export const videoProcessingTask = schemaTask({
 
     if (steps.includes("thumbnails")) {
       await logger.trace("Step thumbnails", async (span) => {
-        const frameFilePath = `${nativeFilePath}.webp`;
+        const framesDir = path.join(workingDir, "frames");
+        await mkdir(framesDir, { recursive: true });
+
+        // First get video duration and fps
+        const { stdout: videoInfo } =
+          await execa`ffprobe -v error -select_streams v:0 -show_entries stream=r_frame_rate,duration -of json ${nativeFilePath}`;
+        const info = JSON.parse(videoInfo);
+
+        // Parse frame rate (comes as ratio like "24000/1001")
+        const [num, den] = info.streams[0].r_frame_rate.split("/");
+        const fps = Number(num) / (Number(den) || 1);
+
+        // Get duration in seconds
+        const duration = Math.min(Number(info.streams[0].duration) || 60, 60); // Cap at 60 seconds
+
+        // Calculate sampling interval to get ~10 frames from first minute
+        // but ensure we don't sample faster than 1 frame per second
+        const targetFrames = 10;
+        const interval = Math.max(duration / targetFrames, 1);
+
+        logger.info("Video analysis", {
+          fps,
+          duration,
+          samplingInterval: interval,
+          expectedFrames: Math.floor(duration / interval),
+        });
 
-        await logger.trace("FFMPEG thumbnail", async (span) => {
-          span.setAttributes({
-            input: nativeFilePath,
-            output: frameFilePath,
-            command: "ffmpeg -frames:v 1 -q:v 75 -f image2",
-          });
+        // Extract frames using calculated interval
+        await logger.trace("FFMPEG multiple thumbnails", async (span) => {
+          try {
+            await execa`ffmpeg -i ${nativeFilePath} -vf fps=1/${interval} -t ${duration} -q:v 75 -f image2 ${framesDir}/frame_%03d.webp`;
+          } catch (error) {
+            logger.error("Failed to extract frames", { error });
+            // Fallback to single frame if multiple frames fail
+            await execa`ffmpeg -i ${nativeFilePath} -frames:v 1 -q:v 75 -f image2 ${framesDir}/frame_001.webp`;
+          }
+        });
 
-          await execa`ffmpeg -i ${nativeFilePath} -frames:v 1 -q:v 75 -f image2 ${frameFilePath}`;
+        // Find the brightest frame
+        const files = readdirSync(framesDir).sort(); // Ensure consistent order
+        let brightestFrame = "";
+        let maxBrightness = -1;
 
-          span.end();
-        });
+        if (files.length === 0) {
+          throw new Error("No frames were extracted");
+        }
+
+        // Default to first frame in case brightness calculation fails
+        brightestFrame = path.join(framesDir, files[0]);
+
+        try {
+          await Promise.all(
+            files.map(async (file) => {
+              const framePath = path.join(framesDir, file);
+              try {
+                const stats = await sharp(framePath).stats();
+
+                // Calculate perceived brightness using the luminance formula
+                const brightness =
+                  stats.channels[0].mean * 0.299 + // Red
+                  stats.channels[1].mean * 0.587 + // Green
+                  stats.channels[2].mean * 0.114; // Blue
+
+                if (brightness > maxBrightness) {
+                  maxBrightness = brightness;
+                  brightestFrame = framePath;
+                }
+              } catch (error) {
+                logger.error("Failed to process frame", { file, error });
+              }
+            })
+          );
+
+          logger.info("Selected brightest frame", {
+            brightness: maxBrightness,
+            frame: brightestFrame,
+            totalFrames: files.length,
+          });
+        } catch (error) {
+          logger.error("Failed to process frames for brightness", { error });
+          // We'll use the default first frame that was set earlier
+        }
 
         const uploadPromises: Promise<unknown>[] = [];
 
         await Promise.all([
           logger
             .trace("Sharp large thumbnail", async (span) => {
-              const buffer = await sharp(frameFilePath)
+              const buffer = await sharp(brightestFrame)
                 .webp({ quality: 90, effort: 6, alphaQuality: 90 })
                 .toBuffer();
 
@@ -243,7 +312,7 @@ export const videoProcessingTask = schemaTask({
             }),
           logger
             .trace("Sharp small thumbnail", async (span) => {
-              const buffer = await sharp(frameFilePath)
+              const buffer = await sharp(brightestFrame)
                 .resize(1280, 720, { fit: "cover" })
                 .webp({
                   quality: 70,