@appquality/unguess-design-system 3.1.82 → 3.1.83

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# v3.1.82 (Mon May 13 2024)
+
+#### 🐛 Bug Fix
+
+- Player improvements and trans fix [#339](https://github.com/AppQuality/unguess-design-system/pull/339) ([@iDome89](https://github.com/iDome89) [@cannarocks](https://github.com/cannarocks))
+- Update-controls-layout [#338](https://github.com/AppQuality/unguess-design-system/pull/338) ([@cannarocks](https://github.com/cannarocks))
+- fixed obs breaking text [#334](https://github.com/AppQuality/unguess-design-system/pull/334) ([@iDome89](https://github.com/iDome89))
+- removed ; from component tree [#337](https://github.com/AppQuality/unguess-design-system/pull/337) ([@iDome89](https://github.com/iDome89) [@cannarocks](https://github.com/cannarocks))
+- Player controls updated [#336](https://github.com/AppQuality/unguess-design-system/pull/336) ([@cannarocks](https://github.com/cannarocks))
+- Improve-player-bookmarks-usability [#335](https://github.com/AppQuality/unguess-design-system/pull/335) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 2
+
+- [@iDome89](https://github.com/iDome89)
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v3.1.82 (Fri May 10 2024)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -3949,12 +3949,11 @@ const StyledWord = styled__default["default"](reactTypography.Span) `
   ${({ observation, theme }) => {
     var _a, _b;
     return observation &&
-        `
-      user-select: none;
+        ` user-select: none;
+      padding: 0;
       background-color: ${(_a = observation.backgroundColor) !== null && _a !== void 0 ? _a : getColor(theme.palette.azure, 700, undefined, 0.5)};
       color: ${(_b = observation.color) !== null && _b !== void 0 ? _b : "white"};
-      padding: 0 2px;
-
+      box-sizing: border-box;
       &:focus {
         outline: none;
       }
@@ -3970,7 +3969,7 @@ const ActiveWord = styled__default["default"].span `
   padding: 0 2px;
 `;
 const WordsContainer = styled__default["default"].div `
-  word-wrap: break-word;
+  box-sizing: border-box;
   ${StyledWord}, span {
     &::selection {
       background-color: ${({ theme }) => getColor(theme.palette.kale, 700, undefined, 0.5)};
@@ -4011,7 +4010,7 @@ const Highlight = (props) => {
             document.removeEventListener("selectionchange", handleSelectionChange);
         };
     }, [ref, props, handleSelectionChange]);
-    return (jsxRuntime.jsxs(HighlightContextProvider, Object.assign({ term: props.search }, { children: [jsxRuntime.jsx(WordsContainer, Object.assign({ ref: ref }, { children: props.children })), ";"] })));
+    return (jsxRuntime.jsx(HighlightContextProvider, Object.assign({ term: props.search }, { children: jsxRuntime.jsx(WordsContainer, Object.assign({ ref: ref }, { children: props.children })) })));
 };
 const Word = (props) => {
     var _a;
@@ -4020,7 +4019,7 @@ const Word = (props) => {
         props.currentTime < props.end;
     // Is there an observation that contains this word?
     const observation = (_a = props.observations) === null || _a === void 0 ? void 0 : _a.find((obs) => props.start >= obs.start && props.end <= obs.end);
-    return (jsxRuntime.jsxs(StyledWord, Object.assign({}, props, { observation: observation, "data-start": props.start, "data-end": props.end, className: !!observation ? "highlighted" : "" }, (!!observation ? { tag: "observation" } : {}), { children: [isActive ? (jsxRuntime.jsx(ActiveWord, { children: jsxRuntime.jsx(Searchable, { start: props.start, text: props.text }) })) : (jsxRuntime.jsx(Searchable, { start: props.start, text: props.text })), !observation && " "] })));
+    return (jsxRuntime.jsxs(StyledWord, Object.assign({}, props, { observation: observation, "data-start": props.start, "data-end": props.end, className: !!observation ? "highlighted" : "" }, (!!observation ? { tag: "observation" } : {}), { children: [isActive ? (jsxRuntime.jsx(ActiveWord, { children: jsxRuntime.jsx(Searchable, { start: props.start, text: props.text }) })) : (jsxRuntime.jsx(Searchable, { start: props.start, text: props.text })), " "] })));
 };
 Highlight.Word = Word;
 
@@ -5085,7 +5084,7 @@ const Bookmark = (props) => {
     return (jsxRuntime.jsx(Tooltip, Object.assign({ content: label, type: "light", size: "large" }, { children: jsxRuntime.jsxs(Rect, Object.assign({ isActive: activeBookmark && activeBookmark.id === props.id, hue: hue, style: {
                 left: `${((start - videoStart) / duration) * 100}%`,
                 width: `${((end - start) / duration) * 100}%`,
-            } }, { children: [jsxRuntime.jsx(Grabber, { observation: props }), jsxRuntime.jsx(Grabber, { isEnd: true, observation: props })] })) })));
+            }, onClick: props.onClick }, { children: [jsxRuntime.jsx(Grabber, { observation: props }), jsxRuntime.jsx(Grabber, { isEnd: true, observation: props })] })) })));
 };
 
 var _path$f, _path2$3, _path3$1;
@@ -5210,8 +5209,9 @@ const getNextPlaybackRate = (rate = 1) => {
 const StyledDiv$4 = styled__default["default"].div `
   display: flex;
   align-items: center;
+  justify-content: center;
 `;
-const ControlsGroupCenter = () => {
+const ControlsGroupCenter = (props) => {
     var _a;
     const [playBackRate, setPlayBackRate] = React.useState(1);
     const { context, togglePlay } = Video.useVideoContext();
@@ -5234,7 +5234,7 @@ const ControlsGroupCenter = () => {
         const nextTime = videoRef.currentTime + 10;
         videoRef.currentTime = nextTime;
     };
-    return (jsxRuntime.jsxs(StyledDiv$4, { children: [jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, onClick: (e) => {
+    return (jsxRuntime.jsxs(StyledDiv$4, Object.assign({}, props, { children: [jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, onClick: (e) => {
                     if (videoRef) {
                         videoRef.currentTime = 0;
                     }
@@ -5252,7 +5252,7 @@ const ControlsGroupCenter = () => {
                         videoRef.playbackRate = newSpeed;
                     }
                     e.stopPropagation();
-                } }, { children: jsxRuntime.jsxs(SM, Object.assign({ isBold: true, style: { lineHeight: "16px" } }, { children: [playBackRate, "x"] })) }))] }));
+                } }, { children: jsxRuntime.jsxs(SM, Object.assign({ isBold: true, style: { lineHeight: "16px" } }, { children: [playBackRate, "x"] })) }))] })));
 };
 
 var _path$b;
@@ -5367,17 +5367,10 @@ const ProgressBar = React.forwardRef((props, ref) => {
 });
 
 const StyledDiv$3 = styled__default["default"].div `
-  position: absolute;
-  bottom: ${({ theme }) => theme.space.sm};
-  right: 0;
-
-  padding: 0 ${({ theme }) => theme.space.xs};
-
-  span {
-    color: ${({ theme }) => theme.palette.grey[300]};
-  }
+  display: flex;
+  color: ${({ theme }) => theme.palette.grey[300]};
 `;
-const TimeLabel = ({ current, duration, }) => (jsxRuntime.jsx(StyledDiv$3, { children: jsxRuntime.jsxs(SM, Object.assign({ tag: "span" }, { children: [current, "/", duration] })) }));
+const TimeLabel = ({ current, duration, }) => (jsxRuntime.jsx(StyledDiv$3, { children: jsxRuntime.jsxs(SM, Object.assign({ tag: "span" }, { children: [formatDuration(current), "/", formatDuration(duration)] })) }));
 
 const Wrapper = styled__default["default"].div `
   position: absolute;
@@ -5549,8 +5542,8 @@ const Controls = ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpd
             document.removeEventListener("mouseup", reset);
         };
     }, [reset, marks]);
-    return (jsxRuntime.jsxs(ControlsWrapper, Object.assign({ isPlaying: context.isPlaying }, { children: [jsxRuntime.jsxs(ProgressContainer, Object.assign({ onMouseEnter: onMouseEvent, onMouseMove: onMouseEvent, onMouseLeave: onMouseEvent }, { children: [jsxRuntime.jsx(StyledTooltip, Object.assign({ style: { marginLeft: `${tooltipMargin}px` } }, { children: tooltipLabel })), jsxRuntime.jsx(TimeLabel, { current: formatDuration(relCurrentTime), duration: formatDuration(duration) }), !!duration &&
-                        (marks === null || marks === void 0 ? void 0 : marks.map((bookmark, index) => (jsxRuntime.jsx(Bookmark, Object.assign({}, bookmark), `${index}${bookmark.start}`)))), jsxRuntime.jsx(ProgressBar, { ref: progressRef, progress: progress, handleSkipAhead: handleSkipAhead, duration: duration })] })), jsxRuntime.jsxs(ControlsBar, { children: [jsxRuntime.jsx(StyledDiv$2, { children: jsxRuntime.jsx(AudioButton, {}) }), jsxRuntime.jsx(ControlsGroupCenter, {}), jsxRuntime.jsxs(StyledDiv$2, { children: [jsxRuntime.jsx(Cutter, { onCutHandler: onCutHandler, isCutting: isCutting, i18n: i18n }), jsxRuntime.jsx(FullScreenButton, { container: container })] })] })] })));
+    return (jsxRuntime.jsxs(ControlsWrapper, Object.assign({ isPlaying: context.isPlaying }, { children: [jsxRuntime.jsxs(ProgressContainer, Object.assign({ onMouseEnter: onMouseEvent, onMouseMove: onMouseEvent, onMouseLeave: onMouseEvent }, { children: [jsxRuntime.jsx(StyledTooltip, Object.assign({ style: { marginLeft: `${tooltipMargin}px` } }, { children: tooltipLabel })), !!duration &&
+                        (marks === null || marks === void 0 ? void 0 : marks.map((bookmark, index) => (jsxRuntime.jsx(Bookmark, Object.assign({}, bookmark), `${index}${bookmark.start}`)))), jsxRuntime.jsx(ProgressBar, { ref: progressRef, progress: progress, handleSkipAhead: handleSkipAhead, duration: duration })] })), jsxRuntime.jsxs(ControlsBar, { children: [jsxRuntime.jsxs(StyledDiv$2, Object.assign({ style: { width: "20%", justifyContent: "start" } }, { children: [jsxRuntime.jsx(AudioButton, {}), jsxRuntime.jsx(TimeLabel, { current: relCurrentTime, duration: duration })] })), jsxRuntime.jsx(ControlsGroupCenter, { style: { width: "60%" } }), jsxRuntime.jsxs(StyledDiv$2, Object.assign({ style: { width: "20%", justifyContent: "end" } }, { children: [jsxRuntime.jsx(Cutter, { onCutHandler: onCutHandler, isCutting: isCutting, i18n: i18n }), jsxRuntime.jsx(FullScreenButton, { container: container })] }))] })] })));
 };
 
 var _path$8;

package/build/stories/buttons/button/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ButtonArgs } from "./_types";
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;
 export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;

package/build/stories/buttons/utils.d.ts

@@ -8,18 +8,18 @@ export declare const variants: readonly [{}, {
     readonly disabled: true;
 }];
 export declare const Row: import("styled-components").IStyledComponent<"web", {
-    alignItems?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXs?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsSm?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsMd?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsLg?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXl?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    justifyContent?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentXs?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentSm?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentMd?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentLg?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentXl?: "start" | "center" | "end" | "between" | "around" | undefined;
+    alignItems?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
+    alignItemsXs?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
+    alignItemsSm?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
+    alignItemsMd?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
+    alignItemsLg?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
+    alignItemsXl?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
+    justifyContent?: "start" | "end" | "center" | "between" | "around" | undefined;
+    justifyContentXs?: "start" | "end" | "center" | "between" | "around" | undefined;
+    justifyContentSm?: "start" | "end" | "center" | "between" | "around" | undefined;
+    justifyContentMd?: "start" | "end" | "center" | "between" | "around" | undefined;
+    justifyContentLg?: "start" | "end" | "center" | "between" | "around" | undefined;
+    justifyContentXl?: "start" | "end" | "center" | "between" | "around" | undefined;
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapXs?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapSm?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -73,7 +73,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
+    inputMode?: "url" | "none" | "search" | "text" | "tel" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -299,18 +299,18 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     md?: string | number | boolean | undefined;
     lg?: string | number | boolean | undefined;
     xl?: string | number | boolean | undefined;
-    alignSelf?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfXs?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfSm?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfMd?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfLg?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfXl?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    textAlign?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignXs?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignSm?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignMd?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignLg?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignXl?: "start" | "center" | "end" | "justify" | undefined;
+    alignSelf?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfXs?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfSm?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfMd?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfLg?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfXl?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
+    textAlign?: "start" | "end" | "center" | "justify" | undefined;
+    textAlignXs?: "start" | "end" | "center" | "justify" | undefined;
+    textAlignSm?: "start" | "end" | "center" | "justify" | undefined;
+    textAlignMd?: "start" | "end" | "center" | "justify" | undefined;
+    textAlignLg?: "start" | "end" | "center" | "justify" | undefined;
+    textAlignXl?: "start" | "end" | "center" | "justify" | undefined;
     offset?: string | number | undefined;
     offsetXs?: string | number | undefined;
     offsetSm?: string | number | undefined;
@@ -370,7 +370,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
+    inputMode?: "url" | "none" | "search" | "text" | "tel" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -640,7 +640,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
+    inputMode?: "url" | "none" | "search" | "text" | "tel" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PlaceholderOptions } from "@tiptap/extension-placeholder";
 import { Editor as TipTapEditor } from "@tiptap/react";
 import { ChatEditorArgs, SuggestedUser } from "./_types";

package/build/stories/dropdowns/select/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DropdownArgs, SelectArgs } from "./_types";
 import { MenuArgs } from "../menu/_types";
 interface IItem {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { EditorArgs } from "./_types";
 interface EditorStoryArgs extends EditorArgs {
     children?: any;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { HighlightArgs } from "./_types";
 interface StoryArgs extends HighlightArgs {
     words: {

package/build/stories/player/parts/controlsCenterGroup.d.ts

@@ -1 +1,2 @@
-export declare const ControlsGroupCenter: () => import("react/jsx-runtime").JSX.Element;
+import { HTMLAttributes } from "react";
+export declare const ControlsGroupCenter: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/build/stories/player/parts/timeLabel.d.ts

@@ -1,4 +1,4 @@
 export declare const TimeLabel: ({ current, duration, }: {
-    current: string;
-    duration: string;
+    current: number;
+    duration: number;
 }) => import("react/jsx-runtime").JSX.Element;

package/package.json

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