🎉 feat(Lightbox.tsx): add InsightLightbox component for displaying vi…

…deos in a lightbox

The `InsightLightbox` component is added to display videos in a lightbox. It accepts the following props:
- `items`: an array of `VideoPart` objects representing the videos to be displayed
- `currentIndex`: the index of the currently selected video (default is 0)
- `onClose`: a callback function to be called when the lightbox is closed
- `onSlideChange`: a callback function to be called when the slide (video) is changed

The component uses the `Lightbox` and `Slider` components from the `@appquality/unguess-design-system` package. It also uses the `Video` component from the `@appquality/stream-player` package to display the videos.

The `slideChange` function is defined to handle the slide change event. It calls the `onSlideChange` callback

src/pages/Campaign/useWidgets/Experience/widgets/Insights/Lightbox.tsx

@@ -0,0 +1,78 @@
+import { Lightbox, Slider } from '@appquality/unguess-design-system';
+import { useCallback, useRef } from 'react';
+import Video from '@appquality/stream-player';
+import styled from 'styled-components';
+import useWindowSize from 'src/hooks/useWindowSize';
+import { appTheme } from 'src/app/theme';
+import { VideoPart } from './HighlightCard';
+
+const Player = styled(Video.Player)``;
+
+const InsightLightbox = ({
+  items,
+  currentIndex = 0,
+  onClose,
+  onSlideChange,
+}: {
+  items: VideoPart[];
+  currentIndex?: number;
+  onClose?: () => void;
+  onSlideChange?: (index: number) => void;
+}) => {
+  const videoRefs = useRef<Array<HTMLVideoElement | null>>([]);
+  const { width } = useWindowSize();
+  const breakpointSm = parseInt(appTheme.breakpoints.sm, 10);
+  const hideDetails = width < breakpointSm;
+
+  const slideChange = useCallback(
+    (index: number) => {
+      if (onSlideChange) {
+        onSlideChange(index);
+      }
+      videoRefs.current.forEach((ref) => {
+        if (ref) {
+          ref.pause();
+        }
+      });
+    },
+    [videoRefs]
+  );
+
+  return (
+    <Lightbox onClose={onClose}>
+      <Lightbox.Header>
+        <h1>Lightbox</h1>
+      </Lightbox.Header>
+      <Lightbox.Body>
+        <Lightbox.Body.Main>
+          <Slider
+            prevArrow={<Slider.PrevButton isBright />}
+            nextArrow={<Slider.NextButton isBright />}
+            onSlideChange={slideChange}
+            initialSlide={currentIndex}
+          >
+            {items.map((item) => (
+              <Slider.Slide>
+                <Video src={item.streamUrl} start={item.start} end={item.end}>
+                  <Video.PlayPauseButton />
+                  <Player />
+                </Video>
+              </Slider.Slide>
+            ))}
+          </Slider>
+        </Lightbox.Body.Main>
+        {hideDetails === false && (
+          <Lightbox.Body.Details>
+            <p>Lightbox body details</p>
+          </Lightbox.Body.Details>
+        )}
+      </Lightbox.Body>
+      <Lightbox.Footer>
+        <p>Lightbox footer</p>
+      </Lightbox.Footer>
+      <Lightbox.Close aria-label="Close insight lightbox" />
+    </Lightbox>
+  );
+};
+
+export { InsightLightbox };