feat: add player play download button

guz86 · Sep 25, 2024 · 59eb218 · 59eb218
1 parent 796d5dd
commit 59eb218
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 26 deletions.
diff --git a/app/public/assets/close.png → app/public/assets/button-delete.png b/app/public/assets/close.png → app/public/assets/button-delete.png
diff --git a/app/public/assets/button-pause.png b/app/public/assets/button-pause.png
diff --git a/app/src/components/AudioRow/AudioRow.css b/app/src/components/AudioRow/AudioRow.css
@@ -1,6 +1,6 @@
 .row-audio {
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   align-items: center;
   gap: 12px;
   height: 48px;
@@ -30,22 +30,33 @@
 }
 
 .row-audio-line {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 164px;
+  width: 150px;
   height: 4px;
-  border-radius: 50px;
   background: rgb(173, 191, 223);
+  border-radius: 50px;
+  position: relative;
+  cursor: pointer;
+}
+
+.row-audio-line-progress {
+  height: 100%;
+  border-radius: inherit;
+  background: #2563eb;
 }
 
-.row-audio-download {
+.row-audio-download,
+.row-audio-clear {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-right: 50px;
 }
 
-.row-call-image {
-  padding: 6px;
+.row-audio-buttons {
+  display: flex;
+  gap: 10px;
+  padding-right: 20px;
+}
+
+.row-audio-length {
+  padding-left: 20px;
 }
diff --git a/app/src/components/AudioRow/AudioRow.tsx b/app/src/components/AudioRow/AudioRow.tsx
@@ -1,4 +1,5 @@
 import './AudioRow.css';
+import { useState, useEffect } from 'react';
 import { getCallRecord } from '../../utils/apiGetRecord';
 
 interface AudioRowProps {
@@ -14,33 +15,115 @@ const AudioRow: React.FC<AudioRowProps> = ({
   record,
   partnership_id,
 }) => {
-  if (!length) {
-    return null;
-  }
+  const [newAudio, setNewAudio] = useState<HTMLAudioElement | null>(null);
+  const [progress, setProgress] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
 
-  const handlePlay = async () => {
+  useEffect(() => {
+    if (newAudio) {
+      newAudio.addEventListener('timeupdate', updateProgress);
+      newAudio.addEventListener('ended', handleAudioEnd);
+
+      return () => {
+        newAudio.removeEventListener('timeupdate', updateProgress);
+        newAudio.removeEventListener('ended', handleAudioEnd);
+      };
+    }
+  }, [newAudio]);
+
+  const updateProgress = () => {
+    if (newAudio) {
+      const progress = (newAudio.currentTime / newAudio.duration) * 100;
+      setProgress(progress);
+    }
+  };
+
+  const handleAudioEnd = () => {
+    setIsPlaying(false);
+    setProgress(0);
+  };
+
+  const handlePlay = () => {
+    if (newAudio) {
+      if (isPlaying) {
+        newAudio.pause();
+      } else {
+        newAudio.play();
+      }
+      setIsPlaying(!isPlaying);
+    } else {
+      console.log('Звонок не был получен.');
+    }
+  };
+
+  const handleDownload = async () => {
     try {
       const audioUrl = await getCallRecord({ record, partnership_id });
-      console.log(audioUrl);
-      const newAudio = new Audio(audioUrl);
-
-      newAudio.play();
+      const audio = new Audio(audioUrl);
+      setNewAudio(audio);
+      setProgress(0);
     } catch (error) {
-      console.error('Ошибка при воспроизведении записи:', error);
+      console.error('Ошибка при загрузке записи:', error);
+    }
+  };
+
+  const handleClearAudio = () => {
+    if (newAudio) {
+      newAudio.pause();
+      newAudio.src = '';
+      setNewAudio(null);
+      setProgress(0);
+    }
+  };
+
+  const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const offsetX = e.clientX - rect.left;
+    const percentage = (offsetX / rect.width) * 100;
+    if (newAudio) {
+      newAudio.currentTime = (percentage / 100) * newAudio.duration;
+      setProgress(percentage);
     }
   };
 
   return (
     <>
-      {isHovered ? (
+      {isHovered && record ? (
         <div className="row-audio">
-          <div>{length}</div>
+          <div className="row-audio-length">{length}</div>
+
           <div className="row-audio-play" onClick={handlePlay}>
-            <img src="/assets/button-play.png" alt="play" />
+            <img
+              src={
+                isPlaying
+                  ? '/assets/button-pause.png'
+                  : '/assets/button-play.png'
+              }
+              alt="play"
+            />
           </div>
-          <div className="row-audio-line"></div>
-          <div className="row-audio-download">
-            <img src="/assets/button-download.png" alt="download" />
+
+          <div
+            className="row-audio-line"
+            onClick={handleSeek}
+            style={{
+              background: `linear-gradient(to right, #2563EB ${progress}%, rgb(173, 191, 223) ${progress}%)`,
+              width: '164px',
+              height: '4px',
+              borderRadius: '50px',
+            }}
+          ></div>
+
+          <div className="row-audio-buttons">
+            <div className="row-audio-download" onClick={handleDownload}>
+              <img src="/assets/button-download.png" alt="download" />
+            </div>
+
+            {newAudio && (
+              <div className="row-audio-clear" onClick={handleClearAudio}>
+                <img src="/assets/button-delete.png" alt="clear" />
+              </div>
+            )}
           </div>
         </div>
       ) : (

diff --git a/app/src/components/Filters/Filters.tsx b/app/src/components/Filters/Filters.tsx
@@ -116,7 +116,7 @@ const Filters: React.FC<FiltersProps> = ({
           {currentFilter !== 'Все типы' && (
             <div className="reset-filters-close" onClick={handleResetFilters}>
               <div className="reset-filters">Сбросить фильтры</div>
-              <img src="/assets/close.png" alt="close" />
+              <img src="/assets/button-delete.png" alt="close" />
             </div>
           )}
         </div>