@appquality/unguess-design-system 3.1.103 → 3.1.104

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# v3.1.104 (Tue Jul 02 2024)
+
+#### 🐛 Bug Fix
+
+- pipPlayer + chat improvements [#402](https://github.com/AppQuality/unguess-design-system/pull/402) ([@Kariamos](https://github.com/Kariamos) [@iacopolea](https://github.com/iacopolea) [@marcbon](https://github.com/marcbon) [@sinatragianpaolo](https://github.com/sinatragianpaolo))
+- feat: Add Picture-in-Picture functionality to Player component [#400](https://github.com/AppQuality/unguess-design-system/pull/400) ([@iacopolea](https://github.com/iacopolea))
+- fix: avatar type in the attachments lightbox is now the same as the a… [#401](https://github.com/AppQuality/unguess-design-system/pull/401) ([@Kariamos](https://github.com/Kariamos))
+
+#### Authors: 4
+
+- Gianpaolo Sinatra ([@sinatragianpaolo](https://github.com/sinatragianpaolo))
+- Iacopo Leardini ([@iacopolea](https://github.com/iacopolea))
+- Marco ([@Kariamos](https://github.com/Kariamos))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v3.1.103 (Fri Jun 28 2024)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -4780,6 +4780,79 @@ const StyledDiv = styled__default["default"].div `
 `;
 const VideoSpinner = () => (jsxRuntime.jsx(StyledDiv, { children: jsxRuntime.jsx(Spinner, { size: "50", color: "white" }) }));
 
+const usePictureInPicture = (videoRef, pipMode, onPipChange) => {
+    const getObserver = (videoRef, isVideoPlaying) => {
+        return new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (!entry.isIntersecting && isVideoPlaying()) {
+                    videoRef.requestPictureInPicture();
+                }
+                if (document.pictureInPictureElement &&
+                    entry.isIntersecting &&
+                    !isVideoPlaying()) {
+                    document.exitPictureInPicture();
+                }
+            });
+        }, { threshold: 0.5 });
+    };
+    const handleManualPipMode = (videoRef, pipMode) => {
+        if (pipMode) {
+            videoRef.requestPictureInPicture();
+        }
+        if (!pipMode && document.pictureInPictureElement) {
+            document.exitPictureInPicture();
+        }
+    };
+    React.useEffect(() => {
+        // bail out if pipMode is not defined or videoRef is not defined or pip is not supported
+        if (typeof pipMode === "undefined")
+            return;
+        if (!document.pictureInPictureEnabled) {
+            console.warn("Picture-in-Picture is not supported in this browser");
+            return;
+        }
+        if (!videoRef)
+            return;
+        // if pipMode is auto, we will enter picture in picture mode when the video is not in view
+        if (pipMode === "auto") {
+            const isVideoPlaying = () => videoRef.currentTime > 0 &&
+                !videoRef.paused &&
+                !videoRef.ended &&
+                videoRef.readyState > 2;
+            const observer = getObserver(videoRef, isVideoPlaying);
+            observer.observe(videoRef);
+            return () => {
+                observer.disconnect();
+            };
+        }
+        else if (typeof pipMode === "boolean") {
+            handleManualPipMode(videoRef, pipMode);
+        }
+        else {
+            handleManualPipMode(videoRef, pipMode());
+        }
+    }, [pipMode, videoRef]);
+    React.useEffect(() => {
+        if (!document.pictureInPictureEnabled) {
+            return;
+        }
+        document.addEventListener("enterpictureinpicture", () => {
+            onPipChange === null || onPipChange === void 0 ? void 0 : onPipChange(true);
+        });
+        document.addEventListener("leavepictureinpicture", () => {
+            onPipChange === null || onPipChange === void 0 ? void 0 : onPipChange(false);
+        });
+        return () => {
+            document.removeEventListener("enterpictureinpicture", () => {
+                onPipChange === null || onPipChange === void 0 ? void 0 : onPipChange(true);
+            });
+            document.removeEventListener("leavepictureinpicture", () => {
+                onPipChange === null || onPipChange === void 0 ? void 0 : onPipChange(false);
+            });
+        };
+    }, [onPipChange]);
+};
+
 /**
  * The Player is a styled media tag with custom controls
  * <hr>
@@ -4790,13 +4863,14 @@ const Player = React.forwardRef((props, forwardRef) => (jsxRuntime.jsx(Video__de
 const PlayerCore = React.forwardRef((props, forwardRef) => {
     var _a;
     const { context, togglePlay, setIsPlaying } = Video.useVideoContext();
-    const { onCutHandler, bookmarks, isCutting } = props;
+    const { onCutHandler, bookmarks, isCutting, pipMode, onPipChange } = props;
     const videoRef = (_a = context.player) === null || _a === void 0 ? void 0 : _a.ref.current;
     const isLoaded = !!videoRef;
     const containerRef = React.useRef(null);
     React.useImperativeHandle(forwardRef, () => videoRef, [
         videoRef,
     ]);
+    usePictureInPicture(videoRef, pipMode, onPipChange);
     React.useEffect(() => {
         if (videoRef) {
             videoRef.addEventListener("pause", () => {
@@ -4999,6 +5073,7 @@ const Comment = ({ author, message, children, date, media = [], header, }) => {
                                 handleClickThumbnail(index);
                             } }) }), index))) })) }), jsxRuntime.jsx(MediaLightBox, { isOpen: isOpen, header: jsxRuntime.jsxs(reactTypography.MD, Object.assign({ isBold: true }, { children: [jsxRuntime.jsx(Grey600Span, { children: header && header.title }), header && header.message && (jsxRuntime.jsxs(Grey800Span, { children: [" | ", header.message] }))] })), onClose: closeLightbox, slideChange: slideChange, selectedImageIndex: selectedImageIndex, thumbnails: media, videoRefs: videoRefs, details: jsxRuntime.jsx(Comment, Object.assign({ header: header, author: {
                         avatar: author.avatar,
+                        avatarType: author.avatarType,
                         name: author.name,
                     }, date: date, message: message }, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("br", {}) }) })) }), jsxRuntime.jsx(Footer$2, { children: children })] }));
 };

package/build/stories/player/_types.d.ts

@@ -3,7 +3,8 @@ export interface PlayerArgs extends HTMLAttributes<HTMLVideoElement> {
     url: string;
     start?: number;
     end?: number;
-    enablePipOnScroll?: boolean;
+    pipMode?: "auto" | (() => boolean) | boolean;
+    onPipChange?: (isPip: boolean) => void;
     onCutHandler?: (time: number) => void;
     isCutting?: boolean;
     bookmarks?: IBookmark[];

package/build/stories/player/hooks/usePictureInPicture.d.ts

@@ -0,0 +1,4 @@
+import { PlayerArgs } from "../_types";
+type PictureInPictureHook = (videoRef?: HTMLVideoElement | null, pipMode?: PlayerArgs["pipMode"], onPipChange?: PlayerArgs["onPipChange"]) => void;
+export declare const usePictureInPicture: PictureInPictureHook;
+export {};

package/build/stories/player/index.stories.d.ts

@@ -2,6 +2,8 @@ import { PlayerArgs } from "./_types";
 interface PlayerStoryArgs extends PlayerArgs {
 }
 export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PlayerStoryArgs>;
+export declare const AutoPip: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PlayerStoryArgs>;
+export declare const ButtonPip: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PlayerStoryArgs>;
 export declare const Streaming: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PlayerStoryArgs>;
 export declare const WithBookmarks: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PlayerStoryArgs>;
 export declare const WithContext: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PlayerStoryArgs>;

package/package.json

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