mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Fix marquee behavior and unify marquee settings

Browse Source
This commit is contained in:
MOH
2026-03-10 05:23:27 +01:00
parent 701c1b2a6c
commit e219295327
6 changed files with 134 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/root/marquee/actions.ts
+21 -31
View File
@@ -37,45 +37,35 @@ export async function saveMarqueeSettingsAction(formData: FormData) {
ensureAdmin();
try {
const germanSettings = {
row1: String(formData.get("row1-de") ?? "").trim(),
row2: String(formData.get("row2-de") ?? "").trim(),
row3: String(formData.get("row3-de") ?? "").trim(),
row4: String(formData.get("row4-de") ?? "").trim(),
};
const settings = {
locales: {
ar: {
row1: String(formData.get("row1-ar") ?? "").trim(),
row2: String(formData.get("row2-ar") ?? "").trim(),
row3: String(formData.get("row3-ar") ?? "").trim(),
row4: String(formData.get("row4-ar") ?? "").trim(),
},
en: {
row1: String(formData.get("row1-en") ?? "").trim(),
row2: String(formData.get("row2-en") ?? "").trim(),
row3: String(formData.get("row3-en") ?? "").trim(),
row4: String(formData.get("row4-en") ?? "").trim(),
},
de: {
row1: String(formData.get("row1-de") ?? "").trim(),
row2: String(formData.get("row2-de") ?? "").trim(),
row3: String(formData.get("row3-de") ?? "").trim(),
row4: String(formData.get("row4-de") ?? "").trim(),
},
ar: { ...germanSettings },
en: { ...germanSettings },
de: germanSettings,
},
};
for (const locale of routing.locales) {
if (!settings.locales[locale].row1) {
throw new Error(`Row 1 fuer ${locale} ist erforderlich.`);
}
if (!germanSettings.row1) {
throw new Error("Row 1 fuer de ist erforderlich.");
}
if (!settings.locales[locale].row2) {
throw new Error(`Row 2 fuer ${locale} ist erforderlich.`);
}
if (!germanSettings.row2) {
throw new Error("Row 2 fuer de ist erforderlich.");
}
if (!settings.locales[locale].row3) {
throw new Error(`Row 3 fuer ${locale} ist erforderlich.`);
}
if (!germanSettings.row3) {
throw new Error("Row 3 fuer de ist erforderlich.");
}
if (!settings.locales[locale].row4) {
throw new Error(`Row 4 fuer ${locale} ist erforderlich.`);
}
if (!germanSettings.row4) {
throw new Error("Row 4 fuer de ist erforderlich.");
}
await updateMarqueeSettings(settings);
components/layout/site-footer.tsx
-3
View File
@@ -2,7 +2,6 @@ import Link from "next/link";
import { useLocale, useTranslations } from "next-intl";
import { Container } from "@/components/layout/container";
import { RetroLedMarquee } from "@/components/layout/retro-led-marquee";
import { getLocalizedPath } from "@/lib/locale";
const navItems = [
@@ -21,7 +20,6 @@ export function SiteFooter({ isAdmin = false }: SiteFooterProps) {
const locale = useLocale();
const tNav = useTranslations("navigation");
const tFooter = useTranslations("footer");
const ledText = "MADE IN GERMANY BY MOH";
return (
<footer className="border-t border-border bg-background">
@@ -46,7 +44,6 @@ export function SiteFooter({ isAdmin = false }: SiteFooterProps) {
<p className="text-xs text-muted-foreground/80">
{tFooter("copyright", { year: new Date().getFullYear() })}
</p>
<RetroLedMarquee text={ledText} />
</div>
</Container>
</footer>
components/layout/stacked-marquee-section.tsx
+70 -22
View File
@@ -1,6 +1,7 @@
"use client";
import { motion, useReducedMotion } from "framer-motion";
import { useLayoutEffect, useRef, useState } from "react";
import { motion, useAnimationFrame, useMotionValue, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";
@@ -86,33 +87,80 @@ const DEFAULT_ROWS: MarqueeRow[] = [
function MarqueeRowTrack({ items, direction, duration = 24 }: MarqueeRow) {
const shouldReduceMotion = useReducedMotion();
const viewportRef = useRef<HTMLDivElement>(null);
const segmentRef = useRef<HTMLDivElement>(null);
const [segmentWidth, setSegmentWidth] = useState(0);
const [copyCount, setCopyCount] = useState(3);
const x = useMotionValue(0);
const isReady = shouldReduceMotion || segmentWidth > 0;
useLayoutEffect(() => {
const viewport = viewportRef.current;
const segment = segmentRef.current;
if (!viewport || !segment) {
return;
}
const measure = () => {
const nextSegmentWidth = segment.scrollWidth;
const viewportWidth = viewport.clientWidth;
if (!nextSegmentWidth || !viewportWidth) {
return;
}
setSegmentWidth(nextSegmentWidth);
setCopyCount(Math.max(3, Math.ceil(viewportWidth / nextSegmentWidth) + 2));
x.set(direction === "right" ? -nextSegmentWidth : 0);
};
measure();
const observer = new ResizeObserver(() => {
measure();
});
observer.observe(viewport);
observer.observe(segment);
return () => {
observer.disconnect();
};
}, [direction, items, x]);
useAnimationFrame((_, delta) => {
if (shouldReduceMotion || segmentWidth === 0) {
return;
}
const distancePerMs = segmentWidth / (duration * 1000);
const offset = distancePerMs * delta;
const current = x.get();
if (direction === "right") {
const next = current + offset;
x.set(next >= 0 ? next - segmentWidth : next);
return;
}
const next = current - offset;
x.set(next <= -segmentWidth ? next + segmentWidth : next);
});
return (
<div className="overflow-hidden leading-[0.92]">
<div ref={viewportRef} className="overflow-hidden leading-[0.92]">
<motion.div
className="flex w-max min-w-full flex-nowrap"
animate={
shouldReduceMotion
? { x: 0 }
: {
x: direction === "left" ? ["0%", "-50%"] : ["-50%", "0%"],
}
}
transition={
shouldReduceMotion
? undefined
: {
duration,
ease: "linear",
repeat: Number.POSITIVE_INFINITY,
}
}
dir="ltr"
className={cn("flex w-max flex-nowrap", !isReady && "opacity-0")}
style={{ x }}
>
{Array.from({ length: 2 }).map((_, copyIndex) => (
{Array.from({ length: copyCount }).map((_, copyIndex) => (
<div
key={`${direction}-${copyIndex}`}
ref={copyIndex === 0 ? segmentRef : undefined}
className="flex shrink-0 items-center gap-3 pr-3 sm:gap-4 sm:pr-4 lg:gap-5 lg:pr-5"
aria-hidden={copyIndex === 1}
aria-hidden={copyIndex > 0}
>
{items.map((item, itemIndex) => (
<div
@@ -156,7 +204,7 @@ export function StackedMarqueeSection({
>
<div className="relative flex flex-col gap-0 sm:gap-0 lg:gap-0">
{rows.map((row, index) => (
<div key={`${row.direction}-${index}`} className={index === 0 ? "" : "-mt-0.5 sm:-mt-1"}>
<div key={`${row.direction}-${index}`}>
<MarqueeRowTrack
items={row.items}
direction={row.direction}
components/root/marquee-settings-form.tsx
+21 -29
View File
@@ -9,12 +9,6 @@ type MarqueeSettingsFormProps = {
initialSettings: MarqueeSettings;
};
const localeMeta = [
{ key: "de", label: "Deutsch" },
{ key: "en", label: "English" },
{ key: "ar", label: "Arabic" },
] as const;
const rowMeta = [
{ key: "row1", label: "Row 1" },
{ key: "row2", label: "Row 2" },
@@ -31,31 +25,29 @@ export function MarqueeSettingsForm({
<AppCard>
<CardHeader>
<CardTitle>Marquee Rows</CardTitle>
<CardDescription>Ein Feld pro Zeile. Ein Begriff pro Zeile oder mit Komma getrennt.</CardDescription>
<CardDescription>Nur Deutsch bearbeiten. Die Werte werden fuer alle Sprachen uebernommen.</CardDescription>
</CardHeader>
<CardContent className="grid gap-6 xl:grid-cols-3">
{localeMeta.map((locale) => (
<div key={locale.key} className="space-y-4 rounded-nested border border-border/70 bg-background/70 p-4">
<div>
<h3 className="text-sm font-semibold text-foreground">{locale.label}</h3>
<p className="text-xs text-muted-foreground">Vier Marquee Zeilen fuer diese Sprache.</p>
</div>
<div className="space-y-4">
{rowMeta.map((row) => (
<div key={`${locale.key}-${row.key}`} className="space-y-2">
<Label htmlFor={`${row.key}-${locale.key}`}>{row.label}</Label>
<Textarea
id={`${row.key}-${locale.key}`}
name={`${row.key}-${locale.key}`}
defaultValue={initialSettings.locales[locale.key][row.key]}
className="min-h-[180px] resize-y"
/>
</div>
))}
</div>
<CardContent>
<div className="space-y-4 rounded-nested border border-border/70 bg-background/70 p-4">
<div>
<h3 className="text-sm font-semibold text-foreground">Deutsch</h3>
<p className="text-xs text-muted-foreground">Vier Marquee Zeilen. Diese Werte gelten fuer alle Sprachen.</p>
</div>
))}
<div className="space-y-4">
{rowMeta.map((row) => (
<div key={`de-${row.key}`} className="space-y-2">
<Label htmlFor={`${row.key}-de`}>{row.label}</Label>
<Textarea
id={`${row.key}-de`}
name={`${row.key}-de`}
defaultValue={initialSettings.locales.de[row.key]}
className="min-h-[180px] resize-y"
/>
</div>
))}
</div>
</div>
</CardContent>
</AppCard>
</form>
lib/app-config.ts
+6 -2
View File
@@ -39,6 +39,7 @@ export {
buildDefaultMarqueeSettings,
parseMarqueeSettingsValue,
splitMarqueeRowItems,
syncMarqueeSettingsToGermanSource,
type MarqueeLocaleSettings,
type MarqueeSettings,
} from "./marquee-settings";
@@ -80,6 +81,7 @@ import {
MARQUEE_SETTINGS_KEY,
buildDefaultMarqueeSettings,
parseMarqueeSettingsValue,
syncMarqueeSettingsToGermanSource,
type MarqueeSettings,
} from "./marquee-settings";
@@ -231,14 +233,16 @@ export async function getMarqueeSettings(): Promise<MarqueeSettings> {
}
export async function updateMarqueeSettings(settings: MarqueeSettings): Promise<void> {
const normalizedSettings = syncMarqueeSettingsToGermanSource(settings);
await prisma.appConfig.upsert({
where: { key: MARQUEE_SETTINGS_KEY },
update: {
value: JSON.stringify(settings),
value: JSON.stringify(normalizedSettings),
},
create: {
key: MARQUEE_SETTINGS_KEY,
value: JSON.stringify(settings),
value: JSON.stringify(normalizedSettings),
},
});
}
lib/marquee-settings.ts
+16 -4
View File
@@ -97,26 +97,38 @@ function normalizeLocaleSettings(value: unknown, defaults: MarqueeLocaleSettings
};
}
export function syncMarqueeSettingsToGermanSource(settings: MarqueeSettings): MarqueeSettings {
const source = settings.locales.de;
return {
locales: {
de: { ...source },
en: { ...source },
ar: { ...source },
},
};
}
export function parseMarqueeSettingsValue(rawValue?: string | null): MarqueeSettings {
const defaults = buildDefaultMarqueeSettings();
if (!rawValue) {
return defaults;
return syncMarqueeSettingsToGermanSource(defaults);
}
try {
const parsed = JSON.parse(rawValue) as { locales?: Record<string, unknown> };
const locales = parsed && typeof parsed === "object" ? parsed.locales : undefined;
return {
return syncMarqueeSettingsToGermanSource({
locales: {
ar: normalizeLocaleSettings(locales?.ar, defaults.locales.ar),
en: normalizeLocaleSettings(locales?.en, defaults.locales.en),
de: normalizeLocaleSettings(locales?.de, defaults.locales.de),
},
};
});
} catch {
return defaults;
return syncMarqueeSettingsToGermanSource(defaults);
}
}