From 964850cd3cca5e96ae17c1aaeabe03e48c3e526c Mon Sep 17 00:00:00 2001 From: Victor Date: Tue, 3 Sep 2024 22:20:24 -0700 Subject: [PATCH] added unsupported view for camera UI --- .../src/components/common/Camera/Camera.scss | 14 ++++ .../src/components/common/Camera/Camera.tsx | 44 +++++++++++ .../src/components/common/Camera/index.tsx | 1 + .../common/CameraInput/CameraInput.scss | 4 + .../common/CameraInput/CameraInput.tsx | 73 +++++++++++-------- .../src/components/common/index.tsx | 2 + .../modals/CameraCapture/CameraCapture.tsx | 18 ++--- 7 files changed, 111 insertions(+), 45 deletions(-) create mode 100644 src/website/packages/fakeyou.com/src/components/common/Camera/Camera.scss create mode 100644 src/website/packages/fakeyou.com/src/components/common/Camera/Camera.tsx create mode 100644 src/website/packages/fakeyou.com/src/components/common/Camera/index.tsx diff --git a/src/website/packages/fakeyou.com/src/components/common/Camera/Camera.scss b/src/website/packages/fakeyou.com/src/components/common/Camera/Camera.scss new file mode 100644 index 0000000000..f320da56f6 --- /dev/null +++ b/src/website/packages/fakeyou.com/src/components/common/Camera/Camera.scss @@ -0,0 +1,14 @@ +.fy-webcam-not-supported { + display: flex; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + color: rgba(#fff, 0.66); + + svg { + color: rgba(#fff, 0.33); + height: 15%; + margin-bottom: 1rem; + } +} diff --git a/src/website/packages/fakeyou.com/src/components/common/Camera/Camera.tsx b/src/website/packages/fakeyou.com/src/components/common/Camera/Camera.tsx new file mode 100644 index 0000000000..489996f7d6 --- /dev/null +++ b/src/website/packages/fakeyou.com/src/components/common/Camera/Camera.tsx @@ -0,0 +1,44 @@ +import React, { RefObject } from "react"; +import Webcam from "react-webcam"; +import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome"; +import { faCameraSlash } from "@fortawesome/pro-solid-svg-icons"; +import "./Camera.scss"; + +interface Props { + cameraPosition?: string; + cameraRef: RefObject; + className?: string; + onUserMedia?: () => void; +} + +export default function Camera({ + cameraPosition, + cameraRef, + className, + onUserMedia, +}: Props) { + return MediaRecorder.isTypeSupported("video/mp4") ? ( + + ) : ( +
+ + Sorry, we currently do not support webcam recording in your browser. +
+ ); +} diff --git a/src/website/packages/fakeyou.com/src/components/common/Camera/index.tsx b/src/website/packages/fakeyou.com/src/components/common/Camera/index.tsx new file mode 100644 index 0000000000..1987fff815 --- /dev/null +++ b/src/website/packages/fakeyou.com/src/components/common/Camera/index.tsx @@ -0,0 +1 @@ +export { default } from "./Camera"; diff --git a/src/website/packages/fakeyou.com/src/components/common/CameraInput/CameraInput.scss b/src/website/packages/fakeyou.com/src/components/common/CameraInput/CameraInput.scss index 0757814636..fb92b0f4c5 100644 --- a/src/website/packages/fakeyou.com/src/components/common/CameraInput/CameraInput.scss +++ b/src/website/packages/fakeyou.com/src/components/common/CameraInput/CameraInput.scss @@ -12,6 +12,10 @@ overflow: hidden; cursor: pointer; + &.fy-camera-input-unsuported { + cursor: not-allowed; + } + .fy-camera-input-preview { // background: red; position: absolute; diff --git a/src/website/packages/fakeyou.com/src/components/common/CameraInput/CameraInput.tsx b/src/website/packages/fakeyou.com/src/components/common/CameraInput/CameraInput.tsx index 3e3f0e8f6c..7c6b97f51f 100644 --- a/src/website/packages/fakeyou.com/src/components/common/CameraInput/CameraInput.tsx +++ b/src/website/packages/fakeyou.com/src/components/common/CameraInput/CameraInput.tsx @@ -1,9 +1,10 @@ import React, { useState } from "react"; -import Webcam from "react-webcam"; import { a, TransitionFn, useTransition } from "@react-spring/web"; import { useCameraState, useMedia, useModal } from "hooks"; import { CameraCapture } from "components/modals"; -import { Button, RecordToggle } from "components/common"; +import { Camera, Button, RecordToggle } from "components/common"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faCameraSlash } from "@fortawesome/pro-solid-svg-icons"; import "./CameraInput.scss"; export interface CameraInputEvent { @@ -27,6 +28,7 @@ export default function CameraInput({ const camera = useCameraState(true); const [token, tokenSet] = useState(""); const { bucketUrl } = useMedia({ mediaToken: token }); + const cameraSupported = MediaRecorder.isTypeSupported("video/mp4"); const cameraClick = () => open({ @@ -62,7 +64,14 @@ export default function CameraInput({ }; return ( -
+
{transitions((style: any, hasToken: boolean) => hasToken ? ( - cameraStartedSet(true), - ref: camera.ref, - videoConstraints: { - width: 512, - height: 512, - facingMode: "user", - // facingMode: - // cameraPosition === "user" - // ? cameraPosition - // : { exact: cameraPosition }, - }, - }} - /> -
- -
+ {MediaRecorder.isTypeSupported("video/mp4") ? ( + <> + +
+ +
+ + ) : ( +
+ + Sorry, we currently do not support webcam recording in your + browser. +
+ )} ) )} diff --git a/src/website/packages/fakeyou.com/src/components/common/index.tsx b/src/website/packages/fakeyou.com/src/components/common/index.tsx index e0015c1de0..928fdeabc5 100644 --- a/src/website/packages/fakeyou.com/src/components/common/index.tsx +++ b/src/website/packages/fakeyou.com/src/components/common/index.tsx @@ -7,6 +7,7 @@ import BasicTabs from "./BasicTabs"; import BookmarkButton from "./BookmarkButton"; import Button from "./Button"; import ButtonRevertToDefault from "./ButtonRevertToDefault"; +import Camera from "./Camera"; import CameraInput, { CameraInputEvent } from "./CameraInput"; import Checkbox from "./Checkbox"; import { MediaCards, SkeletonCard, WeightsCards } from "./Card"; @@ -78,6 +79,7 @@ export { BasicTabs, BookmarkButton, Button, + Camera, CameraInput, //Cards DeviceNotSupported, 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 098c2abac2..c855449584 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 @@ -1,10 +1,10 @@ import React, { useState } from "react"; -import Webcam from "react-webcam"; import { a, TransitionFn, useTransition } from "@react-spring/web"; import { WorkIndicator } from "components/svg"; import { CameraState, useCameraState, useMediaUploader } from "hooks"; import { UploaderResponse } from "components/entities/EntityTypes"; import { + Camera, Button, ModalUtilities, RecordToggle, @@ -102,21 +102,13 @@ export default function CameraCapture({ {transitions((style: any, i: number) => { return [ - camera.startedSet(true), - ref: camera.ref, - videoConstraints: { - width: 512, - height: 512, - facingMode: - cameraPosition === "user" - ? cameraPosition - : { exact: cameraPosition }, - }, + cameraPosition, + cameraRef: camera.ref, }} /> {camera.started ? (