Add link to jitsi on onboarding

i18next-scanner.config.js

@@ -31,14 +31,7 @@ module.exports = {
     ns: ["locale", "resource"],
     defaultLng: "en",
     defaultNs: "resource",
-    defaultValue: function (lng, ns, key) {
-      if (lng === "en") {
-        // Return key as the default value for English language
-        return key;
-      }
-      // Return the string '__NOT_TRANSLATED__' for other languages
-      return `${lng}__${key}__`;
-    },
+    defaultValue: "__NOT_TRANSLATED__",
     resource: {
       loadPath: "src/i18n/{{lng}}.json",
       savePath: "src/i18n/{{lng}}.json",

src/hooks/useC2C.js

@@ -65,15 +65,15 @@ export const C2CProvider = ({ room, ...props }) => {
   }
 
   return (
-    <C2CContext.Provider value={[c2c, joined, isMaster]}>
+    <C2CContext.Provider value={[c2c, joined, isMaster, room]}>
       {props.children}
     </C2CContext.Provider>
   );
 };
 
 export const useC2C = () => {
-  const [c2c, joined, isMaster] = useContext(C2CContext);
-  return [c2c, joined, isMaster];
+  const [c2c, joined, isMaster, room] = useContext(C2CContext);
+  return [c2c, joined, isMaster, room];
 };
 
 export default { C2CContext, C2CProvider, useC2C };

src/i18n/en.json

@@ -143,5 +143,9 @@
   "Error while saving game. Try again later...": "Error while saving game. Try again later...",
   "Multi-lang": "All",
   "fr": "French",
-  "en": "English"
+  "en": "English",
+  "Url copied to clipboard!": "Url copied to clipboard!",
+  "Copy": "Copy",
+  "Talk with your friends": "Talk with your friends",
+  "useAudioConf": "<0>We recommend you to use any audio conferencing system to talk with your friends. For example you can use <1>Jitsi</1>.</0>"
 }

src/i18n/fr.json

@@ -143,5 +143,9 @@
   "Error while saving game. Try again later...": "Une erreur est survenue lors de l'enregistrement du jeu. Veuillez essayez plus tard…",
   "Multi-lang": "Multilingue",
   "fr": "Français",
-  "en": "Anglais"
+  "en": "Anglais",
+  "Url copied to clipboard!": "L'Url a été copiée dans le presse-papier",
+  "Copy": "Copier",
+  "Talk with your friends": "Parlez avec vos amis",
+  "useAudioConf": "<0>Nous vous recommandons d'utiliser une application de conférence audio pour discuter avec vos amis. Par exemple vous pouvez utiliser <1>Jitsi</1>.</0>"
 }

src/views/WelcomeModal.js

@@ -2,11 +2,52 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { Trans } from "react-i18next";
 
+import styled from "styled-components";
+
+import { toast } from "react-toastify";
+
 import Modal from "../ui/Modal";
 
+import { useC2C } from "../hooks/useC2C";
+
+const WelcomeContent = styled.div`
+  & .url {
+    background-color: var(--bg-color);
+    padding: 0.5em;
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    & span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    & img {
+      margin-left: 1em;
+      cursor: pointer;
+    }
+  }
+`;
+
 const WelcomeModal = ({ show, setShow }) => {
   const { t } = useTranslation();
   const currentUrl = window.location.href;
+  const inputRef = React.useRef();
+
+  const [, , , room] = useC2C();
+
+  const handleCopy = () => {
+    inputRef.current.style.display = "block";
+    inputRef.current.select();
+    document.execCommand("copy");
+    inputRef.current.style.display = "none";
+    toast.info(t("Url copied to clipboard!"), { autoClose: 1000 });
+  };
+
+  const meetUrl = `https://meet.jit.si/airboardgame__${room}`;
 
   return (
     <Modal
@@ -24,22 +65,50 @@ const WelcomeModal = ({ show, setShow }) => {
         </button>
       }
     >
-      <h3>{t("Invite your friends")}</h3>
-      <Trans i18nKey="InviteFriends">
-        <p>
-          To invite other players to play with you, share the following link
-          with your friends.
-        </p>
-      </Trans>
-      <span>{currentUrl}</span>
-
-      <h3>{t("More information")}</h3>
-      <Trans i18nKey="moreInformation">
-        <p>
-          For more information, visit{" "}
-          <a href="https://github.com/jrmi/airboardgame/">github repository</a>.
-        </p>
-      </Trans>
+      <WelcomeContent>
+        <h3>{t("Invite your friends")}</h3>
+        <Trans i18nKey="InviteFriends">
+          <p>
+            To invite other players to play with you, share the following link
+            with your friends.
+          </p>
+        </Trans>
+
+        <div className="url">
+          <span>{currentUrl}</span>
+          <img
+            className="copy"
+            src="https://icongr.am/entypo/copy.svg?size=22&color=888886"
+            alt={t("Copy")}
+            onClick={handleCopy}
+          />
+        </div>
+
+        <h3>{t("Talk with your friends")}</h3>
+        <Trans i18nKey="useAudioConf">
+          <p>
+            We recommend you to use any audio conferencing system to talk with
+            your friends. For example you can use <a href={meetUrl}>Jitsi</a>.
+          </p>
+        </Trans>
+
+        <h3>{t("More information")}</h3>
+        <Trans i18nKey="moreInformation">
+          <p>
+            For more information, visit{" "}
+            <a href="https://github.com/jrmi/airboardgame/">
+              github repository
+            </a>
+            .
+          </p>
+        </Trans>
+        <input
+          value={currentUrl}
+          readOnly
+          ref={inputRef}
+          style={{ display: "none" }}
+        />
+      </WelcomeContent>
     </Modal>
   );
 };