fix up missing recording buttons in sm layout (#459)

enjoy/src/renderer/components/audios/audio-player.tsx

@@ -38,7 +38,7 @@ export const AudioPlayer = (props: { id?: string; md5?: string }) => {
 
       <div className={`${layout.lowerWrapper} flex flex-col`}>
         <div className={`${layout.playerWrapper} py-2 px-6`}>
-          <MediaCurrentRecording height={layout.playerHeight} />
+          <MediaCurrentRecording />
         </div>
 
         <div className={`${layout.playerWrapper} py-2 px-6`}>

enjoy/src/renderer/components/medias/media-current-recording.tsx

@@ -45,8 +45,7 @@ import { t } from "i18next";
 import { formatDuration } from "@renderer/lib/utils";
 import { useHotkeys } from "react-hotkeys-hook";
 
-export const MediaCurrentRecording = (props: { height?: number }) => {
-  const { height } = props;
+export const MediaCurrentRecording = () => {
   const {
     layout,
     isRecording,
@@ -238,11 +237,12 @@ export const MediaCurrentRecording = (props: { height?: number }) => {
     if (!ref.current) return;
     if (isRecording) return;
     if (!currentRecording?.src) return;
+    if (!layout?.playerHeight) return;
 
     const ws = WaveSurfer.create({
       container: ref.current,
       url: currentRecording.src,
-      height,
+      height: layout.playerHeight,
       barWidth: 2,
       cursorWidth: 1,
       autoCenter: true,
@@ -288,7 +288,7 @@ export const MediaCurrentRecording = (props: { height?: number }) => {
     return () => {
       ws?.destroy();
     };
-  }, [ref, currentRecording, isRecording, height]);
+  }, [ref, currentRecording, isRecording, layout?.playerHeight]);
 
   useEffect(() => {
     setIsComparing(false);
@@ -406,7 +406,7 @@ export const MediaCurrentRecording = (props: { height?: number }) => {
     [player]
   );
 
-  if (isRecording) return <MediaRecorder height={height} />;
+  if (isRecording) return <MediaRecorder />;
   if (!currentRecording?.src)
     return (
       <div className="h-full w-full flex items-center space-x-4">
@@ -477,7 +477,7 @@ export const MediaCurrentRecording = (props: { height?: number }) => {
         />
 
         {
-          height >= 192 && <>
+          layout?.name === 'lg' && <>
             <Button
               variant={isComparing ? "secondary" : "outline"}
               size="icon"
@@ -516,6 +516,27 @@ export const MediaCurrentRecording = (props: { height?: number }) => {
           </DropdownMenuTrigger>
 
           <DropdownMenuContent>
+            {
+              layout?.name === 'sm' && (
+                <>
+                  <DropdownMenuItem
+                    className="cursor-pointer"
+                    onClick={toggleCompare}
+                  >
+                    <GitCompareIcon className="w-4 h-4 mr-4" />
+                    <span>{t("compare")}</span>
+                  </DropdownMenuItem>
+
+                  <DropdownMenuItem
+                    className="cursor-pointer"
+                    onClick={() => setIsSelectingRegion(!isSelectingRegion)}
+                  >
+                    <TextCursorInputIcon className="w-4 h-4 mr-4" />
+                    <span>{t("selectRegion")}</span>
+                  </DropdownMenuItem>
+                </>
+              )
+            }
             <DropdownMenuItem
               className="cursor-pointer"
               onClick={() => setDetailIsOpen(true)}

enjoy/src/renderer/components/medias/media-recorder.tsx

@@ -11,9 +11,9 @@ import { toast } from "@renderer/components/ui";
 import { MediaRecordButton } from "@renderer/components";
 import { FFMPEG_CONVERT_WAV_OPTIONS } from "@/constants";
 
-export const MediaRecorder = (props: { height?: number }) => {
-  const { height = 192 } = props;
+export const MediaRecorder = () => {
   const {
+    layout,
     media,
     isRecording,
     setIsRecording,
@@ -80,11 +80,12 @@ export const MediaRecorder = (props: { height?: number }) => {
     if (!access) return;
     if (!isRecording) return;
     if (!ref.current) return;
+    if (!layout?.playerHeight) return;
 
     const ws = WaveSurfer.create({
       container: ref.current,
       fillParent: true,
-      height,
+      height: layout.playerHeight,
       autoCenter: false,
       normalize: false,
     });
@@ -123,9 +124,9 @@ export const MediaRecorder = (props: { height?: number }) => {
     return () => {
       clearInterval(interval);
       record.stopRecording();
-      ws.destroy();
+      ws?.destroy();
     };
-  }, [ref, isRecording, access]);
+  }, [ref, isRecording, access, layout?.playerHeight]);
 
   useEffect(() => {
     askForMediaAccess();

enjoy/src/renderer/components/videos/video-player.tsx

@@ -39,7 +39,7 @@ export const VideoPlayer = (props: { id?: string; md5?: string }) => {
 
       <div className={`${layout.lowerWrapper} flex flex-col`}>
         <div className={`${layout.playerWrapper} py-2 px-6`}>
-          <MediaCurrentRecording height={layout.playerHeight} />
+          <MediaCurrentRecording />
         </div>
 
         <div className={`${layout.playerWrapper} py-2 px-6`}>