From 0fc5773653b4b6ec2b3c1c9ae354a3105d8e3630 Mon Sep 17 00:00:00 2001 From: an-lee Date: Sat, 7 Dec 2024 13:45:01 +0800 Subject: [PATCH] Fix media play (#1230) * fix media player * clean code * refactor UI --- .../renderer/components/layouts/layout.tsx | 5 ++- .../media-player-controls.tsx | 36 ++++++++++--------- .../components/medias/media-loading-modal.tsx | 3 -- ...onunciation-assessment-fulltext-result.tsx | 6 ++-- .../pronunciation-assessment-word-result.tsx | 2 +- .../recordings/recording-detail.tsx | 3 +- .../renderer/components/ui/alert-dialog.tsx | 14 +++++--- enjoy/src/renderer/components/ui/dialog.tsx | 14 +++++--- enjoy/src/renderer/components/ui/sheet.tsx | 18 +++++++--- .../widgets/lookup/lookup-widget.tsx | 3 -- 10 files changed, 63 insertions(+), 41 deletions(-) diff --git a/enjoy/src/renderer/components/layouts/layout.tsx b/enjoy/src/renderer/components/layouts/layout.tsx index 9d624542..b223763c 100644 --- a/enjoy/src/renderer/components/layouts/layout.tsx +++ b/enjoy/src/renderer/components/layouts/layout.tsx @@ -27,7 +27,10 @@ export const Layout = () => {
-
+
diff --git a/enjoy/src/renderer/components/medias/media-bottom-panel/media-player-controls.tsx b/enjoy/src/renderer/components/medias/media-bottom-panel/media-player-controls.tsx index 4f9b8381..8afe4824 100644 --- a/enjoy/src/renderer/components/medias/media-bottom-panel/media-player-controls.tsx +++ b/enjoy/src/renderer/components/medias/media-bottom-panel/media-player-controls.tsx @@ -303,31 +303,32 @@ export const MediaPlayerControls = () => { }), regions.on("region-out", (region) => { - if (region !== activeRegion && region !== segmentRegion) return; + if (region.id !== activeRegion?.id) return; if (playMode === "all" || isLoopPausing.current) return; // Pause immediately wavesurfer.pause(); - // Use a more reliable loop mechanism - if (playMode === "loop") { - // Ensure we're at the start before playing - wavesurfer.setTime(parseFloat(region.start.toFixed(6))); - isLoopPausing.current = true; + // Use requestAnimationFrame to prevent recursion + requestAnimationFrame(() => { + if (playMode === "loop") { + // Set time and play with proper guards + if (!isLoopPausing.current) { + isLoopPausing.current = true; + wavesurfer.setTime(parseFloat(region.start.toFixed(6))); - // Small delay to ensure time is set before playing - setTimeout(() => { - isLoopPausing.current = false; - if (playMode === "loop") { - wavesurfer.play(); + setTimeout(() => { + isLoopPausing.current = false; + if (playMode === "loop") { + wavesurfer.play(); + } + }, 500); } - }, 500); - } else if (playMode === "single") { - requestAnimationFrame(() => { + } else if (playMode === "single") { wavesurfer.setTime(parseFloat(region.start.toFixed(6))); wavesurfer.setScrollTime(parseFloat(region.start.toFixed(6))); - }); - } + } + }); }), ]; @@ -488,6 +489,9 @@ export const MediaPlayerControls = () => { activeRegion.id.startsWith("word-region") || activeRegion.id.startsWith("segment-region") ) { + if (!wavesurfer.isPlaying()) { + wavesurfer.setTime(parseFloat(activeRegion.start.toFixed(6))); + } setZoomRatio(fitZoomRatio); } }, [activeRegion, fitZoomRatio]); diff --git a/enjoy/src/renderer/components/medias/media-loading-modal.tsx b/enjoy/src/renderer/components/medias/media-loading-modal.tsx index b3a972d3..0bf454dd 100644 --- a/enjoy/src/renderer/components/medias/media-loading-modal.tsx +++ b/enjoy/src/renderer/components/medias/media-loading-modal.tsx @@ -7,7 +7,6 @@ import { AlertDialogTitle, AlertDialogContent, AlertDialogFooter, - AlertDialogOverlay, Button, Tabs, TabsContent, @@ -16,7 +15,6 @@ import { } from "@renderer/components/ui"; import { CircleAlertIcon, LoaderIcon } from "lucide-react"; import { t } from "i18next"; -import { useNavigate } from "react-router-dom"; import { TranscriptionCreateForm, TranscriptionsList } from "../transcriptions"; import { SttEngineOptionEnum } from "@/types/enums"; @@ -25,7 +23,6 @@ export const MediaLoadingModal = () => { return ( - {t("preparingAudio")} diff --git a/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-fulltext-result.tsx b/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-fulltext-result.tsx index 857963b1..aaa4bbed 100644 --- a/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-fulltext-result.tsx +++ b/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-fulltext-result.tsx @@ -3,14 +3,16 @@ import { useState, useEffect } from "react"; import { PronunciationAssessmentWordResult } from "@renderer/components"; import { Switch, ScrollArea } from "@renderer/components/ui"; import { InfoIcon } from "lucide-react"; +import { cn } from "@renderer/lib/utils"; export const PronunciationAssessmentFulltextResult = (props: { words: PronunciationAssessmentWordResultType[]; currentTime?: number; src?: string; onPlayOrigin?: (word: string, index: number) => void; + className?: string; }) => { - const { words, currentTime, src, onPlayOrigin } = props; + const { words, currentTime, src, onPlayOrigin, className } = props; const [errorStats, setErrorStats] = useState({ mispronunciation: 0, omission: 0, @@ -56,7 +58,7 @@ export const PronunciationAssessmentFulltextResult = (props: { }, []); return ( - +
{words.map((result, index: number) => ( diff --git a/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-word-result.tsx b/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-word-result.tsx index 905726c1..1ebc8754 100644 --- a/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-word-result.tsx +++ b/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-word-result.tsx @@ -140,7 +140,7 @@ export const PronunciationAssessmentWordResult = (props: {
- +
{t("score")}: diff --git a/enjoy/src/renderer/components/recordings/recording-detail.tsx b/enjoy/src/renderer/components/recordings/recording-detail.tsx index 84bf54cf..6c581a68 100644 --- a/enjoy/src/renderer/components/recordings/recording-detail.tsx +++ b/enjoy/src/renderer/components/recordings/recording-detail.tsx @@ -62,7 +62,7 @@ export const RecordingDetail = (props: { return (
-
+
, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - - + React.ComponentPropsWithoutRef & { + container?: HTMLElement; + } +>(({ className, container, ...props }, ref) => ( + + , - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( - + React.ComponentPropsWithoutRef & { + container?: HTMLElement; + } +>(({ className, children, container, ...props }, ref) => ( + , VariantProps { displayClose?: boolean; + container?: HTMLElement; } const SheetContent = React.forwardRef< @@ -60,14 +61,23 @@ const SheetContent = React.forwardRef< SheetContentProps >( ( - { side = "right", displayClose = true, className, children, ...props }, + { + side = "right", + displayClose = true, + className, + children, + container, + ...props + }, ref ) => ( - - + + {children} diff --git a/enjoy/src/renderer/components/widgets/lookup/lookup-widget.tsx b/enjoy/src/renderer/components/widgets/lookup/lookup-widget.tsx index 0fd0e9b4..4eaf9328 100644 --- a/enjoy/src/renderer/components/widgets/lookup/lookup-widget.tsx +++ b/enjoy/src/renderer/components/widgets/lookup/lookup-widget.tsx @@ -239,8 +239,6 @@ export const VocabularyPronunciationAssessment = (props: { word: string }) => { }; const onRecorded = async (blob: Blob) => { - console.log(blob); - if (!blob) return; let recording: RecordingType; @@ -283,7 +281,6 @@ export const VocabularyPronunciationAssessment = (props: { word: string }) => { useEffect(() => { if (recording) { - console.log(recording); audio.current = new Audio(recording.src); }