sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update the video page to support German language and improve navigation

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-30 22:25:55 +00:00
parent 8b2eb2a6aa
commit f9c60b67da
1 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
client/src/pages/VideoPage.tsx
View File

@ -24,7 +24,7 @@ const formatDuration = (seconds: number): string => {
const formatDate = (date: Date | string): string => { const formatDate = (date: Date | string): string => {
const d = typeof date === 'string' ? new Date(date) : date; const d = typeof date === 'string' ? new Date(date) : date;
return d.toLocaleDateString('en-US', { return d.toLocaleDateString('de-DE', {
year: 'numeric', year: 'numeric',
month: 'long', month: 'long',
day: 'numeric' day: 'numeric'
@ -171,7 +171,7 @@ export default function VideoPage() {
try { try {
await navigator.clipboard.writeText(getShareUrl()); await navigator.clipboard.writeText(getShareUrl());
const notification = document.createElement('div'); 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'; 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); document.body.appendChild(notification);
setTimeout(() => { setTimeout(() => {
@ -187,7 +187,7 @@ export default function VideoPage() {
if (videoLoading) { if (videoLoading) {
return ( return (
<div className="min-h-screen bg-bunny-dark flex items-center justify-center"> <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> </div>
); );
} }
@ -195,7 +195,7 @@ export default function VideoPage() {
if (!currentVideo) { if (!currentVideo) {
return ( return (
<div className="min-h-screen bg-bunny-dark flex items-center justify-center"> <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> </div>
); );
} }
@ -222,7 +222,7 @@ export default function VideoPage() {
<div className="hidden md:flex items-center space-x-6"> <div className="hidden md:flex items-center space-x-6">
<nav className="flex space-x-6"> <nav className="flex space-x-6">
<Link href="/" className="text-bunny-light hover:text-bunny-blue transition-colors"> <Link href="/" className="text-bunny-light hover:text-bunny-blue transition-colors">
Home Startseite
</Link> </Link>
<Link href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors"> <Link href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors">
FOLX STADL FOLX STADL
@ -378,24 +378,24 @@ export default function VideoPage() {
<div className="flex-1"> <div className="flex-1">
{/* Video player */} {/* Video player */}
<div className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden mb-4"> <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 && ( {allVideos.length > 1 && (
<> <>
<Button <Button
onClick={() => navigateToVideo('prev')} 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" size="sm"
data-testid="button-prev-video" 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>
<Button <Button
onClick={() => navigateToVideo('next')} 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" size="sm"
data-testid="button-next-video" data-testid="button-next-video"
> >
<ChevronRight className="w-6 h-6" /> <ChevronRight className="w-5 h-5 md:w-6 md:h-6" />
</Button> </Button>
</> </>
)} )}
@ -431,7 +431,7 @@ export default function VideoPage() {
className="text-white hover:bg-gray-700" className="text-white hover:bg-gray-700"
> >
<Share2 className="w-4 h-4 mr-2" /> <Share2 className="w-4 h-4 mr-2" />
Share Teilen
</Button> </Button>
{showShareMenu && ( {showShareMenu && (
@ -458,7 +458,7 @@ export default function VideoPage() {
onClick={copyToClipboard} onClick={copyToClipboard}
className="w-full px-4 py-2 text-left text-white hover:bg-gray-700" className="w-full px-4 py-2 text-left text-white hover:bg-gray-700"
> >
Copy Link Link kopieren
</button> </button>
</div> </div>
)} )}
@ -466,7 +466,7 @@ export default function VideoPage() {
</div> </div>
<div className="flex flex-wrap gap-4 text-sm text-bunny-muted mb-4"> <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>{formatDuration(currentVideo.duration)}</span>
<span>{formatDate(currentVideo.createdAt)}</span> <span>{formatDate(currentVideo.createdAt)}</span>
</div> </div>
@ -479,7 +479,7 @@ export default function VideoPage() {
</div> </div>
) : ( ) : (
<div className="text-bunny-muted text-sm"> <div className="text-bunny-muted text-sm">
<p>Video description not available.</p> <p>Videobeschreibung nicht verfügbar.</p>
</div> </div>
)} )}
</div> </div>
@ -531,7 +531,7 @@ export default function VideoPage() {
{video.title} {video.title}
</h3> </h3>
<div className="text-xs text-bunny-muted"> <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> </div>
</div> </div>