From f9c60b67dae14fb9a37577808c8d06b322e0ceeb Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 22:25:55 +0000
Subject: [PATCH] Update the video page to support German language and improve
 navigation Add German language support to the video page, including UI text
 and date formatting. This commit also refines navigation arrow visibility and
 styling on the video player.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 051a65da-1176-4478-a61c-c662f2a15536
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/051a65da-1176-4478-a61c-c662f2a15536/9NQBiz8
---
 client/src/pages/VideoPage.tsx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 7b35c77..742d136 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -24,7 +24,7 @@ const formatDuration = (seconds: number): string => {
 
 const formatDate = (date: Date | string): string => {
   const d = typeof date === 'string' ? new Date(date) : date;
-  return d.toLocaleDateString('en-US', {
+  return d.toLocaleDateString('de-DE', {
     year: 'numeric',
     month: 'long',
     day: 'numeric'
@@ -171,7 +171,7 @@ export default function VideoPage() {
     try {
       await navigator.clipboard.writeText(getShareUrl());
       const notification = document.createElement('div');
-      notification.textContent = 'Link copied!';
+      notification.textContent = 'Link kopiert!';
       notification.className = 'fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg z-50 transition-opacity duration-300';
       document.body.appendChild(notification);
       setTimeout(() => {
@@ -187,7 +187,7 @@ export default function VideoPage() {
   if (videoLoading) {
     return (
       <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
-        <div className="text-white">Nalagam video...</div>
+        <div className="text-white">Video wird geladen...</div>
       </div>
     );
   }
@@ -195,7 +195,7 @@ export default function VideoPage() {
   if (!currentVideo) {
     return (
       <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
-        <div className="text-white">Video not found</div>
+        <div className="text-white">Video nicht gefunden</div>
       </div>
     );
   }
@@ -222,7 +222,7 @@ export default function VideoPage() {
               <div className="hidden md:flex items-center space-x-6">
                 <nav className="flex space-x-6">
                   <Link href="/" className="text-bunny-light hover:text-bunny-blue transition-colors">
-                    Home
+                    Startseite
                   </Link>
                   <Link href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors">
                     FOLX STADL
@@ -378,24 +378,24 @@ export default function VideoPage() {
           <div className="flex-1">
             {/* Video player */}
             <div className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden mb-4">
-              {/* Navigation arrows */}
+              {/* Navigation arrows - always visible on desktop, smaller on mobile */}
               {allVideos.length > 1 && (
                 <>
                   <Button
                     onClick={() => navigateToVideo('prev')}
-                    className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/60 hover:bg-black/80 text-white border-none p-2 rounded-full z-20"
+                    className="absolute left-2 md:left-4 top-1/2 transform -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white border-none p-2 rounded-full z-20 transition-all duration-200"
                     size="sm"
                     data-testid="button-prev-video"
                   >
-                    <ChevronLeft className="w-6 h-6" />
+                    <ChevronLeft className="w-5 h-5 md:w-6 md:h-6" />
                   </Button>
                   <Button
                     onClick={() => navigateToVideo('next')}
-                    className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/60 hover:bg-black/80 text-white border-none p-2 rounded-full z-20"
+                    className="absolute right-2 md:right-4 top-1/2 transform -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white border-none p-2 rounded-full z-20 transition-all duration-200"
                     size="sm"
                     data-testid="button-next-video"
                   >
-                    <ChevronRight className="w-6 h-6" />
+                    <ChevronRight className="w-5 h-5 md:w-6 md:h-6" />
                   </Button>
                 </>
               )}
@@ -431,7 +431,7 @@ export default function VideoPage() {
                     className="text-white hover:bg-gray-700"
                   >
                     <Share2 className="w-4 h-4 mr-2" />
-                    Share
+                    Teilen
                   </Button>
                   
                   {showShareMenu && (
@@ -458,7 +458,7 @@ export default function VideoPage() {
                         onClick={copyToClipboard}
                         className="w-full px-4 py-2 text-left text-white hover:bg-gray-700"
                       >
-                        Copy Link
+                        Link kopieren
                       </button>
                     </div>
                   )}
@@ -466,7 +466,7 @@ export default function VideoPage() {
               </div>
 
               <div className="flex flex-wrap gap-4 text-sm text-bunny-muted mb-4">
-                <span>{formatViews(currentVideo.views)} views</span>
+                <span>{formatViews(currentVideo.views)} Aufrufe</span>
                 <span>{formatDuration(currentVideo.duration)}</span>
                 <span>{formatDate(currentVideo.createdAt)}</span>
               </div>
@@ -479,7 +479,7 @@ export default function VideoPage() {
                 </div>
               ) : (
                 <div className="text-bunny-muted text-sm">
-                  <p>Video description not available.</p>
+                  <p>Videobeschreibung nicht verfügbar.</p>
                 </div>
               )}
             </div>
@@ -531,7 +531,7 @@ export default function VideoPage() {
                       {video.title}
                     </h3>
                     <div className="text-xs text-bunny-muted">
-                      <div>{formatViews(video.views)} views • {formatDate(video.createdAt)}</div>
+                      <div>{formatViews(video.views)} Aufrufe • {formatDate(video.createdAt)}</div>
                     </div>
                   </div>
                 </div>