peter/tvone
1
0
Fork 0
mirror of https://github.com/PeterMaquiran/tvone.git synced 2026-04-18 15:27:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

add video player

Browse Source
This commit is contained in:
Peter Maquiran
2026-04-05 14:25:03 +01:00
parent 25a82c5472
commit 6bce9ada4f
3 changed files with 100 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/tvone-content.tsx
+7 -7
View File
@@ -144,7 +144,7 @@ export function TvoneDestaques() {
className="group overflow-hidden bg-white transition " className="group overflow-hidden bg-white transition "
> >
<Link href="#" className="block"> <Link href="#" className="block">
<div className="relative aspect-[16/9] w-full overflow-hidden"> <div className="relative aspect-[16/9] w-full overflow-hidden rounded-xl">
<Image <Image
src={item.img} src={item.img}
alt="" alt=""
@@ -168,19 +168,19 @@ export function TvoneDestaques() {
export function TvoneMainColumns() { export function TvoneMainColumns() {
return ( return (
<div className="mx-auto grid w-full max-w-[1200px] gap-10 px-4 pb-12 lg:grid-cols-[1fr_340px]"> <div className="mx-auto grid w-full max-w-[1200px] gap-10 px-4 pb-10 lg:grid-cols-[1fr_340px]">
<section> <section>
<h2 className="mb-7 text-2xl font-bold tracking-tight text-neutral-900 md:text-2xl">Mais Recentes</h2> <h2 className="mb-7 text-2xl font-bold tracking-tight text-neutral-900 md:text-2xl">Vídeos Recentes</h2>
<ul className="flex flex-col gap-6"> <ul className="flex flex-col gap-6">
{recentes.map((item) => ( {recentes.map((item) => (
<li key={item.title}> <li key={item.title} className="rounded-xl">
<Link href="#" className="group flex items-start gap-4 p-1 transition"> <Link href="#" className="group flex items-start gap-4 p-1 transition rounded-xl">
<div className="relative w-40 md:w-60 shrink-0 aspect-[16/9] bg-red-500"> <div className="relative w-40 md:w-60 aspect-[16/9] rounded-xl">
<Image <Image
src={item.img} src={item.img}
alt="" alt=""
fill fill
className="object-cover" className="object-cover rounded-xl"
sizes="(max-width: 1200px) 100vw, 1200px" sizes="(max-width: 1200px) 100vw, 1200px"
/> />
</div> </div>
app/components/tvone-hero.tsx
+3 -3
View File
@@ -37,13 +37,13 @@ export function TvoneHero() {
return ( return (
<section className="mx-auto w-full max-w-[1200px] px-4 py-6"> <section className="mx-auto w-full max-w-[1200px] px-4 py-6">
<div className="relative overflow-hidden shadow-[0_12px_40px_rgba(0,0,0,0.12)]"> <div className="relative overflow-hidden shadow-[0_12px_40px_rgba(0,0,0,0.12)] rounded-[24px] ">
<div className="relative aspect-[21/9] min-h-[280px] w-full md:aspect-[2.4/1]"> <div className="relative aspect-[21/9] min-h-[280px] w-full md:aspect-[2.4/1] rounded-xl">
<Image <Image
src={slide.image} src={slide.image}
alt="" alt=""
fill fill
className="object-cover" className="object-cover rounded-xl"
sizes="(max-width: 1200px) 100vw, 1200px" sizes="(max-width: 1200px) 100vw, 1200px"
priority priority
/> />
app/components/video-galary.tsx
+89 -50
View File
@@ -9,7 +9,8 @@ const recentes = [
catBg: "bg-blue-50 text-blue-600", catBg: "bg-blue-50 text-blue-600",
byline: "Por Redação", byline: "Por Redação",
date: "04 Mar 2026", date: "04 Mar 2026",
img: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=800&q=80", // Premium Studio Image
img: "https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?q=80&w=800&auto=format&fit=crop",
}, },
{ {
title: "Inflação desce pelo terceiro mês consecutivo em Angola, segundo dados preliminares.", title: "Inflação desce pelo terceiro mês consecutivo em Angola, segundo dados preliminares.",
@@ -18,7 +19,8 @@ const recentes = [
catBg: "bg-green-50 text-green-600", catBg: "bg-green-50 text-green-600",
byline: "Por Economia Viva", byline: "Por Economia Viva",
date: "03 Mar 2026", date: "03 Mar 2026",
img: "https://images.unsplash.com/photo-1611974715853-2b8ef9a3d136?w=800&q=80", // Modern Finance/City Image
img: "https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?q=80&w=800&auto=format&fit=crop",
}, },
{ {
title: "Museu de Luanda inaugura exposição com obras inéditas de artistas locais.", title: "Museu de Luanda inaugura exposição com obras inéditas de artistas locais.",
@@ -27,10 +29,40 @@ const recentes = [
catBg: "bg-purple-50 text-purple-600", catBg: "bg-purple-50 text-purple-600",
byline: "Por Cultura Mais", byline: "Por Cultura Mais",
date: "02 Mar 2026", date: "02 Mar 2026",
img: "https://images.unsplash.com/photo-1518998053502-53cc8ef19a7d?w=800&q=80", // Elegant Art Gallery Image
img: "https://images.unsplash.com/photo-1507676184212-d03ab07a01bf?q=80&w=800&auto=format&fit=crop",
}, },
{
title: "Diddy na XB Label? Gerilson Israel responde após anúncio de nova música em conjunto.",
excerpt: "O artista angolano esclareceu os rumores sobre a sua possível entrada para a editora internacional...",
cat: "Música",
catBg: "bg-blue-50 text-blue-600",
byline: "Por Redação",
date: "04 Mar 2026",
// Premium Studio Image
img: "https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?q=80&w=800&auto=format&fit=crop",
},
{
title: "Inflação desce pelo terceiro mês consecutivo em Angola, segundo dados preliminares.",
excerpt: "Os preços dos bens de consumo registaram uma ligeira queda, trazendo alívio para as famílias...",
cat: "Economia",
catBg: "bg-green-50 text-green-600",
byline: "Por Economia Viva",
date: "03 Mar 2026",
// Modern Finance/City Image
img: "https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?q=80&w=800&auto=format&fit=crop",
},
{
title: "Inflação desce pelo terceiro mês consecutivo em Angola, segundo dados preliminares.",
excerpt: "Os preços dos bens de consumo registaram uma ligeira queda, trazendo alívio para as famílias...",
cat: "Economia",
catBg: "bg-green-50 text-green-600",
byline: "Por Economia Viva",
date: "03 Mar 2026",
// Modern Finance/City Image
img: "https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?q=80&w=800&auto=format&fit=crop",
},
]; ];
const aSeguir = [ const aSeguir = [
{ {
title: "Mercado imobiliário: especialistas explicam tendências para 2026.", title: "Mercado imobiliário: especialistas explicam tendências para 2026.",
@@ -46,57 +78,64 @@ const recentes = [
export function TvoneMainColumns1() { export function TvoneMainColumns1() {
return ( return (
<div className="mx-auto flex w-full max-w-[1200px] flex-col gap-10 px-4 pb-12"> <div className="mx-auto grid w-full max-w-[1200px] gap-10 px-4 pb-12 ">
<section>
<h2 className="mb-7 text-2xl font-bold tracking-tight text-neutral-900 md:text-2xl">Vídeos Mais Recentes</h2>
<div className="mx-auto flex w-full max-w-[1200px] flex-col gap-10 px-4">
{/* SECTION: PREMIUM VIDEO GALLERY (Euronews + iOS Style) */}
<section className="grid w-full gap-6 lg:grid-cols-[1fr_340px]"> {/* SECTION: PREMIUM VIDEO GALLERY (Euronews + iOS Style) */}
{/* Main Player Area */} <section className="grid w-full gap-6 lg:grid-cols-[1fr_340px]">
<div className="group relative aspect-video overflow-hidden rounded-[24px] bg-black shadow-2xl"> {/* Main Player Area */}
<Image <div className="group relative aspect-video overflow-hidden rounded-[24px] bg-black shadow-2xl">
src="/path-to-your-main-video-thumb.jpg" <Image
alt="Main Video" src="https://images.unsplash.com/photo-1504711434969-e33886168f5c?q=80&w=1200&auto=format&fit=crop"
fill alt="Main Video"
className="object-cover opacity-90 transition-transform duration-700 group-hover:scale-105" fill
/> className="object-cover opacity-90 transition-transform duration-700 group-hover:scale-105"
{/* iOS Play Button Overlay */} />
<div className="absolute inset-0 flex items-center justify-center"> {/* iOS Play Button Overlay */}
<div className="flex h-20 w-20 items-center justify-center rounded-full border border-white/30 bg-white/20 backdrop-blur-md transition-transform group-hover:scale-110"> <div className="absolute inset-0 flex items-center justify-center">
<div className="ml-1 h-0 w-0 border-y-[12px] border-l-[20px] border-y-transparent border-l-white" /> <div className="flex h-20 w-20 items-center justify-center rounded-full border border-white/30 bg-white/20 backdrop-blur-md transition-transform group-hover:scale-110">
<div className="ml-1 h-0 w-0 border-y-[12px] border-l-[20px] border-y-transparent border-l-white" />
</div>
</div>
{/* Video Info Overlay */}
<div className="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/80 p-8">
<span className="rounded bg-blue-600 px-2 py-1 text-[10px] font-bold uppercase text-white">Música</span>
<h2 className="mt-3 text-2xl font-bold text-white md:text-3xl">
Diddy na XB Label? Gerilson Israel responde após anúncio...
</h2>
</div>
</div> </div>
</div>
{/* Video Info Overlay */} {/* Right Playlist: "Vídeos a Seguir" */}
<div className="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/80 p-8"> <aside className="flex flex-col rounded-[24px] border border-neutral-200 bg-[#f5f5f7]/50 p-4 backdrop-blur-sm">
<span className="rounded bg-blue-600 px-2 py-1 text-[10px] font-bold uppercase text-white">Música</span> <h3 className="mb-4 px-2 text-xs font-bold uppercase tracking-widest text-neutral-500">Vídeos a Seguir</h3>
<h2 className="mt-3 text-2xl font-bold text-white md:text-3xl"> <div className="flex flex-col gap-3 overflow-y-auto lg:max-h-[380px]">
Diddy na XB Label? Gerilson Israel responde após anúncio... {recentes.slice(0, 6).map((item) => (
</h2> <button key={item.title} className="group flex gap-3 rounded-xl p-2 transition hover:bg-white hover:shadow-sm">
</div> <div className="relative aspect-video w-24 shrink-0 overflow-hidden rounded-lg bg-neutral-200">
<Image src={item.img} alt="" fill className="object-cover" />
<div className="absolute bottom-1 right-1 rounded bg-black/60 px-1 text-[9px] text-white">3:15</div>
</div>
<div className="text-left">
<span className="text-[9px] font-bold uppercase text-blue-600">{item.cat}</span>
<h4 className="line-clamp-2 text-xs font-bold leading-tight text-neutral-900 group-hover:text-blue-600">
{item.title}
</h4>
</div>
</button>
))}
</div>
</aside>
</section>
</div> </div>
{/* Right Playlist: "Vídeos a Seguir" */}
<aside className="flex flex-col rounded-[24px] border border-neutral-200 bg-[#f5f5f7]/50 p-4 backdrop-blur-sm">
<h3 className="mb-4 px-2 text-xs font-bold uppercase tracking-widest text-neutral-500">Vídeos a Seguir</h3>
<div className="flex flex-col gap-3 overflow-y-auto lg:max-h-[380px]">
{recentes.slice(0, 4).map((item) => (
<button key={item.title} className="group flex gap-3 rounded-xl p-2 transition hover:bg-white hover:shadow-sm">
<div className="relative aspect-video w-24 shrink-0 overflow-hidden rounded-lg bg-neutral-200">
<Image src={item.img} alt="" fill className="object-cover" />
<div className="absolute bottom-1 right-1 rounded bg-black/60 px-1 text-[9px] text-white">3:15</div>
</div>
<div className="text-left">
<span className="text-[9px] font-bold uppercase text-blue-600">{item.cat}</span>
<h4 className="line-clamp-2 text-xs font-bold leading-tight text-neutral-900 group-hover:text-blue-600">
{item.title}
</h4>
</div>
</button>
))}
</div>
</aside>
</section> </section>
</div> </div>
); );
} }