hide UI on button click

README.md

@@ -1,6 +1,13 @@
 fakeyou-frontend
 ================
 
+GO AWAY CORS
+------------
+
+```
+chromium-browser --disable-web-security --user-data-dir=~/chrome
+```
+
 NB: This is now a MONOREPO
 --------------------------
 

packages/components/src/api/ApiConfig.ts

@@ -376,6 +376,8 @@ class ApiConfig {
   obsEventsWebsocket(twitchUsername: string) : string {
     if (this.domain === Domain.Localhost) {
       return `ws://localhost:54321/obs/${twitchUsername}`;
+    } else if (this.domain === Domain.JungleHorse) {
+      return `ws://ws.jungle.horse:54321/obs/${twitchUsername}`;
     } else {
       return `wss://ws.storyteller.io/obs/${twitchUsername}`;
     }

packages/storyteller-obs/src/App.tsx

@@ -1,3 +1,4 @@
+import 'bulma/css/bulma.css'
 
 import React from 'react';
 import { BrowserRouter, Route } from 'react-router-dom';

packages/storyteller-obs/src/pages/obs-layer/ObsLayerPage.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 //import WaveSurfer from 'wavesurfer.js';
 import { ApiConfig } from '@storyteller/components';
 import { BucketConfig } from '@storyteller/components/src/api/BucketConfig';
@@ -7,6 +7,8 @@ import { Howl } from 'howler';
 import { TtsInferenceJob } from '@storyteller/components/src/jobs/TtsInferenceJobs';
 import { jobStateCanChange } from '@storyteller/components/src/jobs/JobStates';
 import { useParams } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faVolumeUp } from '@fortawesome/free-solid-svg-icons';
 
 /*
 NB: Debugging with CORS and self signed certs in local dev is a nightmare. Use this (Linux):
@@ -20,6 +22,8 @@ function ObsLayerPage() {
 
   const { username } : { username : string } = useParams();
 
+  const [interfaceHidden, setInterfaceHidden]= useState(false);
+
   //const [pendingTtsJobs, setPendingTtsJobs] = useState<TtsInferenceJob[]>([])
   const webSocketRef = useRef<WebSocket|undefined>(undefined);
   const pendingTtsJobsRef = useRef<TtsInferenceJob[]>([]);
@@ -181,6 +185,10 @@ function ObsLayerPage() {
     setInterval(() => { pollJobs() }, 1000);
   }, [username, openWebsocket, pollJobs]);
 
+  if (interfaceHidden) {
+    return <></>;
+  }
+
   return (
     <div>
       <section className="section">
@@ -188,7 +196,14 @@ function ObsLayerPage() {
           <h1 className="title">
             Paste this page's URL into OBS
           </h1>
-          <h1 className="subtitle">Twitch Username : {username}</h1>
+          <h1 className="subtitle is-5">Twitch Username : {username}</h1>
+          <br />
+          <button
+            className="button is-info is-large is-fullwidth"
+            onClick={() => setInterfaceHidden(true)}
+            >
+            <FontAwesomeIcon icon={faVolumeUp} />&nbsp;&nbsp;Click this to activate audio and hide UI 
+          </button>
         </div>
       </section>
     </div>