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

naslovnice: fokusna tocka obraza povsod (aktuelles, kategorije, videi, iskanje, clanek + sorodni), skupni pomocnik lib/focal, streznik osvezuje fokusne tocke vsakih 20 minut

Browse Source
This commit is contained in:
claude 2026-08-20 07:15:07 +02:00
parent 2ec7c259c3
commit ca47bc8698
7 changed files with 61 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
client/src/lib/focal.ts Normal file
View File

@ -0,0 +1,30 @@
import { useQuery } from "@tanstack/react-query";
export type FocalPoint = { x: number; y: number };
export type FocalMap = Record<string, FocalPoint>;
/**
* Fokusne tocke naslovnic (obraz na sliki), ki jih izracuna streznik
* (server/focal-point.ts) in postreze na /api/focal-points.
* Uporabi POVSOD, kjer se naslovnica clanka prikazuje z object-cover,
* sicer brskalnik obreze na sredino in odreze glave.
*/
export function useFocalPoints() {
const { data } = useQuery<FocalMap>({
queryKey: ["/api/focal-points"],
staleTime: 10 * 60 * 1000,
});
return data;
}
/** Vrne vrednost za CSS object-position. */
export function objectPositionFor(coverImage: string | null | undefined, focalPoints?: FocalMap): string {
const FALLBACK = "center 25%";
if (!coverImage || !focalPoints) return FALLBACK;
const fp =
focalPoints[coverImage] ||
focalPoints[coverImage.replace(/^https?:\/\/[^/]+/, "")] ||
focalPoints["https://folx.tv" + coverImage];
if (!fp) return FALLBACK;
return `${fp.x}% ${fp.y}%`;
}

4
client/src/pages/aktuelles.tsx
View File

@ -11,6 +11,7 @@ import Footer from "@/components/footer";
import { PageSideAds, TopBannerAd, MultiplexAd, ArticleCardAd } from "@/components/adsense";
import { format } from "date-fns";
import { de } from "date-fns/locale";
import { useFocalPoints, objectPositionFor } from "@/lib/focal";
interface Res {
articles: Article[];
@ -25,6 +26,7 @@ const ROW1 = ["Politik", "Promis", "Sport", "Musik & Film"];
const ROW2 = ["Wetter", "Finanzen"];
export default function AktuellesPage() {
const focalPoints = useFocalPoints();
const search = useSearch();
const [, setLocation] = useLocation();
const params = new URLSearchParams(search);
@ -142,7 +144,7 @@ export default function AktuellesPage() {
src={a.coverImage}
alt={a.title}
loading="lazy"
style={{ objectPosition: "center 25%" }} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
style={{ objectPosition: objectPositionFor(a.coverImage, focalPoints) }} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
/>
</div>
)}

9
client/src/pages/article.tsx
View File

@ -14,6 +14,7 @@ import { useIsMobile } from "@/hooks/use-mobile";
import DOMPurify from "dompurify";
import ShareButtons from "@/components/share-buttons";
import { useEffect, useMemo } from "react";
import { useFocalPoints, objectPositionFor } from "@/lib/focal";
const ALLOWED_IFRAME_DOMAINS = [
"iframe.mediadelivery.net",
@ -62,6 +63,7 @@ function RelatedArticles({ currentSlug }: { currentSlug: string }) {
});
const filtered = articles?.filter((a) => a.slug !== currentSlug);
const focalPoints = useFocalPoints();
if (!filtered || filtered.length === 0) return null;
@ -77,7 +79,7 @@ function RelatedArticles({ currentSlug }: { currentSlug: string }) {
src={article.coverImage ? article.coverImage.replace(".webp", "-thumb.webp") : "/images/article-1.jpg"}
alt={article.title}
className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
style={{ objectPosition: "center 25%" }}
style={{ objectPosition: objectPositionFor(article.coverImage, focalPoints) }}
loading="lazy"
/>
</div>
@ -96,6 +98,7 @@ function RelatedArticles({ currentSlug }: { currentSlug: string }) {
}
export default function ArticlePage() {
const focalPoints = useFocalPoints();
const { slug } = useParams<{ slug: string }>();
const isMobile = useIsMobile();
@ -313,8 +316,8 @@ export default function ArticlePage() {
<img
src={article.coverImage}
alt={article.title}
className="w-full h-full object-cover object-top"
style={{ maxHeight: "420px" }}
className="w-full h-full object-cover"
style={{ maxHeight: "420px", objectPosition: objectPositionFor(article.coverImage, focalPoints) }}
data-testid="img-article-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />

4
client/src/pages/category.tsx
View File

@ -11,6 +11,7 @@ import Header from "@/components/header";
import Footer from "@/components/footer";
import { ArticleCardAd, PageSideAds, TopBannerAd, MultiplexAd } from "@/components/adsense";
import { useEffect } from "react";
import { useFocalPoints, objectPositionFor } from "@/lib/focal";
interface PaginatedResponse {
articles: Article[];
@ -21,6 +22,7 @@ interface PaginatedResponse {
}
export default function CategoryPage({ fixedCategory }: { fixedCategory?: string } = {}) {
const focalPoints = useFocalPoints();
const params = useParams<{ category: string }>();
const category = fixedCategory || params.category;
const searchString = useSearch();
@ -175,7 +177,7 @@ export default function CategoryPage({ fixedCategory }: { fixedCategory?: string
src={a.coverImage || "/images/article-1.jpg"}
alt={a.title}
className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
style={{ objectPosition: "center 25%" }}
style={{ objectPosition: objectPositionFor(a.coverImage, focalPoints) }}
loading="lazy"
/>
</div>

6
client/src/pages/search.tsx
View File

@ -5,6 +5,7 @@ import { Search, Play, FileText, ArrowLeft } from "lucide-react";
import { usePageMeta } from "@/hooks/use-page-meta";
import Header from "@/components/header";
import { PageSideAds, TopBannerAd } from "@/components/adsense";
import { useFocalPoints, objectPositionFor } from "@/lib/focal";
interface SearchResult {
articles: {
@ -27,6 +28,7 @@ interface SearchResult {
}
export default function SearchPage() {
const focalPoints = useFocalPoints();
usePageMeta("Suche - Volksmusik & Schlager", "Durchsuchen Sie FOLX TV nach Volksmusik- und Schlager-Nachrichten, Künstlern, Videos und mehr.");
const searchString = useSearch();
const initialQuery = new URLSearchParams(searchString).get("q") || "";
@ -130,7 +132,7 @@ export default function SearchPage() {
<img
src={article.coverImage}
alt={article.title}
style={{ objectPosition: "center 25%" }} className="w-24 h-24 sm:w-32 sm:h-20 object-cover rounded-md flex-shrink-0"
style={{ objectPosition: objectPositionFor(article.coverImage, focalPoints) }} className="w-24 h-24 sm:w-32 sm:h-20 object-cover rounded-md flex-shrink-0"
/>
)}
<div className="flex-1 min-w-0">
@ -165,7 +167,7 @@ export default function SearchPage() {
<img
src={video.thumbnail}
alt={video.title}
style={{ objectPosition: "center 25%" }} className="w-full h-full object-cover rounded-md"
style={{ objectPosition: objectPositionFor(video.thumbnail, focalPoints) }} className="w-full h-full object-cover rounded-md"
/>
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-8 h-8 rounded-full bg-primary/80 flex items-center justify-center">

4
client/src/pages/videos.tsx
View File

@ -11,6 +11,7 @@ import Header from "@/components/header";
import Footer from "@/components/footer";
import { ArticleCardAd, PageSideAds, TopBannerAd, MultiplexAd } from "@/components/adsense";
import { useEffect } from "react";
import { useFocalPoints, objectPositionFor } from "@/lib/focal";
interface PaginatedResponse {
articles: Article[];
@ -24,6 +25,7 @@ function VideoCard({ article }: { article: Article }) {
const thumbSrc = article.coverImage
? article.coverImage.replace(".webp", "-thumb.webp")
: "/images/article-1.jpg";
const focalPoints = useFocalPoints();
return (
<Link href={`/article/${article.slug}`}>
@ -36,7 +38,7 @@ function VideoCard({ article }: { article: Article }) {
<img
src={thumbSrc}
alt={article.title}
style={{ objectPosition: "center 25%" }} className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
style={{ objectPosition: objectPositionFor(article.coverImage, focalPoints) }} className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
loading="lazy"
/>
</div>

17
server/routes.ts
View File

@ -75,11 +75,18 @@ export async function registerRoutes(
return res.status(401).json({ message: "Unauthorized" });
};
storage.getArticles().then((articles) => {
analyzeAllArticleImages(articles).catch(err =>
console.log("[focal-point] Analysis skipped:", err.message)
);
});
// Fokusne tocke naslovnic (kje je obraz) — brez njih object-cover obreze na
// sredino in odreze glave. Racunamo ob zagonu IN vsakih 20 minut, da jih
// dobijo tudi clanki, ki jih boti objavijo med tem.
const refreshFocalPoints = () => {
storage.getArticles().then((articles) => {
analyzeAllArticleImages(articles).catch(err =>
console.log("[focal-point] Analysis skipped:", err.message)
);
}).catch(err => console.log("[focal-point] getArticles failed:", err?.message));
};
refreshFocalPoints();
setInterval(refreshFocalPoints, 20 * 60 * 1000);
// ---- SEO: robots.txt, sitemap.xml, news sitemap, RSS ----
// Rubrike z onemusic.news imajo isto besedilo kot tam, zato jih ne oddajamo