Updates to navigation keys

src/app/(infoscreen)/@sponsors/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Slide } from '@/components/Carousel';
+import I18n from '@/components/I18n/I18n';
 import { getSponsorData, type SponsorData } from '@/server/sponsors';
 import { useEffect, useState } from 'react';
 
@@ -18,7 +19,7 @@ const Sponsors = () => {
 	return (
 		<Slide className="bg-white">
 			<h1 className="text-center text-[3em] text-black">
-				Yhteistyökumppanit
+				<I18n>Yhteistyökumppanit // Sponsors</I18n>
 			</h1>
 			<div className="max-w-m relative flex flex-wrap items-center justify-evenly">
 				{sponsors?.filter((sponsor) => sponsor.logoUrl).map((sponsor) => (

src/app/LanguageInterval.tsx

@@ -1,23 +1,24 @@
 'use client';
 
-import { langAtom } from '@/lib/lang';
+import { doLangCycleAtom, langAtom } from '@/lib/lang';
 import { useAtom } from 'jotai';
 import { useEffect } from 'react';
 
 export const LanguageInterval = () => {
 	const [lang, setlang] = useAtom(langAtom);
+	const [doLangCycle] = useAtom(doLangCycleAtom);
 
 	useEffect(() => {
 		// Interval for switching language in event titles etc.
 		const langInterval = setInterval(
-			() => setlang(((lang + 1) % 2) as 0 | 1),
+			() => { if (doLangCycle) setlang(lang === 0 ? 1 : 0) },
 			10 * 1000
 		);
 
 		return () => {
 			clearInterval(langInterval);
 		};
-	}, [lang, setlang]);
+	}, [doLangCycle, lang, setlang]);
 
 	return null;
 };

src/app/layout.tsx

@@ -1,3 +1,4 @@
+import { LanguageCycle } from '@/components/LanguageCycle';
 import { getServerVersion } from '@/server/version';
 import { Provider } from 'jotai';
 import type { Metadata } from 'next';
@@ -32,6 +33,7 @@ export default async function RootLayout({
 				<Provider>
 					{children}
 					<LanguageInterval />
+					<LanguageCycle />
 					<RefetchIntervals />
 					<Update initialVersion={initialVersion} />
 				</Provider>

src/components/Carousel.tsx

@@ -59,13 +59,20 @@ export const Carousel = ({
 	// Register keyboard event listener to document on mount
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
-			if (e.key === 'ArrowRight') {
-				emblaApi?.scrollNext();
-				e.preventDefault();
-			}
-			if (e.key === 'ArrowLeft') {
-				emblaApi?.scrollPrev();
-				e.preventDefault();
+			const slideNumber = parseInt(e.key);
+			const slideCount = emblaApi?.slideNodes().length || 0;
+			if (!isNaN(slideNumber) && slideNumber >= 0 && slideNumber < slideCount)
+				emblaApi?.scrollTo(slideNumber, true)
+
+			switch (e.key) {
+				case 'ArrowRight':
+					emblaApi?.scrollNext();
+					e.preventDefault();
+					break;
+				case 'ArrowLeft':
+					emblaApi?.scrollPrev();
+					e.preventDefault();
+					break;
 			}
 		};
 
@@ -87,7 +94,7 @@ export const Carousel = ({
 				className={`${autoplay ? 'invisible' : 'visible'} absolute bottom-8 right-8 z-50 rounded bg-white/0 p-2 hover:bg-white/30`}
 				onClick={resumeAutoplay}
 			>
-				<Play width={16} height={16} color="white" />
+				<Play width={16} height={16} color="#003278" />
 			</div>
 		</>
 	);

src/components/LanguageCycle.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { doLangCycleAtom, langAtom } from '@/lib/lang';
+import { useAtom } from 'jotai';
+import { useEffect, useRef } from 'react';
+
+export const LanguageCycle = () => {
+    // For toggling language with 'l'
+    const [lang, setLang] = useAtom(langAtom);
+    // For disabling language cycling briefly after language has been manually toggled
+    const [, setDoLangCycle] = useAtom(doLangCycleAtom);
+
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    // Register keyboard event listener to document on mount
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'l') {
+                setLang(lang === 0 ? 1 : 0);
+                setDoLangCycle(false);
+                e.preventDefault();
+
+                if (timeoutRef.current)
+                    clearTimeout(timeoutRef.current);
+
+                timeoutRef.current = setTimeout(
+                    () => setDoLangCycle(true),
+                    30 * 1000
+                );
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        }
+    }, [lang, setLang, setDoLangCycle]);
+
+    return null;
+};

src/lib/lang.ts

@@ -5,3 +5,8 @@ import { atom, useAtomValue } from 'jotai';
 export const langAtom = atom<0 | 1>(0);
 
 export const useLang = () => useAtomValue(langAtom);
+
+//When true language isn't cycled automatically
+export const doLangCycleAtom = atom<boolean>(true);
+
+export const useLangCycle = () => useAtomValue(doLangCycleAtom);