diff --git a/src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CameraCapture.scss b/src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CameraCapture.scss index f58e12ad76..0dde27642f 100644 --- a/src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CameraCapture.scss +++ b/src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CameraCapture.scss @@ -1,10 +1,14 @@ @import "scss/colours.scss"; @import "scss/site-refresh.scss"; +@import "scss/_breakpoint.scss"; +@import "scss/breakpoints.scss"; .fy-camera-capture-modal { // background: red; - width: 75vh; - height: 75vh; + width: 85vw; + aspect-ratio: 1/1; + max-height: 95vh; + // height: 75vh; position: relative; @@ -51,6 +55,13 @@ width: 50%; display: flex; justify-content: center; + gap: 1rem; + align-items: center; + // justify-content: space-between; + + @include breakpoint($under992) { + width: 75%; + } } .fy-camera-capture-record-toggle { @@ -123,19 +134,18 @@ position: absolute; } - .fy-camera-capture-float-button { + .fy-camera-capture-preview-actions { position: absolute; + display: flex; top: 1rem; + left: 1rem; + gap: 1rem; - &:first-of-type { - left: 1rem; - } - - &:last-of-type { - margin: auto; - width: fit-content; + @include breakpoint($under768) { + justify-content: center; + top: 4.5rem; left: 0; - right: 0; + width: 100%; } } } diff --git a/src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CameraCapture.tsx b/src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CameraCapture.tsx index 0772e4ee55..d0761eb350 100644 --- a/src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CameraCapture.tsx +++ b/src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CameraCapture.tsx @@ -4,7 +4,12 @@ import { a, TransitionFn, useSpring, useTransition } from "@react-spring/web"; import { WorkIndicator } from "components/svg"; import { useInterval, useMediaUploader } from "hooks"; import { UploaderResponse } from "components/entities/EntityTypes"; -import { Button, ModalUtilities, Spinner } from "components/common"; +import { + Button, + ModalUtilities, + Spinner, + SegmentButtons, +} from "components/common"; import { faClose } from "@fortawesome/pro-solid-svg-icons"; import CapturePreview from "./CapturePreview"; import "./CameraCapture.scss"; @@ -24,6 +29,7 @@ export default function CameraCapture({ const [counter, counterSet] = useState(0); const [blob, blobSet] = useState(null); const [cameraStarted, cameraStartedSet] = useState(false); + const [cameraPosition, cameraPositionSet] = useState("user"); const hours = Math.floor(counter / 3600); const minutes = Math.floor((counter - hours * 3600) / 60); @@ -119,6 +125,15 @@ export default function CameraCapture({ leave: { opacity: 0, transform: `translateX(${5}rem)` }, }); + const supports = navigator.mediaDevices.getSupportedConstraints(); + + const cameraOptions = [ + { label: "Selfie camera", value: "user" }, + { label: "Rear camera", value: "enviroment" }, + ]; + + console.log("πŸ˜Άβ€πŸŒ«οΈ", supports, !supports.facingMode); + useInterval({ eventProps: { capturing, counter }, interval: 1000, @@ -168,7 +183,10 @@ export default function CameraCapture({ videoConstraints: { width: 512, height: 512, - facingMode: "user", + facingMode: + cameraPosition === "user" + ? cameraPosition + : { exact: cameraPosition }, }, }} /> @@ -206,6 +224,16 @@ export default function CameraCapture({ {capturing ? timeString : "Record"} + {!supports.facingMode && ( + + cameraPositionSet(target.value), + options: cameraOptions, + }} + /> + )} ) : (
diff --git a/src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CapturePreview.tsx b/src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CapturePreview.tsx index b0ea6bb6a3..b2cedac373 100644 --- a/src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CapturePreview.tsx +++ b/src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CapturePreview.tsx @@ -22,24 +22,37 @@ export default function CapturePreview({
); } else return null;