Merge pull request #362 from AppQuality/player-colors

Player-colors

src/stories/highlight/demo-parts/transcript-diarization.tsx

@@ -1,5 +1,5 @@
 import { Highlight } from "..";
-import { formatDuration } from "../../player/parts/utils";
+import { formatDuration } from "../../player/utils";
 import { SM } from "../../typography/typescale";
 import { StoryArgs } from "../index.stories";
 import { DemoTranscript as demo } from "./data";

src/stories/highlight/demo-parts/transcript-paragraph.tsx

@@ -1,5 +1,5 @@
 import { Highlight } from "..";
-import { formatDuration } from "../../player/parts/utils";
+import { formatDuration } from "../../player/utils";
 import { SM } from "../../typography/typescale";
 import { StoryArgs } from "../index.stories";
 import { DemoTranscript as demo } from "./data";

src/stories/highlight/demo-parts/transcript-sentiment.tsx

@@ -1,6 +1,6 @@
 import { styled } from "styled-components";
 import { Highlight } from "..";
-import { formatDuration } from "../../player/parts/utils";
+import { formatDuration } from "../../player/utils";
 import { SM } from "../../typography/typescale";
 import { StoryArgs } from "../index.stories";
 import { DemoTranscript as demo, DemoSentiment } from "./data";

src/stories/highlight/index.tsx

@@ -34,7 +34,7 @@ const StyledWord = styled(ZendeskSpan)<
 
 const ActiveWord = styled.span`
   background-color: ${({ theme }) =>
-    getColor(theme.palette.fuschia, 700, undefined, 0.5)};
+    getColor(theme.palette.fuschia, 400, undefined, 0.4)};
   padding: 0 2px;
 `;
 
@@ -127,10 +127,10 @@ const Word = (props: WordProps) => {
         >
           {isActive ? (
             <ActiveWord>
-              <Searchable start={props.start} text={props.text} />
+              <Searchable text={props.text} />
             </ActiveWord>
           ) : (
-            <Searchable start={props.start} text={props.text} />
+            <Searchable text={props.text} />
           )}{" "}
         </StyledWord>
       </Tooltip>
@@ -148,10 +148,10 @@ const Word = (props: WordProps) => {
     >
       {isActive ? (
         <ActiveWord>
-          <Searchable start={props.start} text={props.text} />
+          <Searchable text={props.text} />
         </ActiveWord>
       ) : (
-        <Searchable start={props.start} text={props.text} />
+        <Searchable text={props.text} />
       )}{" "}
     </StyledWord>
   );

src/stories/highlight/searchable.tsx

@@ -3,13 +3,13 @@ import { useHighlightContext } from "./highlightContext";
 
 
 const StyledSearchWord = styled.span`
-background-color: ${({ theme }) => theme.palette.product.talk};
-color: ${({ theme }) => theme.palette.grey[700]};`;
+  background-color: ${({ theme }) => theme.palette.product.talk};
+  color: ${({ theme }) => theme.palette.grey[700]};
+`;
+
 export const Searchable = ({
-  start,
   text,
 }: {
-  start: number;
   text: string;
 }) => {
   const { searchTerm } = useHighlightContext();

src/stories/player/_types.tsx

@@ -25,9 +25,23 @@ export interface IBookmark {
   label?: string;
   tooltipContent?: ReactNode;
   onClick?: () => void;
+  tags: VideoTag[];
 }
 
 export interface WrapperProps {
   isPlaying?: boolean;
   isLoaded?: boolean;
 }
+
+type VideoTag = {
+  group: {
+    id: number;
+    name: string;
+  };
+  tag: {
+    id: number;
+    name: string;
+    style: string;
+    usageNumber: number;
+  };
+};

src/stories/player/index.tsx

@@ -5,7 +5,7 @@ import { Container } from "./parts/container";
 import { Controls } from "./parts/controls";
 import { FloatingControls } from "./parts/floatingControls";
 import { VideoSpinner } from "./parts/spinner";
-import { ProgressContextProvider } from "./parts/progressContext";
+import { ProgressContextProvider } from "./context/progressContext";
 
 /**
  * The Player is a styled media tag with custom controls

src/stories/player/parts/bookmark.tsx

@@ -2,7 +2,7 @@ import { useVideoContext } from "@appquality/stream-player";
 import { css, styled } from "styled-components";
 import { Tooltip } from "../../tooltip";
 import { IBookmark } from "../_types";
-import { useProgressContext } from "./progressContext";
+import { useProgressContext } from "../context/progressContext";
 import { ReactComponent as GripIcon } from "../../../assets/icons/grip.svg";
 
 const StyledGrabber = styled.div<{ isEnd?: boolean }>`

src/stories/player/parts/controls.tsx

@@ -8,10 +8,10 @@ import { ControlsGroupCenter } from "./controlsCenterGroup";
 import { Cutter } from "./cutterButton";
 import { FullScreenButton } from "./fullScreenButton";
 import { ProgressBar } from "./progress";
-import { useProgressContext } from "./progressContext";
+import { useProgressContext } from "../context/progressContext";
 import { TimeLabel } from "./timeLabel";
 import { PlayerTooltip } from "./tooltip";
-import { formatDuration } from "./utils";
+import { formatDuration } from "../utils";
 import useDebounce from "../../../hooks/useDebounce";
 
 export const ControlsWrapper = styled.div<WrapperProps>`

src/stories/player/parts/controlsCenterGroup.tsx

@@ -8,7 +8,7 @@ import { ReactComponent as PlayIcon } from "../../../assets/icons/play-fill.svg"
 import { ReactComponent as PreviousIcon } from "../../../assets/icons/previous-fill.svg";
 import { SM } from "../../typography/typescale";
 import { ControlButton } from "./controlButton";
-import { getNextPlaybackRate } from "./utils";
+import { getNextPlaybackRate } from "../utils";
 
 const StyledDiv = styled.div`
   display: flex;

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.grey[700]};
+  color: ${({ theme }) => theme.palette.grey[400]};
   cursor: pointer;
   > div {
     border-radius: 0;

src/stories/player/parts/timeLabel.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { SM } from "../../typography/typescale";
-import { formatDuration } from "./utils";
+import { formatDuration } from "../utils";
 
 const StyledDiv = styled.div`
   display: flex;