Merge pull request #308 from vector-im/dbkr/ptt_enable_flag

Put PTT behind 'feature flag'

.vscode/settings.json

@@ -2,4 +2,4 @@
   "editor.formatOnSave": true,
   "editor.insertSpaces": true,
   "editor.tabSize": 2
-}
+}

src/home/RegisteredView.jsx

@@ -13,11 +13,13 @@ import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { useHistory } from "react-router-dom";
 import { Headline, Title } from "../typography/Typography";
 import { Form } from "../form/Form";
+import { useShouldShowPtt } from "../useShouldShowPtt";
 
 export function RegisteredView({ client }) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
   const history = useHistory();
+  const shouldShowPtt = useShouldShowPtt();
   const onSubmit = useCallback(
     (e) => {
       e.preventDefault();
@@ -98,14 +100,16 @@ export function RegisteredView({ client }) {
                 {loading ? "Loading..." : "Go"}
               </Button>
             </FieldRow>
-            <FieldRow className={styles.fieldRow}>
+            {shouldShowPtt && (
-              <InputField
+              <FieldRow className={styles.fieldRow}>
-                id="ptt"
+                <InputField
-                name="ptt"
+                  id="ptt"
-                label="Push to Talk"
+                  name="ptt"
-                type="checkbox"
+                  label="Push to Talk"
-              />
+                  type="checkbox"
-            </FieldRow>
+                />
+              </FieldRow>
+            )}
             {error && (
               <FieldRow className={styles.fieldRow}>
                 <ErrorMessage>{error.message}</ErrorMessage>

src/home/UnauthenticatedView.jsx

@@ -15,8 +15,10 @@ import { Form } from "../form/Form";
 import styles from "./UnauthenticatedView.module.css";
 import commonStyles from "./common.module.css";
 import { generateRandomName } from "../auth/generateRandomName";
+import { useShouldShowPtt } from "../useShouldShowPtt";
 
 export function UnauthenticatedView() {
+  const shouldShowPtt = useShouldShowPtt();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
   const [{ privacyPolicyUrl, recaptchaKey }, register] =
@@ -112,14 +114,16 @@ export function UnauthenticatedView() {
                 autoComplete="off"
               />
             </FieldRow>
-            <FieldRow>
+            {shouldShowPtt && (
-              <InputField
+              <FieldRow>
-                id="ptt"
+                <InputField
-                name="ptt"
+                  id="ptt"
-                label="Push to Talk"
+                  name="ptt"
-                type="checkbox"
+                  label="Push to Talk"
-              />
+                  type="checkbox"
-            </FieldRow>
+                />
+              </FieldRow>
+            )}
             <Caption>
               By clicking "Go", you agree to our{" "}
               <Link href={privacyPolicyUrl}>Terms and conditions</Link>

src/useShouldShowPtt.js

@@ -0,0 +1,6 @@
+import { useLocation } from "react-router-dom";
+
+export function useShouldShowPtt() {
+  const { hash } = useLocation();
+  return hash.startsWith("#ptt");
+}