Feature/broadcast

docusaurus.config.ts

@@ -165,17 +165,17 @@ const config: Config = {
             //   label: "📺 Broadcast",
             //   to: "https://codeharborhub-broadcast-web.vercel.app/",
             // },
-          ],
-        },
-        {
-          to: "/blogs",
-          html: '<span class="nav-emoji">📰</span> Blogs',
-        },
-        {
-          type: "dropdown",
-          html: '<span class="nav-emoji">🔗</span> More',
-          position: "left",
-          items: [
+            ],
+          },
+          {
+            to: "/blogs",
+            html: '<span class="nav-emoji">📰</span> Blogs',
+          },
+          {
+            type: "dropdown",
+            html: '<span class="nav-emoji">🔗</span> More',
+            position: "left",
+            items: [
             {
               label: "📜Projects",
               to: "#",
@@ -195,19 +195,24 @@ const config: Config = {
             },
             {
               label: "📺 Broadcast",
-              to: "https://www.youtube.com/recodehive",
+              to: "/broadcasts/",
             },
             {
               label: "🎙️ Podcast",
-              to: "podcasts/",
+              to: "/podcasts/",
             },            
+
+            ],
+          },
+
           ],
         },
         {
           type: "html",
           position: "right",
           value: '<div id="firebase-auth-github-navbar"></div>',
         },
+
         // {
         //   type: "dropdown",
         //   html: '<span class="nav-emoji">🏷️</span> Tags',

src/pages/broadcasts/details.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import Layout from '@theme/Layout';
+import type { ReactElement } from 'react';
+import { useLocation } from '@docusaurus/router';
+import './index.css';
+
+interface VideoData {
+  id: string;
+  youtubeUrl: string;
+  type: 'video' | 'shorts';
+}
+
+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) {
+    videoId = shortsMatch[1];
+  }
+  return videoId;
+};
+
+export default function VideoDetails(): ReactElement {
+  const location = useLocation();
+  const state = location.state as LocationState;
+  const video = state?.video;
+  const [title, setTitle] = useState<string>('Loading...');
+
+  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 data = await response.json();
+        setTitle(data.title);
+      } catch (error) {
+        setTitle('Video Title Unavailable');
+        console.error('Error fetching video title:', error);
+      }
+    };
+
+    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.",
+  ];
+
+  // Get a random description
+  const randomDescription = descriptions[Math.floor(Math.random() * descriptions.length)];
+
+  if (!video) {
+    return (
+      <Layout>
+        <div className="video-container">
+          <h1>Video Not Found</h1>
+          <p>Sorry, we couldn't find the video you're looking for.</p>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="video-container">
+        <div className="video-card details-card">
+          <div className="video-content">
+            <div className="video-info">
+              <div className="video-title">
+                <strong>{title}</strong>
+              </div>
+              <div className="video-type">
+                {video.type === 'shorts' ? '📱 Shorts' : '🎥 Video'}
+              </div>
+            </div>
+            <div className="video-description">
+              <p>{randomDescription}</p>
+            </div>
+            <div className="video-embed-large">
+              <iframe
+                src={`https://www.youtube.com/embed/${getYoutubeVideoId(video.youtubeUrl)}${video.type === 'shorts' ? '?loop=1' : ''}`}
+                width="100%"
+                height="600"
+                frameBorder="0"
+                allowFullScreen
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                loading="lazy"
+                title={title}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}