Fast onboarding

Mindgamesnl · Jul 6, 2023 · c9cf132 · c9cf132
1 parent ef1d780
commit c9cf132
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 44 deletions.
diff --git a/client/public/en.lang b/client/public/en.lang
@@ -17,7 +17,8 @@ navbar.upgradeRequired=Upgrade required
 
 home.confirmLoginHeader=Welcome back!
 home.confirmLoginBody=Are you trying to login as <i>%player</i>?<br />If you are not, please close this window.
-home.confirmLoginButton=Yes! That's me!
+home.confirmLoginButton=Start session
+home.confirmLoginWithVoicechat=Start session with VoiceChat
 
 home.activate=Activate session
 home.activateText=This is personal webpage will be used to play your audio and voice throughout your visit. Please click anywhere on this page to get started.

diff --git a/client/src/client/OpenAudioAppContainer.js b/client/src/client/OpenAudioAppContainer.js
@@ -172,6 +172,14 @@ class OpenAudioAppContainer extends React.Component {
                     return;
                 }
 
+                if (serverData.isVoicechatEnabled) {
+                    setGlobalState({
+                        voiceState: {
+                            serverHasVoiceChat: true,
+                        },
+                    })
+                }
+
                 if (serverData.useTranslations) {
                     let localLanguage = navigator.language || navigator.userLanguage;
                     let language = localLanguage.split("-")[0];

diff --git a/client/src/client/services/socket/handlers/voice/HandleVoicechatUnlock.js b/client/src/client/services/socket/handlers/voice/HandleVoicechatUnlock.js
@@ -1,5 +1,6 @@
-import {setGlobalState} from "../../../../../state/store";
+import {getGlobalState, setGlobalState} from "../../../../../state/store";
 import {toast} from "react-toastify";
+import {VoiceModule} from "../../../voice/VoiceModule";
 
 export function HandleVoiceUnlock(data) {
 
@@ -27,4 +28,9 @@ export function HandleVoiceUnlock(data) {
             serverHasModeration: data.hasModeration
         }
     })
+
+    // is it set to auto join?
+    if (getGlobalState().voiceState.autoJoinVoiceChat) {
+        VoiceModule.startVoiceChat();
+    }
 }
diff --git a/client/src/client/services/voice/VoiceModule.js b/client/src/client/services/voice/VoiceModule.js
@@ -10,6 +10,7 @@ import * as PluginChannel from "../../util/PluginChannel";
 import {VoicePeer} from "./peers/VoicePeer";
 import {feedDebugValue} from "../debugging/DebugService";
 import {DebugStatistic} from "../debugging/DebugStatistic";
+import {setTab} from "../../../components/tabwindow/TabWindow";
 
 var gainTrackers = {}
 
@@ -69,6 +70,7 @@ export const VoiceModule = new class IVoiceModule {
     }
 
     startVoiceChat() {
+        setTab(1);
         this.showLoadingPopup();
 
         // try to get the device

diff --git a/client/src/components/clicktoconnect/ClickPrompt.js b/client/src/components/clicktoconnect/ClickPrompt.js
@@ -3,9 +3,10 @@ import "./clickprompt.css";
 import {getTranslation, OAC} from "../../client/OpenAudioAppContainer";
 import {OaStyleCard} from "../card/OaStyleCard";
 import {BlackoutPage} from "../layout/BlackoutPage";
-import {getGlobalState} from "../../state/store";
+import {getGlobalState, setGlobalState} from "../../state/store";
+import {connect} from "react-redux";
 
-export class ClickPrompt extends React.Component {
+class ClickPrompt extends React.Component {
     static contextType = OAC;
 
     render() {
@@ -14,52 +15,63 @@ export class ClickPrompt extends React.Component {
 
         let welcomeWithName = getTranslation(c, "home.confirmLoginBody");
         welcomeWithName = welcomeWithName.replace("%name", currentUser.userName);
+
+        // instant join voice button as well
+        let voiceButton = <button type="submit" onClick={() => {
+            setGlobalState({voiceState: {autoJoinVoiceChat: true}});
+        }}
+                                  className="w-full mt-2 text-white bg-green-600 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium common-rounded-top common-rounded-bottom text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+            {getTranslation(c, "home.confirmLoginWithVoicechat")}
+        </button>;
+
         return (
             <BlackoutPage>
                 <div className="py-12">
-                    <OaStyleCard title={getTranslation(c, "home.confirmLoginHeader")} isDanger={false} body={<div>
-                        <div className={"text-black m-5"}>
-                            <div className="flex items-center space-x-3">
-                                <div className="h-20 w-20 flex-shrink-0">
-                                    <img className="h-20 w-20 rounded-full bg-gray-300"
-                                         src={"https://visage.surgeplay.com/bust/512/" + currentUser.uuid}
-                                         style={{borderColor: "#32415d", borderWidth: "2px"}}
-                                         alt=""/>
-                                </div>
-                                <div className="space-y-1">
-                                    <div className="text-sm font-medium text-gray-900">
-                                        <div dangerouslySetInnerHTML={{__html: welcomeWithName}}></div>
+                    <section className="mb-32 text-gray-800 text-center lg:text-left w-full pt-32">
+                        <div className="container mx-auto xl:px-32 text-center lg:text-left">
+                            <div className="grid lg:grid-cols-2 flex items-center">
+                                <div className="mb-12 lg:mb-0 md:mt-10">
+                                    <div
+                                        className="relative block common-rounded-top common-rounded-bottom shadow-lg px-6 py-12 md:px-12 lg:-mr-14 themed-text clickprompt-box">
+                                        <div>
+                                            <div className={"text-white m-5"}>
+                                                <div className="flex items-center space-x-3">
+                                                    <div className="h-20 w-20 flex-shrink-0">
+                                                        <img className="h-20 w-20 rounded-full bg-gray-300"
+                                                             src={"https://visage.surgeplay.com/bust/512/" + currentUser.uuid}
+                                                             style={{borderColor: "#32415d", borderWidth: "2px"}}
+                                                             alt=""/>
+                                                    </div>
+                                                    <div className="space-y-1">
+                                                        <div className="text-sm font-medium text-gray-200">
+                                                            <div
+                                                                dangerouslySetInnerHTML={{__html: welcomeWithName}}></div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <button type="submit"
+                                                    className="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium common-rounded-top common-rounded-bottom text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+                                                {getTranslation(c, "home.confirmLoginButton")}
+                                            </button>
+                                            {voiceButton}
+                                        </div>
                                     </div>
                                 </div>
+                                <div className="shadow-lg fancy-border-radius rotate-lg-6 w-full login-image"></div>
                             </div>
                         </div>
-                        <button type="submit"
-                                className="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium common-rounded-top common-rounded-bottom text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-                            {getTranslation(c, "home.confirmLoginButton")}
-                        </button>
-                    </div>} fullWidth={true}/>
+                    </section>
                 </div>
             </BlackoutPage>
-            // <div className="content-wrapper-box landing-thing">
-            //     <section className="mb-32 text-gray-800 text-center lg:text-left w-full pt-32">
-            //         <div className="container mx-auto xl:px-32 text-center lg:text-left">
-            //             <div className="grid lg:grid-cols-2 flex items-center">
-            //                 <div className="mb-12 lg:mb-0 md:mt-10">
-            //                     <div
-            //                         className="relative block common-rounded-top common-rounded-bottom shadow-lg px-6 py-12 md:px-12 lg:-mr-14 themed-text clickprompt-box">
-            //                         <h2 className="text-5xl font-bold mb-4 display-5 themed-text">
-            //                             {getTranslation(c, "home.welcome")}
-            //                         </h2>
-            //                         <p className="text-gray-200 mb-6 mt-6">
-            //                             {getTranslation(c, "home.activateText")}
-            //                         </p>
-            //                     </div>
-            //                 </div>
-            //                 <div className="shadow-lg fancy-border-radius rotate-lg-6 w-full login-image"></div>
-            //             </div>
-            //         </div>
-            //     </section>
-            // </div>
         );
     }
+}
+
+export default connect(mapStateToProps)(ClickPrompt);
+
+function mapStateToProps(state) {
+    return {
+        voiceState: state.voiceState,
+    };
 }
diff --git a/client/src/components/onboarding/VcOnboarding.js b/client/src/components/onboarding/VcOnboarding.js
@@ -2,7 +2,6 @@ import React from "react";
 import {getTranslation, OAC} from "../../client/OpenAudioAppContainer";
 import {VoiceModule} from "../../client/services/voice/VoiceModule";
 import {getGlobalState} from "../../state/store";
-import {setTab} from "../tabwindow/TabWindow";
 
 import "./onboarding.css"
 
@@ -23,7 +22,6 @@ export class VcOnboarding extends React.Component {
         if (this.state.clicked) return;
         this.setState({clicked: true});
         VoiceModule.startVoiceChat();
-        setTab(1);
     }
 
     render() {

diff --git a/client/src/state/store.js b/client/src/state/store.js
@@ -71,6 +71,8 @@ const initialState = {
     },
 
     voiceState: {
+        autoJoinVoiceChat: false,
+        serverHasVoiceChat: false,
         peersHidden: false,
         isModerating: false,
         isTemporarilyDisabled: false,

diff --git a/client/src/views/client/pages/audio/AudioPage.js b/client/src/views/client/pages/audio/AudioPage.js
@@ -1,6 +1,6 @@
 import React from "react";
 import {Header} from "../../../../components/header/Header";
-import {ClickPrompt} from "../../../../components/clicktoconnect/ClickPrompt";
+import ClickPrompt from "../../../../components/clicktoconnect/ClickPrompt";
 import {getTranslation, OAC} from "../../../../client/OpenAudioAppContainer";
 import {VcOnboarding} from "../../../../components/onboarding/VcOnboarding";
 import AudioVolume from "../../../../components/audio/AudioVolume";