From 21f81d56e5c3f68dc19ab3e6c5c1ddc5c0e9ed87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?=
 <rasul.sahibjanli@gmail.com>
Date: Wed, 27 Nov 2024 19:42:36 +0300
Subject: [PATCH] feat: changed icons for forward, backward

---
 public/ForwardIcon.svg                        |  5 ++
 public/RewindIcon.svg                         |  5 ++
 .../components/PlayerContols/index.tsx        | 49 +++++++++++++++++--
 3 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 public/ForwardIcon.svg
 create mode 100644 public/RewindIcon.svg

diff --git a/public/ForwardIcon.svg b/public/ForwardIcon.svg
new file mode 100644
index 000000000..6bfe75d26
--- /dev/null
+++ b/public/ForwardIcon.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M15.9604 10.83H12.9004L12.1404 13.12H14.4304C15.2704 13.12 15.9604 13.8 15.9604 14.65C15.9604 15.49 15.2804 16.18 14.4304 16.18H12.1404M9.54034 16.17V10.83L8.04034 12.5M13.9803 4.46997L12.0004 2M19.0904 7.79999C20.2004 9.27999 20.8904 11.11 20.8904 13.11C20.8904 18.02 16.9104 22 12.0004 22C7.09037 22 3.11035 18.02 3.11035 13.11C3.11035 8.19999 7.09037 4.21997 12.0004 4.21997C12.6804 4.21997 13.3403 4.31002 13.9803 4.46002"
+        stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/public/RewindIcon.svg b/public/RewindIcon.svg
new file mode 100644
index 000000000..6a20c89cd
--- /dev/null
+++ b/public/RewindIcon.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M13.9604 9.83002H10.9004L10.1404 12.12H12.4304C13.2704 12.12 13.9604 12.8 13.9604 13.65C13.9604 14.49 13.2804 15.18 12.4304 15.18H10.1404M7.54034 15.17V9.83002L6.04034 11.5M8.02039 3.46997L10.0004 1M2.91034 6.79999C1.80034 8.27999 1.11035 10.11 1.11035 12.11C1.11035 17.02 5.09037 21 10.0004 21C14.9104 21 18.8904 17.02 18.8904 12.11C18.8904 7.19999 14.9104 3.21997 10.0004 3.21997C9.32037 3.21997 8.66039 3.31002 8.02039 3.46002"
+        stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/src/components/mindset/components/PlayerContols/index.tsx b/src/components/mindset/components/PlayerContols/index.tsx
index 6f825dd08..9ba8f0e89 100644
--- a/src/components/mindset/components/PlayerContols/index.tsx
+++ b/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;
+  }
+`