Update info / waveform (#4)

* Prettier & i18n * Update info / waveforms * update ci.yml
fishaudio · Aug 19, 2024 · 6b706a0 · 6b706a0
1 parent 37636f8
commit 6b706a0
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 16 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -6,6 +6,7 @@ on:
 
 jobs:
   build:
+    name: Build text-labeler
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4

diff --git a/README.md b/README.md
@@ -1,10 +1,12 @@
 # Fish Audio Labeler
+
 [![Build](https://github.com/fishaudio/text-labeler/actions/workflows/ci.yml/badge.svg)](https://github.com/fishaudio/text-labeler/actions/workflows/ci.yml)
 
 [Cloudflare Pages Pages](https://text-labeler.pages.dev/)
 
 ## Run locally / 本地运行
-在 [Actions](https://github.com/fishaudio/text-labeler/actions/workflows/ci.yml) 中可以找到最新的构建产物, 下载并解压后, 直接运行会自动打开浏览器.  
+
+在 [Actions](https://github.com/fishaudio/text-labeler/actions/workflows/ci.yml) 中可以找到最新的构建产物, 下载并解压后, 直接运行会自动打开浏览器.
 
 You can find the latest build artifacts in [Actions](https://github.com/fishaudio/text-labeler/actions/workflows/ci.yml). After downloading and extracting them, running it directly will automatically open the browser.
 

diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@types/node": "18.11.18",
     "@types/react": "18.0.27",
     "@types/react-dom": "^18.0.10",
+    "@wavesurfer/react": "^1.0.7",
     "colormap": "^2.3.2",
     "eslint": "8.32.0",
     "eslint-config-next": "13.1.5",
@@ -27,7 +28,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-h5-audio-player": "^3.8.6",
-    "typescript": "4.9.4"
+    "typescript": "4.9.4",
+    "wavesurfer.js": "^7.8.4"
   },
   "devDependencies": {
     "@types/colormap": "^2.3.1",

diff --git a/src/components/AudioLabeler.tsx b/src/components/AudioLabeler.tsx
@@ -5,11 +5,13 @@ import {
   Stack,
   Switch,
   TextField,
+  Snackbar,
 } from "@mui/material";
 import AudioPlayer from "react-h5-audio-player";
 import "react-h5-audio-player/lib/styles.css";
 import PaperWithPadding from "./PaperWithPadding";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
+import { useWavesurfer } from "@wavesurfer/react";
 
 type AudioLabelerProps = {
   audio: string;
@@ -40,6 +42,9 @@ const AudioLabeler = ({
   const [autoPlay, setAutoPlay] = useState(true);
   const [autoNext, setAutoNext] = useState(true);
   const [tempText, setTempText] = useState(text);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState("");
+  const containerRef = useRef(null);
 
   useEffect(() => {
     setTempText(text);
@@ -78,6 +83,14 @@ const AudioLabeler = ({
     setAutoPlay(getBooleanFromLocalStorage("autoPlay", true));
   }, []);
 
+  const { wavesurfer, isPlaying, currentTime } = useWavesurfer({
+    container: containerRef,
+    height: 100,
+    waveColor: "#0BE3F7",
+    progressColor: "#0497EB",
+    url: audio,
+  });
+
   const onUpdateAutoPlay = (e: any) => {
     if (typeof window !== "undefined") {
       localStorage.setItem("autoPlay", e.target.checked);
@@ -96,16 +109,37 @@ const AudioLabeler = ({
     setTempText(e.target.value);
   };
 
+  const handleSnackbarClose = () => {
+    setSnackbarOpen(false);
+  };
+
+  const showSnackbar = (message: string) => {
+    setSnackbarMessage(message);
+    setSnackbarOpen(true);
+  };
+
+  const handleTimeUpdate = (e: any) => {
+    wavesurfer?.setTime(e.target.currentTime);
+  };
+
   const disabled = !audio;
 
   return (
     <Stack spacing={2}>
       <PaperWithPadding>
-        <AudioPlayer
-          autoPlay={false}
-          autoPlayAfterSrcChange={autoPlay}
-          src={audio}
-        />
+        <Stack spacing={2}>
+          <AudioPlayer
+            autoPlay={false}
+            autoPlayAfterSrcChange={autoPlay}
+            src={audio}
+            onListen={handleTimeUpdate}
+            onSeeking={handleTimeUpdate}
+            onSeeked={handleTimeUpdate}
+            progressUpdateInterval={100} // ms
+            listenInterval={100} // ms
+          />
+          <div ref={containerRef} style={{ margin: "1.25rem" }} />
+        </Stack>
       </PaperWithPadding>
       <PaperWithPadding>
         <FormGroup row>
@@ -129,7 +163,7 @@ const AudioLabeler = ({
             label="标签文本 / Label Text"
             multiline
             fullWidth
-            rows={2}
+            rows={4}
             onChange={onUpdateText}
             value={tempText}
             disabled={disabled}
@@ -138,20 +172,55 @@ const AudioLabeler = ({
       </PaperWithPadding>
       <PaperWithPadding>
         <Stack spacing={2} direction="row">
-          <Button variant="outlined" fullWidth onClick={() => onPrev(tempText)}>
+          <Button
+            variant="outlined"
+            fullWidth
+            onClick={() => {
+              onPrev(tempText);
+              showSnackbar("已切换到上一个 / Switched to PREV");
+            }}
+          >
             上一个 / PREV
           </Button>
-          <Button variant="outlined" fullWidth onClick={() => onNext(tempText)}>
+          <Button
+            variant="outlined"
+            fullWidth
+            onClick={() => {
+              onNext(tempText);
+              showSnackbar("已切换到下一个 / Switched to NEXT");
+            }}
+          >
             下一个 / NEXT {autoNext ? "(Enter)" : ""}
           </Button>
-          <Button variant="outlined" fullWidth onClick={() => onSave(tempText)}>
+          <Button
+            variant="outlined"
+            fullWidth
+            onClick={() => {
+              onSave(tempText);
+              showSnackbar("已保存 / Saved");
+            }}
+          >
             保存 / SAVE <br /> (Ctrl + S)
           </Button>
-          <Button variant="outlined" fullWidth onClick={onDelete} color="error">
+          <Button
+            variant="outlined"
+            fullWidth
+            onClick={() => {
+              onDelete();
+              showSnackbar("已删除 / Deleted");
+            }}
+            color="error"
+          >
             删除 / DELETE
           </Button>
         </Stack>
       </PaperWithPadding>
+      <Snackbar
+        open={snackbarOpen}
+        autoHideDuration={3000}
+        onClose={handleSnackbarClose}
+        message={snackbarMessage}
+      />
     </Stack>
   );
 };

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,3 +1,3 @@
 :root {
   background-color: aliceblue;
-}
+}
diff --git a/yarn.lock b/yarn.lock
@@ -648,6 +648,11 @@
     "@typescript-eslint/types" "5.49.0"
     eslint-visitor-keys "^3.3.0"
 
+"@wavesurfer/react@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.npmmirror.com/@wavesurfer/react/-/react-1.0.7.tgz#5bbb8fe8080f4478e896a32eeeb5ed111bbc4266"
+  integrity sha512-Bw2rd2zqVL1ERy8N9mciacbQW3N5Gn9oRjhq3kjqgtLeE8a1WSTU+4kU0E37541jf432eNZ8lNzuodFFSiNccw==
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz"
@@ -2891,6 +2896,11 @@ util-deprecate@^1.0.1:
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+wavesurfer.js@^7.8.4:
+  version "7.8.4"
+  resolved "https://registry.npmmirror.com/wavesurfer.js/-/wavesurfer.js-7.8.4.tgz#9a28f841102dd4019dca5c0bf01292ba4367800f"
+  integrity sha512-KhCCdts2sL/cjgsGWayvqTSagz55YauTvObzY5dgU9WXYddDUJ5rQwy/4MI/CNURfAjDL17kufOVbKgeIR5tZA==
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz"
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,6 +6,7 @@ on: @@
     jobs:
       build:
+        name: Build text-labeler
         runs-on: ubuntu-latest
         steps:
           - uses: actions/checkout@v4
@@ Expand Down @@