@appquality/unguess-design-system 3.1.95 → 3.1.96

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# v3.1.96 (Mon May 27 2024)
+
+#### 🐛 Bug Fix
+
+- Tagging tool improvements [#373](https://github.com/AppQuality/unguess-design-system/pull/373) ([@marcbon](https://github.com/marcbon) [@sinatragianpaolo](https://github.com/sinatragianpaolo))
+- 🎨 style(bookmark.tsx): add z-index property to hovered bookmark for better layering [#369](https://github.com/AppQuality/unguess-design-system/pull/369) ([@marcbon](https://github.com/marcbon) [@sinatragianpaolo](https://github.com/sinatragianpaolo))
+- ✨ feat(highlight): add font-weight style to StyledWord in highlight component [#370](https://github.com/AppQuality/unguess-design-system/pull/370) ([@marcbon](https://github.com/marcbon))
+- feat: add random hue to new observation label in index.stories.tsx [#372](https://github.com/AppQuality/unguess-design-system/pull/372) ([@sinatragianpaolo](https://github.com/sinatragianpaolo))
+- 🔨 refactor(highlight/index.tsx): improve logic to find closest observation to word [#368](https://github.com/AppQuality/unguess-design-system/pull/368) ([@marcbon](https://github.com/marcbon) [@sinatragianpaolo](https://github.com/sinatragianpaolo))
+- 🔧 fix(player): update end time for second bookmark in index.stories.tsx [#371](https://github.com/AppQuality/unguess-design-system/pull/371) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 2
+
+- Gianpaolo Sinatra ([@sinatragianpaolo](https://github.com/sinatragianpaolo))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v3.1.95 (Fri May 24 2024)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -4045,12 +4045,15 @@ const activeBookMark = styled.css `
 const Rect = styled.styled.div `
   position: absolute;
   height: 110%;
-  background-color: ${({ hue, theme }) => hue || theme.palette.grey[800]};
+  background-color: ${({ hue, theme }) => getColor(hue || theme.palette.grey[800], undefined, undefined, 0.8)};
   z-index: 1;
   border-radius: 2px;
   &:hover {
     ${activeBookMark}
     border-radius: 4px;
+    background-color: ${({ hue, theme }) => hue || theme.palette.grey[800]};
+    cursor: pointer;
+    z-index: 2;
   }
   color: white;
   ${({ isActive }) => isActive && activeBookMark}
@@ -4501,6 +4504,15 @@ const StyledDiv$1 = styled__default["default"].div `
   display: flex;
   align-items: center;
 `;
+const CurrentTimeMarker = styled__default["default"].div `
+  width: 2px;
+  top: 0;
+  left: ${({ left }) => `${left}%`};
+  position: absolute;
+  height: 110%;
+  z-index: 1;
+  background-color: white;
+`;
 const Controls = ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpdated, i18n, }) => {
     var _a, _b, _c;
     const [progress, setProgress] = React.useState(0);
@@ -4587,7 +4599,7 @@ const Controls = ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpd
         }
     }, [debouncedMark, onBookMarkUpdated]);
     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$1, 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$1, Object.assign({ style: { width: "20%", justifyContent: "end" } }, { children: [jsxRuntime.jsx(Cutter, { onCutHandler: onCutHandler, isCutting: isCutting, i18n: i18n }), jsxRuntime.jsx(FullScreenButton, { container: container })] }))] })] })));
+                        (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.jsx(CurrentTimeMarker, { left: progress })] })), jsxRuntime.jsxs(ControlsBar, { children: [jsxRuntime.jsxs(StyledDiv$1, 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$1, Object.assign({ style: { width: "20%", justifyContent: "end" } }, { children: [jsxRuntime.jsx(Cutter, { onCutHandler: onCutHandler, isCutting: isCutting, i18n: i18n }), jsxRuntime.jsx(FullScreenButton, { container: container })] }))] })] })));
 };
 
 var _path$c;
@@ -5608,6 +5620,8 @@ const StyledWord = styled__default["default"](reactTypography.Span) `
       background-color: ${(_a = observation.hue) !== null && _a !== void 0 ? _a : getColor(theme.palette.azure, 700, undefined, 0.5)};
       color: ${(_b = observation.color) !== null && _b !== void 0 ? _b : "white"};
       box-sizing: border-box;
+      font-weight: ${theme.fontWeights.semibold};
+
       &:focus {
         outline: none;
       }
@@ -5671,12 +5685,20 @@ const Word = (props) => {
     const isActive = props.currentTime &&
         props.currentTime >= props.start &&
         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);
+    // Are there any observations containing this word?
+    const foundObservations = (_a = props.observations) === null || _a === void 0 ? void 0 : _a.map((obs) => (props.start >= obs.start && props.end <= obs.end) ? obs : null);
+    // Get the closer observation to the word
+    const observation = foundObservations === null || foundObservations === void 0 ? void 0 : foundObservations.reduce((prev, current) => {
+        if (!prev)
+            return current;
+        if (!current)
+            return prev;
+        return current.end - current.start < prev.end - prev.start ? current : prev;
+    }, null);
     if (props.tooltipContent !== undefined && !!observation) {
         return (jsxRuntime.jsx(Tooltip, Object.assign({ content: props.tooltipContent(observation), isTransparent: true }, { children: 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, { text: props.text }) })) : (jsxRuntime.jsx(Searchable, { text: props.text })), " "] })) })));
     }
-    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, { text: props.text }) })) : (jsxRuntime.jsx(Searchable, { text: props.text })), " "] })));
+    return (jsxRuntime.jsxs(StyledWord, Object.assign({}, props, { "data-start": props.start, "data-end": props.end, className: !!observation ? "highlighted" : "" }, (observation && { observation }), (!!observation ? { tag: "observation" } : {}), { children: [isActive ? (jsxRuntime.jsx(ActiveWord, { children: jsxRuntime.jsx(Searchable, { text: props.text }) })) : (jsxRuntime.jsx(Searchable, { text: props.text })), " "] })));
 };
 Highlight.Word = Word;
 

package/package.json

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