mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-15 00:33:44 +08:00
kuekhaoyang
a7480fb47a
- Implemented MobileVideoPlayer component for mobile video playback. - Added features such as play/pause, skip forward/backward, volume control, and fullscreen support. - Integrated double-tap gesture handling for skipping video. - Included hooks for screen orientation management and mobile detection. - Enhanced user experience with loading indicators and playback speed options.
55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: 'primary' | 'secondary';
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function Button({
|
|
variant = 'primary',
|
|
children,
|
|
className = '',
|
|
...props
|
|
}: ButtonProps) {
|
|
const baseStyles = "inline-flex items-center justify-center px-4 py-2.5 md:px-6 md:py-3 font-semibold text-sm md:text-base transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed min-h-[44px] touch-manipulation";
|
|
|
|
const variants = {
|
|
primary: `
|
|
bg-[var(--accent-color)]
|
|
text-white
|
|
border-none
|
|
rounded-[var(--radius-2xl)]
|
|
shadow-[0_2px_8px_color-mix(in_srgb,var(--shadow-color)_50%,transparent)]
|
|
hover:brightness-110
|
|
hover:shadow-[0_4px_12px_color-mix(in_srgb,var(--shadow-color)_70%,transparent)]
|
|
active:scale-[0.98]
|
|
active:brightness-95
|
|
`,
|
|
secondary: `
|
|
bg-[var(--glass-bg)]
|
|
backdrop-blur-xl
|
|
[-webkit-backdrop-filter:blur(25px)_saturate(180%)]
|
|
saturate-[180%]
|
|
border
|
|
border-[var(--glass-border)]
|
|
rounded-[var(--radius-2xl)]
|
|
text-[var(--text-color)]
|
|
shadow-[0_2px_8px_color-mix(in_srgb,var(--shadow-color)_50%,transparent)]
|
|
hover:brightness-110
|
|
hover:shadow-[0_4px_12px_color-mix(in_srgb,var(--shadow-color)_70%,transparent)]
|
|
active:scale-[0.98]
|
|
`,
|
|
};
|
|
|
|
return (
|
|
<button
|
|
className={`${baseStyles} ${variants[variant]} ${className}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
|