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
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/aktuelles.tsx
+3 -1
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>
)}
client/src/pages/article.tsx
+6 -3
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" />
client/src/pages/category.tsx
+3 -1
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>
client/src/pages/search.tsx
+4 -2
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">
client/src/pages/videos.tsx
+3 -1
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>