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

Fea: add hotkey for compare function (#483)

Browse Source 
* add hotkey for compare function

* remove duplicate hotkeys

* add id="media-compare-button" to small layout
This commit is contained in:
Harry
2024-04-03 21:12:23 -07:00
committed by GitHub
parent 0a10909dcc
commit 096a7395b2
3 changed files with 57 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -320,7 +320,7 @@ export const MediaCurrentRecording = () => {
}
const subscriptions = [
regions.on("region-created", () => { }),
regions.on("region-created", () => {}),
regions.on("region-clicked", (region, e) => {
e.stopPropagation();
@@ -476,11 +476,12 @@ export const MediaCurrentRecording = () => {
setIsRecording={setIsRecording}
/>
{
layout?.name === 'lg' && <>
{layout?.name === "lg" && (
<>
<Button
variant={isComparing ? "secondary" : "outline"}
size="icon"
id="media-compare-button"
data-tooltip-id="media-player-tooltip"
data-tooltip-content={t("compare")}
className="rounded-full w-8 h-8 p-0"
@@ -500,13 +501,14 @@ export const MediaCurrentRecording = () => {
<TextCursorInputIcon className="w-4 h-4" />
</Button>
</>
}
)}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
size="icon"
id="media-compare-button"
data-tooltip-id="media-player-tooltip"
data-tooltip-content={t("more")}
className="rounded-full w-8 h-8 p-0"
@@ -516,43 +518,42 @@ export const MediaCurrentRecording = () => {
</DropdownMenuTrigger>
<DropdownMenuContent>
{
layout?.name === 'sm' && (
<>
<DropdownMenuItem
className="cursor-pointer"
onClick={toggleCompare}
>
<GitCompareIcon className="w-4 h-4 mr-4" />
<span>{t("compare")}</span>
</DropdownMenuItem>
{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={() => setIsSelectingRegion(!isSelectingRegion)}
>
<TextCursorInputIcon className="w-4 h-4 mr-4" />
<span>{t("selectRegion")}</span>
</DropdownMenuItem>
</>
)}
<DropdownMenuItem
className="cursor-pointer"
onClick={() => setDetailIsOpen(true)}
>
<GaugeCircleIcon
className={`w-4 h-4 mr-4
${currentRecording.pronunciationAssessment
? currentRecording.pronunciationAssessment
.pronunciationScore >= 80
? "text-green-500"
: currentRecording.pronunciationAssessment
.pronunciationScore >= 60
? "text-yellow-600"
: "text-red-500"
: ""
}
${
currentRecording.pronunciationAssessment
? currentRecording.pronunciationAssessment
.pronunciationScore >= 80
? "text-green-500"
: currentRecording.pronunciationAssessment
.pronunciationScore >= 60
? "text-yellow-600"
: "text-red-500"
: ""
}
`}
/>
<span>{t("pronunciationAssessment")}</span>

14
enjoy/src/renderer/components/medias/media-player-controls.tsx
View File

@@ -372,7 +372,7 @@ export const MediaPlayerControls = () => {
}, [wavesurfer, decoded, playMode, activeRegion, currentTime]);
useHotkeys(
["Space", "p", "n", "r"],
["Space", "p", "n", "r", "c"],
(keyboardEvent, hotkeyEvent) => {
if (!wavesurfer) return;
keyboardEvent.preventDefault();
@@ -390,6 +390,9 @@ export const MediaPlayerControls = () => {
case "r":
document.getElementById("media-record-button").click();
break;
case "c":
document.getElementById("media-compare-button").click();
break;
}
},
[wavesurfer]
@@ -481,10 +484,11 @@ export const MediaPlayerControls = () => {
{PLAYBACK_RATE_OPTIONS.map((rate, i) => (
<div
key={i}
className={`cursor-pointer h-10 w-10 leading-10 rounded-full flex items-center justify-center ${rate === playbackRate
? "bg-primary text-white text-md"
: "text-black/70 text-xs"
}`}
className={`cursor-pointer h-10 w-10 leading-10 rounded-full flex items-center justify-center ${
rate === playbackRate
? "bg-primary text-white text-md"
: "text-black/70 text-xs"
}`}
onClick={() => {
setPlaybackRate(rate);
}}

13
enjoy/src/renderer/components/preferences/hotkeys.tsx
View File

@@ -84,7 +84,20 @@ export const Hotkeys = () => {
n
</kbd>
</div>
<Separator />
<div className="flex items-center justify-between py-4">
<div className="flex items-center space-x-2 capitalize">
{t("compare")}
</div>
<kbd className="bg-muted px-2 py-1 rounded-md text-sm text-muted-foreground">
c
</kbd>
</div>
<Separator />
</div>
</>
);