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)

2026-08-24 21:54:20 +02:00
parent ed063af866
commit b77fd4a28b
4 changed files with 158 additions and 124 deletions
@@ -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">
@@ -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>
  );