Merge pull request #576 from iitzIrFan/bug/broadcast

Add pagination to video details page with custom styles

Author: sanjay-kv

src/pages/broadcasts/details.css

@@ -0,0 +1,32 @@
+/* Add custom styles for the details page pagination */
+.video-container .pagination {
+  margin-top: 30px;
+}
+
+.video-container .pagination button {
+  padding: 10px 20px;
+  margin: 0 10px;
+  background: linear-gradient(to right, #007bff, #0056b3);
+  color: white !important;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.video-container .pagination button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
+  background: linear-gradient(to right, #0056b3, #003d80);
+}
+
+[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);
+}
+
+[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);
+}

src/pages/broadcasts/details.tsx

@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import Layout from '@theme/Layout';
 import type { ReactElement } from 'react';
-import { useLocation } from '@docusaurus/router';
+import { useLocation, useHistory } from '@docusaurus/router';
+import './video.css';
 import './index.css';
+import './details.css';
 
 interface VideoData {
   id: string;
@@ -30,6 +32,7 @@ const getYoutubeVideoId = (url: string): string => {
 
 export default function VideoDetails(): ReactElement {
   const location = useLocation();
+  const history = useHistory();
   const state = location.state as LocationState;
   const video = state?.video;
   const [title, setTitle] = useState<string>('Loading...');
@@ -107,6 +110,24 @@ export default function VideoDetails(): ReactElement {
             <div className="video-meta">
               <p>Watch in full screen for the best viewing experience</p>
             </div>
+            <div className="pagination" style={{marginTop: '30px'}}>
+              <button 
+                onClick={() => history.push('/broadcasts')}
+                style={{
+                  display: 'inline-block',
+                  padding: '12px 24px',
+                  backgroundColor: '#007bff',
+                  color: 'white',
+                  borderRadius: '8px',
+                  fontWeight: 'bold',
+                  textDecoration: 'none',
+                  boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+                  border: 'none'
+                }}
+              >
+                ← Back to Videos
+              </button>
+            </div>
           </div>
         </div>
       </div>

src/pages/broadcasts/index.css

@@ -533,21 +533,27 @@ h1 {
 .pagination {
   margin-top: 20px;
   text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
 }
 
 .pagination button {
   padding: 8px 16px;
   margin: 0 8px;
   background-color: #007bff;
-  color: white;
-  border: none;
+  color: white !important; /* Ensure text is visible in all themes */
+  border: 1px solid #0056b3;
   border-radius: 8px;
   cursor: pointer;
+  font-weight: 600;
 }
 
 .pagination button:disabled {
   background-color: #ccc;
   cursor: not-allowed;
+  color: #666 !important;
 }
 
 .pagination span {