feat: rework the videos page

engines/brave/video.php

@@ -51,12 +51,15 @@
                 $thumbnail = $result["thumbnail"];
 
                 echo "<div class=\"text-result-wrapper\">";
-                echo "<a href=\"$url\">";
+                echo "<a class=\"video-link\" href=\"$url\">";
+                echo "<div class=\"video-thumbnail\">";
+                echo "<img class=\"video-img\" src=\"image_proxy.php?url=$thumbnail\">";
+                echo "</div>";
+                echo "<div class=\"video-properties\">";
                 echo "$base_url";
                 echo "<h2>$title</h2>";
-                echo "<img class=\"video-img\" src=\"image_proxy.php?url=$thumbnail\">";
-                echo "<br>";
                 echo "<span>$date - $views</span>";
+                echo "</div>";
                 echo "</a>";
                 echo "</div>";
             }

search.php

@@ -51,7 +51,7 @@
             $config = require "config.php";
             require "misc/tools.php";
 
-            echo "<div class=\"result-container\">";
+            echo "<div class=\"result-container\" data-type=\"$type\">";
 
             $page = isset($_REQUEST["p"]) ? (int) $_REQUEST["p"] : 0;
 

static/css/styles.css

@@ -242,6 +242,11 @@ a:hover,
     flex-direction: column;
 }
 
+/* Allow the video wrapper to be a bit bigger */
+.result-container[data-type="2"] .text-result-wrapper {
+    max-width: 700px;
+}
+
 #time {
     font-size: 13px;
     opacity: 0.65;
@@ -303,9 +308,12 @@ a:hover,
     color: var(--result-fg);
 }
 
-.video-img {
-    height: 115px;
+.video-thumbnail {
+    min-height: 96px;
+    max-height: 96px;
+    background-color: var(--search-container-background-color);
     border-radius: 12px;
+    aspect-ratio: 4 / 3;
 }
 
 .text-result-wrapper h2 {
@@ -405,6 +413,19 @@ a[title] .image-properties {
     vertical-align: bottom;
 }
 
+.video-link {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 1rem;
+}
+
+.video-link .video-img {
+    max-height: 96px;
+    background-color: var(--search-container-background-color);
+    border-radius: 8px;
+}
+
 .git-container {
     right: 0;
 }