From 7c9c13f2a332ceffd6f94e045c4ce300ce780e95 Mon Sep 17 00:00:00 2001
From: amass <168062547@qq.com>
Date: Mon, 19 Jun 2023 17:50:24 +0800
Subject: [PATCH] =?UTF-8?q?1.=E5=AE=8C=E6=88=90=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
=?UTF-8?q?=E5=92=8C=E4=B8=BB=E4=BD=93=E7=9A=84=E8=BF=87=E6=B8=A1=E5=8A=A8?=
=?UTF-8?q?=E7=94=BB=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package.json | 1 -
src/MainPage.js | 30 +++++++++++++++++++++++++++---
src/PlayerBar.js | 30 ++++++++++--------------------
src/RecordList.js | 11 ++++++++---
src/RecordLyrics.js | 4 +---
src/components/ProgressBar.js | 8 +++-----
6 files changed, 49 insertions(+), 35 deletions(-)
diff --git a/package.json b/package.json
index bc18133..3be8cd8 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
"react-cookie": "^4.1.1",
"react-dom": "^18.2.0",
"react-redux": "^8.0.7",
- "react-resize-detector": "^9.1.0",
"react-router-dom": "^6.11.2",
"react-scripts": "5.0.1",
"sha1": "^1.1.1",
diff --git a/src/MainPage.js b/src/MainPage.js
index 9a7d1f4..cfcec80 100644
--- a/src/MainPage.js
+++ b/src/MainPage.js
@@ -112,6 +112,8 @@ export default function () {
const accessToken = useSelector(state => state.user.accessToken);
const passportId = useSelector(state => state.user.passportId);
const currentTime = useSelector(state => state.recorder.currentTime);
+ const currentLyric = useSelector(state => state.recorder.currentLyric);
+ const [playerBarWidth, setPlayerBarWidth] = useState(0);
const [open, setOpen] = useState(true);
useEffect(() => {
yzs.get_record_list(accessToken, passportId).then(list => {
@@ -126,17 +128,39 @@ export default function () {
const onClick = () => {
setOpen(!open);
+ setPlayerBarWidth(document.documentElement.clientWidth - 240 - 48); // 防止中途底部出现scrollbar
}
+ const handleResize = () => {
+ console.log("innerWidth", document.documentElement.clientWidth, document.documentElement.clientWidth - (open ? 240 : 0) - 48)
+ setPlayerBarWidth(document.documentElement.clientWidth - (open ? 240 : 0) - 48);
+ }
+
+ const onTransitionEnd = () => {
+ handleResize();
+ }
+
+ useEffect(() => {
+ handleResize();
+ window.addEventListener('resize', handleResize);
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []);
+
+ useEffect(() => { handleResize(); }, [currentLyric]);
+
return
-
-
-
+
+
+
diff --git a/src/PlayerBar.js b/src/PlayerBar.js
index 4a64be3..60f6b72 100644
--- a/src/PlayerBar.js
+++ b/src/PlayerBar.js
@@ -1,8 +1,6 @@
import { MenuItem, Select, IconButton, Typography, Stack, Container } from "@mui/material"
-import styles from './PlayerBar.module.css';
import { useSelector, useDispatch } from 'react-redux'
import { useEffect, useRef, useState, useCallback } from "react";
-import { useResizeDetector } from 'react-resize-detector';
import pauseIcon from "./assets/play.png";
import playIcon from "./assets/pause.png";
import downloadIcon from "./assets/download.png";
@@ -18,10 +16,9 @@ const durationFormat = (time) => {
return hour.toString().padStart(2, '0') + ":" + minute.toString().padStart(2, '0') + ":" + second.toString().padStart(2, '0');
}
-export default function ({ currentTime }) {
+export default function ({ width, currentTime }) {
const dispatch = useDispatch();
const [duration, setDuration] = useState(0); // 秒，有小数点
- const [canvasWidth, setCanvasWidth] = useState(0);
const currentIndex = useSelector(state => state.recorder.currentIndex);
const recordList = useSelector(state => state.recorder.list);
const currentBlob = useSelector(state => state.recorder.currentBlob);
@@ -49,14 +46,6 @@ export default function ({ currentTime }) {
dispatch(setCurrentTime(player.current.currentTime));
}
- const onResize = useCallback((width, height) => {
- setCanvasWidth(width - 90 - 70);
- }, []);
-
- const { ref: playerBar } = useResizeDetector({
- onResize: onResize
- });
-
const seekRecord = (second) => {
player.current.currentTime = second;
}
@@ -81,23 +70,25 @@ export default function ({ currentTime }) {
-
-
+
+
-