From bb9b76efeb37cfe982d037c52aa2294093fe80f6 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 17:48:08 +0000
Subject: [PATCH] Update blog to display videos as articles and remove separate
 video page

Remove the dedicated video page and integrate video playback into the existing article structure.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 65e95fa8-e04e-43f2-8a2f-ec80ab84f4f2
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/igVW4lQ
Replit-Helium-Checkpoint-Created: true
---
 client/src/App.tsx          |   2 -
 client/src/pages/video.tsx  | 104 ------------------------------------
 client/src/pages/videos.tsx |  66 ++++++++++-------------
 3 files changed, 29 insertions(+), 143 deletions(-)
 delete mode 100644 client/src/pages/video.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index a8db4ad..045f538 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -8,7 +8,6 @@ import Home from "@/pages/home";
 import ArticlePage from "@/pages/article";
 import CategoryPage from "@/pages/category";
 import VideosPage from "@/pages/videos";
-import VideoPage from "@/pages/video";
 
 function Router() {
   return (
@@ -17,7 +16,6 @@ function Router() {
       <Route path="/article/:slug" component={ArticlePage} />
       <Route path="/category/:category" component={CategoryPage} />
       <Route path="/videos" component={VideosPage} />
-      <Route path="/video/:guid" component={VideoPage} />
       <Route component={NotFound} />
     </Switch>
   );
diff --git a/client/src/pages/video.tsx b/client/src/pages/video.tsx
deleted file mode 100644
index 8e03711..0000000
--- a/client/src/pages/video.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { useParams, Link } from "wouter";
-import { format } from "date-fns";
-import { de } from "date-fns/locale";
-import { ArrowLeft, Clock } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
-import Header from "@/components/header";
-import Footer from "@/components/footer";
-import { useEffect } from "react";
-
-interface BunnyVideo {
-  guid: string;
-  title: string;
-  length: number;
-  dateUploaded: string;
-  thumbnail: string;
-  embedUrl: string;
-}
-
-function formatDuration(seconds: number): string {
-  const m = Math.floor(seconds / 60);
-  const s = seconds % 60;
-  return `${m}:${s.toString().padStart(2, "0")}`;
-}
-
-export default function VideoPage() {
-  const { guid } = useParams<{ guid: string }>();
-
-  const { data: video, isLoading } = useQuery<BunnyVideo>({
-    queryKey: ["/api/videos", guid],
-  });
-
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [guid]);
-
-  if (isLoading) {
-    return (
-      <div className="min-h-screen bg-background">
-        <Header />
-        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-          <Skeleton className="h-8 w-32 mb-6" />
-          <Skeleton className="w-full aspect-video rounded-md mb-6" />
-          <Skeleton className="h-8 w-2/3 mb-4" />
-          <Skeleton className="h-4 w-1/3" />
-        </div>
-      </div>
-    );
-  }
-
-  if (!video) {
-    return (
-      <div className="min-h-screen bg-background">
-        <Header />
-        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
-          <p className="text-muted-foreground" data-testid="text-video-not-found">Video nicht gefunden.</p>
-          <Link href="/videos">
-            <Button className="mt-4" data-testid="button-back-videos">Zurück zu Videos</Button>
-          </Link>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-background">
-      <Header />
-      <main className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <Link href="/videos">
-          <button className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors mb-6 text-sm" data-testid="button-back">
-            <ArrowLeft className="w-4 h-4" />
-            Zurück
-          </button>
-        </Link>
-
-        <div className="w-full aspect-video rounded-md overflow-hidden mb-6" data-testid="video-player">
-          <iframe
-            src={video.embedUrl}
-            className="w-full h-full border-0"
-            allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;"
-            allowFullScreen
-            loading="lazy"
-          />
-        </div>
-
-        <h1 className="text-2xl md:text-3xl font-bold text-foreground mb-3" data-testid="text-video-title">
-          {video.title}
-        </h1>
-
-        <div className="flex items-center gap-4 text-sm text-muted-foreground">
-          <span className="flex items-center gap-1">
-            <Clock className="w-4 h-4" />
-            {formatDuration(video.length)}
-          </span>
-          <span>
-            {format(new Date(video.dateUploaded), "d. MMMM yyyy", { locale: de })}
-          </span>
-        </div>
-      </main>
-      <Footer />
-    </div>
-  );
-}
diff --git a/client/src/pages/videos.tsx b/client/src/pages/videos.tsx
index a27c456..856ea9c 100644
--- a/client/src/pages/videos.tsx
+++ b/client/src/pages/videos.tsx
@@ -1,45 +1,29 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "wouter";
+import { type Article } from "@shared/schema";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
-import { Play } from "lucide-react";
+import { Play, ArrowLeft } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 
-interface BunnyVideo {
-  guid: string;
-  title: string;
-  length: number;
-  dateUploaded: string;
-  thumbnail: string;
-  embedUrl: string;
-}
+function VideoCard({ article }: { article: Article }) {
+  const thumbSrc = article.coverImage
+    ? article.coverImage.replace(".webp", "-thumb.webp")
+    : "/images/article-1.png";
 
-interface VideoResponse {
-  items: BunnyVideo[];
-  totalItems: number;
-  currentPage: number;
-}
-
-function formatDuration(seconds: number): string {
-  const m = Math.floor(seconds / 60);
-  const s = seconds % 60;
-  return `${m}:${s.toString().padStart(2, "0")}`;
-}
-
-function VideoCard({ video }: { video: BunnyVideo }) {
   return (
-    <Link href={`/video/${video.guid}`}>
+    <Link href={`/article/${article.slug}`}>
       <article
         className="group cursor-pointer bg-card rounded-md border border-card-border transition-all duration-300 h-full flex flex-col"
-        data-testid={`card-video-${video.guid}`}
+        data-testid={`card-video-${article.id}`}
       >
         <div className="relative rounded-t-md">
           <div className="overflow-hidden rounded-t-md">
             <img
-              src={video.thumbnail}
-              alt={video.title}
+              src={thumbSrc}
+              alt={article.title}
               className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
               loading="lazy"
             />
@@ -49,16 +33,13 @@ function VideoCard({ video }: { video: BunnyVideo }) {
               <Play className="w-5 h-5 text-white ml-0.5" fill="white" />
             </div>
           </div>
-          <div className="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-2 py-0.5 rounded">
-            {formatDuration(video.length)}
-          </div>
         </div>
         <div className="p-4 flex flex-col flex-1">
           <h3 className="font-semibold text-card-foreground mb-1 line-clamp-2 group-hover:text-primary transition-colors text-sm leading-snug">
-            {video.title}
+            {article.title}
           </h3>
           <p className="text-xs text-muted-foreground mt-auto">
-            {format(new Date(video.dateUploaded), "d. MMMM yyyy", { locale: de })}
+            {format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}
           </p>
         </div>
       </article>
@@ -79,26 +60,37 @@ function VideoCardSkeleton() {
 }
 
 export default function VideosPage() {
-  const { data, isLoading } = useQuery<VideoResponse>({
-    queryKey: ["/api/videos"],
+  const { data: articles, isLoading } = useQuery<Article[]>({
+    queryKey: ["/api/articles/category/Video"],
   });
 
   return (
     <div className="min-h-screen bg-background">
       <Header />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <Link href="/">
+          <button className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors mb-6 text-sm" data-testid="button-back">
+            <ArrowLeft className="w-4 h-4" />
+            Zurück
+          </button>
+        </Link>
+
         {isLoading ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
-            {Array.from({ length: 8 }).map((_, i) => (
+            {Array.from({ length: 4 }).map((_, i) => (
               <VideoCardSkeleton key={i} />
             ))}
           </div>
-        ) : (
+        ) : articles && articles.length > 0 ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
-            {(data?.items || []).map((video) => (
-              <VideoCard key={video.guid} video={video} />
+            {articles.map((article) => (
+              <VideoCard key={article.id} article={article} />
             ))}
           </div>
+        ) : (
+          <div className="text-center py-16">
+            <p className="text-muted-foreground">Noch keine Videos vorhanden.</p>
+          </div>
         )}
       </main>
       <Footer />