Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 547e62f9d4 | |||
| 27fc34e186 | |||
| d068d68d7a | |||
| 908f2b0b69 | |||
| 272b7a397b | |||
| 9edfe24509 |
@@ -189,8 +189,7 @@ export default async function Layout(props: {
|
||||
<link rel="preconnect" href="https://img.infra.mintel.me" />
|
||||
<link rel="icon" href="/favicon.ico" sizes="any" />
|
||||
<link rel="apple-touch-icon" href="/apple-icon.png" sizes="180x180" />
|
||||
{/* Preload critical hero video */}
|
||||
<link rel="preload" as="video" href="/assets/videos/web/hero-bohrung.mp4" type="video/mp4" />
|
||||
|
||||
</head>
|
||||
<body className="relative flex flex-col min-h-screen font-sans antialiased overflow-x-hidden selection:bg-primary/90 selection:text-white">
|
||||
<NextIntlClientProvider messages={clientMessages} locale={safeLocale}>
|
||||
|
||||
@@ -40,7 +40,10 @@ export async function POST(request: NextRequest) {
|
||||
website: websiteId,
|
||||
};
|
||||
|
||||
const umamiEndpoint = config.analytics.umami.apiEndpoint;
|
||||
let umamiEndpoint = config.analytics.umami.apiEndpoint || 'https://analytics.infra.mintel.me';
|
||||
if (!umamiEndpoint.startsWith('http')) {
|
||||
umamiEndpoint = `https://${umamiEndpoint}`;
|
||||
}
|
||||
|
||||
// Log the event (internal only)
|
||||
logger.debug('Forwarding analytics event', {
|
||||
|
||||
@@ -46,26 +46,28 @@ export function HeroVideo(props: HeroVideoProps) {
|
||||
{/* Background color while video loads */}
|
||||
<div className="absolute inset-0 z-0 bg-neutral-dark" />
|
||||
|
||||
{videoUrl ? (
|
||||
{/* ALWAYS render the Next.js optimized Image as the LCP element */}
|
||||
<Image
|
||||
key={`img-${pathname}-${posterSrc}`}
|
||||
src={posterSrc}
|
||||
alt={posterAlt}
|
||||
fill
|
||||
className="object-cover z-[1] pointer-events-none filter contrast-125 saturate-110 brightness-90"
|
||||
sizes="100vw"
|
||||
priority
|
||||
/>
|
||||
|
||||
{/* Render video on top if available, but don't force aggressive preload */}
|
||||
{videoUrl && (
|
||||
<video
|
||||
key={`${pathname}-${videoUrl}`}
|
||||
className="absolute inset-0 w-full h-full object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
|
||||
className="absolute inset-0 w-full h-full object-cover z-[2] pointer-events-none filter contrast-125 saturate-110 brightness-90"
|
||||
src={videoUrl}
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
preload="auto"
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
key={`img-${pathname}-${posterSrc}`}
|
||||
src={posterSrc}
|
||||
alt={posterAlt}
|
||||
fill
|
||||
className="object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
|
||||
sizes="100vw"
|
||||
priority
|
||||
preload="metadata"
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
@@ -4,51 +4,29 @@ import React, { useEffect, useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import Image from 'next/image';
|
||||
|
||||
const PRELOAD_VIDEOS = [
|
||||
'/assets/videos/web/hero-bohrung.mp4'
|
||||
];
|
||||
|
||||
export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?: boolean }) {
|
||||
const [isLoading, setIsLoading] = useState(shouldShowLoader);
|
||||
|
||||
useEffect(() => {
|
||||
if (!shouldShowLoader) return;
|
||||
|
||||
// Fallback Timeout (4 Sekunden), falls Videos hängen
|
||||
const timeout = setTimeout(() => {
|
||||
finishLoading();
|
||||
}, 4000);
|
||||
|
||||
let videosLoaded = 0;
|
||||
|
||||
const checkAllLoaded = () => {
|
||||
videosLoaded++;
|
||||
if (videosLoaded === PRELOAD_VIDEOS.length) {
|
||||
clearTimeout(timeout);
|
||||
// Kleine Verzögerung für die smootheness
|
||||
setTimeout(finishLoading, 800);
|
||||
}
|
||||
};
|
||||
|
||||
PRELOAD_VIDEOS.forEach((src) => {
|
||||
const video = document.createElement('video');
|
||||
video.preload = 'auto';
|
||||
video.oncanplaythrough = checkAllLoaded;
|
||||
video.onerror = checkAllLoaded; // bei Fehler trotzdem weitermachen
|
||||
video.src = src;
|
||||
video.load();
|
||||
});
|
||||
|
||||
// Cleanup
|
||||
return () => clearTimeout(timeout);
|
||||
}, [shouldShowLoader]);
|
||||
|
||||
const finishLoading = () => {
|
||||
// Set a session cookie so the server knows not to render the loader again
|
||||
document.cookie = "etib_initial_loader_v5=true; path=/; samesite=lax";
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!shouldShowLoader) return;
|
||||
|
||||
// Just show the animation for a short time to allow UI to mount,
|
||||
// we don't preload 10MB videos anymore to save pagespeed!
|
||||
const timeout = setTimeout(() => {
|
||||
finishLoading();
|
||||
}, 1200);
|
||||
|
||||
// Cleanup
|
||||
return () => clearTimeout(timeout);
|
||||
}, [shouldShowLoader]);
|
||||
|
||||
// Wenn wir serverseitig rendern und es nicht zeigen sollen, return null
|
||||
if (!shouldShowLoader) return null;
|
||||
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
"prepare": "husky",
|
||||
"preinstall": "npx only-allow pnpm"
|
||||
},
|
||||
"version": "2.2.20",
|
||||
"version": "2.2.23",
|
||||
"pnpm": {
|
||||
"onlyBuiltDependencies": [
|
||||
"@parcel/watcher",
|
||||
|
||||
3
proxy.ts
3
proxy.ts
@@ -9,8 +9,9 @@ export default createMiddleware({
|
||||
export const config = {
|
||||
// Match all pathnames except for
|
||||
// - /api (API routes)
|
||||
// - /stats (Analytics proxy)
|
||||
// - /_next (Next.js internals)
|
||||
// - /_static (inside /public)
|
||||
// - all root files inside /public (e.g. /favicon.ico)
|
||||
matcher: ['/((?!api|_next|assets|_static|_vercel|[\\w-]+\\.\\w+).*)']
|
||||
matcher: ['/((?!api|stats|_next|assets|_static|_vercel|[\\w-]+\\.\\w+).*)']
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user