@appquality/unguess-design-system 3.1.91-alpha-marks → 3.1.91-highlighted-obs

package/build/index.js

@@ -4053,14 +4053,13 @@ const Rect = styled.styled.div `
     border-radius: 4px;
   }
   color: white;
+  ${({ isFocused }) => isFocused && activeBookMark}
   ${({ isActive }) => isActive && activeBookMark}
-
   transition: width 0.1s ease;
 `;
 const StyledTooltip$1 = styled.styled(Tooltip) `
   margin-bottom: ${({ theme }) => theme.space.sm};
   color: ${({ tooltipColor }) => tooltipColor};
-
 `;
 const Grabber = (props) => {
     const { observation } = props;
@@ -4087,7 +4086,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({ isFocused: props.isFocused, isActive: activeBookmark && activeBookmark.id === props.id, hue: hue, 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 })] })) })));
@@ -4512,6 +4511,9 @@ const Controls = ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpd
     const { context, setCurrentTime } = Video.useVideoContext();
     const debouncedMark = useDebounce(updatedMark, 500);
     const { reset, isGrabbing, activeBookmark, fromEnd } = useProgressContext();
+    React.useEffect(() => {
+        setMarks(bookmarks);
+    }, [bookmarks]);
     const relCurrentTime = ((_a = context.player) === null || _a === void 0 ? void 0 : _a.currentTime)
         ? ((_b = context.player) === null || _b === void 0 ? void 0 : _b.currentTime) - context.part.start
         : 0;
@@ -5601,9 +5603,11 @@ const StyledWord = styled__default["default"](reactTypography.Span) `
   ${({ observation, theme }) => {
     var _a, _b;
     return observation &&
-        ` user-select: none;
-      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"};
+        `font-weight: ${observation.isFocused && 500};
+      background-color: ${observation.isFocused
+            ? getColor(theme.palette.yellow, 300)
+            : (_a = observation.hue) !== null && _a !== void 0 ? _a : getColor(theme.palette.azure, 700, undefined, 0.5)};
+      color: ${observation.isFocused ? "black" : (_b = observation.color) !== null && _b !== void 0 ? _b : "white"};
       box-sizing: border-box;
       &:focus {
         outline: none;

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

@@ -23,6 +23,8 @@ export interface IBookmark {
     tooltipContent?: ReactNode;
     onClick?: () => void;
     tags?: VideoTag[];
+    isFocused?: boolean;
+    isActive?: boolean;
 }
 export interface WrapperProps {
     isPlaying?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.91-alpha-marks",
+  "version": "3.1.91-highlighted-obs",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",