diff --git a/app/package.json b/app/package.json index 9f2d075..ac4d4c9 100644 --- a/app/package.json +++ b/app/package.json @@ -1,13 +1,18 @@ { "name": "impression", - "version": "1.0.1", + "version": "1.0.2", "description": "Make your impression better", "keywords": [ - "semantic-analysis", + "semantic analysis", "nlp", - "speech-recognition", + "speech recognition", "productivity", - "career" + "career", + "personal use", + "feedback", + "utility", + "react app", + "modern web" ], "homepage": "https://m-a-y-a-n-k.github.io/Impression/", "private": true, diff --git a/app/src/components/AnimatedMic.jsx b/app/src/components/AnimatedMic.jsx index 4c2e2f4..3fa8b7e 100644 --- a/app/src/components/AnimatedMic.jsx +++ b/app/src/components/AnimatedMic.jsx @@ -10,6 +10,7 @@ import MicNotSupport from "./MicNotSupport"; const AnimatedMic = ({ updateUserFeedback }) => { const [listen, setListen] = useState(false); + const [useText, setUseText] = useState(false); const { listening, @@ -36,6 +37,10 @@ const AnimatedMic = ({ updateUserFeedback }) => { }); }; + const useTextOption = () => { + setUseText(true); + } + useEffect(() => { if (!listening) { setListen(false); @@ -56,8 +61,14 @@ const AnimatedMic = ({ updateUserFeedback }) => { const micNotSupported = !browserSupportsSpeechRecognition || !isMicrophoneAvailable; - if (micNotSupported) { - return ; + if (micNotSupported || useText) { + return ( + setUseText(false)} + /> + ); } return ( @@ -74,6 +85,9 @@ const AnimatedMic = ({ updateUserFeedback }) => { {!listen && Tap Mic} + {!listen && ( + Don't use Mic? Go with Text instead + )} ); }; diff --git a/app/src/components/Intro.jsx b/app/src/components/Intro.jsx index d1571f4..10eea5d 100644 --- a/app/src/components/Intro.jsx +++ b/app/src/components/Intro.jsx @@ -6,13 +6,14 @@ const Intro = () => { { typewriter + .changeDeleteSpeed(50) .typeString("Hi ,") .pauseFor(500) .deleteAll() - .typeString("Let's help you sound impressive") + .typeString("Let's help you sound more impressive.") .deleteAll() .pauseFor(250) - .typeString("Try it out") + .typeString("Try it.") .start(); }} /> diff --git a/app/src/components/MicNotSupport.jsx b/app/src/components/MicNotSupport.jsx index 73c65a5..a0bb8bb 100644 --- a/app/src/components/MicNotSupport.jsx +++ b/app/src/components/MicNotSupport.jsx @@ -6,30 +6,53 @@ import { Textarea } from "@fluentui/react-components"; import { feedbackCTAMotionConfig } from "../config/feedbackCTAMotion"; import { motion } from "framer-motion"; -const MicNotSupport = ({ updateUserFeedback }) => { +const MicNotSupport = (props) => { + const { updateUserFeedback, explicitMode = false, setImplicitMode } = props; const [rtcIssue, setRtcIssue] = useState("device"); const [text, setText] = useState(""); useEffect(() => { const getRTCProblem = () => { + if(explicitMode){ + setRtcIssue("explicit"); + return ; + } + if (!DetectRTC.isWebRTCSupported) { setRtcIssue("browser"); - } else if (!DetectRTC.isWebsiteHasMicrophonePermissions) { + return ; + } + if (!DetectRTC.isWebsiteHasMicrophonePermissions) { setRtcIssue("permission"); - } else if (!DetectRTC.hasMicrophone) { + return ; + } + if (!DetectRTC.hasMicrophone) { setRtcIssue("device"); + return ; } }; getRTCProblem(); - }, []); + }, [explicitMode]); const { feedback, hint } = micSupportConfig[rtcIssue] || {}; return ( {feedback && {feedback}} - {hint && {hint}} + {hint && ( + { + if(explicitMode){ + setImplicitMode(); + } + }} + > + {hint} + + )} { diff --git a/app/src/config/micSupport.js b/app/src/config/micSupport.js index d300c30..b12d571 100644 --- a/app/src/config/micSupport.js +++ b/app/src/config/micSupport.js @@ -1,16 +1,21 @@ export const micSupportConfig = { - browser: { - feedback: "Your browser does not support microphone", - hint: "Try a different browser or type below and submit instead" - }, device: { feedback: "Your device does not have a mic", hint: "Try using external mic and refresh the page or type and submit instead" }, + browser: { + feedback: "Your browser does not support microphone", + hint: "Try a different browser or type below and submit instead" + }, permission: { feedback: "You have disabled mic access", hint: "Try enabling your mic and refresh the page or type below and submit instead" - } + }, + explicit: { + feedback: "Like the old conventional way ?. Got you covered.", + hint: + "Type below and submit. You can try out the mic also by tapping here." + }, }; diff --git a/app/src/constants.js b/app/src/constants.js index 61b05fb..6f84b4a 100644 --- a/app/src/constants.js +++ b/app/src/constants.js @@ -1 +1 @@ -export const INTRO_DURATION = 12500; +export const INTRO_DURATION = 14000; diff --git a/app/src/styles/AnimatedMic.css b/app/src/styles/AnimatedMic.css index 4b4549d..89bc5a0 100644 --- a/app/src/styles/AnimatedMic.css +++ b/app/src/styles/AnimatedMic.css @@ -32,3 +32,12 @@ background-color: red; scale: 1.2; } + +.use-text-intead { + color: rgba(237, 240, 248, 0.7); + cursor: pointer; +} + +.use-text-intead:hover { + color: white; +} \ No newline at end of file diff --git a/app/src/styles/MicNotSupport.css b/app/src/styles/MicNotSupport.css index 01b356d..78646c0 100644 --- a/app/src/styles/MicNotSupport.css +++ b/app/src/styles/MicNotSupport.css @@ -13,6 +13,10 @@ font-style: italic; } +.mic-support-container .hint[data-explicit="true"] { + cursor: pointer; +} + .mic-support-submit-btn { position: absolute; width: 100%;
Tap Mic
Don't use Mic? Go with Text instead
{hint}
{ + if(explicitMode){ + setImplicitMode(); + } + }} + > + {hint} +