Merge pull request #335 from AppQuality/improve-player-bookmarks-usab…

…ility

Improve-player-bookmarks-usability

src/stories/player/_types.tsx

@@ -9,6 +9,12 @@ export interface PlayerArgs extends HTMLAttributes<HTMLVideoElement> {
   isCutting?: boolean;
   bookmarks?: IBookmark[];
   handleBookmarkUpdate?: (bookmark: IBookmark) => void;
+  i18n?: PlayerI18n;
+}
+
+export interface PlayerI18n {
+  beforeHighlight?: string;
+  onHighlight?: string;
 }
 
 export interface IBookmark {

src/stories/player/index.stories.tsx

@@ -129,7 +129,6 @@ WithBookmarks.args = {
       label: "110s - 160s",
     },
   ],
-
   handleBookmarkUpdate: (bookmark: IBookmark) => {
     console.log("Bookmark updated", bookmark);
   },

src/stories/player/index.tsx

@@ -73,6 +73,7 @@ const PlayerCore = forwardRef<HTMLVideoElement, PlayerArgs>(
             bookmarks={bookmarks}
             isCutting={isCutting}
             onBookMarkUpdated={props.handleBookmarkUpdate}
+            i18n={props.i18n}
           />
         </ProgressContextProvider>
       </Container>

src/stories/player/parts/bookmark.tsx

@@ -5,41 +5,24 @@ import { IBookmark } from "../_types";
 import { useProgressContext } from "./progressContext";
 import { ReactComponent as GripIcon } from "../../../assets/icons/grip.svg";
 
-const activeBookMark = css`
-  height: 250%;
-  transform: translateY(-30%);
-`;
-
-const Rect = styled.div<{ hue?: string; isActive?: boolean }>`
-  position: absolute;
-  height: 110%;
-  background-color: ${({ hue, theme }) => hue || theme.palette.grey[800]};
-  z-index: 1;
-  border-radius: 3px;
-  &:hover {
-    ${activeBookMark}
-  }
-  color: white;
-  ${({ isActive }) => isActive && activeBookMark}
-`;
-
 const StyledGrabber = styled.div<{ isEnd?: boolean }>`
   position: absolute;
+  display: none;
   ${({ isEnd }) =>
     isEnd
       ? `
     right: 0;
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
   `
       : `
     left: 0;
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
   `}
   height: 100%;
-  width: 6px;
-  background-color: ${({ theme }) => theme.palette.grey[800]};
+  width: 8px;
+  background-color: white;
   z-index: 2;
   cursor: ew-resize;
 
@@ -49,14 +32,39 @@ const StyledGrabber = styled.div<{ isEnd?: boolean }>`
     align-items: center;
     height: 100%;
     width: 100%;
+    color: ${({ theme }) => theme.palette.grey[500]};
     svg {
       width: auto;
       height: 50%;
-      fill: ${({ theme }) => theme.palette.grey[200]};
     }
   }
 `;
 
+const activeBookMark = css`
+  height: 250%;
+  transform: translateY(-30%);
+
+  ${StyledGrabber} {
+    display: block;
+  }
+`;
+
+const Rect = styled.div<{ hue?: string; isActive?: boolean }>`
+  position: absolute;
+  height: 110%;
+  background-color: ${({ hue, theme }) => hue || theme.palette.grey[800]};
+  z-index: 1;
+  border-radius: 2px;
+  &:hover {
+    ${activeBookMark}
+    border-radius: 4px;
+  }
+  color: white;
+  ${({ isActive }) => isActive && activeBookMark}
+
+  transition: width 0.1s ease;
+`;
+
 const Grabber = (props: {
   observation: IBookmark;
   isEnd?: boolean;
@@ -101,11 +109,7 @@ export const Bookmark = (props: IBookmark) => {
   if (start > videoEnd || start < videoStart) return null;
 
   return (
-    <Tooltip
-      content={label}
-      type={"light"}
-      size={"large"}
-    >
+    <Tooltip content={label} type={"light"} size={"large"}>
       <Rect
         isActive={activeBookmark && activeBookmark.id === props.id}
         hue={hue}

src/stories/player/parts/controls.tsx

@@ -2,7 +2,7 @@ import { useVideoContext } from "@appquality/stream-player";
 import { getColor } from "@zendeskgarden/react-theming";
 import { MouseEvent, useCallback, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
-import { IBookmark, WrapperProps } from "../_types";
+import { IBookmark, PlayerI18n, WrapperProps } from "../_types";
 import { AudioButton } from "./audioButton";
 import { Bookmark } from "./bookmark";
 import { ControlsGroupCenter } from "./controlsCenterGroup";
@@ -12,6 +12,7 @@ import { useProgressContext } from "./progressContext";
 import { TimeLabel } from "./timeLabel";
 import { PlayerTooltip } from "./tooltip";
 import { formatDuration } from "./utils";
+import { Cutter } from "./cutterButton";
 
 export const ControlsWrapper = styled.div<WrapperProps>`
   position: absolute;
@@ -53,12 +54,14 @@ export const Controls = ({
   bookmarks,
   isCutting,
   onBookMarkUpdated,
+  i18n,
 }: {
   container: HTMLDivElement | null;
   onCutHandler?: (time: number) => void;
   bookmarks?: IBookmark[];
   isCutting?: boolean;
   onBookMarkUpdated?: (bookmark: IBookmark) => void;
+  i18n?: PlayerI18n;
 }) => {
   const [progress, setProgress] = useState<number>(0);
   const [tooltipMargin, setTooltipMargin] = useState<number>(0);
@@ -209,12 +212,14 @@ export const Controls = ({
         <StyledDiv>
           <AudioButton />
         </StyledDiv>
-        <ControlsGroupCenter
-          onCutHandler={onCutHandler}
-          isCutting={isCutting}
-        />
+        <ControlsGroupCenter />
 
         <StyledDiv>
+          <Cutter
+            onCutHandler={onCutHandler}
+            isCutting={isCutting}
+            i18n={i18n}
+          />
           <FullScreenButton container={container} />
         </StyledDiv>
       </ControlsBar>

src/stories/player/parts/controlsCenterGroup.tsx

@@ -15,13 +15,7 @@ const StyledDiv = styled.div`
   align-items: center;
 `;
 
-export const ControlsGroupCenter = ({
-  onCutHandler,
-  isCutting,
-}: {
-  onCutHandler?: (time: number) => void;
-  isCutting?: boolean;
-}) => {
+export const ControlsGroupCenter = () => {
   const [playBackRate, setPlayBackRate] = useState<number>(1);
   const { context, togglePlay } = useVideoContext();
 
@@ -101,19 +95,6 @@ export const ControlsGroupCenter = ({
           {playBackRate}x
         </SM>
       </IconButton>
-      {onCutHandler && (
-        <IconButton
-          isBright
-          onClick={(e) => {
-            if (videoRef) {
-              onCutHandler(videoRef.currentTime);
-            }
-            e.stopPropagation();
-          }}
-        >
-          <SM isBold>{isCutting ? '🛑': '✂️'}</SM>
-        </IconButton>
-      )}
     </StyledDiv>
   );
 };

src/stories/player/parts/cutterButton.tsx

@@ -0,0 +1,41 @@
+import { useVideoContext } from "@appquality/stream-player";
+import { ReactComponent as TagIcon } from "../../../assets/icons/tag-stroke.svg";
+import { Button } from "../../buttons/button";
+import { PlayerI18n } from "../_types";
+
+export const Cutter = ({
+  onCutHandler,
+  isCutting,
+  i18n,
+}: {
+  onCutHandler?: (time: number) => void;
+  isCutting?: boolean;
+  i18n?: PlayerI18n;
+}) => {
+  const { context } = useVideoContext();
+
+  const videoRef = context.player?.ref.current;
+
+  if (!onCutHandler) return null;
+
+  return (
+    <Button
+      isPrimary
+      isAccent
+      size={"small"}
+      onClick={(e) => {
+        if (videoRef) {
+          onCutHandler(videoRef.currentTime);
+        }
+        e.stopPropagation();
+      }}
+    >
+      <Button.StartIcon>
+        <TagIcon />
+      </Button.StartIcon>
+      {isCutting
+        ? i18n?.onHighlight || "Click again to stop"
+        : i18n?.beforeHighlight || "New highlight"}
+    </Button>
+  );
+};

src/stories/player/parts/progress.tsx

@@ -15,7 +15,7 @@ interface ProgressProps {
 const StyledProgress = styled(Progress)`
   width: 100%;
   border-radius: 0;
-  color: ${({ theme }) => theme.palette.kale[700]};
+  color: ${({ theme }) => theme.palette.grey[700]};
   cursor: pointer;
   > div {
     border-radius: 0;