@appquality/unguess-design-system 2.12.61 → 2.12.63

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# v2.12.62 (Mon Jan 30 2023)
+
+#### 🐛 Bug Fix
+
+- Allow external ref for Player component [#192](https://github.com/AppQuality/unguess-design-system/pull/192) ([@cannarocks](https://github.com/cannarocks))
+- feat(player): add forward ref to allow external handling [#191](https://github.com/AppQuality/unguess-design-system/pull/191) ([@cannarocks](https://github.com/cannarocks))
+
+#### ⚠️ Pushed to `master`
+
+- bump version ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.12.61 (Fri Jan 27 2023)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -4375,11 +4375,12 @@ const Video = styled__default["default"].video `
  * Used for this:
     - To display a video
  */
-const Player = (props) => {
+const Player = React.forwardRef((props, forwardRef) => {
     const videoRef = React.useRef(null);
     const [isLoaded, setIsLoaded] = React.useState(false);
     const [isPlaying, setIsPlaying] = React.useState(false);
     const [duration, setDuration] = React.useState(0);
+    React.useImperativeHandle(forwardRef, () => videoRef.current);
     const handleLoad = () => {
         var _a;
         setIsLoaded(true);
@@ -4424,7 +4425,7 @@ const Player = (props) => {
             e.stopPropagation();
             handlePlayPause();
         } }, { children: [!isLoaded ? (jsxRuntime.jsx(VideoSpinner, {})) : (jsxRuntime.jsx(FloatingControls, { isPlaying: isPlaying })), jsxRuntime.jsx(Video, Object.assign({ ref: videoRef, onLoadedMetadata: handleLoad, preload: "auto", playsInline: true }, { children: props.children })), jsxRuntime.jsx(Controls, { videoRef: videoRef.current, duration: duration, isPlaying: isPlaying, onPlayChange: (isPlaying) => setIsPlaying(isPlaying) })] })));
-};
+});
 
 var _path$5;
 function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PlayerArgs } from "./_types";
 /**
  * The Player is a styled media tag with custom controls
@@ -5,5 +6,5 @@ import { PlayerArgs } from "./_types";
  * Used for this:
     - To display a video
  */
-declare const Player: (props: PlayerArgs) => JSX.Element;
+declare const Player: import("react").ForwardRefExoticComponent<PlayerArgs & import("react").RefAttributes<HTMLVideoElement>>;
 export { Player };

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

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 import { ComponentMeta, Story } from "@storybook/react";
 import { PlayerArgs } from "./_types";
 interface PlayerStoryArgs extends PlayerArgs {
     url: string;
 }
 export declare const Basic: Story<PlayerStoryArgs>;
-declare const _default: ComponentMeta<(props: PlayerArgs) => JSX.Element>;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<PlayerArgs & import("react").RefAttributes<HTMLVideoElement>>>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.12.61",
+  "version": "2.12.63",
   "dependencies": {
     "@nivo/bar": "^0.80.0",
     "@nivo/bullet": "^0.80.0",