sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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)

Browse Source
This commit is contained in:
folx bot
2026-08-24 21:54:20 +02:00
parent ed063af866
commit b77fd4a28b
4 changed files with 158 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/video-detail.tsx
+15 -11
View File
@@ -20,8 +20,9 @@ export interface YtVideo {
description: string; description: string;
chapters: { t: string; label: string }[]; chapters: { t: string; label: string }[];
tags: string[]; tags: string[];
previewUrl: string; previewUrl: string | null;
previewS: number; previewS: number;
embedUrl?: string;
posterUrl: string; posterUrl: string;
youtubeUrl: string; youtubeUrl: string;
} }
@@ -83,15 +84,19 @@ export default function VideoDetailPage() {
</div> </div>
) : ( ) : (
<> <>
<div className="rounded-lg overflow-hidden bg-black"> {/* Pravi YouTube predvajalnik: Google zahteva predvajljiv video na
<video strani, oglasi pa tecejo enako kot na youtube.com. Navadna
controls vdelava s klikom na play — brez samodejnega predvajanja, ker
playsInline YouTube v tem primeru oglasov ne servira. */}
preload="metadata" <div className="rounded-lg overflow-hidden bg-black aspect-video">
poster={v.posterUrl} <iframe
src={v.previewUrl} src={v.embedUrl || `https://www.youtube-nocookie.com/embed/${v.ytId}`}
className="w-full aspect-video" title={v.shortTitle}
data-testid="video-preview" 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> </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="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 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>{format(new Date(v.publishedAt), "d. MMMM yyyy", { locale: de })}</span>
<span className="text-muted-foreground/70">Vorschau {v.previewS} Sek.</span>
</div> </div>
<h1 className="mt-3 text-2xl sm:text-3xl font-bold text-foreground leading-tight" data-testid="text-video-title"> <h1 className="mt-3 text-2xl sm:text-3xl font-bold text-foreground leading-tight" data-testid="text-video-title">
client/src/pages/videos.tsx
+90 -91
View File
@@ -1,59 +1,58 @@
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { Link, useLocation, useSearch } from "wouter"; import { Link, useLocation, useSearch } from "wouter";
import { type Article } from "@shared/schema";
import { format } from "date-fns"; import { format } from "date-fns";
import { de } from "date-fns/locale"; import { de } from "date-fns/locale";
import { usePageMeta } from "@/hooks/use-page-meta"; import { usePageMeta } from "@/hooks/use-page-meta";
import { Play, ArrowLeft, ChevronLeft, ChevronRight } from "lucide-react"; import { Play, ArrowLeft, ChevronLeft, ChevronRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import Header from "@/components/header"; import Header from "@/components/header";
import Footer from "@/components/footer"; 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 { useEffect } from "react";
import { useFocalPoints, objectPositionFor } from "@/lib/focal"; import type { YtVideo } from "@/pages/video-detail";
import { dauer } from "@/pages/video-detail";
interface PaginatedResponse { interface YtResponse {
articles: Article[]; items: YtVideo[];
total: number; total: number;
page: number; page: number;
totalPages: number; totalPages: number;
hasMore: boolean; rubriken: string[];
} }
function VideoCard({ article }: { article: Article }) { function VideoCard({ v }: { v: YtVideo }) {
const thumbSrc = article.coverImage
? article.coverImage.replace(".webp", "-thumb.webp")
: "/images/article-1.jpg";
const focalPoints = useFocalPoints();
return ( return (
<Link href={`/article/${article.slug}`}> <Link href={`/video/${v.slug}`}>
<article <article
className="group cursor-pointer bg-card rounded-md border border-card-border transition-all duration-300 h-full flex flex-col" 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="relative rounded-t-md overflow-hidden">
<div className="overflow-hidden rounded-t-md">
<img <img
src={thumbSrc} src={v.posterUrl}
alt={article.title} alt={v.shortTitle}
style={{ objectPosition: objectPositionFor(article.coverImage, focalPoints) }} className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105" className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
loading="lazy" loading="lazy"
/> />
</div>
<div className="absolute inset-0 flex items-center justify-center"> <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"> <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" /> <Play className="w-5 h-5 text-white ml-0.5" fill="white" />
</div> </div>
</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>
<div className="p-4 flex flex-col flex-1"> <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"> <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> </h3>
<p className="text-xs text-muted-foreground mt-auto"> {v.teaser && (
{format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })} <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> </p>
</div> </div>
</article> </article>
@@ -61,7 +60,7 @@ function VideoCard({ article }: { article: Article }) {
); );
} }
function VideoCardSkeleton() { function CardSkeleton() {
return ( return (
<div className="bg-card rounded-md border border-card-border"> <div className="bg-card rounded-md border border-card-border">
<Skeleton className="w-full aspect-video rounded-t-md" /> <Skeleton className="w-full aspect-video rounded-t-md" />
@@ -74,43 +73,46 @@ function VideoCardSkeleton() {
} }
export default function VideosPage() { 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 searchString = useSearch();
const [, setLocation] = useLocation(); const [, setLocation] = useLocation();
const params = new URLSearchParams(searchString); const params = new URLSearchParams(searchString);
const currentPage = Math.max(1, parseInt(params.get("page") || "1")); 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>({ const { data, isLoading } = useQuery<YtResponse>({
queryKey: [`/api/articles/category/Video?page=${currentPage}&limit=${limit}`], queryKey: [`/api/yt-videos?page=${currentPage}&limit=${limit}&rubrik=${encodeURIComponent(rubrik)}`],
}); });
useEffect(() => { useEffect(() => {
window.scrollTo({ top: 0, behavior: "smooth" }); window.scrollTo({ top: 0, behavior: "smooth" });
}, [currentPage]); }, [currentPage, rubrik]);
const goToPage = (page: number) => { const go = (page: number, r = rubrik) => {
if (page === 1) { const q = new URLSearchParams();
setLocation("/videos"); if (r && r !== "Alle") q.set("rubrik", r);
} else { if (page > 1) q.set("page", String(page));
setLocation(`/videos?page=${page}`); const qs = q.toString();
} setLocation(qs ? `/videos?${qs}` : "/videos");
}; };
const totalPages = data?.totalPages || 1; 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 | "...")[] = []; const pages: (number | "...")[] = [];
if (totalPages <= 7) { if (totalPages <= 7) {
for (let i = 1; i <= totalPages; i++) pages.push(i); for (let i = 1; i <= totalPages; i++) pages.push(i);
} else { } else {
pages.push(1); pages.push(1);
if (currentPage > 3) pages.push("..."); if (currentPage > 3) pages.push("...");
const start = Math.max(2, currentPage - 1); for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) pages.push(i);
const end = Math.min(totalPages - 1, currentPage + 1);
for (let i = start; i <= end; i++) pages.push(i);
if (currentPage < totalPages - 2) pages.push("..."); if (currentPage < totalPages - 2) pages.push("...");
pages.push(totalPages); pages.push(totalPages);
} }
@@ -130,79 +132,76 @@ export default function VideosPage() {
</button> </button>
</Link> </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 Videos
</h1> </h1>
{isLoading ? ( {rubriken.length > 1 && (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5"> <div className="flex flex-wrap gap-2 mb-6" data-testid="videos-rubriken">
{Array.from({ length: 8 }).map((_, i) => ( {rubriken.map((r) => (
<VideoCardSkeleton key={i} /> <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> </div>
) : articles.length > 0 ? ( )}
<>
{isLoading ? (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
{articles.flatMap((article, index) => { {Array.from({ length: 8 }).map((_, i) => <CardSkeleton key={i} />)}
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> </div>
) : items.length === 0 ? (
<p className="text-muted-foreground text-sm">Zurzeit keine Videos in dieser Rubrik.</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>
)}
<MultiplexAd />
{totalPages > 1 && ( {totalPages > 1 && (
<nav className="flex items-center justify-center gap-1 mt-10" data-testid="pagination-videos"> <div className="flex justify-center items-center gap-2 mt-8" data-testid="videos-pagination">
<Button <button
variant="outline" onClick={() => go(currentPage - 1)}
size="icon"
onClick={() => goToPage(currentPage - 1)}
disabled={currentPage <= 1} disabled={currentPage <= 1}
data-testid="button-prev-page" 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" /> <ChevronLeft className="w-4 h-4" />
</Button> </button>
{pageNumbers().map((p, i) =>
{getPageNumbers().map((p, i) =>
p === "..." ? ( p === "..." ? (
<span key={`ellipsis-${i}`} className="px-2 text-muted-foreground">...</span> <span key={`e-${i}`} className="px-2 text-muted-foreground">…</span>
) : ( ) : (
<Button <button
key={p} key={p}
variant={p === currentPage ? "default" : "outline"} onClick={() => go(p)}
size="sm" className={`min-w-9 rounded-md px-3 py-1.5 text-sm font-semibold ${
onClick={() => goToPage(p as number)} p === currentPage ? "bg-primary text-primary-foreground" : "border border-card-border text-card-foreground hover:bg-muted/40"
data-testid={`button-page-${p}`} }`}
> >
{p} {p}
</Button> </button>
) ),
)} )}
<button
<Button onClick={() => go(currentPage + 1)}
variant="outline"
size="icon"
onClick={() => goToPage(currentPage + 1)}
disabled={currentPage >= totalPages} disabled={currentPage >= totalPages}
data-testid="button-next-page" className="p-2 rounded-md border border-card-border text-card-foreground disabled:opacity-30"
aria-label="Weiter"
> >
<ChevronRight className="w-4 h-4" /> <ChevronRight className="w-4 h-4" />
</Button> </button>
</nav>
)}
</>
) : (
<div className="text-center py-16">
<p className="text-muted-foreground">Noch keine Videos vorhanden.</p>
</div> </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> </main>
<Footer /> <Footer />
</div> </div>
server/routes.ts
+29
View File
@@ -111,6 +111,7 @@ export async function registerRoutes(
"", "",
`Sitemap: ${SITE}/sitemap.xml`, `Sitemap: ${SITE}/sitemap.xml`,
`Sitemap: ${SITE}/news-sitemap.xml`, `Sitemap: ${SITE}/news-sitemap.xml`,
`Sitemap: ${SITE}/video-sitemap.xml`,
"", "",
].join("\n") ].join("\n")
); );
@@ -155,6 +156,9 @@ export async function registerRoutes(
const lastmod = a.publishedAt ? new Date(a.publishedAt as any).toISOString() : new Date().toISOString(); 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>`); 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>`; 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); res.type("application/xml").send(xml);
} catch (e) { } 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) => { app.get("/news-sitemap.xml", async (_req, res) => {
try { try {
const articles = await storage.getArticles(); const articles = await storage.getArticles();
@@ -1150,6 +1178,7 @@ Disallow: /search
Disallow: /admin/ Disallow: /admin/
Sitemap: https://folx.tv/sitemap.xml Sitemap: https://folx.tv/sitemap.xml
Sitemap: https://folx.tv/video-sitemap.xml
`; `;
res.set("Content-Type", "text/plain"); res.set("Content-Type", "text/plain");
res.set("Cache-Control", "public, max-age=86400"); res.set("Cache-Control", "public, max-age=86400");
server/static.ts
+6 -4
View File
@@ -131,16 +131,18 @@ export function serveStatic(app: Express) {
const pageUrl = `${canonicalBase}/video/${v.slug}`; const pageUrl = `${canonicalBase}/video/${v.slug}`;
const poster = `${canonicalBase}${v.posterUrl}`; const poster = `${canonicalBase}${v.posterUrl}`;
const desc = (v.teaser || v.shortTitle || v.title).slice(0, 300); 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 = { const videoLd = {
"@context": "https://schema.org", "@context": "https://schema.org",
"@type": "VideoObject", "@type": "VideoObject",
"name": `${v.shortTitle} \u2013 Vorschau`, "name": v.shortTitle,
"description": desc, "description": desc,
"thumbnailUrl": [poster], "thumbnailUrl": [poster],
"uploadDate": v.publishedAt, "uploadDate": v.publishedAt,
"duration": `PT${mins}M${secs}S`, "duration": `PT${mins}M${secs}S`,
"contentUrl": `${canonicalBase}${v.previewUrl}`, "embedUrl": embedUrl,
"contentUrl": v.youtubeUrl,
"isFamilyFriendly": true, "isFamilyFriendly": true,
"inLanguage": "de", "inLanguage": "de",
"publisher": { "publisher": {
@@ -177,7 +179,7 @@ export function serveStatic(app: Express) {
const ssr = [ const ssr = [
'<article class="ssr-content">', '<article class="ssr-content">',
`<h1>${escapeHtml(v.shortTitle)}</h1>`, `<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>`, `<p><strong>${escapeHtml(desc)}</strong></p>`,
chapterHtml, chapterHtml,
`<p><a href="${escapeHtml(v.youtubeUrl)}" rel="noopener">Das ganze Video auf YouTube ansehen</a></p>`, `<p><a href="${escapeHtml(v.youtubeUrl)}" rel="noopener">Das ganze Video auf YouTube ansehen</a></p>`,