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

Enlarge video thumbnails in sidebars to match YouTube's style

Browse Source 
Update `VideoPage.tsx` and `LivePage.tsx` to increase thumbnail dimensions and adjust related text styles for recommended videos in sidebars, improving visual consistency with YouTube's layout.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 401e2ec0-e00d-4f10-9d0e-60f3d479f9a5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 97217df8-1b92-46fd-bcfb-66d80a39e748
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/401e2ec0-e00d-4f10-9d0e-60f3d479f9a5/sfzzZxw
This commit is contained in:
sebastjanartic 2026-01-12 12:12:03 +00:00
parent bd01ca5e3c
commit bfcec08e41
2 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/pages/LivePage.tsx
View File

@ -484,7 +484,7 @@ export default function LivePage() {
<h2 className="text-lg font-semibold text-bunny-light mb-4">Empfohlene Videos</h2> <h2 className="text-lg font-semibold text-bunny-light mb-4">Empfohlene Videos</h2>
<div className="space-y-2"> <div className="space-y-3">
{videos.slice(0, 10).map((video: any) => ( {videos.slice(0, 10).map((video: any) => (
<div <div
key={video.id} key={video.id}
@ -492,9 +492,9 @@ export default function LivePage() {
const shortId = video.id.replace(/-/g, '').substring(0, 8); const shortId = video.id.replace(/-/g, '').substring(0, 8);
window.location.href = `/video/${shortId}`; window.location.href = `/video/${shortId}`;
}} }}
className="flex gap-3 p-2 bg-bunny-gray/30 hover:bg-bunny-gray/50 rounded-lg cursor-pointer transition-colors" className="flex gap-3 hover:bg-bunny-gray/30 rounded-xl cursor-pointer transition-colors p-1"
> >
<div className="relative w-24 h-16 bg-gray-700 rounded overflow-hidden flex-shrink-0"> <div className="relative w-[168px] h-[94px] bg-gray-700 rounded-xl overflow-hidden flex-shrink-0">
<img <img
src={video.thumbnailUrl} src={video.thumbnailUrl}
alt={video.title} alt={video.title}
@ -505,19 +505,19 @@ export default function LivePage() {
if (target.parentElement && !target.parentElement.querySelector('.thumbnail-placeholder')) { if (target.parentElement && !target.parentElement.querySelector('.thumbnail-placeholder')) {
target.parentElement.style.background = 'linear-gradient(135deg, #1f2937, #374151)'; target.parentElement.style.background = 'linear-gradient(135deg, #1f2937, #374151)';
const placeholder = document.createElement('div'); const placeholder = document.createElement('div');
placeholder.className = 'thumbnail-placeholder absolute inset-0 flex items-center justify-center text-white text-xs'; placeholder.className = 'thumbnail-placeholder absolute inset-0 flex items-center justify-center text-white text-2xl';
placeholder.innerHTML = '<div>🎬</div>'; placeholder.innerHTML = '<div>🎬</div>';
target.parentElement.appendChild(placeholder); target.parentElement.appendChild(placeholder);
} }
}} }}
/> />
<div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 py-0.5 rounded"> <div className="absolute bottom-1 right-1 bg-black/80 text-white text-xs font-medium px-1.5 py-0.5 rounded">
{video.duration ? Math.floor(video.duration / 60) + ':' + String(video.duration % 60).padStart(2, '0') : '0:00'} {video.duration ? Math.floor(video.duration / 60) + ':' + String(video.duration % 60).padStart(2, '0') : '0:00'}
</div> </div>
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0 py-0.5">
<h3 className="text-sm font-medium text-bunny-light mb-1 line-clamp-2" <h3 className="text-sm font-medium text-bunny-light mb-1 leading-tight"
style={{ style={{
display: '-webkit-box', display: '-webkit-box',
WebkitLineClamp: 2, WebkitLineClamp: 2,
@ -526,8 +526,9 @@ export default function LivePage() {
}}> }}>
{video.title} {video.title}
</h3> </h3>
<div className="text-xs text-bunny-muted"> <div className="text-xs text-bunny-muted mt-1">
<div>{video.views ? (video.views >= 1000 ? Math.floor(video.views / 1000) + 'K' : video.views) : '0'} views • {video.createdAt ? new Date(video.createdAt).toLocaleDateString('de-DE') : 'Unknown date'}</div> <div>{video.views ? (video.views >= 1000 ? Math.floor(video.views / 1000) + 'K' : video.views) : '0'} Aufrufe</div>
<div>{video.createdAt ? new Date(video.createdAt).toLocaleDateString('de-DE') : 'Unbekannt'}</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -782,7 +782,7 @@ export default function VideoPage() {
<h2 className="text-lg font-semibold text-bunny-light mb-4">Empfohlene Videos</h2> <h2 className="text-lg font-semibold text-bunny-light mb-4">Empfohlene Videos</h2>
<div className="space-y-2"> <div className="space-y-3">
{recommendedVideos.slice(0, 10).map((video) => ( {recommendedVideos.slice(0, 10).map((video) => (
<div <div
key={video.id} key={video.id}
@ -790,9 +790,9 @@ export default function VideoPage() {
const shortId = video.id.replace(/-/g, '').substring(0, 8); const shortId = video.id.replace(/-/g, '').substring(0, 8);
setLocation(`/video/${shortId}`); setLocation(`/video/${shortId}`);
}} }}
className="flex gap-3 p-2 bg-bunny-gray/30 hover:bg-bunny-gray/50 rounded-lg cursor-pointer transition-colors" className="flex gap-3 hover:bg-bunny-gray/30 rounded-xl cursor-pointer transition-colors p-1"
> >
<div className="relative w-24 h-16 bg-gray-700 rounded overflow-hidden flex-shrink-0"> <div className="relative w-[168px] h-[94px] bg-gray-700 rounded-xl overflow-hidden flex-shrink-0">
<img <img
src={video.thumbnailUrl} src={video.thumbnailUrl}
alt={video.title} alt={video.title}
@ -805,19 +805,19 @@ export default function VideoPage() {
if (target.parentElement && !target.parentElement.querySelector('.thumbnail-placeholder')) { if (target.parentElement && !target.parentElement.querySelector('.thumbnail-placeholder')) {
target.parentElement.style.background = 'linear-gradient(135deg, #1f2937, #374151)'; target.parentElement.style.background = 'linear-gradient(135deg, #1f2937, #374151)';
const placeholder = document.createElement('div'); const placeholder = document.createElement('div');
placeholder.className = 'thumbnail-placeholder absolute inset-0 flex items-center justify-center text-white text-xs'; placeholder.className = 'thumbnail-placeholder absolute inset-0 flex items-center justify-center text-white text-2xl';
placeholder.innerHTML = '<div>🎬</div>'; placeholder.innerHTML = '<div>🎬</div>';
target.parentElement.appendChild(placeholder); target.parentElement.appendChild(placeholder);
} }
}} }}
/> />
<div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 py-0.5 rounded"> <div className="absolute bottom-1 right-1 bg-black/80 text-white text-xs font-medium px-1.5 py-0.5 rounded">
{formatDuration(video.duration)} {formatDuration(video.duration)}
</div> </div>
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0 py-0.5">
<h3 className="text-sm font-medium text-bunny-light mb-1 line-clamp-2" <h3 className="text-sm font-medium text-bunny-light mb-1 leading-tight"
style={{ style={{
display: '-webkit-box', display: '-webkit-box',
WebkitLineClamp: 2, WebkitLineClamp: 2,
@ -826,8 +826,9 @@ export default function VideoPage() {
}}> }}>
{video.title} {video.title}
</h3> </h3>
<div className="text-xs text-bunny-muted"> <div className="text-xs text-bunny-muted mt-1">
<div>{formatViews(video.views)} views • {formatDate(video.createdAt)}</div> <div>{formatViews(video.views)} Aufrufe</div>
<div>{formatDate(video.createdAt)}</div>
</div> </div>
</div> </div>
</div> </div>