add last 5 yt vids to video page

deathsite/deathsite.py

@@ -51,7 +51,7 @@ NAV_BUTTON_STYLE = {
     },
 }
 
-from deathsite.videos import Youtube,get_last_5_yt_videos 
+from deathsite.videos import Youtube 
 
 class State(rx.State):
     current_page: str = "Home"
@@ -60,7 +60,7 @@ class State(rx.State):
     projects: list[dict[str, str]] = PROJECTS_DATA
     current_yt_video: str = ""
     last_yt_fetch: str = ""  # ISO date string
-    yt_video_list: list[dict[str, str]] = []
+    yt_video_list: list[str] = [] # Changed type to list of strings
     def update_time(self):
         self.current_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
 
@@ -70,10 +70,10 @@ class State(rx.State):
     @rx.event(background=True)
     async def update_current_yt_video(self):
         """Fetch the current YouTube video in the background."""
-        yt = videos.Youtube()
+        yt = Youtube() # Corrected instantiation
         yt.get_newest_video()
         self.current_yt_video = yt.current_yt_video
-        await asyncio.sleep(86400)  # Update every 60 seconds
+        await asyncio.sleep(600)  # Update every 10 minutes (600 seconds)
 
     async def update_yt_video(self):
         today = datetime.date.today().isoformat()
@@ -85,12 +85,25 @@ class State(rx.State):
 
     # video updater for videos page
     async def update_videos(self):
-        videos = get_last_5_yt_videos()
-        self.yt_video_list = videos
-        await asyncio.sleep(864000)  # Update every 10 minutes
-
-
+        yt_instance = Youtube()
+        video_urls = yt_instance.get_last_5_yt_videos()
+        self.yt_video_list = video_urls
+        # Removed asyncio.sleep as on_load handles initial load.
+        # If periodic background refresh is desired, a separate @rx.background task is better.
 
+    def get_youtube_embed_url(self, watch_url: str) -> str:
+        """Converts a YouTube watch URL to an embed URL."""
+        if not isinstance(watch_url, str):
+            return "about:blank"
+        try:
+            if 'v=' in watch_url:
+                video_id_part = watch_url.split('v=')[1]
+                video_id = video_id_part.split('&')[0]  # Remove any other params like &list=
+                return f"https://www.youtube.com/embed/{video_id}"
+            return "about:blank"
+        except Exception:
+            # Catch any parsing errors and return a safe default
+            return "about:blank"
    
         
 def navigation_button(text: str) -> rx.Component:

deathsite/videos_page.py

@@ -1,7 +1,8 @@
 import reflex as rx
-from deathsite.deathsite import page_content, YOUTUBE_URL
+from deathsite.deathsite import page_content, YOUTUBE_URL, State
 
-@rx.page(route="/videos")
+
+@rx.page(route="/videos", on_load=State.update_videos)
 def videos():
     return page_content(
         rx.vstack(
@@ -13,7 +14,34 @@ def videos():
                 color="#ffffff",
                 is_external=True,
             ),
-            padding="2em",
-            spacing="1",
+            rx.flex(
+                rx.foreach(
+                    State.yt_video_list,
+                    lambda video_url: rx.card(
+                        rx.html(
+                            f"""<iframe 
+                                width="350" 
+                                height="200" 
+                                src="{video_url}" 
+                                title="YouTube video player" 
+                                frameborder="0" 
+                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                                allowfullscreen>
+                            </iframe>"""
+                        ),
+                        width="auto",
+                    ),
+                ),
+                direction="row",
+                wrap="wrap",
+                spacing="4",
+                justify="center",
+                align="start",
+                padding="1em",
+                width="100%",
+            ),
+            align_items="center",
+            spacing="4",
+            width="100%",
         )
     )