From c09b45a182025a3bb4cd949a38f1e6937833cb66 Mon Sep 17 00:00:00 2001
From: Binatik <sadxas999@mail.ru>
Date: Tue, 28 Jan 2025 01:44:12 +0300
Subject: [PATCH] feat: updating timer

---
 src/misc/dateTime.ts                          | 10 ++++
 .../attaches/AttachVoice/AttachVoice.css      | 12 ++++-
 .../attaches/AttachVoice/AttachVoice.tsx      | 49 ++++++++++++-------
 3 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/src/misc/dateTime.ts b/src/misc/dateTime.ts
index 3603dc8e..abadcb00 100644
--- a/src/misc/dateTime.ts
+++ b/src/misc/dateTime.ts
@@ -47,3 +47,13 @@ export function isPreviousDay(newerDate: Date, olderDate: Date) {
 
   return isSameDay(previousDate, olderDate)
 }
+
+export function formatTime(seconds: number) {
+  const minutes = Math.floor(seconds / 60)
+  const remainingSeconds = Math.floor(seconds % 60)
+
+  const formattedMinutes = String(minutes).padStart(1, '0')
+  const formattedSeconds = String(remainingSeconds).padStart(2, '0')
+
+  return `${formattedMinutes}:${formattedSeconds}`
+}
diff --git a/src/ui/messenger/attaches/AttachVoice/AttachVoice.css b/src/ui/messenger/attaches/AttachVoice/AttachVoice.css
index 47b14790..42bbe164 100644
--- a/src/ui/messenger/attaches/AttachVoice/AttachVoice.css
+++ b/src/ui/messenger/attaches/AttachVoice/AttachVoice.css
@@ -1,4 +1,4 @@
-.AttachVoice {
+.AttachVoice__top {
   display: flex;
   gap: 8px;
   color: var(--vkui--color_background_accent_themed);
@@ -19,3 +19,13 @@
   cursor: pointer;
   box-shadow: -100px 0 0 100px var(--vkui--color_background_accent_themed);
 }
+
+.AttachVoice__time {
+  display: block;
+  padding: 2px 0;
+  font: var(--messageDateFontSize) / var(--messageDateLineHeight) var(--fontFamily);
+}
+
+.AttachVoice__details {
+  color: black;
+}
diff --git a/src/ui/messenger/attaches/AttachVoice/AttachVoice.tsx b/src/ui/messenger/attaches/AttachVoice/AttachVoice.tsx
index 92c26030..2e658305 100644
--- a/src/ui/messenger/attaches/AttachVoice/AttachVoice.tsx
+++ b/src/ui/messenger/attaches/AttachVoice/AttachVoice.tsx
@@ -1,5 +1,6 @@
 import { defineComponent, InputEvent, shallowRef } from 'vue'
 import * as Attach from 'model/Attach'
+import { formatTime } from 'misc/dateTime'
 import { ButtonIcon } from 'ui/ui/ButtonIcon/ButtonIcon'
 import { Icon32PauseCircle, Icon32PlayCircle } from 'assets/icons'
 import './AttachVoice.css'
@@ -33,9 +34,9 @@ export const AttachVoice = defineComponent<Props>((props) => {
     const currentPosition = audio.currentTime - min
     const percentage = (currentPosition / diff) * 100
 
-    range.value = Math.round(percentage)
+    range.value = percentage
 
-    requestAnimationFrame(updateRange)
+    requestId.value = requestAnimationFrame(updateRange)
   }
 
   const toggleAudio = () => {
@@ -58,27 +59,37 @@ export const AttachVoice = defineComponent<Props>((props) => {
   }
 
   return () => {
-    console.log(range.value)
+    const getTime = () => {
+      return audio.currentTime === 0
+        ? formatTime(props.voice.duration)
+        : formatTime(audio.currentTime)
+    }
 
     return (
       <div class="AttachVoice">
-        <ButtonIcon onClick={toggleAudio} icon={
-          isPause.value ? <Icon32PauseCircle /> : <Icon32PlayCircle />
-        } />
-        <div class="AttachVoice__track">
-          <input
-            class="AttachVoice__range"
-            type="range"
-            id="track"
-            name="track"
-            value={range.value}
-            min="0"
-            max="100"
-            onChange={(event) => moveRange(event)}
-            onMousedown={() => (isRange.value = true)}
-            onMouseup={() => (isRange.value = false)}
-          />
+        <div class="AttachVoice__top">
+          <ButtonIcon onClick={toggleAudio} icon={
+            isPause.value ? <Icon32PauseCircle /> : <Icon32PlayCircle />
+          } />
+          <div class="AttachVoice__track">
+            <input
+              class="AttachVoice__range"
+              type="range"
+              id="track"
+              name="track"
+              value={range.value}
+              min="0"
+              max="100"
+              onChange={(event) => moveRange(event)}
+              onTouchstart={() => (isRange.value = true)}
+              onTouchend={() => (isRange.value = false)}
+              onMousedown={() => (isRange.value = true)}
+              onMouseup={() => (isRange.value = false)}
+            />
+            <span class="AttachVoice__time">{getTime()}</span>
+          </div>
         </div>
+        <div class="AttachVoice__bottom">Тут будет открывашка.</div>
       </div>
     )
   }