@appquality/unguess-design-system 3.1.102 → 3.1.103

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# v3.1.103 (Fri Jun 28 2024)
+
+#### 🐛 Bug Fix
+
+- release 20240628 [#399](https://github.com/AppQuality/unguess-design-system/pull/399) ([@iDome89](https://github.com/iDome89) [@marcbon](https://github.com/marcbon))
+- fix words in obs [#398](https://github.com/AppQuality/unguess-design-system/pull/398) ([@iDome89](https://github.com/iDome89))
+- Add highlited observations fix [#397](https://github.com/AppQuality/unguess-design-system/pull/397) ([@iDome89](https://github.com/iDome89))
+
+#### Authors: 2
+
+- [@iDome89](https://github.com/iDome89)
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v3.1.102 (Fri Jun 21 2024)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -4072,6 +4072,7 @@ const Rect = styled.styled.div `
   }
 
   ${({ isActive }) => isActive && activeBookMark}
+  ${({ isFocused }) => isFocused && activeBookMark}
 `;
 const StyledTooltip$1 = styled.styled(Tooltip) `
   margin-bottom: ${({ theme }) => theme.space.sm};
@@ -4103,7 +4104,7 @@ const Bookmark = (props) => {
     }
     if (start > videoEnd || start < videoStart)
         return null;
-    return (jsxRuntime.jsx(StyledTooltip$1, Object.assign({ content: tooltipContent, type: "light", size: "large", isTransparent: true }, { children: jsxRuntime.jsxs(Rect, Object.assign({ isActive: activeBookmark && activeBookmark.id === props.id, hue: hue, style: {
+    return (jsxRuntime.jsx(StyledTooltip$1, Object.assign({ content: tooltipContent, type: "light", size: "large", isTransparent: true }, { children: jsxRuntime.jsxs(Rect, Object.assign({ isActive: activeBookmark && activeBookmark.id === props.id, hue: hue, isFocused: props.isFocused, style: {
                 left: `${((start - videoStart) / duration) * 100}%`,
                 width: `${((end - start) / duration) * 100}%`,
             }, onClick: props.onClick }, { children: [jsxRuntime.jsx(Grabber, { observation: props }), jsxRuntime.jsx(Grabber, { isEnd: true, observation: props })] })) })));
@@ -5678,6 +5679,9 @@ const CreateObservationButton = styled.styled(Button) `
   z-index: ${({ theme }) => theme.levels.front};
 `;
 
+const getFocusedObs = (observations) => {
+    return observations.find((obs) => obs.isFocused);
+};
 const StyledWord = styled__default["default"].div `
   display: inline-block;
   font-size: ${({ theme, size }) => theme.fontSizes[size !== null && size !== void 0 ? size : "md"]};
@@ -5688,13 +5692,16 @@ const StyledWord = styled__default["default"].div `
 
   ${({ observations, theme }) => {
     var _a;
-    return observations && observations.length > 0 &&
+    return observations &&
+        observations.length > 0 &&
         `
       color: ${(_a = observations[observations.length - 1].color) !== null && _a !== void 0 ? _a : theme.palette.grey[600]};
       box-sizing: border-box;
-      font-weight: ${theme.fontWeights.semibold};
+      font-weight: ${getFocusedObs(observations)
+            ? theme.fontWeights.extrabold
+            : theme.fontWeights.semibold};
+      font-style: ${getFocusedObs(observations) ? "italic" : "normal"};
       z-index: 1;
-
       &:focus {
         outline: none;
       }
@@ -5768,9 +5775,7 @@ const Highlight = (props) => {
                     const range = activeSelection.getRangeAt(0);
                     const rects = range.getClientRects();
                     const lastRect = rects[rects.length - 1];
-                    const containerRect = ref && ref.current
-                        ? ref.current.getBoundingClientRect()
-                        : null;
+                    const containerRect = ref && ref.current ? ref.current.getBoundingClientRect() : null;
                     if (!lastRect || !containerRect)
                         return;
                     const relativeY = lastRect.bottom - containerRect.top + ref.current.scrollTop;
@@ -5819,12 +5824,14 @@ const Word = (props) => {
     // Are there any observations containing this word?
     const foundObservations = React.useMemo(() => {
         var _a, _b;
-        return (_b = (_a = props.observations) === null || _a === void 0 ? void 0 : _a.filter((obs) => props.start >= obs.start && props.end <= obs.end)) !== null && _b !== void 0 ? _b : [];
+        return (_b = (_a = props.observations) === null || _a === void 0 ? void 0 : _a.filter((obs) => Number(props.start.toFixed(8)) >= Number(obs.start.toFixed(8)) &&
+            Number(props.end.toFixed(8)) <= Number(obs.end.toFixed(8)))) !== null && _b !== void 0 ? _b : [];
     }, [props.observations, props.start, props.end]);
-    const ObsWord = React.useMemo(() => (jsxRuntime.jsxs(StyledWord, Object.assign({}, props, { "data-start": props.start, "data-end": props.end, className: foundObservations.length > 0 ? "highlighted" : "" }, (foundObservations && { observations: foundObservations }), { children: [foundObservations.length > 0 && foundObservations.map((obs) => {
-                var _a;
-                return (jsxRuntime.jsx(Layer, { color: (_a = obs.hue) !== null && _a !== void 0 ? _a : theme.palette.grey[600] }, obs.id));
-            }), isActive ? (jsxRuntime.jsx(ActiveWord, Object.assign({ "data-start": props.start, "data-end": props.end }, { children: jsxRuntime.jsx(Searchable, { text: props.text }) }))) : (jsxRuntime.jsx(Searchable, { text: props.text })), " "] }))), [props, foundObservations, isActive]);
+    const ObsWord = React.useMemo(() => (jsxRuntime.jsxs(StyledWord, Object.assign({}, props, { "data-start": props.start, "data-end": props.end, className: foundObservations.length > 0 ? "highlighted" : "" }, (foundObservations && { observations: foundObservations }), { children: [foundObservations.length > 0 &&
+                foundObservations.map((obs) => {
+                    var _a;
+                    return (jsxRuntime.jsx(Layer, { color: (_a = obs.hue) !== null && _a !== void 0 ? _a : theme.palette.grey[600] }, obs.id));
+                }), isActive ? (jsxRuntime.jsx(ActiveWord, Object.assign({ "data-start": props.start, "data-end": props.end }, { children: jsxRuntime.jsx(Searchable, { text: props.text }) }))) : (jsxRuntime.jsx(Searchable, { text: props.text })), " "] }))), [props, foundObservations, isActive]);
     if (props.tooltipContent !== undefined && foundObservations.length > 0) {
         return (jsxRuntime.jsx(Tooltip, Object.assign({ content: props.tooltipContent(foundObservations), isTransparent: true }, { children: ObsWord })));
     }

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

@@ -22,6 +22,7 @@ export interface IBookmark {
     hue?: string;
     label?: string;
     tooltipContent?: ReactNode;
+    isFocused?: boolean;
     onClick?: () => void;
     tags?: VideoTag[];
 }

package/package.json

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