Merge pull request #886 from AppQuality/UTT-75-make-seek-play-a-play-button-again

Refactor Player and Transcript components

Author: cannarocks

src/pages/Video/components/Player.tsx

@@ -52,7 +52,7 @@ const CorePlayer = ({ video }: { video: GetVideosByVidApiResponse }) => {
   const [postVideoByVidObservations] = usePostVideosByVidObservationsMutation();
   const [patchObservation] = usePatchVideosByVidObservationsAndOidMutation();
   const [start, setStart] = useState<number | undefined>(undefined);
-  const { context } = usePlayerContext();
+  const { context, setIsPlaying } = usePlayerContext();
   const { currentTime } = context.player || { currentTime: 0 };
   const { addToast } = useToast();
 
@@ -124,9 +124,14 @@ const CorePlayer = ({ video }: { video: GetVideosByVidApiResponse }) => {
   );
 
   const seekPlayer = useCallback(
-    (time: number) => {
+    (time: number, forcePlay?: boolean) => {
       if (videoRef && videoRef.current) {
         videoRef.current.currentTime = time;
+
+        if (forcePlay) {
+          setIsPlaying(true);
+          videoRef.current.play();
+        }
       }
     },
     [videoRef]

src/pages/Video/components/Transcript.tsx

@@ -74,7 +74,7 @@ const Transcript = ({
 }: {
   currentTime: number;
   isSearchable: boolean;
-  setCurrentTime: (time: number) => void;
+  setCurrentTime: (time: number, forcePlay?: boolean) => void;
 }) => {
   const { t } = useTranslation();
   const { videoId } = useParams();
@@ -189,7 +189,7 @@ const Transcript = ({
                     start={p.start}
                     end={p.end}
                     speakerIndex={p.speaker || 0}
-                    setCurrentTime={setCurrentTime}
+                    setCurrentTime={(time) => setCurrentTime(time, true)}
                   >
                     {p.words.map((item, index) => (
                       <Highlight.Word