New-player-with-old-skin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.41-player",
+  "version": "3.1.44",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",

src/stories/player/index.tsx

@@ -33,13 +33,29 @@ const Player = forwardRef<HTMLVideoElement, PlayerArgs>((props, forwardRef) => {
 
 const PlayerCore = forwardRef<HTMLVideoElement, PlayerArgs>(
   (props, forwardRef) => {
-    const { context, togglePlay } = useVideoContext();
+    const { context, togglePlay, setIsPlaying } = useVideoContext();
     const videoRef = context.player?.ref.current;
     const isLoaded = !!videoRef;
     const containerRef = useRef<HTMLDivElement>(null);
 
     useImperativeHandle(forwardRef, () => videoRef as HTMLVideoElement);
 
+    useEffect(() => {
+      if (videoRef) {
+        videoRef.addEventListener("pause", () => {
+          setIsPlaying(false);
+        });
+      }
+
+      return () => {
+        if (videoRef) {
+          videoRef.removeEventListener("pause", () => {
+            setIsPlaying(false);
+          });
+        }
+      };
+    }, [videoRef]);
+
     return (
       <Container
         isLoaded={isLoaded}

src/stories/player/parts/fullScreenButton.tsx

@@ -69,6 +69,22 @@ export const FullScreenButton = ({
     return false;
   }, [ref]);
 
+  useEffect(() => {
+    if (ref) {
+      ref.addEventListener("fullscreenchange", () => {
+        setFullScreen(!!document.fullscreenElement);
+      });
+    }
+
+    return () => {
+      if (ref) {
+        ref.removeEventListener("fullscreenchange", () => {
+          setFullScreen(!!document.fullscreenElement);
+        });
+      }
+    };
+  }, [ref]);
+
   return (
     <IconButton
       isBright
@@ -78,7 +94,11 @@ export const FullScreenButton = ({
       }}
       disabled={!canGoFullScreen()}
     >
-      {document.fullscreenElement || isFullScreen ? <FullScreenExit /> : <FullScreenEnter />}
+      {document.fullscreenElement || isFullScreen ? (
+        <FullScreenExit />
+      ) : (
+        <FullScreenEnter />
+      )}
     </IconButton>
   );
 };

src/stories/slider/index.stories.tsx

@@ -26,24 +26,24 @@ const TextContainer = styled.div`
 
 const Template: Story<SliderStoryArg> = ({ items, ...args }) => {
   return (
-    <Slider {...args}>
-      {items.map((item) => (
-        <div>
-          <Slider.Slide>
-            {item.imageUrl && <img src={item.imageUrl} />}
-            {item.videoUrl && (
-              <Player url={item.videoUrl} />
-            )}
-            {item.headerTitle && item.content && (
-              <TextContainer>
-                <XL>{item.headerTitle}</XL>
-                <MD>{item.content}</MD>
-              </TextContainer>
-            )}
-          </Slider.Slide>
-        </div>
-      ))}
-    </Slider>
+    <div style={{ height: "80vh" }}>
+      <Slider {...args}>
+        {items.map((item) => (
+          <div>
+            <Slider.Slide>
+              {item.imageUrl && <img src={item.imageUrl} />}
+              {item.videoUrl && <Player url={item.videoUrl} />}
+              {item.headerTitle && item.content && (
+                <TextContainer>
+                  <XL>{item.headerTitle}</XL>
+                  <MD>{item.content}</MD>
+                </TextContainer>
+              )}
+            </Slider.Slide>
+          </div>
+        ))}
+      </Slider>
+    </div>
   );
 };