feat: add fullscreen and exit fullscreen icons for video component

This commit is contained in:
2026-04-23 04:41:30 +10:00
parent e5e296ca98
commit 114435a56d

View File

@@ -4,6 +4,28 @@ import { Box, IconButton, Icon, Icons, Tooltip, TooltipProvider, Text } from 'fo
import * as css from './media.css';
import * as videoCss from './videoControls.css';
/**
* Fullscreen icon SVG
*/
function FullscreenIcon() {
return (
<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
</svg>
);
}
/**
* Exit fullscreen icon SVG
*/
function ExitFullscreenIcon() {
return (
<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" />
</svg>
);
}
type VideoProps = VideoHTMLAttributes<HTMLVideoElement> & {
disableControls?: boolean;
};
@@ -146,7 +168,7 @@ export const Video = forwardRef<HTMLVideoElement, VideoProps>(
>
<Icon
size="200"
src={isFullscreen ? Icons.Minus : Icons.Plus}
src={isFullscreen ? ExitFullscreenIcon : FullscreenIcon}
/>
</IconButton>
)}