feat: add logo watermark, ending slide, 25-30s duration, and word-sync text

- Video duration forced to 25-30s (content 22-27s + 3s ending)
- Logo watermark (bottom-right) visible throughout content section
- Ending slide: logo centered + store name with spring animation (3s)
- Text overlay now shows only the active spoken word (true TikTok sync)
- Server fetches logo from Cloudinary config and store name from user's pages
- Player preview also shows logo/storeName via /api/cloudinary/config + /api/pages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

client/src/pages/mobile/remotion-video.tsx

@@ -61,6 +61,13 @@ export default function MobileRemotionVideoPage() {
 
   const { data: allMedia = [] } = useQuery<Media[]>({ queryKey: ['/api/media'] });
   const { data: audioTracks = [], isLoading: tracksLoading } = useQuery<AudioTrack[]>({ queryKey: ['/api/audio-tracks'] });
+  const { data: cloudinaryConfig } = useQuery<{ cloudName?: string; logoPublicId?: string } | null>({ queryKey: ['/api/cloudinary/config'] });
+  const { data: socialPages = [] } = useQuery<{ pageName: string }[]>({ queryKey: ['/api/pages'] });
+
+  const previewLogoUrl = cloudinaryConfig?.cloudName && cloudinaryConfig?.logoPublicId
+    ? `https://res.cloudinary.com/${cloudinaryConfig.cloudName}/image/upload/${cloudinaryConfig.logoPublicId}`
+    : undefined;
+  const previewStoreName = (socialPages[0] as any)?.pageName as string | undefined;
   const imageMediaList = allMedia.filter(m => m.type === 'image').slice(0, 20);
 
   const generateTextMutation = useMutation({
@@ -90,11 +97,13 @@ export default function MobileRemotionVideoPage() {
 
   const totalSelected = images.length + selectedLibraryImages.length;
   const previewWordTimings = useMemo(() => overlayText ? estimateWordTimings(overlayText) : undefined, [overlayText]);
+  const ENDING_FRAMES = (previewLogoUrl || previewStoreName) ? 90 : 0;
   const totalFrames = useMemo(() => {
-    if (previewWordTimings?.length)
-      return Math.max(combinedUrls.length * 3 * 30, previewWordTimings[previewWordTimings.length - 1].endFrame + 30);
-    return combinedUrls.length > 0 ? combinedUrls.length * 3 * 30 : 300;
-  }, [previewWordTimings, combinedUrls]);
+    const ttsEnd = previewWordTimings?.length ? previewWordTimings[previewWordTimings.length - 1].endFrame : 0;
+    const naturalContent = Math.max(ttsEnd / 30, combinedUrls.length * 3);
+    const contentSeconds = Math.min(Math.max(naturalContent, 22), 27);
+    return Math.round(contentSeconds * 30) + ENDING_FRAMES;
+  }, [previewWordTimings, combinedUrls, ENDING_FRAMES]);
 
   const handleTtsPreview = async () => {
     const ttsText = stripForTTS(overlayText);
@@ -297,7 +306,14 @@ export default function MobileRemotionVideoPage() {
             {combinedUrls.length > 0 ? (
               <Player
                 component={ImageComposition}
-                inputProps={{ images: combinedUrls, overlayText: overlayText || undefined, wordTimings: previewWordTimings }}
+                inputProps={{
+                  images: combinedUrls,
+                  overlayText: overlayText || undefined,
+                  wordTimings: previewWordTimings,
+                  logoUrl: previewLogoUrl,
+                  storeName: previewStoreName,
+                  endingFrames: ENDING_FRAMES,
+                }}
                 durationInFrames={totalFrames}
                 compositionWidth={1080}
                 compositionHeight={1920}

client/src/pages/remotion-video.tsx

@@ -72,6 +72,17 @@ export default function RemotionVideoPage() {
   const { data: audioTracks = [], isLoading: tracksLoading } = useQuery<AudioTrack[]>({
     queryKey: ['/api/audio-tracks'],
   });
+  const { data: cloudinaryConfig } = useQuery<{ cloudName?: string; logoPublicId?: string } | null>({
+    queryKey: ['/api/cloudinary/config'],
+  });
+  const { data: socialPages = [] } = useQuery<{ pageName: string }[]>({
+    queryKey: ['/api/pages'],
+  });
+
+  const previewLogoUrl = cloudinaryConfig?.cloudName && cloudinaryConfig?.logoPublicId
+    ? `https://res.cloudinary.com/${cloudinaryConfig.cloudName}/image/upload/${cloudinaryConfig.logoPublicId}`
+    : undefined;
+  const previewStoreName = (socialPages[0] as any)?.pageName as string | undefined;
   const imageMediaList = allMedia.filter(m => m.type === 'image').slice(0, 20);
 
   const generateTextMutation = useMutation({
@@ -109,12 +120,15 @@ export default function RemotionVideoPage() {
 
   const previewWordTimings = useMemo(() => overlayText ? estimateWordTimings(overlayText) : undefined, [overlayText]);
 
+  const ENDING_FRAMES = (previewLogoUrl || previewStoreName) ? 90 : 0;
   const totalFrames = useMemo(() => {
-    if (previewWordTimings?.length) {
-      return Math.max(combinedUrls.length * 3 * 30, previewWordTimings[previewWordTimings.length - 1].endFrame + 30);
-    }
-    return combinedUrls.length > 0 ? combinedUrls.length * 3 * 30 : 300;
-  }, [previewWordTimings, combinedUrls]);
+    const ttsEnd = previewWordTimings?.length
+      ? previewWordTimings[previewWordTimings.length - 1].endFrame
+      : 0;
+    const naturalContent = Math.max(ttsEnd / 30, combinedUrls.length * 3);
+    const contentSeconds = Math.min(Math.max(naturalContent, 22), 27);
+    return Math.round(contentSeconds * 30) + ENDING_FRAMES;
+  }, [previewWordTimings, combinedUrls, ENDING_FRAMES]);
 
   const handleTtsPreview = async () => {
     if (!overlayText) return;
@@ -368,7 +382,14 @@ export default function RemotionVideoPage() {
             {combinedUrls.length > 0 ? (
               <Player
                 component={ImageComposition}
-                inputProps={{ images: combinedUrls, overlayText: overlayText || undefined, wordTimings: previewWordTimings }}
+                inputProps={{
+                  images: combinedUrls,
+                  overlayText: overlayText || undefined,
+                  wordTimings: previewWordTimings,
+                  logoUrl: previewLogoUrl,
+                  storeName: previewStoreName,
+                  endingFrames: ENDING_FRAMES,
+                }}
                 durationInFrames={totalFrames}
                 compositionWidth={1080}
                 compositionHeight={1920}