From bee94310d42c32fdfaa3be7cdec9e7d723f15e5d Mon Sep 17 00:00:00 2001
From: amass <168062547@qq.com>
Date: Mon, 19 Jun 2023 18:03:07 +0800
Subject: [PATCH] =?UTF-8?q?1.=E8=A7=A3=E5=86=B3=E9=9F=B3=E9=A2=91=E8=BF=87?=
 =?UTF-8?q?=E9=95=BFcanvas=E6=97=A0=E6=B3=95=E7=BB=98=E5=88=B6=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ProgressBar.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js
index e448b90..e9f5234 100644
--- a/src/components/ProgressBar.js
+++ b/src/components/ProgressBar.js
@@ -3,7 +3,6 @@ import { useRef, useCallback, useState, useEffect } from "react";
 const pointWidth = 2;
 const pointMargin = 3;
 
-const interval = 100; // ms
 const intervalsPerTag = 10;
 
 function timeTag(timepoint) {
@@ -27,7 +26,7 @@ const pointCoordinates = ({
         pointHeight, // height
     ]
 }
-function drawText(context, duration) {
+function drawText(context, duration, interval) {
     context.save();
     context.fillStyle = "red";
     context.textBaseline = "top";
@@ -54,7 +53,7 @@ function drawText(context, duration) {
 }
 
 const paintCanvas = ({
-    canvas, waveformData, duration, scrollLeft, leftPadding, canvasHeight, pointWidth, pointMargin,
+    canvas, waveformData, duration, scrollLeft, leftPadding, canvasHeight, pointWidth, pointMargin, interval
 }) => {
     // console.log("paintCanvas", duration, canvasHeight, canvas.width, scrollLeft);
     const context = canvas.getContext('2d');
@@ -62,7 +61,7 @@ const paintCanvas = ({
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.translate(leftPadding, 0);;
 
-    drawText(context, duration);    // 画刻度尺
+    drawText(context, duration, interval);    // 画刻度尺
 
     waveformData.forEach((p, i) => {
         context.beginPath()
@@ -83,6 +82,7 @@ const paintCanvas = ({
 
 // duration ms
 export default function ({ width, duration, currentTime, playing, seek, waveData }) {
+    const interval = (duration > 20 * 60 * 1000) ? 200 : 100; // ms
     const container = useRef(null);
     const canvas = useRef(null);
     const [scrollLeft, setScrollLeft] = useState(0);
@@ -130,6 +130,7 @@ export default function ({ width, duration, currentTime, playing, seek, waveData
             canvasHeight: canvas.current.height,
             pointWidth,
             pointMargin,
+            interval,
         })
     }, [duration, width, scrollLeft, waveData])