Skip to content

fix: reset to default button audio slider #919

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aryanm9026 wants to merge 3 commits into
base: main
Choose a base branch
from
+55 −112
Open

fix: reset to default button audio slider #919

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c7e9cbf
Added and fixed the reset to default button in the audio speed contro…
aryanm9026 May 22, 2026
1f2a692
fix: add and fix the reset to default button in the audio speed contr…
aryanm9026 May 22, 2026
8efdfbe
Merge branch 'main' into fix/reset-to-default-button-audio-slider
aryanm9026 May 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 55 additions & 112 deletions src/components/AudioSpeedControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,158 +1,101 @@
"use client";

import { EditRecipe } from "@/lib/types"
import { SPEED_STEPS } from "@/lib/constants";
import { Volume2, VolumeX, Gauge, AlertTriangle } from "lucide-react";
import { cn } from "@/lib/utils";
import { useState, useEffect } from "react";
import { EditRecipe, SPEED_STEPS } from "@/lib/types";
import { Volume2, VolumeX, Gauge, RotateCcw } from "lucide-react";

interface Props {
recipe: EditRecipe;
onChange: (patch: Partial<EditRecipe>) => void;
}

export default function AudioSpeedControl({ recipe, onChange }: Props) {
const speedIndex = SPEED_STEPS.indexOf(recipe.speed as (typeof SPEED_STEPS)[number]);

const getSpeedDescription = (speed: number) => {
if (speed <= 0.5) return "Very Slow";
if (speed < 1) return "Slow";
if (speed === 1) return "Normal";
if (speed <= 1.5) return "Fast";
return "Very Fast";
};
const parentSpeedIndex = SPEED_STEPS.indexOf(recipe.speed as (typeof SPEED_STEPS)[number]);
const safeParentIndex = parentSpeedIndex === -1 ? 3 : parentSpeedIndex;

const isModified = recipe.speed !== 1 || !recipe.keepAudio;
const [localSpeedIndex, setLocalSpeedIndex] = useState(safeParentIndex);

useEffect(() => {
setLocalSpeedIndex(safeParentIndex);
}, [safeParentIndex]);

const isSpeedChanged = recipe.speed !== 1;

return (
<div className="space-y-4">
{isModified && (
<div className="flex justify-end animate-fade-in">
<button
type="button"
aria-label="Reset audio settings to default"
onClick={() => onChange({ speed: 1, keepAudio: true })}
className="text-sm font-heading font-semibold uppercase tracking-wider text-film-600 hover:text-film-700 hover:underline transition-all duration-150"
>
Reset to Default
</button>
</div>
)}

<button
type="button"
onClick={() => onChange({ keepAudio: !recipe.keepAudio })}
aria-label={recipe.keepAudio ? "Mute video audio (M)" : "Unmute video audio (M)"}
aria-pressed={recipe.keepAudio}
className={cn(
"w-full flex items-center gap-3 p-3 rounded-lg border transition-all duration-150",
"hover:scale-[1.01] active:scale-[0.99]",
recipe.keepAudio
className={`
w-full flex items-center gap-3 p-3 rounded-lg border transition-all duration-150
hover:scale-[1.01] active:scale-[0.99]
${recipe.keepAudio
? "border-film-300 bg-film-50 text-film-700"
: "border-[var(--border)] bg-[var(--surface)] text-[var(--muted)]"
)}
>
{recipe.keepAudio ? (
<Volume2 size={16} aria-hidden="true" />
) : (
<VolumeX size={16} aria-hidden="true" />
)}
}
`}
>
{recipe.keepAudio ? <Volume2 size={16} /> : <VolumeX size={16} />}
<span className="sr-only">
{recipe.keepAudio ? "Turn audio off" : "Turn audio on"}
</span>
<span className="text-sm font-heading font-semibold flex-1 text-left">
<span className="text-sm font-heading font-semibold">
{recipe.keepAudio ? "Audio on" : "Muted"}
</span>
<kbd
aria-hidden="true"
className="ml-auto text-[10px] font-mono px-1.5 py-0.5 rounded border border-current opacity-40"
>
M
</kbd>
</button>

<div>
<div className="flex items-center justify-between mb-2">
<label
id="speed-label"
htmlFor="speed-control"
className="text-sm font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-2"
>
<Gauge size={10} aria-hidden="true" /> Speed
<label className="text-[10px] font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-1">
<Gauge size={10} /> Speed
</label>

<div className="text-right">
<span className="text-sm font-heading font-bold text-film-600 block">
{recipe.speed}x
</span>
<span id="speed-description" className="text-sm text-[var(--muted)]">
{getSpeedDescription(recipe.speed)}
</span>
</div>
<span className="text-sm font-heading font-bold text-film-600">
{SPEED_STEPS[localSpeedIndex]}x
</span>
</div>
<input
id="speed-control"
type="range"
min={0}
max={SPEED_STEPS.length - 1}
step={1}
value={speedIndex === -1 ? 3 : speedIndex}
onChange={(e) => onChange({ speed: SPEED_STEPS[Number(e.target.value)] })}
aria-labelledby="speed-label"
aria-describedby="speed-description"
aria-valuetext={`${recipe.speed}x speed, ${getSpeedDescription(recipe.speed)}`}
className="w-full h-11 accent-film-600 cursor-pointer"
value={localSpeedIndex}
onChange={(e) => {
setLocalSpeedIndex(Number(e.target.value));
}}
onPointerUp={(e) => {
onChange({ speed: SPEED_STEPS[Number(e.currentTarget.value)] });
}}
onKeyUp={(e) => {
if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
onChange({ speed: SPEED_STEPS[Number(e.currentTarget.value)] });
}
}}
className="w-full accent-film-600 cursor-pointer"
/>
<div className="flex justify-between mt-1 overflow-hidden">
<div className="flex justify-between mt-1">
{SPEED_STEPS.map((s) => (
<span
key={s}
className="text-sm text-[var(--muted)] truncate text-center min-w-0 px-[1px]"
>
{s}x
</span>
<span key={s} className="text-[9px] text-[var(--muted)]">{s}x</span>
))}
</div>
</div>

{recipe.keepAudio && (
<div className="h-10 flex items-center justify-center">
<button
type="button"
onClick={() => onChange({ normalizeAudio: !recipe.normalizeAudio })}
aria-label={
recipe.normalizeAudio
? "Turn off audio normalization"
: "Turn on audio normalization"
}
aria-pressed={recipe.normalizeAudio}
aria-describedby="normalize-audio-description"
className={cn(
"w-full flex items-center gap-3 p-3 rounded-lg border transition-all duration-150",
"hover:scale-[1.01] active:scale-[0.99]",
recipe.normalizeAudio
? "border-film-300 bg-film-50 text-film-700"
: "border-[var(--border)] bg-[var(--surface)] text-[var(--muted)]"
)}
onClick={() => onChange({ speed: 1 })}
className={`
flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-film-600 hover:text-film-700
transition-all duration-300 ease-in-out
${isSpeedChanged
? "opacity-100 translate-y-0 scale-100 pointer-events-auto delay-200"
: "opacity-0 -translate-y-1 scale-95 pointer-events-none"
}
`}
>
<Gauge size={16} aria-hidden="true" />
<div className="flex-1 text-left">
<span className="text-sm font-heading font-semibold block">
Normalize Audio
</span>
<span id="normalize-audio-description" className="text-[10px] text-[var(--muted)]">
{recipe.normalizeAudio ? "–14 LUFS (streaming standard)" : "Off"}
</span>
</div>
<RotateCcw size={12} />
Reset to default
</button>
)}

{recipe.keepAudio && (recipe.trimStart !== 0 || recipe.trimEnd !== null) && (
<div role="note" className="mt-3 p-3 bg-amber-50 border border-amber-200 rounded text-sm text-amber-700 leading-relaxed flex items-start gap-2 animate-fade-in">
<AlertTriangle size={12} aria-hidden="true" className="shrink-0 mt-0.5" />
<p>
Note: If audio doesn&apos;t start within the selected range, the output will be silent.
</p>
</div>
)}
</div>
</div>
);
}
}
Loading