From b77fd4a28bb7688030d799f8459a2a86fb6745fb Mon Sep 17 00:00:00 2001
From: folx bot <bot@folx.tv>
Date: Mon, 24 Aug 2026 21:54:20 +0200
Subject: [PATCH] video sekcija: YouTube predvajalnik na strani (Google zahteva
 predvajljiv video za indeksiranje, oglasi tecejo YouTubov), VideoObject kaze
 na cel video; /videos je zdaj mreza YouTube videov z rubrikami;
 video-sitemap.xml in vpis v robots; ingest brez napovednika (samo metapodatki
 in naslovnica)

---
 client/src/pages/video-detail.tsx |  26 ++--
 client/src/pages/videos.tsx       | 217 +++++++++++++++---------------
 server/routes.ts                  |  29 ++++
 server/static.ts                  |  10 +-
 4 files changed, 158 insertions(+), 124 deletions(-)

diff --git a/client/src/pages/video-detail.tsx b/client/src/pages/video-detail.tsx
index e9fbe13..5135534 100644
--- a/client/src/pages/video-detail.tsx
+++ b/client/src/pages/video-detail.tsx
@@ -20,8 +20,9 @@ export interface YtVideo {
   description: string;
   chapters: { t: string; label: string }[];
   tags: string[];
-  previewUrl: string;
+  previewUrl: string | null;
   previewS: number;
+  embedUrl?: string;
   posterUrl: string;
   youtubeUrl: string;
 }
@@ -83,15 +84,19 @@ export default function VideoDetailPage() {
           </div>
         ) : (
           <>
-            <div className="rounded-lg overflow-hidden bg-black">
-              <video
-                controls
-                playsInline
-                preload="metadata"
-                poster={v.posterUrl}
-                src={v.previewUrl}
-                className="w-full aspect-video"
-                data-testid="video-preview"
+            {/* Pravi YouTube predvajalnik: Google zahteva predvajljiv video na
+                strani, oglasi pa tecejo enako kot na youtube.com. Navadna
+                vdelava s klikom na play — brez samodejnega predvajanja, ker
+                YouTube v tem primeru oglasov ne servira. */}
+            <div className="rounded-lg overflow-hidden bg-black aspect-video">
+              <iframe
+                src={v.embedUrl || `https://www.youtube-nocookie.com/embed/${v.ytId}`}
+                title={v.shortTitle}
+                className="w-full h-full"
+                style={{ border: 0 }}
+                allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowFullScreen
+                data-testid="video-embed"
               />
             </div>
 
@@ -99,7 +104,6 @@ export default function VideoDetailPage() {
               <span className="rounded bg-primary/10 px-2 py-1 font-semibold text-primary">{v.rubrik}</span>
               <span className="flex items-center gap-1"><Clock className="w-3.5 h-3.5" />{dauer(v.durationS)}</span>
               <span>{format(new Date(v.publishedAt), "d. MMMM yyyy", { locale: de })}</span>
-              <span className="text-muted-foreground/70">Vorschau {v.previewS} Sek.</span>
             </div>
 
             <h1 className="mt-3 text-2xl sm:text-3xl font-bold text-foreground leading-tight" data-testid="text-video-title">
diff --git a/client/src/pages/videos.tsx b/client/src/pages/videos.tsx
index 628c37d..023a789 100644
--- a/client/src/pages/videos.tsx
+++ b/client/src/pages/videos.tsx
@@ -1,59 +1,58 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link, useLocation, useSearch } from "wouter";
-import { type Article } from "@shared/schema";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
 import { usePageMeta } from "@/hooks/use-page-meta";
 import { Play, ArrowLeft, ChevronLeft, ChevronRight } 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 { ArticleCardAd, PageSideAds, TopBannerAd, MultiplexAd } from "@/components/adsense";
+import { PageSideAds, TopBannerAd, MultiplexAd } from "@/components/adsense";
 import { useEffect } from "react";
-import { useFocalPoints, objectPositionFor } from "@/lib/focal";
+import type { YtVideo } from "@/pages/video-detail";
+import { dauer } from "@/pages/video-detail";
 
-interface PaginatedResponse {
-  articles: Article[];
+interface YtResponse {
+  items: YtVideo[];
   total: number;
   page: number;
   totalPages: number;
-  hasMore: boolean;
+  rubriken: string[];
 }
 
-function VideoCard({ article }: { article: Article }) {
-  const thumbSrc = article.coverImage
-    ? article.coverImage.replace(".webp", "-thumb.webp")
-    : "/images/article-1.jpg";
-  const focalPoints = useFocalPoints();
-
+function VideoCard({ v }: { v: YtVideo }) {
   return (
-    <Link href={`/article/${article.slug}`}>
+    <Link href={`/video/${v.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-${article.id}`}
+        data-testid={`card-video-${v.ytId}`}
       >
-        <div className="relative rounded-t-md">
-          <div className="overflow-hidden rounded-t-md">
-            <img
-              src={thumbSrc}
-              alt={article.title}
-              style={{ objectPosition: objectPositionFor(article.coverImage, focalPoints) }} className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
-              loading="lazy"
-            />
-          </div>
+        <div className="relative rounded-t-md overflow-hidden">
+          <img
+            src={v.posterUrl}
+            alt={v.shortTitle}
+            className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
+            loading="lazy"
+          />
           <div className="absolute inset-0 flex items-center justify-center">
             <div className="w-12 h-12 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors">
               <Play className="w-5 h-5 text-white ml-0.5" fill="white" />
             </div>
           </div>
+          <span className="absolute bottom-2 right-2 rounded bg-black/75 px-1.5 py-0.5 text-[11px] font-medium text-white">
+            {dauer(v.durationS)}
+          </span>
         </div>
         <div className="p-4 flex flex-col flex-1">
+          <span className="text-[10px] font-semibold uppercase tracking-wide text-primary mb-1">{v.rubrik}</span>
           <h3 className="font-semibold text-card-foreground mb-1 line-clamp-2 group-hover:text-primary transition-colors text-sm leading-snug">
-            {article.title}
+            {v.shortTitle}
           </h3>
-          <p className="text-xs text-muted-foreground mt-auto">
-            {format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}
+          {v.teaser && (
+            <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">{v.teaser}</p>
+          )}
+          <p className="text-xs text-muted-foreground mt-auto pt-2">
+            {format(new Date(v.publishedAt), "d. MMMM yyyy", { locale: de })}
           </p>
         </div>
       </article>
@@ -61,7 +60,7 @@ function VideoCard({ article }: { article: Article }) {
   );
 }
 
-function VideoCardSkeleton() {
+function CardSkeleton() {
   return (
     <div className="bg-card rounded-md border border-card-border">
       <Skeleton className="w-full aspect-video rounded-t-md" />
@@ -74,43 +73,46 @@ function VideoCardSkeleton() {
 }
 
 export default function VideosPage() {
-  usePageMeta("Volksmusik & Schlager Videos", "Volksmusik und Schlager Musikvideos, Live-Auftritte und Konzertmitschnitte bei FOLX TV. Die besten volkstümlichen Hits und Schlager-Stars im Video.");
+  usePageMeta(
+    "Volksmusik & Schlager Videos",
+    "Musik News, Interviews und FOLX STADL: alle Videos von FOLX TV auf einen Blick — Volksmusik, Schlager und die groessten Stars.",
+  );
 
   const searchString = useSearch();
   const [, setLocation] = useLocation();
   const params = new URLSearchParams(searchString);
   const currentPage = Math.max(1, parseInt(params.get("page") || "1"));
-  const limit = 12;
+  const rubrik = params.get("rubrik") || "Alle";
+  const limit = 24;
 
-  const { data, isLoading } = useQuery<PaginatedResponse>({
-    queryKey: [`/api/articles/category/Video?page=${currentPage}&limit=${limit}`],
+  const { data, isLoading } = useQuery<YtResponse>({
+    queryKey: [`/api/yt-videos?page=${currentPage}&limit=${limit}&rubrik=${encodeURIComponent(rubrik)}`],
   });
 
   useEffect(() => {
     window.scrollTo({ top: 0, behavior: "smooth" });
-  }, [currentPage]);
+  }, [currentPage, rubrik]);
 
-  const goToPage = (page: number) => {
-    if (page === 1) {
-      setLocation("/videos");
-    } else {
-      setLocation(`/videos?page=${page}`);
-    }
+  const go = (page: number, r = rubrik) => {
+    const q = new URLSearchParams();
+    if (r && r !== "Alle") q.set("rubrik", r);
+    if (page > 1) q.set("page", String(page));
+    const qs = q.toString();
+    setLocation(qs ? `/videos?${qs}` : "/videos");
   };
 
   const totalPages = data?.totalPages || 1;
-  const articles = data?.articles || [];
+  const items = data?.items || [];
+  const rubriken = ["Alle", ...(data?.rubriken || [])];
 
-  const getPageNumbers = () => {
+  const pageNumbers = () => {
     const pages: (number | "...")[] = [];
     if (totalPages <= 7) {
       for (let i = 1; i <= totalPages; i++) pages.push(i);
     } else {
       pages.push(1);
       if (currentPage > 3) pages.push("...");
-      const start = Math.max(2, currentPage - 1);
-      const end = Math.min(totalPages - 1, currentPage + 1);
-      for (let i = start; i <= end; i++) pages.push(i);
+      for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) pages.push(i);
       if (currentPage < totalPages - 2) pages.push("...");
       pages.push(totalPages);
     }
@@ -130,80 +132,77 @@ export default function VideosPage() {
           </button>
         </Link>
 
-        <h1 className="text-2xl font-bold text-foreground mb-6" data-testid="text-videos-title">
+        <h1 className="text-2xl font-bold text-foreground mb-4" data-testid="text-videos-title">
           Videos
         </h1>
 
-        {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) => (
-              <VideoCardSkeleton key={i} />
+        {rubriken.length > 1 && (
+          <div className="flex flex-wrap gap-2 mb-6" data-testid="videos-rubriken">
+            {rubriken.map((r) => (
+              <button
+                key={r}
+                onClick={() => go(1, r)}
+                className={`rounded-full px-3.5 py-1.5 text-xs font-semibold transition-colors ${
+                  r === rubrik ? "bg-primary text-primary-foreground" : "bg-card border border-card-border text-card-foreground hover:bg-muted/40"
+                }`}
+                data-testid={`button-rubrik-${r}`}
+              >
+                {r}
+              </button>
             ))}
           </div>
-        ) : articles.length > 0 ? (
-          <>
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
-              {articles.flatMap((article, index) => {
-                const items: JSX.Element[] = [
-                  <VideoCard key={article.id} article={article} />,
-                ];
-                if ((index + 1) % 3 === 0) {
-                  items.push(<ArticleCardAd key={`ad-video-${index}`} />);
-                }
-                return items;
-              })}
-            </div>
+        )}
 
-            {totalPages > 1 && (
-              <nav className="flex items-center justify-center gap-1 mt-10" data-testid="pagination-videos">
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={() => goToPage(currentPage - 1)}
-                  disabled={currentPage <= 1}
-                  data-testid="button-prev-page"
-                >
-                  <ChevronLeft className="w-4 h-4" />
-                </Button>
-
-                {getPageNumbers().map((p, i) =>
-                  p === "..." ? (
-                    <span key={`ellipsis-${i}`} className="px-2 text-muted-foreground">...</span>
-                  ) : (
-                    <Button
-                      key={p}
-                      variant={p === currentPage ? "default" : "outline"}
-                      size="sm"
-                      onClick={() => goToPage(p as number)}
-                      data-testid={`button-page-${p}`}
-                    >
-                      {p}
-                    </Button>
-                  )
-                )}
-
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={() => goToPage(currentPage + 1)}
-                  disabled={currentPage >= totalPages}
-                  data-testid="button-next-page"
-                >
-                  <ChevronRight className="w-4 h-4" />
-                </Button>
-              </nav>
-            )}
-          </>
+        {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) => <CardSkeleton key={i} />)}
+          </div>
+        ) : items.length === 0 ? (
+          <p className="text-muted-foreground text-sm">Zurzeit keine Videos in dieser Rubrik.</p>
         ) : (
-          <div className="text-center py-16">
-            <p className="text-muted-foreground">Noch keine Videos vorhanden.</p>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
+            {items.map((v) => <VideoCard key={v.ytId} v={v} />)}
           </div>
         )}
-              <div className="mt-8" data-testid="ad-multiplex-end">
-          <div className="text-[9px] text-muted-foreground/40 text-center pb-1 uppercase tracking-widest">Anzeige</div>
-          <MultiplexAd />
-        </div>
-</main>
+
+        <MultiplexAd />
+
+        {totalPages > 1 && (
+          <div className="flex justify-center items-center gap-2 mt-8" data-testid="videos-pagination">
+            <button
+              onClick={() => go(currentPage - 1)}
+              disabled={currentPage <= 1}
+              className="p-2 rounded-md border border-card-border text-card-foreground disabled:opacity-30"
+              aria-label="Zurück"
+            >
+              <ChevronLeft className="w-4 h-4" />
+            </button>
+            {pageNumbers().map((p, i) =>
+              p === "..." ? (
+                <span key={`e-${i}`} className="px-2 text-muted-foreground">…</span>
+              ) : (
+                <button
+                  key={p}
+                  onClick={() => go(p)}
+                  className={`min-w-9 rounded-md px-3 py-1.5 text-sm font-semibold ${
+                    p === currentPage ? "bg-primary text-primary-foreground" : "border border-card-border text-card-foreground hover:bg-muted/40"
+                  }`}
+                >
+                  {p}
+                </button>
+              ),
+            )}
+            <button
+              onClick={() => go(currentPage + 1)}
+              disabled={currentPage >= totalPages}
+              className="p-2 rounded-md border border-card-border text-card-foreground disabled:opacity-30"
+              aria-label="Weiter"
+            >
+              <ChevronRight className="w-4 h-4" />
+            </button>
+          </div>
+        )}
+      </main>
       <Footer />
     </div>
   );
diff --git a/server/routes.ts b/server/routes.ts
index 5b761c2..1fdd20a 100644
--- a/server/routes.ts
+++ b/server/routes.ts
@@ -111,6 +111,7 @@ export async function registerRoutes(
         "",
         `Sitemap: ${SITE}/sitemap.xml`,
         `Sitemap: ${SITE}/news-sitemap.xml`,
+        `Sitemap: ${SITE}/video-sitemap.xml`,
         "",
       ].join("\n")
     );
@@ -155,6 +156,9 @@ export async function registerRoutes(
         const lastmod = a.publishedAt ? new Date(a.publishedAt as any).toISOString() : new Date().toISOString();
         urls.push(`  <url>\n    <loc>${SITE}/article/${xmlEscape(a.slug)}</loc>\n    <lastmod>${lastmod}</lastmod>\n    <changefreq>weekly</changefreq>\n    <priority>0.8</priority>\n  </url>`);
       }
+      for (const v of ytItems()) {
+        urls.push(`  <url>\n    <loc>${SITE}/video/${xmlEscape(v.slug)}</loc>\n    <lastmod>${new Date(v.publishedAt).toISOString()}</lastmod>\n    <changefreq>weekly</changefreq>\n    <priority>0.8</priority>\n  </url>`);
+      }
       const xml = `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n${urls.join("\n")}\n</urlset>`;
       res.type("application/xml").send(xml);
     } catch (e) {
@@ -162,6 +166,30 @@ export async function registerRoutes(
     }
   });
 
+  // Video sitemap: Google ga bere posebej in iz njega ve, katere strani nosijo
+  // video. Vsak vnos kaze na naso stran, predvajalnik pa je YouTube.
+  app.get("/video-sitemap.xml", (_req, res) => {
+    try {
+      const urls = ytItems().map((v) => {
+        const page = `${SITE}/video/${xmlEscape(v.slug)}`;
+        return `  <url>\n    <loc>${page}</loc>\n    <video:video>\n` +
+          `      <video:thumbnail_loc>${SITE}${xmlEscape(v.posterUrl)}</video:thumbnail_loc>\n` +
+          `      <video:title>${xmlEscape(v.shortTitle)}</video:title>\n` +
+          `      <video:description>${xmlEscape((v.teaser || v.shortTitle).slice(0, 1900))}</video:description>\n` +
+          `      <video:player_loc>${xmlEscape(v.embedUrl || `https://www.youtube-nocookie.com/embed/${v.ytId}`)}</video:player_loc>\n` +
+          `      <video:duration>${v.durationS || 0}</video:duration>\n` +
+          `      <video:publication_date>${new Date(v.publishedAt).toISOString()}</video:publication_date>\n` +
+          `      <video:family_friendly>yes</video:family_friendly>\n` +
+          `      <video:live>no</video:live>\n` +
+          `    </video:video>\n  </url>`;
+      });
+      const xml = `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">\n${urls.join("\n")}\n</urlset>`;
+      res.type("application/xml").send(xml);
+    } catch (e) {
+      res.status(500).type("application/xml").send('<?xml version="1.0"?><urlset/>');
+    }
+  });
+
   app.get("/news-sitemap.xml", async (_req, res) => {
     try {
       const articles = await storage.getArticles();
@@ -1150,6 +1178,7 @@ Disallow: /search
 Disallow: /admin/
 
 Sitemap: https://folx.tv/sitemap.xml
+Sitemap: https://folx.tv/video-sitemap.xml
 `;
     res.set("Content-Type", "text/plain");
     res.set("Cache-Control", "public, max-age=86400");
diff --git a/server/static.ts b/server/static.ts
index bed74fa..e46fa67 100644
--- a/server/static.ts
+++ b/server/static.ts
@@ -131,16 +131,18 @@ export function serveStatic(app: Express) {
         const pageUrl = `${canonicalBase}/video/${v.slug}`;
         const poster = `${canonicalBase}${v.posterUrl}`;
         const desc = (v.teaser || v.shortTitle || v.title).slice(0, 300);
-        const mins = Math.floor(v.previewS / 60), secs = v.previewS % 60;
+        const mins = Math.floor((v.durationS || 0) / 60), secs = (v.durationS || 0) % 60;
+        const embedUrl = v.embedUrl || `https://www.youtube-nocookie.com/embed/${v.ytId}`;
         const videoLd = {
           "@context": "https://schema.org",
           "@type": "VideoObject",
-          "name": `${v.shortTitle} \u2013 Vorschau`,
+          "name": v.shortTitle,
           "description": desc,
           "thumbnailUrl": [poster],
           "uploadDate": v.publishedAt,
           "duration": `PT${mins}M${secs}S`,
-          "contentUrl": `${canonicalBase}${v.previewUrl}`,
+          "embedUrl": embedUrl,
+          "contentUrl": v.youtubeUrl,
           "isFamilyFriendly": true,
           "inLanguage": "de",
           "publisher": {
@@ -177,7 +179,7 @@ export function serveStatic(app: Express) {
         const ssr = [
           '<article class="ssr-content">',
           `<h1>${escapeHtml(v.shortTitle)}</h1>`,
-          `<video controls playsinline preload="metadata" poster="${escapeHtml(v.posterUrl)}" style="max-width:100%;height:auto;" src="${escapeHtml(v.previewUrl)}"></video>`,
+          `<iframe width="640" height="360" src="${escapeHtml(embedUrl)}" title="${escapeHtml(v.shortTitle)}" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="border:0;max-width:100%;"></iframe>`,
           `<p><strong>${escapeHtml(desc)}</strong></p>`,
           chapterHtml,
           `<p><a href="${escapeHtml(v.youtubeUrl)}" rel="noopener">Das ganze Video auf YouTube ansehen</a></p>`,