camera capture mobile adjustments

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%;
 		}
 	}
 }

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<Blob | null>(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({
                   </svg>
                   {capturing ? timeString : "Record"}
                 </button>
+                {!supports.facingMode && (
+                  <SegmentButtons
+                    {...{
+                      value: cameraPosition,
+                      onChange: ({ target }: { target: { value: string } }) =>
+                        cameraPositionSet(target.value),
+                      options: cameraOptions,
+                    }}
+                  />
+                )}
               </div>
             ) : (
               <div {...{ className: "fy-camera-capture-centered" }}>

src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CapturePreview.tsx

@@ -22,24 +22,37 @@ export default function CapturePreview({
       <a.div {...{ className: "fy-camera-capture-slide", style }}>
         <video
           controls
-          {...{ className: "fy-camera-capture-preview", src: url }}
-        />
-        <Button
+          playsInline
           {...{
-            className: "fy-camera-capture-float-button",
-            label: "Try again",
-            onClick: () => resetCapture(),
-            variant: "secondary",
+            // onClick,
+            // onPlay: () => isPlayingSet(true),
+            // onPause: () => isPlayingSet(false),
+            className: "fy-camera-capture-preview",
+            src: url,
           }}
         />
-        <Button
+        <div
           {...{
-            className: "fy-camera-capture-float-button",
-            label: "Upload and use",
-            variant: "primary",
-            onClick: upload,
+            className: `fy-camera-capture-preview-actions`,
           }}
-        />
+        >
+          <Button
+            {...{
+              className: "fy-camera-capture-float-button",
+              label: "Try again",
+              onClick: () => resetCapture(),
+              variant: "secondary",
+            }}
+          />
+          <Button
+            {...{
+              className: "fy-camera-capture-float-button",
+              label: "Upload and use",
+              variant: "primary",
+              onClick: upload,
+            }}
+          />
+        </div>
       </a.div>
     );
   } else return null;