{
const { media, transcription, generateTranscription } = useContext(
- MediaPlayerProviderContext
+ MediaShadowProviderContext
);
const [open, setOpen] = useState(false);
const [submiting, setSubmiting] = useState(false);
diff --git a/enjoy/src/renderer/components/videos/video-player.tsx b/enjoy/src/renderer/components/videos/video-player.tsx
index bace556c..1b10a2cd 100644
--- a/enjoy/src/renderer/components/videos/video-player.tsx
+++ b/enjoy/src/renderer/components/videos/video-player.tsx
@@ -1,14 +1,7 @@
import { useEffect, useContext } from "react";
-import { MediaPlayerProviderContext } from "@renderer/context";
-import {
- MediaLoadingModal,
- MediaCaption,
- MediaPlayerControls,
- MediaTabs,
- MediaCurrentRecording,
- MediaPlayer,
- LoaderSpin,
-} from "@renderer/components";
+import { MediaShadowProviderContext } from "@renderer/context";
+import { MediaShadowPlayer } from "@renderer/components";
+
import { useVideo } from "@renderer/hooks";
export const VideoPlayer = (props: {
@@ -17,13 +10,8 @@ export const VideoPlayer = (props: {
segmentIndex?: number;
}) => {
const { id, md5, segmentIndex } = props;
- const {
- media,
- setMedia,
- layout,
- setCurrentSegmentIndex,
- getCachedSegmentIndex,
- } = useContext(MediaPlayerProviderContext);
+ const { media, setMedia, setCurrentSegmentIndex, getCachedSegmentIndex } =
+ useContext(MediaShadowProviderContext);
const { video } = useVideo({ id, md5 });
const updateCurrentSegmentIndex = async () => {
@@ -45,38 +33,10 @@ export const VideoPlayer = (props: {
}, [media]);
if (!video) return null;
- if (!layout) return
;
return (
-
-
-
-
-
-
+
+
);
};
diff --git a/enjoy/src/renderer/components/videos/videos-component.tsx b/enjoy/src/renderer/components/videos/videos-component.tsx
index a2a47536..8f2746c1 100644
--- a/enjoy/src/renderer/components/videos/videos-component.tsx
+++ b/enjoy/src/renderer/components/videos/videos-component.tsx
@@ -3,7 +3,7 @@ import {
VideoCard,
VideosTable,
VideoEditForm,
- AddMediaButton,
+ MediaAddButton,
} from "@renderer/components";
import { t } from "i18next";
import {
@@ -225,7 +225,7 @@ export const VideosComponent = () => {
placeholder={t("search")}
onChange={(e) => setQuery(e.target.value)}
/>
-
+
diff --git a/enjoy/src/renderer/components/videos/videos-segment.tsx b/enjoy/src/renderer/components/videos/videos-segment.tsx
index 110a8bec..b42675e2 100644
--- a/enjoy/src/renderer/components/videos/videos-segment.tsx
+++ b/enjoy/src/renderer/components/videos/videos-segment.tsx
@@ -4,7 +4,7 @@ import {
AppSettingsProviderContext,
} from "@renderer/context";
import { Button, ScrollArea, ScrollBar } from "@renderer/components/ui";
-import { VideoCard, AddMediaButton } from "@renderer/components";
+import { VideoCard, MediaAddButton } from "@renderer/components";
import { t } from "i18next";
import { Link } from "react-router-dom";
@@ -62,7 +62,7 @@ export const VideosSegment = (props: { limit?: number }) => {
{videos.length === 0 ? (
) : (
diff --git a/enjoy/src/renderer/components/widgets/sentence.tsx b/enjoy/src/renderer/components/widgets/sentence.tsx
index d3f850bd..44a058c5 100644
--- a/enjoy/src/renderer/components/widgets/sentence.tsx
+++ b/enjoy/src/renderer/components/widgets/sentence.tsx
@@ -1,10 +1,17 @@
import { Vocabulary } from "@renderer/components";
+import { cn } from "@renderer/lib/utils";
-export const Sentence = ({ sentence }: { sentence: string }) => {
+export const Sentence = ({
+ sentence,
+ className,
+}: {
+ sentence: string;
+ className?: string;
+}) => {
let words = sentence.split(" ");
return (
-
+
{words.map((word, index) => {
return (
diff --git a/enjoy/src/renderer/context/chat-session-provider.tsx b/enjoy/src/renderer/context/chat-session-provider.tsx
index ce395da2..e82a3144 100644
--- a/enjoy/src/renderer/context/chat-session-provider.tsx
+++ b/enjoy/src/renderer/context/chat-session-provider.tsx
@@ -4,7 +4,7 @@ import { useAudioRecorder } from "react-audio-voice-recorder";
import {
AISettingsProviderContext,
AppSettingsProviderContext,
- MediaPlayerProvider,
+ MediaShadowProvider,
} from "@renderer/context";
import {
AlertDialog,
@@ -348,7 +348,7 @@ export const ChatSessionProvider = ({
onUpdateMessage,
}}
>
-
+
{children}
event.preventDefault()}
onInteractOutside={(event) => event.preventDefault()}
>
-
+
Shadow
@@ -428,7 +428,7 @@ export const ChatSessionProvider = ({
)}
-
+
);
};
diff --git a/enjoy/src/renderer/context/course-provider.tsx b/enjoy/src/renderer/context/course-provider.tsx
index f38f29f9..e0132643 100644
--- a/enjoy/src/renderer/context/course-provider.tsx
+++ b/enjoy/src/renderer/context/course-provider.tsx
@@ -9,7 +9,7 @@ import {
toast,
} from "@renderer/components/ui";
import {
- MediaPlayerProvider,
+ MediaShadowProvider,
AppSettingsProviderContext,
} from "@renderer/context";
import { ChevronDownIcon } from "lucide-react";
@@ -61,7 +61,7 @@ export const CourseProvider = ({
setShadowing,
}}
>
-
+
{children}
event.preventDefault()}
onInteractOutside={(event) => event.preventDefault()}
>
-
+
Shadow
@@ -88,7 +88,7 @@ export const CourseProvider = ({
-
+
);
};
diff --git a/enjoy/src/renderer/context/index.ts b/enjoy/src/renderer/context/index.ts
index 0bb2ab7a..a9ab0675 100644
--- a/enjoy/src/renderer/context/index.ts
+++ b/enjoy/src/renderer/context/index.ts
@@ -5,6 +5,6 @@ export * from "./chat-session-provider";
export * from "./course-provider";
export * from "./db-provider";
export * from "./hotkeys-settings-provider";
-export * from "./media-player-provider";
+export * from "./media-shadow-provider";
export * from "./theme-provider";
export * from "./dict-provider";
diff --git a/enjoy/src/renderer/context/media-player-provider.tsx b/enjoy/src/renderer/context/media-shadow-provider.tsx
similarity index 87%
rename from enjoy/src/renderer/context/media-player-provider.tsx
rename to enjoy/src/renderer/context/media-shadow-provider.tsx
index a65632f7..2f55449a 100644
--- a/enjoy/src/renderer/context/media-player-provider.tsx
+++ b/enjoy/src/renderer/context/media-shadow-provider.tsx
@@ -23,25 +23,14 @@ import { SttEngineOptionEnum } from "@/types/enums";
const ONE_MINUTE = 60;
const TEN_MINUTES = 10 * ONE_MINUTE;
-type MediaPlayerContextType = {
- layout: {
- name: string;
- width: number;
- height: number;
- wrapper: string;
- upperWrapper: string;
- lowerWrapper: string;
- playerWrapper: string;
- panelWrapper: string;
- playerHeight: number;
- };
+type MediaShadowContextType = {
media: AudioType | VideoType;
setMedia: (media: AudioType | VideoType) => void;
setMediaProvider: (mediaProvider: HTMLAudioElement | null) => void;
waveform: WaveFormDataType;
// wavesurfer
wavesurfer: WaveSurfer;
- setRef: (ref: any) => void;
+ setWaveformContainerRef: (ref: any) => void;
decoded: boolean;
decodeError: string;
setDecodeError: (error: string) => void;
@@ -85,6 +74,7 @@ type MediaPlayerContextType = {
// Recordings
startRecording: () => void;
stopRecording: () => void;
+ cancelRecording: () => void;
togglePauseResume: () => void;
recordingBlob: Blob;
isRecording: boolean;
@@ -109,31 +99,10 @@ type MediaPlayerContextType = {
setCachedSegmentIndex: (index: number) => void;
};
-export const MediaPlayerProviderContext =
- createContext(null);
+export const MediaShadowProviderContext =
+ createContext(null);
-const LAYOUT = {
- sm: {
- name: "sm",
- wrapper: "h-[calc(100vh-3.5rem)]",
- upperWrapper: "h-[calc(100vh-27.5rem)] min-h-64",
- lowerWrapper: "h-[23rem]",
- playerWrapper: "h-[9rem] mb-2",
- panelWrapper: "h-16 w-full z-10 sticky bottom-0",
- playerHeight: 128,
- },
- lg: {
- name: "lg",
- wrapper: "h-[calc(100vh-3.5rem)]",
- upperWrapper: "h-[calc(100vh-37.5rem)]",
- lowerWrapper: "h-[33rem]",
- panelWrapper: "h-20 w-full z-10 sticky bottom-0",
- playerWrapper: "h-[13rem] mb-4",
- playerHeight: 192,
- },
-};
-
-export const MediaPlayerProvider = ({
+export const MediaShadowProvider = ({
children,
}: {
children: React.ReactNode;
@@ -143,18 +112,6 @@ export const MediaPlayerProvider = ({
AppSettingsProviderContext
);
- const [layout, setLayout] = useState<{
- name: string;
- width: number;
- height: number;
- wrapper: string;
- upperWrapper: string;
- lowerWrapper: string;
- playerWrapper: string;
- panelWrapper: string;
- playerHeight: number;
- }>();
-
const [media, setMedia] = useState(null);
const [mediaProvider, setMediaProvider] = useState(
null
@@ -167,9 +124,9 @@ export const MediaPlayerProvider = ({
const [editingRegion, setEditingRegion] = useState(false);
const [pitchChart, setPitchChart] = useState(null);
- const [ref, setRef] = useState(null);
+ const [waveformContainerRef, setWaveformContainerRef] = useState(null);
- // Player state
+ // Player state
const [decoded, setDecoded] = useState(false);
const [decodeError, setDecodeError] = useState(null);
const [currentTime, setCurrentTime] = useState(0);
@@ -179,6 +136,7 @@ export const MediaPlayerProvider = ({
const [currentRecording, setCurrentRecording] = useState(null);
const [recordingType, setRecordingType] = useState("segment");
+ const [cancelingRecording, setCancelingRecording] = useState(false);
const [transcriptionDraft, setTranscriptionDraft] =
useState();
@@ -192,6 +150,10 @@ export const MediaPlayerProvider = ({
abortGenerateTranscription,
} = useTranscriptions(media);
+ const cancelRecording = () => {
+ setCancelingRecording(true);
+ };
+
const {
recordings,
fetchRecordings,
@@ -244,14 +206,20 @@ export const MediaPlayerProvider = ({
});
const initializeWavesurfer = async () => {
- if (!layout?.playerHeight) return;
if (!media) return;
if (!mediaProvider) return;
- if (!ref?.current) return;
+ if (!waveformContainerRef?.current) return;
+
+ const height =
+ waveformContainerRef.current.getBoundingClientRect().height - 10; // -10 to leave space for scrollbar
+ const container = waveformContainerRef.current.querySelector(
+ ".waveform-container"
+ );
+ if (!container) return;
const ws = WaveSurfer.create({
- container: ref.current,
- height: layout.playerHeight,
+ container: container as HTMLElement,
+ height,
waveColor: "#eaeaea",
progressColor: "#c0d6df",
cursorColor: "#ff0054",
@@ -290,6 +258,7 @@ export const MediaPlayerProvider = ({
if (!region) return;
if (!waveform?.frequencies?.length) return;
if (!wavesurfer) return;
+ if (!waveformContainerRef?.current) return;
const caption = transcription?.result?.timeline?.[currentSegmentIndex];
if (!caption) return;
@@ -304,6 +273,8 @@ export const MediaPlayerProvider = ({
);
const wrapper = (wavesurfer as any).renderer.getWrapper();
+ if (!wrapper) return;
+
// remove existing pitch contour
if (repaint) {
wrapper
@@ -315,6 +286,7 @@ export const MediaPlayerProvider = ({
// calculate offset and width
const wrapperWidth = wrapper.getBoundingClientRect().width;
+ const height = waveformContainerRef.current.getBoundingClientRect().height;
const offsetLeft = (region.start / duration) * wrapperWidth;
const width = ((region.end - region.start) / duration) * wrapperWidth;
@@ -324,7 +296,7 @@ export const MediaPlayerProvider = ({
const canvasId = options?.canvasId || `pitch-contour-${region.id}-canvas`;
canvas.id = canvasId;
canvas.style.width = `${width}px`;
- canvas.style.height = `${layout.playerHeight}px`;
+ canvas.style.height = `${height}px`;
pitchContourWidthContainer.appendChild(canvas);
pitchContourWidthContainer.style.position = "absolute";
@@ -332,7 +304,7 @@ export const MediaPlayerProvider = ({
pitchContourWidthContainer.style.left = "0";
pitchContourWidthContainer.style.width = `${width}px`;
- pitchContourWidthContainer.style.height = `${layout.playerHeight}px`;
+ pitchContourWidthContainer.style.height = `${height}px`;
pitchContourWidthContainer.style.marginLeft = `${offsetLeft}px`;
pitchContourWidthContainer.classList.add(
"pitch-contour",
@@ -446,25 +418,11 @@ export const MediaPlayerProvider = ({
);
};
- const calculateHeight = () => {
- if (window.innerHeight <= 1080) {
- setLayout({
- ...LAYOUT.sm,
- width: window.innerWidth,
- height: window.innerHeight,
- });
- } else {
- setLayout({
- ...LAYOUT.lg,
- width: window.innerWidth,
- height: window.innerHeight,
- });
+ const onRecorded = async (blob: Blob) => {
+ if (cancelingRecording) {
+ setCancelingRecording(false);
+ return;
}
- };
-
- const deboundeCalculateHeight = debounce(calculateHeight, 100);
-
- const createRecording = async (blob: Blob) => {
if (!blob) return;
if (!media) return;
if (!transcription?.result?.timeline) return;
@@ -555,12 +513,13 @@ export const MediaPlayerProvider = ({
* update fitZoomRatio when currentSegmentIndex is updated
*/
useEffect(() => {
- if (!ref?.current) return;
+ if (!waveformContainerRef?.current) return;
if (!wavesurfer) return;
if (!activeRegion) return;
- const containerWidth = ref.current.getBoundingClientRect().width;
+ const containerWidth =
+ waveformContainerRef.current.getBoundingClientRect().width;
const duration = activeRegion.end - activeRegion.start;
if (activeRegion.id.startsWith("word-region")) {
setFitZoomRatio(containerWidth / 3 / duration / minPxPerSec);
@@ -571,7 +530,7 @@ export const MediaPlayerProvider = ({
return () => {
setFitZoomRatio(1.0);
};
- }, [ref, wavesurfer, activeRegion]);
+ }, [waveformContainerRef, wavesurfer, activeRegion]);
/*
* Zoom chart when zoomRatio update
@@ -628,7 +587,7 @@ export const MediaPlayerProvider = ({
setDecoded(false);
setDecodeError(null);
};
- }, [media?.src, ref?.current, mediaProvider, layout?.playerHeight]);
+ }, [media?.src, waveformContainerRef?.current, mediaProvider]);
/* cache last segment index */
useEffect(() => {
@@ -639,18 +598,10 @@ export const MediaPlayerProvider = ({
}, [currentSegmentIndex]);
/*
- * Update layout when window is resized
* Abort transcription when component is unmounted
*/
useEffect(() => {
- calculateHeight();
-
- EnjoyApp.window.onResize(() => {
- deboundeCalculateHeight();
- });
-
return () => {
- EnjoyApp.window.removeListeners();
abortGenerateTranscription();
};
}, []);
@@ -659,9 +610,15 @@ export const MediaPlayerProvider = ({
* create recording when recordingBlob is updated
*/
useEffect(() => {
- createRecording(recordingBlob);
+ onRecorded(recordingBlob);
}, [recordingBlob]);
+ useEffect(() => {
+ if (cancelingRecording) {
+ stopRecording();
+ }
+ }, [cancelingRecording]);
+
/**
* auto stop recording when recording time is over
*/
@@ -677,14 +634,13 @@ export const MediaPlayerProvider = ({
return (
<>
-
{children}
-
-
+
+
);
};
diff --git a/enjoy/src/renderer/pages/audio.tsx b/enjoy/src/renderer/pages/audio.tsx
index efd01310..48ffb83f 100644
--- a/enjoy/src/renderer/pages/audio.tsx
+++ b/enjoy/src/renderer/pages/audio.tsx
@@ -3,7 +3,7 @@ import { AudioPlayer } from "@renderer/components";
import { Button } from "@renderer/components/ui";
import { ChevronLeftIcon } from "lucide-react";
import { t } from "i18next";
-import { MediaPlayerProvider } from "@renderer/context";
+import { MediaShadowProvider } from "@renderer/context";
export default () => {
const navigate = useNavigate();
@@ -13,17 +13,19 @@ export default () => {
return (
<>
-
-
+
+
- {t("shadowingAudio")}
+ {t("shadowingAudio")}
-
-
-
+
);
diff --git a/enjoy/src/renderer/pages/conversation.tsx b/enjoy/src/renderer/pages/conversation.tsx
index ba5f35f5..1da83d1e 100644
--- a/enjoy/src/renderer/pages/conversation.tsx
+++ b/enjoy/src/renderer/pages/conversation.tsx
@@ -17,7 +17,7 @@ import { t } from "i18next";
import {
DbProviderContext,
AppSettingsProviderContext,
- MediaPlayerProvider,
+ MediaShadowProvider,
} from "@renderer/context";
import { messagesReducer } from "@renderer/reducers";
import { v4 as uuidv4 } from "uuid";
@@ -268,7 +268,7 @@ export default () => {
-
+
@@ -315,7 +315,7 @@ export default () => {
)}
-
+
diff --git a/enjoy/src/renderer/pages/conversations.tsx b/enjoy/src/renderer/pages/conversations.tsx
index b8db30b2..8b974183 100644
--- a/enjoy/src/renderer/pages/conversations.tsx
+++ b/enjoy/src/renderer/pages/conversations.tsx
@@ -13,10 +13,7 @@ import {
SheetHeader,
SheetTitle,
} from "@renderer/components/ui";
-import {
- ConversationCard,
- ConversationForm,
-} from "@renderer/components";
+import { ConversationCard, ConversationForm } from "@renderer/components";
import { useState, useEffect, useContext, useReducer } from "react";
import { ChevronLeftIcon, LoaderIcon } from "lucide-react";
import { Link, useNavigate, useSearchParams } from "react-router-dom";
@@ -92,7 +89,7 @@ export default () => {
.findAll({
order: [["updatedAt", "DESC"]],
limit,
- offset: conversations.length,
+ offset: conversations?.length || 0,
})
.then((_conversations) => {
if (_conversations.length === 0) {
diff --git a/enjoy/src/renderer/pages/courses/index.tsx b/enjoy/src/renderer/pages/courses/index.tsx
index 03dd68e6..44896726 100644
--- a/enjoy/src/renderer/pages/courses/index.tsx
+++ b/enjoy/src/renderer/pages/courses/index.tsx
@@ -32,6 +32,7 @@ const CoursesList = () => {
const fetchCourses = async () => {
if (loading) return;
+ if (!webApi) return;
webApi
.courses({ page: nextPage, language: learningLanguage })
diff --git a/enjoy/src/renderer/pages/home.tsx b/enjoy/src/renderer/pages/home.tsx
index 457a5edf..5bddbcca 100644
--- a/enjoy/src/renderer/pages/home.tsx
+++ b/enjoy/src/renderer/pages/home.tsx
@@ -22,12 +22,14 @@ export default () => {
const { webApi } = useContext(AppSettingsProviderContext);
useEffect(() => {
+ if (!webApi) return;
+
webApi.config("ytb_channels").then((channels) => {
if (!channels) return;
setChannels(channels);
});
- }, []);
+ }, [webApi]);
return (
diff --git a/enjoy/src/renderer/pages/video.tsx b/enjoy/src/renderer/pages/video.tsx
index 2b859d56..1fc86165 100644
--- a/enjoy/src/renderer/pages/video.tsx
+++ b/enjoy/src/renderer/pages/video.tsx
@@ -3,7 +3,7 @@ import { VideoPlayer } from "@renderer/components";
import { Button } from "@renderer/components/ui";
import { ChevronLeftIcon } from "lucide-react";
import { t } from "i18next";
-import { MediaPlayerProvider } from "@renderer/context";
+import { MediaShadowProvider } from "@renderer/context";
export default () => {
const navigate = useNavigate();
@@ -13,17 +13,17 @@ export default () => {
return (
<>
-
-
+
+
{t("shadowingVideo")}
-
+
-
+
);