From 37cbbeb586559c3103f5f430b4b699284ef9960e Mon Sep 17 00:00:00 2001 From: meetoza30 Date: Tue, 7 Oct 2025 00:10:12 +0530 Subject: [PATCH] broadcasts page design updated --- src/pages/broadcasts/details.css | 513 +++++++++++++++- src/pages/broadcasts/details.tsx | 133 +++-- src/pages/broadcasts/index.css | 982 ++++++++++++++++++------------- src/pages/broadcasts/index.tsx | 405 +++++++------ 4 files changed, 1350 insertions(+), 683 deletions(-) diff --git a/src/pages/broadcasts/details.css b/src/pages/broadcasts/details.css index 50a9c790..fd0aa105 100644 --- a/src/pages/broadcasts/details.css +++ b/src/pages/broadcasts/details.css @@ -1,32 +1,507 @@ -/* Add custom styles for the details page pagination */ -.video-container .pagination { - margin-top: 30px; +/* Video Details Page Styles - Matching Updated Theme */ + +.video-details-page { + font-family: 'Inter', sans-serif; + background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 50%, #e8ebff 100%); + min-height: 100vh; + padding: 80px 20px 60px; + position: relative; + overflow-x: hidden; +} + +[data-theme='dark'] .video-details-page { + background: linear-gradient(135deg, #1b1b1d 0%, #121212 50%, #1a202c 100%); +} + +/* Floating Particles */ +.floating-particles { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; + z-index: 0; +} + +.particle { + position: absolute; + border-radius: 50%; + opacity: 0.4; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} + +.particle-1 { + width: 8px; + height: 8px; + background: linear-gradient(45deg, #6366f1, #8b5cf6); + top: 20%; + left: 10%; + animation: particleFloat1 8s infinite; +} + +.particle-2 { + width: 12px; + height: 12px; + background: linear-gradient(45deg, #a855f7, #ec4899); + top: 60%; + right: 15%; + animation: particleFloat2 10s infinite; +} + +.particle-3 { + width: 10px; + height: 10px; + background: linear-gradient(45deg, #ec4899, #f59e0b); + bottom: 20%; + left: 20%; + animation: particleFloat3 12s infinite; +} + +@keyframes particleFloat1 { + 0%, 100% { transform: translate(0, 0); } + 50% { transform: translate(30px, -30px); } +} + +@keyframes particleFloat2 { + 0%, 100% { transform: translate(0, 0); } + 50% { transform: translate(-40px, 40px); } +} + +@keyframes particleFloat3 { + 0%, 100% { transform: translate(0, 0); } + 50% { transform: translate(25px, -25px); } +} + +/* Container */ +.video-details-container { + max-width: 1200px; + margin: 0 auto; + position: relative; + z-index: 1; + animation: contentSlideUp 0.8s ease-out; +} + +@keyframes contentSlideUp { + 0% { + opacity: 0; + transform: translateY(30px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* Back Button Top */ +.back-button-top { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 12px 24px; + background: rgba(255, 255, 255, 0.95); + color: #6366f1; + border: 1px solid rgba(99, 102, 241, 0.2); + border-radius: 12px; + font-weight: 600; + font-size: 14px; + cursor: pointer; + transition: all 0.3s ease; + margin-bottom: 32px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + backdrop-filter: blur(10px); } -.video-container .pagination button { +[data-theme='dark'] .back-button-top { + background: rgba(36, 37, 38, 0.95); + color: #a78bfa; + border: 1px solid rgba(167, 139, 250, 0.2); +} + +.back-button-top:hover { + transform: translateX(-4px); + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2); + background: rgba(255, 255, 255, 1); +} + +[data-theme='dark'] .back-button-top:hover { + background: rgba(36, 37, 38, 1); +} + +.button-arrow { + display: inline-flex; + align-items: center; + transition: transform 0.2s ease; +} + +.back-button-top:hover .button-arrow { + transform: translateX(-3px); +} + +/* Video Player Section */ +.video-player-section { + background: white; + border-radius: 24px; + padding: 24px; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.08), + 0 2px 8px rgba(0, 0, 0, 0.04); + margin-bottom: 32px; + border: 1px solid rgba(226, 232, 240, 0.8); + animation: cardSlideIn 0.6s ease-out 0.2s both; +} + +[data-theme='dark'] .video-player-section { + background: #242526; + border: 1px solid rgba(74, 85, 104, 0.3); + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.4), + 0 2px 8px rgba(0, 0, 0, 0.3); +} + +@keyframes cardSlideIn { + 0% { + opacity: 0; + transform: translateY(20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.video-wrapper { + position: relative; + padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ + height: 0; + overflow: hidden; + border-radius: 16px; + background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); +} + +[data-theme='dark'] .video-wrapper { + background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); +} + +.video-iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 16px; +} + +/* Video Info Section */ +.video-info-section { + background: white; + border-radius: 24px; + padding: 40px; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.08), + 0 2px 8px rgba(0, 0, 0, 0.04); + border: 1px solid rgba(226, 232, 240, 0.8); + animation: cardSlideIn 0.6s ease-out 0.4s both; +} + +[data-theme='dark'] .video-info-section { + background: #242526; + border: 1px solid rgba(74, 85, 104, 0.3); + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.4), + 0 2px 8px rgba(0, 0, 0, 0.3); +} + +.video-type-badge { + display: inline-block; + background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%); + color: #6366f1; padding: 10px 20px; - margin: 0 10px; - background: linear-gradient(to right, #007bff, #0056b3); - color: white !important; - border: none; + border-radius: 25px; + font-size: 13px; + font-weight: 700; + margin-bottom: 24px; + border: 1px solid rgba(99, 102, 241, 0.2); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +[data-theme='dark'] .video-type-badge { + background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(168, 85, 247, 0.1) 100%); + color: #a78bfa; + border: 1px solid rgba(167, 139, 250, 0.2); +} + +.video-title { + font-size: 36px; + font-weight: 800; + color: #1e293b; + margin: 0 0 24px 0; + line-height: 1.2; + letter-spacing: -0.02em; +} + +[data-theme='dark'] .video-title { + color: #f1f5f9; +} + +.loading-shimmer { + display: inline-block; + background: linear-gradient( + 90deg, + rgba(99, 102, 241, 0.1) 0%, + rgba(99, 102, 241, 0.3) 50%, + rgba(99, 102, 241, 0.1) 100% + ); + background-size: 200% 100%; + animation: shimmer 1.5s infinite; border-radius: 8px; + padding: 8px 16px; +} + +@keyframes shimmer { + 0% { background-position: -200% 0; } + 100% { background-position: 200% 0; } +} + +.video-meta-info { + display: flex; + gap: 24px; + margin-bottom: 32px; + padding-bottom: 24px; + border-bottom: 1px solid rgba(226, 232, 240, 0.8); +} + +[data-theme='dark'] .video-meta-info { + border-bottom: 1px solid rgba(74, 85, 104, 0.3); +} + +.meta-item { + display: flex; + align-items: center; + gap: 8px; +} + +.meta-icon { + font-size: 20px; +} + +.meta-text { + font-size: 14px; + font-weight: 600; + color: #64748b; +} + +[data-theme='dark'] .meta-text { + color: #94a3b8; +} + +/* Video Description */ +.video-description { + margin-bottom: 32px; +} + +.description-title { + font-size: 20px; + font-weight: 700; + color: #1e293b; + margin: 0 0 16px 0; +} + +[data-theme='dark'] .description-title { + color: #f1f5f9; +} + +.description-text { + font-size: 16px; + color: #64748b; + line-height: 1.7; + margin: 0 0 16px 0; +} + +[data-theme='dark'] .description-text { + color: #94a3b8; +} + +.description-tip { + font-size: 14px; + color: #6366f1; + background: rgba(99, 102, 241, 0.05); + padding: 16px; + border-radius: 12px; + border-left: 4px solid #6366f1; + margin: 0; +} + +[data-theme='dark'] .description-tip { + color: #a78bfa; + background: rgba(167, 139, 250, 0.1); + border-left-color: #a78bfa; +} + +/* Action Buttons */ +.action-buttons { + display: flex; + gap: 16px; + flex-wrap: wrap; +} + +.action-button { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 14px 28px; + border-radius: 12px; + font-weight: 600; + font-size: 15px; + cursor: pointer; + transition: all 0.3s ease; + border: none; + text-decoration: none; +} + +.action-button.primary { + background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); + color: white; + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); +} + +.action-button.primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4); +} + +.action-button.primary:hover .button-arrow { + transform: translateX(3px); +} + +.action-button.secondary { + background: rgba(255, 255, 255, 0.95); + color: #6366f1; + border: 1px solid rgba(99, 102, 241, 0.2); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); +} + +[data-theme='dark'] .action-button.secondary { + background: rgba(36, 37, 38, 0.95); + color: #a78bfa; + border: 1px solid rgba(167, 139, 250, 0.2); +} + +.action-button.secondary:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2); + background: rgba(255, 255, 255, 1); +} + +[data-theme='dark'] .action-button.secondary:hover { + background: rgba(36, 37, 38, 1); +} + +.action-button.secondary:hover .button-arrow { + transform: translateX(-3px); +} + +/* Error Container */ +.error-container { + text-align: center; + padding: 80px 20px; + max-width: 600px; + margin: 0 auto; +} + +.error-icon { + font-size: 80px; + margin-bottom: 24px; + opacity: 0.6; +} + +.error-title { + font-size: 48px; + font-weight: 800; + color: #1e293b; + margin: 0 0 16px 0; +} + +[data-theme='dark'] .error-title { + color: #f1f5f9; +} + +.error-message { + font-size: 18px; + color: #64748b; + margin: 0 0 32px 0; +} + +[data-theme='dark'] .error-message { + color: #94a3b8; +} + +.back-button { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 14px 28px; + background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); + color: white; + border: none; + border-radius: 12px; font-weight: 600; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + font-size: 15px; + cursor: pointer; transition: all 0.3s ease; + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); } -.video-container .pagination button:hover { +.back-button:hover { transform: translateY(-2px); - box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); - background: linear-gradient(to right, #0056b3, #003d80); + box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4); } -[data-theme='dark'] .video-container .pagination button { - background: linear-gradient(to right, #3b82f6, #2563eb); - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); +.back-button:hover .button-arrow { + transform: translateX(-3px); } -[data-theme='dark'] .video-container .pagination button:hover { - background: linear-gradient(to right, #2563eb, #1d4ed8); - box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25); -} \ No newline at end of file +/* Responsive Design */ +@media (max-width: 768px) { + .video-details-page { + padding: 60px 16px 40px; + } + + .video-info-section { + padding: 28px; + } + + .video-title { + font-size: 28px; + } + + .action-buttons { + flex-direction: column; + } + + .action-button { + width: 100%; + justify-content: center; + } + + .error-title { + font-size: 36px; + } +} + +@media (max-width: 480px) { + .video-player-section { + padding: 16px; + } + + .video-title { + font-size: 24px; + } + + .description-title { + font-size: 18px; + } +} diff --git a/src/pages/broadcasts/details.tsx b/src/pages/broadcasts/details.tsx index 32d46e44..c73c3de9 100644 --- a/src/pages/broadcasts/details.tsx +++ b/src/pages/broadcasts/details.tsx @@ -2,26 +2,22 @@ import React, { useState, useEffect } from 'react'; import Layout from '@theme/Layout'; import type { ReactElement } from 'react'; import { useLocation, useHistory } from '@docusaurus/router'; -import './video.css'; -import './index.css'; import './details.css'; interface VideoData { id: string; youtubeUrl: string; - type: 'video' | 'shorts'; + type: 'video' | 'live' | 'other'; } interface LocationState { video: VideoData; } -// Function to extract YouTube video ID from URL const getYoutubeVideoId = (url: string): string => { let videoId = ''; const normalMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\s]+)/); const shortsMatch = url.match(/youtube\.com\/shorts\/([^&\s]+)/); - if (normalMatch) { videoId = normalMatch[1]; } else if (shortsMatch) { @@ -35,100 +31,107 @@ export default function VideoDetails(): ReactElement { const history = useHistory(); const state = location.state as LocationState; const video = state?.video; - const [title, setTitle] = useState('Loading...'); + const [title, setTitle] = useState('Loading...'); + const [isLoading, setIsLoading] = useState(true); useEffect(() => { const fetchVideoTitle = async () => { if (!video?.youtubeUrl) return; - try { - const response = await fetch(`https://www.youtube.com/oembed?url=${encodeURIComponent(video.youtubeUrl)}&format=json`); + const response = await fetch( + `https://www.youtube.com/oembed?url=${encodeURIComponent(video.youtubeUrl)}&format=json` + ); const data = await response.json(); setTitle(data.title); } catch (error) { setTitle('Video Title Unavailable'); console.error('Error fetching video title:', error); + } finally { + setIsLoading(false); } }; - fetchVideoTitle(); }, [video?.youtubeUrl]); - // Random descriptive text about videos const descriptions = [ - "Watch engaging content that inspires and educates.", - "Experience the power of visual storytelling.", - "Join us on a journey of learning through video.", - "Explore new concepts through dynamic video content.", - "Get inspired by expert insights and demonstrations.", - "Discover trending topics and timely tutorials.", - "Learn from the best in the field.", - "Stay updated with the latest trends and techniques.", - "Enhance your skills through visual learning.", + 'Watch engaging content that inspires and educates.', + 'Experience the power of visual storytelling.', + 'Join us on a journey of learning through video.', + 'Explore new concepts through dynamic video content.', + 'Get inspired by expert insights and demonstrations.', + 'Discover trending topics and timely tutorials.', + 'Learn from the best in the field.', + 'Stay updated with the latest trends and techniques.', + 'Enhance your skills through visual learning.', ]; - // Get a random description const randomDescription = descriptions[Math.floor(Math.random() * descriptions.length)]; + const getTypeLabel = () => { + switch (video?.type) { + case 'live': + return '🔴 Live Stream'; + case 'other': + return '📱 Short'; + default: + return '🎥 Video'; + } + }; + if (!video) { return ( - -
-

Video Not Found

-

Sorry, we couldn't find the video you're looking for.

+ +
+
+
📹
+

Video Not Found

+

+ Sorry, we couldn't find the video you're looking for. +

+ +
); } + const videoId = getYoutubeVideoId(video.youtubeUrl); + return ( - -
-
-
-
-
-

{title}

-
- {video.type === 'shorts' ? '📱 Shorts' : '🎥 Video'} -
-
-
-

{randomDescription}

-
-
-
+ +
+ {/* Floating Background Elements */} +
+
+
+
+
+ +
+ {/* Back Button */} + + + {/* Video Player Section */} +
+