signal-works/cheatingchelsea
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

I still want to embed the video player, I was just letting you know it d

Browse source
This commit is contained in:
Derek Slenk 2025-06-26 22:35:31 +00:00
parent 1c1e97c095
commit b6a14dcf01
1 changed files with 13 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/app/gallery/page.tsx
View file

@ -2,7 +2,6 @@
import type { Metadata } from 'next';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import Image from 'next/image';
import { ExternalLink } from 'lucide-react';
export const metadata: Metadata = {
@ -79,24 +78,22 @@ export default async function GalleryPage() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{videos.length > 0 ? videos.map((video) => (
<div key={video.id} className="bg-card rounded-lg shadow-sm border overflow-hidden flex flex-col">
<Link href={`https://www.youtube.com/watch?v=${video.id}`} target="_blank" rel="noopener noreferrer" className="block relative group">
<Image
src={`https://img.youtube.com/vi/${video.id}/hqdefault.jpg`}
alt={`Thumbnail for ${video.title}`}
width={480}
height={360}
className="w-full h-auto object-cover transition-transform duration-300 group-hover:scale-105"
/>
<div className="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<svg className="w-16 h-16 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
</div>
</Link>
<div className="relative w-full pt-[56.25%]"> {/* 16:9 Aspect Ratio */}
<iframe
className="absolute top-0 left-0 w-full h-full"
src={`https://www.youtube.com/embed/${video.id}`}
title={video.title}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
></iframe>
</div>
<div className="p-4 flex-grow">
<h2 className="text-lg font-semibold text-card-foreground">
<Link href={`https://www.youtube.com/watch?v=${video.id}`} target="_blank" rel="noopener noreferrer" className="hover:underline flex items-center gap-2">
{video.title} <ExternalLink className="w-4 h-4 text-muted-foreground" />
</Link>
{video.title}
</h2>
<a href={`https://www.youtube.com/watch?v=${video.id}`} target="_blank" rel="noopener noreferrer" className="text-sm text-primary hover:underline flex items-center gap-1 mt-2">
Watch on YouTube <ExternalLink className="w-4 h-4" />
</a>
</div>
</div>
)) : (