add a link to the video

deltea · Aug 21, 2023 · 0b52210 · 0b52210
1 parent 36534a7
commit 0b52210
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/routes/api/random-video/+server.ts b/src/routes/api/random-video/+server.ts
@@ -30,6 +30,7 @@ export const GET: RequestHandler = async () => {
   return json({
     title,
     views,
-    thumbnails
+    thumbnails,
+    videoId,
   });
 }
diff --git a/src/routes/play/+page.svelte b/src/routes/play/+page.svelte
@@ -128,7 +128,11 @@
         style:background-image="url('{video1.thumbnails?.maxres?.url ?? video1.thumbnails?.high?.url ?? video1.thumbnails?.standard?.url}')">
         <h1 class="text-xl w-2/3">
           The YouTube video
-          <span class="text-4xl block">"{video1.title}"</span>
+          <a href="https://youtube.com/watch?v={video1.videoId}"
+            class="text-4xl block hover:underline"
+            target="_blank">
+            "{video1.title}"
+          </a>
           has
           <span class="text-5xl block text-youtube">{numberFormatter.format(video1.views)}</span>
           total views
@@ -155,7 +159,11 @@
         style:background-image="url('{video2.thumbnails?.maxres?.url ?? video2.thumbnails?.high?.url ?? video2.thumbnails?.standard?.url}')">
         <h1 class="text-xl w-2/3">
           The YouTube video
-          <span class="text-4xl block">"{video2.title}"</span>
+          <a href="https://youtube.com/watch?v={video2.videoId}"
+            class="text-4xl block hover:underline"
+            target="_blank">
+            "{video2.title}"
+          </a>
           has
           <span class="text-xl text-youtube flex flex-col my-4 gap-1">
             {#if state === "choosing"}
@@ -173,7 +181,7 @@
               <h1 id="countUp" class="text-5xl text-youtube">{numberFormatter.format(video2.views)}</h1>
             {/if}
           </span>
-          views than {video1.title}
+          total views
         </h1>
       </div>
     {/if}