fix: thumbnail UI size fixed

italia · Feb 8, 2025 · d585ef7 · d585ef7
1 parent 9c2b0a1
commit d585ef7
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 25 deletions.
diff --git a/src/app/components/EditorVideos.tsx b/src/app/components/EditorVideos.tsx
@@ -13,7 +13,7 @@ interface VideoOEmbedItemProps {
 }
 
 const WIDTH = 480
-const HEIGHT = 480
+const HEIGHT = 360
 
 const noThumbnail = `https://placehold.co/${WIDTH}x${HEIGHT}?font=roboto&text=No%20Thumbnail`
 
@@ -41,36 +41,28 @@ function VideoOEmbedItem({ url }: VideoOEmbedItemProps) {
         loadOEmbed();
     }, [loadOEmbed])
 
-    //show noThubmbail => isLoading = true
-    //isLoading = false
-    //if embed => show embed
-    //elseif thumbnail => show thumbnail
-
     return (
         <Card className='card-img no-after'>
             <CardBody>
                 <CardTitle tag='h5'>
-                    {title}
+                    {title ?? url}
                 </CardTitle>
-                {embed ?
-                    <div dangerouslySetInnerHTML={{ __html: embed }}></div>
-                    :
-                    <div className='img-responsive-wrapper'>
-                        <div className='img-responsive'>
-                            <figure className='img-wrapper'>
-                                <img
+                <CardText>
+                    URL: <a href={url}>{url}</a>
+                </CardText>
+                <div className='img-responsive-wrapper'>
+                    <div className='img-responsive'>
+                        <figure className='img-wrapper'>
+                            {embed
+                                ? <div dangerouslySetInnerHTML={{ __html: embed }}></div>
+                                : <img
                                     src={thumbnail}
                                     title={title}
                                     alt={title}
-                                />
-                            </figure>
-                        </div>
+                                />}
+                        </figure>
                     </div>
-                }
-
-                <CardText>
-                    URL: <a href={url}>{url}</a>
-                </CardText>
+                </div>
             </CardBody>
         </Card>
     )

diff --git a/src/app/oembed-service.ts b/src/app/oembed-service.ts
@@ -113,11 +113,23 @@ const getOEmbed = async <T extends ProviderResponse>(req: ConsumerRequest): Prom
         throw new Error('no matching schema')
     }
 
-    const response = await fetch(`${matchedUrl}?url=${req.url}`)
+    const optionalQueryParamsList = [];
 
-    const body = await response.json();
+    if (req.maxheight) {
+        optionalQueryParamsList.push(['maxheight', req.maxheight]);
+    }
+
+    if (req.maxwidth) {
+        optionalQueryParamsList.push(['maxwidth', req.maxwidth]);
+    }
 
-    console.log(body)
+    const optionalQueryParams = optionalQueryParamsList.reduce((p, c) => `${p}&${c[0]}=${c[1]}`, '')
+
+    const url = `${matchedUrl}?url=${req.url}&format=json${optionalQueryParams}`; console.log(url)
+
+    const response = await fetch(url)
+
+    const body = await response.json();
 
     return body
 }