39 lines
2.1 KiB
JavaScript
39 lines
2.1 KiB
JavaScript
// src/components/NewsPanel.jsx
|
|
import React from 'react';
|
|
|
|
// เปลี่ยน videoStreamUrl เป็น youtubeVideoId
|
|
export default function NewsPanel({ title, content, youtubeVideoId, isActive }) {
|
|
const panelClasses = `
|
|
card w-80 shadow-2xl z-10 p-6
|
|
transition-all duration-500 ease-in-out transform
|
|
${isActive ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-full pointer-events-none'}
|
|
${isActive ? 'glass bg-base-200 text-base-content' : ''}
|
|
`;
|
|
|
|
return (
|
|
<div className={panelClasses}>
|
|
<h2 className="card-title text-xl font-bold mb-2 uppercase">{title}</h2>
|
|
<p className="text-sm mb-4">{content}</p>
|
|
|
|
{/* ส่วนสำหรับ YouTube Video Embed */}
|
|
{youtubeVideoId && ( // ตรวจสอบว่ามี youtubeVideoId ส่งมาหรือไม่
|
|
<div className="mt-4 aspect-video w-full"> {/* aspect-video ให้สัดส่วน 16:9 */}
|
|
<iframe
|
|
className="w-full h-full rounded-lg"
|
|
src={`https://www.youtube.com/embed/${youtubeVideoId}?autoplay=0&modestbranding=1&rel=0`}
|
|
title="YouTube video player"
|
|
frameBorder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
></iframe>
|
|
</div>
|
|
)}
|
|
{/* หากไม่มี youtubeVideoId และต้องการแสดง placeholder เดิม ให้เพิ่มเงื่อนไขนี้ */}
|
|
{!youtubeVideoId && ( // ถ้าไม่มี YouTube ID ก็แสดง placeholder เก่า
|
|
<div className="bg-base-300 h-24 flex items-center justify-center rounded-lg text-base-content text-sm border border-base-content/20">
|
|
[NO VIDEO STREAM AVAILABLE]
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |