Merge pull request #2478 from stakwork/feature/player-ui

feat: changed icons for forward, backward

src/components/mindset/components/PlayerContols/index.tsx

@@ -1,8 +1,6 @@
 import { IconButton } from '@mui/material'
 import { useCallback } from 'react'
 import styled from 'styled-components'
-import ChevronLeftIcon from '~/components/Icons/ChevronLeftIcon'
-import ChevronRightIcon from '~/components/Icons/ChevronRightIcon.js'
 import PauseIcon from '~/components/Icons/PauseIcon'
 import PlayIcon from '~/components/Icons/PlayIcon'
 import { Flex } from '~/components/common/Flex'
@@ -31,10 +29,28 @@ export const PlayerControl = ({ markers }: Props) => {
     [playerRef],
   )
 
+  const handleRewind = () => {
+    if (playerRef) {
+      const newTime = playerRef.getCurrentTime() - 15
+
+      playerRef.seekTo(newTime, 'seconds')
+    }
+  }
+
+  const handleFastForward = () => {
+    if (playerRef) {
+      const newTime = playerRef.getCurrentTime() + 15
+
+      playerRef.seekTo(newTime, 'seconds')
+    }
+  }
+
   return showPlayer ? (
     <Wrapper>
       <Controls>
-        <ChevronLeftIcon />
+        <RewindIconWrapper onClick={handleRewind}>
+          <img alt="" src="public/RewindIcon.svg" />
+        </RewindIconWrapper>
         <Action
           data-testid="play-pause-button"
           onClick={(e) => {
@@ -45,7 +61,9 @@ export const PlayerControl = ({ markers }: Props) => {
         >
           {isPlaying ? <PauseIcon data-testid="pause-icon" /> : <PlayIcon data-testid="play-icon" />}
         </Action>
-        <ChevronRightIcon />
+        <ForwardIconWrapper onClick={handleFastForward}>
+          <img alt="" src="public/ForwardIcon.svg" />
+        </ForwardIconWrapper>
       </Controls>
       {true && (
         <ProgressBar
@@ -96,3 +114,26 @@ const Action = styled(IconButton)`
     overflow: hidden;
   }
 `
+
+const RewindIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 1px 0 0 1px;
+  cursor: pointer;
+  img {
+    width: 20px;
+    height: auto;
+  }
+`
+
+const ForwardIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  img {
+    width: 24px;
+    height: auto;
+  }
+`