dev day #79

frontend/src/pages/VideosPage.tsx

@@ -26,8 +26,8 @@ import { useClubTheme } from '../contexts/ClubThemeContext';
 import { usePublicSettings } from '../hooks/usePublicSettings';
 import { getCachedYouTube, YouTubeVideo } from '../services/youtube';
 import { FaPlay, FaExternalLinkAlt, FaYoutube } from 'react-icons/fa';
-import SponsorsSection from '../components/common/SponsorsSection';
 import NewsletterCTA from '../components/common/NewsletterCTA';
+import CommentsSection from '../components/comments/CommentsSection';
 
 type RenderItem = {
   key: string;
@@ -179,6 +179,9 @@ const VideosPage: React.FC = () => {
                 alt={item.title}
                 width="100%"
                 height="100%"
+                loading="lazy"
+                decoding="async"
+                referrerPolicy="origin-when-cross-origin"
                 style={{ objectFit: 'cover' }}
               />
             ) : (
@@ -330,6 +333,7 @@ const VideosPage: React.FC = () => {
                     title={selectedVideo.title}
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                     allowFullScreen
+                    loading="lazy"
                     referrerPolicy="strict-origin-when-cross-origin"
                     style={{ borderRadius: '8px' }}
                   />
@@ -362,6 +366,11 @@ const VideosPage: React.FC = () => {
                       </Link>
                     )}
                   </HStack>
+                  {selectedVideo.videoId && (
+                    <Box mt={4}>
+                      <CommentsSection targetType="youtube_video" targetId={selectedVideo.videoId} />
+                    </Box>
+                  )}
                 </Box>
               </Box>
             )}
@@ -371,9 +380,6 @@ const VideosPage: React.FC = () => {
       
       {/* Newsletter CTA */}
       <NewsletterCTA />
-      
-      {/* Sponsors Section */}
-      <SponsorsSection />
     </MainLayout>
   );
 };