forked from 77media/video-flow
87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { RectangleHorizontal, RectangleVertical } from "lucide-react";
|
|
|
|
export type AspectRatioValue =
|
|
| "VIDEO_ASPECT_RATIO_LANDSCAPE"
|
|
| "VIDEO_ASPECT_RATIO_PORTRAIT";
|
|
|
|
interface AspectRatioSelectorProps {
|
|
/** Current selected aspect ratio value */
|
|
value: AspectRatioValue;
|
|
/** Change handler when an option is selected */
|
|
onChange: (value: AspectRatioValue) => void;
|
|
/** Optional className to customize the trigger button */
|
|
className?: string;
|
|
/** Optional dropdown placement, defaults to top */
|
|
placement?: "top" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
|
|
/** data-alt tag for analytics/testing */
|
|
dataAlt?: string;
|
|
}
|
|
|
|
/**
|
|
* Aspect ratio selector using Antd Radio.Group with two options: landscape and portrait.
|
|
* Uses icons as button content and triggers onChange when selection changes.
|
|
* @param {AspectRatioValue} value - current selected value
|
|
* @param {(v: AspectRatioValue) => void} onChange - change handler
|
|
* @param {string} [className] - optional className for wrapper
|
|
* @param {string} [placement] - kept for backward compatibility (unused)
|
|
* @param {string} [dataAlt] - data-alt attribute for the wrapper
|
|
* @returns {JSX.Element}
|
|
*/
|
|
export const AspectRatioSelector = ({
|
|
value,
|
|
onChange,
|
|
className,
|
|
placement = "top",
|
|
dataAlt = "config-aspect-ratio",
|
|
}: AspectRatioSelectorProps) => {
|
|
return (
|
|
<div
|
|
data-alt={dataAlt}
|
|
role="radiogroup"
|
|
aria-label="aspect-ratio"
|
|
className={`inline-flex p-1 items-center rounded-[8px] bg-white/20 ${className || ""}`}
|
|
>
|
|
<button
|
|
type="button"
|
|
role="radio"
|
|
aria-checked={value === "VIDEO_ASPECT_RATIO_LANDSCAPE"}
|
|
onClick={() => onChange("VIDEO_ASPECT_RATIO_LANDSCAPE")}
|
|
className="outline-none rounded-[8px]"
|
|
>
|
|
<div
|
|
className={`flex items-center justify-center px-1 py-0.5 ${
|
|
value === "VIDEO_ASPECT_RATIO_LANDSCAPE"
|
|
? "bg-white/60 text-black rounded-[4px]"
|
|
: "bg-transparent text-white"
|
|
}`}
|
|
>
|
|
<RectangleHorizontal className="w-4 h-4" />
|
|
</div>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="radio"
|
|
aria-checked={value === "VIDEO_ASPECT_RATIO_PORTRAIT"}
|
|
onClick={() => onChange("VIDEO_ASPECT_RATIO_PORTRAIT")}
|
|
className="outline-none"
|
|
>
|
|
<div
|
|
className={`flex items-center justify-center px-1 py-0.5 ${
|
|
value === "VIDEO_ASPECT_RATIO_PORTRAIT"
|
|
? "bg-white/60 text-black rounded-[4px]"
|
|
: "bg-transparent text-white"
|
|
}`}
|
|
>
|
|
<RectangleVertical className="w-4 h-4" />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AspectRatioSelector;
|
|
|
|
|