Merge pull request #103 from eye-on-surveillance/AI/yt-previews

AI/yt-thumbnails
eye-on-surveillance · Sep 30, 2023 · 437dd2c · 437dd2c
2 parents 989ce6d + 930c7ac
commit 437dd2c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 6 deletions.
diff --git a/packages/web/components/Citation.tsx b/packages/web/components/Citation.tsx
@@ -9,9 +9,19 @@ const citationKeyMap: { [key: string]: string } = {
   source_title: "Source Title",
   source_name: "Source Name",
   source_publish_date: "Source Publish Date",
-  source_url: "Source URL (with timestamp)",
+  source_url: "Council Meeting",
 };
 
+function isYouTubeURL(url: string): boolean {
+  return url.includes('youtube.com');
+}
+
+function getYouTubeThumbnail(url: string): string | undefined {
+  const videoId = url.split("v=")[1]?.split("&")[0];
+  if (!videoId) return undefined;
+  return `https://img.youtube.com/vi/${videoId}/0.jpg`;
+}
+
 const Citation = ({ citation, index }: CitationProps) => {
   const hasMetadata = Object.values(citation).some(
     (value) => value !== null && value !== ""
@@ -26,10 +36,16 @@ const Citation = ({ citation, index }: CitationProps) => {
             {"\u2022"} {citationKeyMap[key] || key} 
           </strong>
           :{" "}
-          {key === "source_url" && citation[key] ? ( // Check if the current key is 'source_url' and it exists
-            <a href={citation[key]} target="_blank" rel="noopener noreferrer">
-              {citation[key]}
-            </a>
+          {key === "source_url" && citation[key] ? (
+            isYouTubeURL(citation[key]) && getYouTubeThumbnail(citation[key]) ? (
+              <a href={citation[key]} target="_blank" rel="noopener noreferrer">
+                <img src={getYouTubeThumbnail(citation[key])!} alt="YouTube Thumbnail" width="200"/>
+              </a>
+            ) : (
+              <a href={citation[key]} target="_blank" rel="noopener noreferrer">
+                {citation[key]}
+              </a>
+            )
           ) : (
             citation[key]
           )}

diff --git a/packages/web/components/NewQuery.tsx b/packages/web/components/NewQuery.tsx
@@ -24,6 +24,22 @@ function YouTubeEmbed({ url }: { url: string }) {
   );
 }
 
+function YouTubeThumbnail({ url }: { url: string }) {
+  const videoId = url.split("v=")[1]?.split("&")[0];
+  if (!videoId) return null;
+
+  return (
+    <a href={url} target="_blank" rel="noopener noreferrer">
+      <img 
+        width="560" 
+        height="315" 
+        src={`https://img.youtube.com/vi/${videoId}/0.jpg`} 
+        alt="YouTube Thumbnail"
+      />
+    </a>
+  );
+}
+
 export default function NewQuery() {
   const apiEndpoint = process.env.NEXT_PUBLIC_TGI_API_ENDPOINT!;
   const [query, setQuery] = useState("");
@@ -159,7 +175,7 @@ export default function NewQuery() {
           <div key={index}>
             <p>{citation.source_title}</p>
             {citation.source_url && citation.source_url.includes("youtube.com") && 
-              <YouTubeEmbed url={citation.source_url} />}
+              <YouTubeThumbnail url={citation.source_url} />}
           </div>
         ))}
       </div>