From 8c8ac8d1bbc5f7790c16357272f46c1fd7ec77ee Mon Sep 17 00:00:00 2001
From: johnny2211 <matija.turk@gmail.com>
Date: Sun, 18 Jan 2026 18:12:15 +0100
Subject: [PATCH] Fix GIF preview display in dictionary word cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Problem: GIFs were created successfully but not displaying in the dictionary listing.

Root cause: WordCard component was using raw relative URLs for GIF images:
- Before: src={gifMedia.url} → Browser requested from frontend domain
- After: src={getVideoUrl(gifMedia.url)} → Correctly requests from backend

Changes:
- Import getVideoUrl helper from videoPlaylist.ts
- Use getVideoUrl() to convert relative GIF URLs to absolute backend URLs
- Add null check to handle cases where getVideoUrl returns null

This matches the pattern used in VideoUpload.tsx which was already working correctly.

Result: GIF previews now display properly in dictionary word cards.

Co-Authored-By: Auggie
---
 packages/frontend/src/components/dictionary/WordCard.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/dictionary/WordCard.tsx b/packages/frontend/src/components/dictionary/WordCard.tsx
index 222dcb0..b007c6f 100644
--- a/packages/frontend/src/components/dictionary/WordCard.tsx
+++ b/packages/frontend/src/components/dictionary/WordCard.tsx
@@ -2,6 +2,7 @@ import { Info, Plus, Video } from 'lucide-react';
 import { Term, CefrLevel } from '../../types/term';
 import { Button } from '../ui/button';
 import { wordTypeColors, wordTypeLabels } from '../../lib/wordTypeColors';
+import { getVideoUrl } from '../../lib/videoPlaylist';
 
 interface WordCardProps {
   term: Term;
@@ -37,9 +38,9 @@ export function WordCard({ term, onInfo, onAddToSentence }: WordCardProps) {
 
       {/* Icon/Image/GIF Preview */}
       <div className="flex-1 flex items-center justify-center mb-4 min-h-[120px]">
-        {gifMedia ? (
+        {gifMedia && getVideoUrl(gifMedia.url) ? (
           <img
-            src={gifMedia.url}
+            src={getVideoUrl(gifMedia.url) || ''}
             alt={term.wordText}
             className="max-h-[120px] max-w-full object-contain rounded"
             title="Video preview"