dev day #79

frontend/src/components/home/VideosSection.tsx

@@ -65,6 +65,13 @@ const VideosSection: React.FC<Props> = ({ videos, variant }) => {
   const limit = Math.max(1, Math.min(12, settings?.videos_limit ?? 6));
   const youtubeUrl = (settings as any)?.youtube_url || (settings as any)?.social_youtube || null;
 
+  useEffect(() => {
+    try {
+      if (isOpen) onClose();
+      setSelectedVideo(null);
+    } catch {}
+  }, [style, isOpen, onClose]);
+
   useEffect(() => {
     let canceled = false;
     const run = async () => {
@@ -137,6 +144,7 @@ const VideosSection: React.FC<Props> = ({ videos, variant }) => {
     
     return (
       <Box
+        className="video-card card"
         bg={cardBg}
         borderRadius="xl"
         overflow="hidden"
@@ -169,6 +177,9 @@ const VideosSection: React.FC<Props> = ({ videos, variant }) => {
                 alt={it.title}
                 width="100%"
                 height="100%"
+                loading="lazy"
+                decoding="async"
+                referrerPolicy="origin-when-cross-origin"
                 style={{ objectFit: 'cover' }}
               />
             ) : (
@@ -259,7 +270,7 @@ const VideosSection: React.FC<Props> = ({ videos, variant }) => {
             </Button>
           </Link>
         </Box>
-        <HorizontalScroller draggable>
+        <HorizontalScroller key={`videos-hs-${style}-${items.length}`} draggable>
           {items.map((it, idx) => (
             <Box 
               key={it.key} 
@@ -285,6 +296,7 @@ const VideosSection: React.FC<Props> = ({ videos, variant }) => {
                     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' }}
                   />
@@ -306,7 +318,7 @@ const VideosSection: React.FC<Props> = ({ videos, variant }) => {
           <Button size="sm" variant="outline" colorScheme="blue">Více videí</Button>
         </Link>
       </Box>
-      <SimpleGrid columns={cols} spacing={4}>
+      <SimpleGrid key={`videos-grid-${style}-${items.length}`} columns={cols} spacing={4}>
         {items.map((it, idx) => (
           <Card key={it.key} it={it} idx={idx} />
         ))}
@@ -325,6 +337,7 @@ const VideosSection: React.FC<Props> = ({ videos, variant }) => {
                   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' }}
                 />