mirror of
https://github.com/webadderallorg/Recordly.git
synced 2026-09-26 07:45:34 +00:00
feat(setting): hide zoom and speed setting, only show when select track
This commit is contained in:
Mahdy Arief
@@ -793,8 +793,6 @@ export function SettingsPanel({
|
||||
</div>
|
||||
);
|
||||
|
||||
const zoomEnabled = Boolean(selectedZoomDepth);
|
||||
const trimEnabled = Boolean(selectedTrimId);
|
||||
|
||||
const handleDeleteClick = () => {
|
||||
if (selectedZoomId && onZoomDelete) {
|
||||
@@ -1951,46 +1949,42 @@ export function SettingsPanel({
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0 border-t border-white/10 bg-[#151518] p-4 pt-3">
|
||||
<div className="mb-4">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-slate-200">{tSettings("zoom.level")}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{zoomEnabled && selectedZoomDepth && (
|
||||
<span className="rounded-full bg-[#2563EB]/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-[#2563EB]">
|
||||
{ZOOM_DEPTH_OPTIONS.find((o) => o.depth === selectedZoomDepth)?.label}
|
||||
</span>
|
||||
)}
|
||||
<div className={cn(
|
||||
"flex-shrink-0 border-t border-white/10 bg-[#151518] p-4 pt-3",
|
||||
!selectedZoomId && !selectedTrimId && !selectedSpeedId && "hidden"
|
||||
)}>
|
||||
{selectedZoomId && (
|
||||
<div className="mb-4">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-slate-200">{tSettings("zoom.level")}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{selectedZoomDepth && (
|
||||
<span className="rounded-full bg-[#2563EB]/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-[#2563EB]">
|
||||
{ZOOM_DEPTH_OPTIONS.find((o) => o.depth === selectedZoomDepth)?.label}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-6 gap-1.5">
|
||||
{ZOOM_DEPTH_OPTIONS.map((option) => {
|
||||
const isActive = selectedZoomDepth === option.depth;
|
||||
return (
|
||||
<Button
|
||||
key={option.depth}
|
||||
type="button"
|
||||
onClick={() => onZoomDepthChange?.(option.depth)}
|
||||
className={cn(
|
||||
"h-auto w-full rounded-lg border px-1 py-2 text-center shadow-sm transition-all duration-200 ease-out cursor-pointer",
|
||||
isActive
|
||||
? "border-[#2563EB] bg-[#2563EB] text-white"
|
||||
: "border-white/5 bg-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10 hover:text-slate-200",
|
||||
)}
|
||||
>
|
||||
<span className="text-xs font-semibold">{option.label}</span>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-6 gap-1.5">
|
||||
{ZOOM_DEPTH_OPTIONS.map((option) => {
|
||||
const isActive = selectedZoomDepth === option.depth;
|
||||
return (
|
||||
<Button
|
||||
key={option.depth}
|
||||
type="button"
|
||||
disabled={!zoomEnabled}
|
||||
onClick={() => onZoomDepthChange?.(option.depth)}
|
||||
className={cn(
|
||||
"h-auto w-full rounded-lg border px-1 py-2 text-center shadow-sm transition-all duration-200 ease-out",
|
||||
zoomEnabled ? "opacity-100 cursor-pointer" : "opacity-40 cursor-not-allowed",
|
||||
isActive
|
||||
? "border-[#2563EB] bg-[#2563EB] text-white"
|
||||
: "border-white/5 bg-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10 hover:text-slate-200",
|
||||
)}
|
||||
>
|
||||
<span className="text-xs font-semibold">{option.label}</span>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{!zoomEnabled && (
|
||||
<p className="mt-2 text-center text-[10px] text-slate-500">
|
||||
{tSettings("zoom.selectRegion")}
|
||||
</p>
|
||||
)}
|
||||
{zoomEnabled && (
|
||||
<Button
|
||||
onClick={handleDeleteClick}
|
||||
variant="destructive"
|
||||
@@ -2000,8 +1994,11 @@ export function SettingsPanel({
|
||||
<Trash2 className="h-3 w-3" />
|
||||
{tSettings("zoom.deleteZoom")}
|
||||
</Button>
|
||||
)}
|
||||
{trimEnabled && (
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedTrimId && !selectedZoomId && (
|
||||
<div className="mb-4">
|
||||
<Button
|
||||
onClick={handleTrimDeleteClick}
|
||||
variant="destructive"
|
||||
@@ -2011,51 +2008,42 @@ export function SettingsPanel({
|
||||
<Trash2 className="h-3 w-3" />
|
||||
{tSettings("trim.deleteRegion")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-slate-200">
|
||||
{tSettings("speed.playbackSpeed")}
|
||||
</span>
|
||||
{selectedSpeedId && selectedSpeedValue && (
|
||||
<span className="rounded-full bg-[#d97706]/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-[#d97706]">
|
||||
{SPEED_OPTIONS.find((o) => o.speed === selectedSpeedValue)?.label ??
|
||||
`${selectedSpeedValue}×`}
|
||||
{selectedSpeedId && (
|
||||
<div>
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-slate-200">
|
||||
{tSettings("speed.playbackSpeed")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-7 gap-1.5">
|
||||
{SPEED_OPTIONS.map((option) => {
|
||||
const isActive = selectedSpeedValue === option.speed;
|
||||
return (
|
||||
<Button
|
||||
key={option.speed}
|
||||
type="button"
|
||||
disabled={!selectedSpeedId}
|
||||
onClick={() => onSpeedChange?.(option.speed)}
|
||||
className={cn(
|
||||
"h-auto w-full rounded-lg border px-1 py-2 text-center shadow-sm transition-all duration-200 ease-out",
|
||||
selectedSpeedId
|
||||
? "opacity-100 cursor-pointer"
|
||||
: "opacity-40 cursor-not-allowed",
|
||||
isActive
|
||||
? "border-[#d97706] bg-[#d97706] text-white"
|
||||
: "border-white/5 bg-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10 hover:text-slate-200",
|
||||
)}
|
||||
>
|
||||
<span className="text-xs font-semibold">{option.label}</span>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{!selectedSpeedId && (
|
||||
<p className="mt-2 text-center text-[10px] text-slate-500">
|
||||
{tSettings("speed.selectRegion")}
|
||||
</p>
|
||||
)}
|
||||
{selectedSpeedId && (
|
||||
{selectedSpeedValue && (
|
||||
<span className="rounded-full bg-[#d97706]/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-[#d97706]">
|
||||
{SPEED_OPTIONS.find((o) => o.speed === selectedSpeedValue)?.label ??
|
||||
`${selectedSpeedValue}×`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-7 gap-1.5">
|
||||
{SPEED_OPTIONS.map((option) => {
|
||||
const isActive = selectedSpeedValue === option.speed;
|
||||
return (
|
||||
<Button
|
||||
key={option.speed}
|
||||
type="button"
|
||||
onClick={() => onSpeedChange?.(option.speed)}
|
||||
className={cn(
|
||||
"h-auto w-full rounded-lg border px-1 py-2 text-center shadow-sm transition-all duration-200 ease-out cursor-pointer",
|
||||
isActive
|
||||
? "border-[#d97706] bg-[#d97706] text-white"
|
||||
: "border-white/5 bg-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10 hover:text-slate-200",
|
||||
)}
|
||||
>
|
||||
<span className="text-xs font-semibold">{option.label}</span>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => selectedSpeedId && onSpeedDelete?.(selectedSpeedId)}
|
||||
variant="destructive"
|
||||
@@ -2065,9 +2053,10 @@ export function SettingsPanel({
|
||||
<Trash2 className="h-3 w-3" />
|
||||
{tSettings("speed.deleteRegion")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user