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

client/src/lib/focal.ts

@@ -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}%`;
+}

client/src/pages/aktuelles.tsx

@@ -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>
                     )}

client/src/pages/article.tsx

@@ -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"
+              className="w-full h-full object-cover"
-              style={{ maxHeight: "420px" }}
+              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" />

client/src/pages/category.tsx

@@ -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>

client/src/pages/search.tsx

@@ -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">

client/src/pages/videos.tsx

@@ -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>

server/routes.ts

@@ -75,11 +75,18 @@ export async function registerRoutes(
     return res.status(401).json({ message: "Unauthorized" });
   };
 
-  storage.getArticles().then((articles) => {
+  // Fokusne tocke naslovnic (kje je obraz) — brez njih object-cover obreze na
-    analyzeAllArticleImages(articles).catch(err => 
+  // sredino in odreze glave. Racunamo ob zagonu IN vsakih 20 minut, da jih
-      console.log("[focal-point] Analysis skipped:", err.message)
+  // 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