diff --git a/README.md b/README.md
index 70406c3264..7c3215f92c 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,9 @@ yarn install
yarn start-storyteller
```
+TODO: Upgrade React, it's a bit behind. See downgrade @ SHA
+`d739b66bfa3315620208579193d652e8e460da1e`.
+
Netlify Notes
-------------
diff --git a/packages/fakeyou/src/v2/view/profile/profile_view/ProfileFc.tsx b/packages/fakeyou/src/v2/view/profile/profile_view/ProfileFc.tsx
index 677c701ba3..8b74aa13af 100644
--- a/packages/fakeyou/src/v2/view/profile/profile_view/ProfileFc.tsx
+++ b/packages/fakeyou/src/v2/view/profile/profile_view/ProfileFc.tsx
@@ -18,7 +18,6 @@ interface Props {
sessionWrapper: SessionWrapper,
}
-
function ProfileFc(props: Props) {
const { username } : { username : string } = useParams();
diff --git a/packages/storyteller/src/pages/obs-layer/ObsLayerPage.tsx b/packages/storyteller/src/pages/obs-layer/ObsLayerPage.tsx
index 29bd8e78b4..932099c8e4 100644
--- a/packages/storyteller/src/pages/obs-layer/ObsLayerPage.tsx
+++ b/packages/storyteller/src/pages/obs-layer/ObsLayerPage.tsx
@@ -1,80 +1,47 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
function ObsLayerPage() {
- const WS_URL = 'ws://localhost:54321/obs';
+ const { username } : { username : string } = useParams();
- //const url = `${WS_URL}/${props.twitchUsername}`;
+ useEffect(() => {
+ openWebsocket(username);
+ }, [username]);
return (
- Stream TTS
+ Paste this page's URL into OBS
-
- Early Alpha Preview
-
-
-
This is an early demo of our Stream TTS, powered by FakeYou.
- It does not currently offer customization, though our plans are to
- allow for a high degree of configurability: set your own voices, rewards, etc.
-
-
You don't need to set up any software on your end. Simply point OBS or your
- broadcast software the URL below:
-
)
}
-/*
+function openWebsocket(twitchUsername: string) {
+ const url = `ws://localhost:54321/obs/${twitchUsername}`;
+ const sock = new WebSocket(url);
-const DEFAULT_USERNAME = 'testytest512';
+ sock.onopen = function (event: Event) {
+ console.log('on open event', event);
+ sock.send('on open message from browser');
+ };
-(function() {
- console.log('installing script');
-
- const maybeUsername = window.location.hash.replace('#', '').trim();
-
- const username = (!!maybeUsername) ? maybeUsername : DEFAULT_USERNAME;
-
- console.log('username', username);
- document.getElementById('username').innerHTML = username;
-
- const url = `${WS_URL}/${username}`;
-
- let sock = new WebSocket(url);
-
- sock.onopen = function (event) {
- console.log('on open event', event);
- sock.send('on open message from browser');
- };
-
- sock.onmessage = function (event) {
- console.log('on message event', event.data);
- }
-
- sock.onerror = function(event) {
- console.log('on error event', event.data);
- }
-
- setInterval(() => {
- console.log('sending browser message to server on interval');
- sock.send('interval trigger from browser');
- }, 2000);
-
- //setTimeout(() => {
- // console.log('disconnect')
- // const normal_close = 1000;
- // sock.close(normal_close, 'close');
- //
- //}, 10000)
-
-})();
-*/
+ sock.onmessage = function (event: MessageEvent) {
+ console.log('on message event', event.data);
+ }
+ sock.onerror = function(event: Event) {
+ console.log('on error event', event);
+ }
+ //setInterval(() => {
+ // console.log('sending browser message to server on interval');
+ // sock.send('interval trigger from browser');
+ //}, 2000);
+}
export { ObsLayerPage }
\ No newline at end of file
diff --git a/packages/storyteller/src/pages/stream/StreamPage.tsx b/packages/storyteller/src/pages/stream/StreamPage.tsx
index ea3ead8104..cd52946b0d 100644
--- a/packages/storyteller/src/pages/stream/StreamPage.tsx
+++ b/packages/storyteller/src/pages/stream/StreamPage.tsx
@@ -3,10 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useState } from 'react';
import { useHistory, withRouter } from 'react-router-dom';
-interface Props {
-}
-
-function StreamPage(props: Props) {
+function StreamPage() {
const history = useHistory();
const [twitchUsername, setTwitchUsername] = useState('')
@@ -18,12 +15,14 @@ function StreamPage(props: Props) {
return false;
};
- //const openObs = (ev: React.FormEvent) => {
- // ev.preventDefault();
- // let url = `/obs/${twitchUsername}`;
- // history.push(url);
- // return false;
- //};
+ const openObs = (ev: React.FormEvent) => {
+ ev.preventDefault();
+ let url = `/obs/${twitchUsername}`;
+ history.push(url);
+ return false;
+ };
+
+ const buttonDisabled = twitchUsername.trim().length === 0;
return (
@@ -68,7 +67,11 @@ function StreamPage(props: Props) {
-
+
2. Open OBS Page