+
+ Video Not Found
+Sorry, we couldn't find the video you're looking for.
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+ {video.type === 'shorts' ? 'π± Shorts' : 'π₯ Video'}
+
+
+
+ {randomDescription}
+
+
+
+ onClick(video, e)}
+ role="button"
+ tabIndex={0}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') onClick(video, e);
+ }}
+ >
+
+ );
+};
+
+const VideoSection: React.FC<{
+ title: string;
+ videos: VideoData[];
+ onClick: (video: VideoData, event: React.MouseEvent | React.KeyboardEvent) => void;
+}> = ({ title, videos, onClick }) => {
+ if (videos.length === 0) return null;
+
+ return (
+
+
+
+ {title}
+
+
+ {video.type === 'shorts' ? (
+ <>
+ π± Shorts
+
+ ) : (
+ <>
+ π₯ Video
+
+ )}
+
+
+
+ {!thumbnailError && (
+ 
{
+ const img = e.target as HTMLImageElement;
+ if (img.src.includes('maxresdefault')) {
+ img.src = `https://i.ytimg.com/vi/${videoId}/sddefault.jpg`;
+ } else if (img.src.includes('sddefault')) {
+ img.src = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`;
+ } else if (img.src.includes('hqdefault')) {
+ img.src = `https://i.ytimg.com/vi/${videoId}/mqdefault.jpg`;
+ } else {
+ setThumbnailError(true);
+ }
+ }}
+ />
+ )}
+
+ {
+ const img = e.target as HTMLImageElement;
+ if (img.src.includes('maxresdefault')) {
+ img.src = `https://i.ytimg.com/vi/${videoId}/sddefault.jpg`;
+ } else if (img.src.includes('sddefault')) {
+ img.src = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`;
+ } else if (img.src.includes('hqdefault')) {
+ img.src = `https://i.ytimg.com/vi/${videoId}/mqdefault.jpg`;
+ } else {
+ setThumbnailError(true);
+ }
+ }}
+ />
+ )}
+ βΆ
+
+
+ );
+};
+
+const Pagination: React.FC<{
+ currentPage: number;
+ totalPages: number;
+ setCurrentPage: (page: number) => void;
+}> = ({ currentPage, totalPages, setCurrentPage }) => (
+ {title}
+
+ {videos.map((video) => (
+
+
+ Page {currentPage} of {totalPages}
+
+
+);
+
+function BroadcastsPage(): ReactElement {
+ const history = useHistory();
+ const [currentPage, setCurrentPage] = useState(1);
+ const [activeTab, setActiveTab] = useState<'videos' | 'shorts'>('videos');
+ const videosPerPage = 6;
+
+ const videoData: VideoData[] = videoUrls.map((url, index) => ({
+ id: String(index + 1),
+ youtubeUrl: url,
+ type: getYoutubeContentType(url),
+ }));
+
+ const regularVideos = videoData.filter(video => video.type === 'video');
+ const shorts = videoData.filter(video => video.type === 'shorts');
+
+ const indexOfLastVideo = currentPage * videosPerPage;
+ const indexOfFirstVideo = indexOfLastVideo - videosPerPage;
+
+ const paginatedVideos = regularVideos.slice(indexOfFirstVideo, indexOfLastVideo);
+ const paginatedShorts = shorts.slice(indexOfFirstVideo, indexOfLastVideo);
+ const totalPages = Math.ceil((activeTab === 'videos' ? regularVideos.length : shorts.length) / videosPerPage);
+
+ useEffect(() => {
+ setCurrentPage(1);
+ }, [activeTab]);
+
+ const handleVideoClick = (video: VideoData, event: React.MouseEvent | React.KeyboardEvent) => {
+ const target = event.target as HTMLElement;
+ if (target.tagName === 'IFRAME' || target.className === 'video-embed') return;
+ history.push('/broadcasts/details', { video });
+ };
+
+ return (
+
+
+ Featured Content
+Watch our curated collection of videos and shorts
+ +
+
+
+
+
+ {activeTab === 'videos' && (
+ <>
+