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

Update news widget to automatically rotate articles

Browse Source 
Modify the news widget to display a fixed number of articles and implement automatic rotation with hover pause functionality.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c64a3c69-568c-4dbf-9e2a-ec93f7ac0f90
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/RVXhOPb
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 18:36:16 +00:00
parent c5b7473bdc
commit d21787862e
2 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772303671336.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

48
client/src/components/news-widget.tsx
View File

@ -1,4 +1,5 @@
import { useQuery } from "@tanstack/react-query";
import { useState, useEffect, useCallback } from "react";
import { Newspaper, ExternalLink } from "lucide-react";
interface NewsItem {
@ -8,21 +9,50 @@ interface NewsItem {
pubDate: string;
}
const VISIBLE_COUNT = 5;
export function NewsWidget() {
const { data: news, isLoading } = useQuery<NewsItem[]>({
queryKey: ["/api/news-feed"],
});
const [offset, setOffset] = useState(0);
const [paused, setPaused] = useState(false);
const items = news || [];
const total = items.length;
const advance = useCallback(() => {
if (total <= VISIBLE_COUNT) return;
setOffset((o) => (o + 1) % total);
}, [total]);
useEffect(() => {
if (paused || total <= VISIBLE_COUNT) return;
const timer = setInterval(advance, 5000);
return () => clearInterval(timer);
}, [paused, advance, total]);
const visible: NewsItem[] = [];
for (let i = 0; i < Math.min(VISIBLE_COUNT, total); i++) {
visible.push(items[(offset + i) % total]);
}
return (
<div className="bg-card rounded-lg border border-card-border overflow-hidden h-full flex flex-col" data-testid="widget-news">
<div
className="bg-card rounded-lg border border-card-border overflow-hidden h-full flex flex-col"
onMouseEnter={() => setPaused(true)}
onMouseLeave={() => setPaused(false)}
data-testid="widget-news"
>
<div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0">
<Newspaper className="w-4 h-4 text-primary" />
<h3 className="font-bold text-card-foreground text-sm">Musiknachrichten</h3>
</div>
<div className="p-3 space-y-3 flex-1 overflow-y-auto">
{(news || []).slice(0, 8).map((item, i) => (
<div className="p-3 flex-1 flex flex-col justify-between">
{visible.map((item, i) => (
<a
key={i}
key={`${offset}-${i}`}
href={item.link}
target="_blank"
rel="noopener noreferrer"
@ -41,22 +71,22 @@ export function NewsWidget() {
</div>
<ExternalLink className="w-3 h-3 text-muted-foreground flex-shrink-0 mt-0.5 opacity-0 group-hover:opacity-100 transition-opacity" />
</div>
{i < 4 && <div className="border-b border-card-border mt-3" />}
{i < VISIBLE_COUNT - 1 && <div className="border-b border-card-border mt-2 mb-2" />}
</a>
))}
{isLoading && (
<div className="space-y-3">
{Array.from({ length: 4 }).map((_, i) => (
<div className="space-y-3 flex-1">
{Array.from({ length: VISIBLE_COUNT }).map((_, i) => (
<div key={i} className="space-y-1.5">
<div className="h-3 bg-muted animate-pulse rounded w-full" />
<div className="h-3 bg-muted animate-pulse rounded w-3/4" />
<div className="h-2 bg-muted animate-pulse rounded w-1/3 mt-1" />
{i < 3 && <div className="border-b border-card-border mt-3" />}
{i < VISIBLE_COUNT - 1 && <div className="border-b border-card-border mt-3" />}
</div>
))}
</div>
)}
{!isLoading && (!news || news.length === 0) && (
{!isLoading && total === 0 && (
<p className="text-xs text-muted-foreground text-center py-2">Keine Nachrichten verfügbar</p>
)}
</div>