From 8fb4d5a5c5aecc3e09ca10e13856358b08a11e89 Mon Sep 17 00:00:00 2001
From: JMARyA <jmarya@hydrar.de>
Date: Mon, 16 Dec 2024 22:00:08 +0100
Subject: [PATCH] add basic rec

---
 src/pages/components.rs | 11 +++++++----
 src/pages/watch.rs      | 10 ++++++++--
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/pages/components.rs b/src/pages/components.rs
index 78f792b..331d025 100644
--- a/src/pages/components.rs
+++ b/src/pages/components.rs
@@ -166,15 +166,18 @@ pub fn format_number(num: i32) -> String {
     num.to_string()
 }
 
-pub async fn video_element_wide(video: &mut Video) -> PreEscaped<String> {
+pub async fn video_element_wide(video: &Video) -> PreEscaped<String> {
     html!(
         a href=(format!("/watch?v={}", video.id)) class="flex items-center w-full p-4 bg-gray-900 shadow-lg rounded-lg overflow-hidden mb-2 mt-2" {
-            div class="flex-shrink-0" {
-                img width="480" src=(format!("/video/thumbnail?v={}", video.id)) alt="Video Thumbnail" class="w-48 h-32 object-cover rounded-md";
+            div class="flex-shrink-0 relative" {
+                img width="480" src=(format!("/video/thumbnail?v={}", video.id)) class="w-48 h-32 object-cover rounded-md";
+                span class="absolute bottom-2 right-2 bg-black text-white text-xs px-2 py-1 rounded-sm opacity-90" {
+                    (( format_seconds_to_hhmmss(video.duration) ))
+                };
             };
 
             div class="flex flex-col flex-grow ml-4" {
-                h3 class="text-lg font-semibold truncate mb-1" {
+                h3 class="text-lg font-semibold truncate mb-1" title=(video.title) {
                     ( video.title )
                 };
 
diff --git a/src/pages/watch.rs b/src/pages/watch.rs
index 101cfff..ec14b0e 100644
--- a/src/pages/watch.rs
+++ b/src/pages/watch.rs
@@ -8,7 +8,7 @@ use serde_json::json;
 
 use crate::{
     library::{self, user::UserManager, Library},
-    pages::components::{format_date, video_element},
+    pages::components::{format_date, video_element, video_element_wide},
 };
 
 use super::{
@@ -34,7 +34,7 @@ pub async fn watch_page(
 
     let content = html!(
         main class="container mx-auto mt-6 flex flex-col lg:flex-row gap-6" {
-          div class="lg:w-2/3 mt-10" {
+          div class="lg:w-10/12 mt-10" {
             div class="bg-black aspect-video rounded-lg overflow-hidden" {
               video
                 controls
@@ -61,6 +61,12 @@ pub async fn watch_page(
 
             };
           };
+          div id="recommendations" class="mt-8" {
+            h3 class="text-center text-4xl font-extrabold leading-tight mb-2" { "In " a class="text-blue-500" href=(format!("/d/{}", video.directory)) { (video.directory) }; }
+            @for video in library.get_directory_videos(&video.directory).await {
+              (video_element_wide(&video).await);
+            };
+          };
         };
     );