feat: optimize event capturing and playback accuracy

2026-02-15 18:06:50 +01:00
parent e9ce406a31
commit 4e762ebfdf
38 changed files with 2847 additions and 523 deletions
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -3,9 +3,9 @@ import Header from '@/components/Header';
 import JsonLd from '@/components/JsonLd';
 import AnalyticsProvider from '@/components/analytics/AnalyticsProvider';
 import CMSConnectivityNotice from '@/components/CMSConnectivityNotice';
-import { FeedbackOverlay } from '@mintel/next-feedback';
 import { RecordModeProvider } from '@/components/record-mode/RecordModeContext';
-import { RecordModeOverlay } from '@/components/record-mode/RecordModeOverlay';
+import { RecordModeVisuals } from '@/components/record-mode/RecordModeVisuals';
+import { ToolCoordinator } from '@/components/record-mode/ToolCoordinator';
 import { Metadata, Viewport } from 'next';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages } from 'next-intl/server';
@@ -98,20 +98,49 @@ export default async function LocaleLayout({

  return (
    <html lang={safeLocale} className={`scroll-smooth overflow-x-hidden ${inter.variable}`}>
+      <head>
+        <style dangerouslySetInnerHTML={{
+          __html: `
+          /* Effectively Invisible Scrollbar */
+          ::-webkit-scrollbar {
+            width: 2px;
+            height: 2px;
+          }
+          ::-webkit-scrollbar-track {
+            background: transparent;
+          }
+          ::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 10px;
+          }
+          ::-webkit-scrollbar-thumb:hover {
+            background: rgba(130, 237, 32, 0.4);
+          }
+          * {
+            scrollbar-width: none;
+          }
+          *:hover {
+            scrollbar-width: thin;
+            scrollbar-color: rgba(130, 237, 32, 0.2) transparent;
+          }
+        `}} />
+      </head>
      <body className="flex flex-col min-h-screen font-sans selection:bg-accent selection:text-primary-dark antialiased overflow-x-hidden">
        <NextIntlClientProvider messages={messages} locale={safeLocale}>
          <RecordModeProvider>
-            <JsonLd />
-            <Header />
-            <main className="flex-grow animate-fade-in overflow-visible">{children}</main>
-            <Footer />
+            <RecordModeVisuals>
+              <JsonLd />
+              <Header />
+              <main className="flex-grow animate-fade-in overflow-visible">{children}</main>
+              <Footer />
+            </RecordModeVisuals>
+
            <CMSConnectivityNotice />

            <Suspense fallback={null}>
              <AnalyticsProvider />
            </Suspense>
-            {config.feedbackEnabled && <FeedbackOverlay />}
-            <RecordModeOverlay />
+            <ToolCoordinator />
          </RecordModeProvider>
        </NextIntlClientProvider>
      </body>
--- a/app/[locale]/products/[...slug]/page.tsx
+++ b/app/[locale]/products/[...slug]/page.tsx
@@ -212,8 +212,8 @@ export default async function ProductPage({ params }: ProductPageProps) {
          <Container className="relative z-10">
            <div className="max-w-4xl animate-slide-up">
              <nav className="flex items-center mb-8 text-white/40 text-sm font-bold uppercase tracking-widest">
-                <Link href={`/${locale}/products`} className="hover:text-accent transition-colors">
-                  {t('title')}
+                <Link href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`} className="hover:text-accent transition-colors">
+                  {t.has('breadcrumb') ? t('breadcrumb') : t('title').replace(/<[^>]*>/g, '')}
                </Link>
                <span className="mx-3 opacity-30">/</span>
                <span className="text-white/90">{categoryTitle}</span>
@@ -361,8 +361,8 @@ export default async function ProductPage({ params }: ProductPageProps) {
        <Container className="relative z-10">
          <div className="max-w-4xl animate-slide-up">
            <nav className="flex items-center mb-12 text-white/40 text-[10px] font-black uppercase tracking-[0.2em]">
-              <Link href={`/${locale}/products`} className="hover:text-accent transition-colors">
-                {t('title')}
+              <Link href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`} className="hover:text-accent transition-colors">
+                {t.has('breadcrumb') ? t('breadcrumb') : t('title').replace(/<[^>]*>/g, '')}
              </Link>
              <span className="mx-4 opacity-20">/</span>
              <Link
--- a/app/[locale]/products/opengraph-image.tsx
+++ b/app/[locale]/products/opengraph-image.tsx
@@ -10,7 +10,7 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
  const t = await getTranslations({ locale, namespace: 'Products' });
  const fonts = await getOgFonts();

-  const title = t('meta.title') || t('title');
+  const title = t('meta.title') || t('breadcrumb') || t('title').replace(/<[^>]*>/g, '');
  const description = t('meta.description') || t('subtitle');

  return new ImageResponse(
--- a/app/[locale]/products/page.tsx
+++ b/app/[locale]/products/page.tsx
@@ -17,23 +17,23 @@ interface ProductsPageProps {
 export async function generateMetadata({ params }: ProductsPageProps): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'Products' });
-  const title = t('meta.title') || t('title');
+  const title = t('meta.title') || t('breadcrumb') || t('title').replace(/<[^>]*>/g, '');
  const description = t('meta.description') || t('subtitle');
  return {
    title,
    description,
    alternates: {
-      canonical: `/${locale}/products`,
+      canonical: `/${locale}/${await mapFileSlugToTranslated('products', locale)}`,
      languages: {
-        de: '/de/products',
-        en: '/en/products',
-        'x-default': '/en/products',
+        de: `/de/${await mapFileSlugToTranslated('products', 'de')}`,
+        en: `/en/${await mapFileSlugToTranslated('products', 'en')}`,
+        'x-default': `/en/${await mapFileSlugToTranslated('products', 'en')}`,
      },
    },
    openGraph: {
      title: `${title} | KLZ Cables`,
      description,
-      url: `${SITE_URL}/${locale}/products`,
+      url: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}`,
    },
    twitter: {
      card: 'summary_large_image',
@@ -54,34 +54,36 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
  const highVoltageSlug = await mapFileSlugToTranslated('high-voltage-cables', locale);
  const solarSlug = await mapFileSlugToTranslated('solar-cables', locale);

+  const productsSlug = await mapFileSlugToTranslated('products', locale);
+
  const categories = [
    {
      title: t('categories.lowVoltage.title'),
      desc: t('categories.lowVoltage.description'),
      img: '/uploads/2024/11/low-voltage-category.webp',
      icon: '/uploads/2024/11/Low-Voltage.svg',
-      href: `/${locale}/products/${lowVoltageSlug}`,
+      href: `/${locale}/${productsSlug}/${lowVoltageSlug}`,
    },
    {
      title: t('categories.mediumVoltage.title'),
      desc: t('categories.mediumVoltage.description'),
      img: '/uploads/2024/11/medium-voltage-category.webp',
      icon: '/uploads/2024/11/Medium-Voltage.svg',
-      href: `/${locale}/products/${mediumVoltageSlug}`,
+      href: `/${locale}/${productsSlug}/${mediumVoltageSlug}`,
    },
    {
      title: t('categories.highVoltage.title'),
      desc: t('categories.highVoltage.description'),
      img: '/uploads/2024/11/high-voltage-category.webp',
      icon: '/uploads/2024/11/High-Voltage.svg',
-      href: `/${locale}/products/${highVoltageSlug}`,
+      href: `/${locale}/${productsSlug}/${highVoltageSlug}`,
    },
    {
      title: t('categories.solar.title'),
      desc: t('categories.solar.description'),
      img: '/uploads/2024/11/solar-category.webp',
      icon: '/uploads/2024/11/Solar.svg',
-      href: `/${locale}/products/${solarSlug}`,
+      href: `/${locale}/${productsSlug}/${solarSlug}`,
    },
  ];

--- a/app/api/save-session/route.ts
+++ b/app/api/save-session/route.ts
@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+
+export async function POST(req: NextRequest) {
+    // Only allow in development
+    if (process.env.NODE_ENV === 'production') {
+        return NextResponse.json({ error: 'This route is disabled in production.' }, { status: 403 });
+    }
+
+    try {
+        const body = await req.json();
+
+        // Ensure we are in the project root by using process.cwd()
+        // Path: <project-root>/remotion/session.json
+        const remotionDir = path.join(process.cwd(), 'remotion');
+        const filePath = path.join(remotionDir, 'session.json');
+
+        // Create remotion directory if it doesn't exist
+        if (!fs.existsSync(remotionDir)) {
+            fs.mkdirSync(remotionDir, { recursive: true });
+        }
+
+        // Write the JSON file
+        fs.writeFileSync(filePath, JSON.stringify(body, null, 2), 'utf-8');
+
+        return NextResponse.json({ success: true, path: filePath });
+    } catch (error: any) {
+        console.error('Failed to save session:', error);
+        return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+}