This commit is contained in:
Nick Mowen 2023-12-15 13:22:51 -07:00
parent d9c0798ab5
commit 9bc67e9ab8
2 changed files with 14 additions and 3 deletions

View File

@ -45,9 +45,11 @@ export default function CameraImage({
const aspectRatio = width / height; const aspectRatio = width / height;
const scaledHeight = useMemo(() => { const scaledHeight = useMemo(() => {
const scaledHeight = (aspectRatio < (fitAspect ?? 0)) ? Math.floor(containerHeight) : Math.floor(availableWidth / aspectRatio); const scaledHeight =
aspectRatio < (fitAspect ?? 0)
? Math.floor(containerHeight)
: Math.floor(availableWidth / aspectRatio);
const finalHeight = stretch ? scaledHeight : Math.min(scaledHeight, height); const finalHeight = stretch ? scaledHeight : Math.min(scaledHeight, height);
console.log("returning " + containerHeight + " for " + camera)
if (finalHeight > 0) { if (finalHeight > 0) {
return finalHeight; return finalHeight;
@ -83,7 +85,12 @@ export default function CameraImage({
}, [apiHost, canvasRef, name, img, searchParams, scaledHeight, config]); }, [apiHost, canvasRef, name, img, searchParams, scaledHeight, config]);
return ( return (
<div className={`relative w-full ${fitAspect && aspectRatio < fitAspect ? 'h-full flex justify-center' : ''}`} ref={containerRef}> <div
className={`relative w-full ${
fitAspect && aspectRatio < fitAspect ? "h-full flex justify-center" : ""
}`}
ref={containerRef}
>
{enabled ? ( {enabled ? (
<canvas <canvas
data-testid="cameraimage-canvas" data-testid="cameraimage-canvas"

View File

@ -79,6 +79,7 @@ function Camera({ camera }: { camera: CameraConfig }) {
<div> <div>
<Button <Button
variant="ghost" variant="ghost"
size="sm"
className={`${ className={`${
detectValue == "ON" ? "text-primary" : "text-gray-400" detectValue == "ON" ? "text-primary" : "text-gray-400"
}`} }`}
@ -88,6 +89,7 @@ function Camera({ camera }: { camera: CameraConfig }) {
</Button> </Button>
<Button <Button
variant="ghost" variant="ghost"
size="sm"
className={ className={
camera.record.enabled_in_config camera.record.enabled_in_config
? recordValue == "ON" ? recordValue == "ON"
@ -105,6 +107,7 @@ function Camera({ camera }: { camera: CameraConfig }) {
</Button> </Button>
<Button <Button
variant="ghost" variant="ghost"
size="sm"
className={`${ className={`${
snapshotValue == "ON" ? "text-primary" : "text-gray-400" snapshotValue == "ON" ? "text-primary" : "text-gray-400"
}`} }`}
@ -115,6 +118,7 @@ function Camera({ camera }: { camera: CameraConfig }) {
{camera.audio.enabled_in_config && ( {camera.audio.enabled_in_config && (
<Button <Button
variant="ghost" variant="ghost"
size="sm"
className={`${ className={`${
audioValue == "ON" ? "text-primary" : "text-gray-400" audioValue == "ON" ? "text-primary" : "text-gray-400"
}`} }`}