lostecho/everyone-can-use-english
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: make notes on caption (#544)

Browse Source 
* add segment model

* add note model

* db handle segment & note

* add notes & segments handler

* refactor media caption components

* segment & note create

* fix type

* update note column & may sync

* display selected words for note

* refactor selected words

* auto select words when editing note

* refactor

* refactor caption component

* display notes

* refactor notes components

* fix

* refactor segment & notes into context

* destroy note

* update locale

* fix caption switch issue

* fix layout

* refactor caption layout

* remove deprecated code

* may share note

* improve UI

* fix notes list auto update after created

* remove console.log

* add notes page

* refactor note parameters

* refactor components

* mark note on transcription

* handle no notes

* improve style

* improve style

* show context menu on selection text

* fix utils
This commit is contained in:
an-lee
2024-04-26 15:05:36 +08:00
committed by GitHub
parent 5740b2635c
commit 0644c3bbd7
58 changed files with 2586 additions and 677 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
enjoy/src/renderer/components/audios/audio-player.tsx
View File

@@ -11,9 +11,15 @@ import {
} from "@renderer/components";
import { useAudio } from "@renderer/hooks";
export const AudioPlayer = (props: { id?: string; md5?: string }) => {
const { id, md5 } = props;
const { setMedia, layout } = useContext(MediaPlayerProviderContext);
export const AudioPlayer = (props: {
id?: string;
md5?: string;
segmentIndex?: number;
}) => {
const { id, md5, segmentIndex } = props;
const { setMedia, layout, setCurrentSegmentIndex } = useContext(
MediaPlayerProviderContext
);
const { audio } = useAudio({ id, md5 });
useEffect(() => {
@@ -21,12 +27,17 @@ export const AudioPlayer = (props: { id?: string; md5?: string }) => {
setMedia(audio);
}, [audio]);
useEffect(() => {
if (!segmentIndex) return;
setCurrentSegmentIndex(segmentIndex);
}, []);
if (!layout) return <LoaderSpin />;
return (
<div data-testid="audio-player" className={layout.wrapper}>
<div className={`${layout.upperWrapper} mb-4`}>
<div className="grid grid-cols-5 xl:grid-cols-3 gap-6 px-6 h-full">
<div className="grid grid-cols-5 xl:grid-cols-3 gap-3 xl:gap-6 px-3 xl:px-6 h-full">
<div
className={`col-span-2 xl:col-span-1 rounded-lg border shadow-lg ${layout.upperWrapper}`}
>
@@ -39,11 +50,11 @@ export const AudioPlayer = (props: { id?: string; md5?: string }) => {
</div>
<div className={`flex flex-col`}>
<div className={`${layout.playerWrapper} py-2 px-6`}>
<div className={`${layout.playerWrapper} py-2 px-3 xl:px-6`}>
<MediaCurrentRecording />
</div>
<div className={`${layout.playerWrapper} py-2 px-6`}>
<div className={`${layout.playerWrapper} py-2 px-3 xl:px-6`}>
<MediaPlayer />
</div>