From 82e52dcd9bf4aaedbb9b575e655827c89eb52da8 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Wed, 2 Mar 2022 01:50:54 -0500
Subject: [PATCH] hide UI on button click

---
 README.md                                     |  7 +++++++
 packages/components/src/api/ApiConfig.ts      |  2 ++
 packages/storyteller-obs/src/App.tsx          |  1 +
 .../src/pages/obs-layer/ObsLayerPage.tsx      | 19 +++++++++++++++++--
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 56cc7db552..75886b8f12 100644
--- a/README.md
+++ b/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
 --------------------------
 
diff --git a/packages/components/src/api/ApiConfig.ts b/packages/components/src/api/ApiConfig.ts
index 390eada017..2a8ddd8c46 100644
--- a/packages/components/src/api/ApiConfig.ts
+++ b/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}`;
     }
diff --git a/packages/storyteller-obs/src/App.tsx b/packages/storyteller-obs/src/App.tsx
index e417403eee..d0d766fd5c 100644
--- a/packages/storyteller-obs/src/App.tsx
+++ b/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';
diff --git a/packages/storyteller-obs/src/pages/obs-layer/ObsLayerPage.tsx b/packages/storyteller-obs/src/pages/obs-layer/ObsLayerPage.tsx
index b0f8559ee6..f2936178cf 100644
--- a/packages/storyteller-obs/src/pages/obs-layer/ObsLayerPage.tsx
+++ b/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>