From e6a21783c867d997e5f7e87ea4d6c287620083f2 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Sun, 27 Feb 2022 07:20:02 -0500 Subject: [PATCH] build error, redirects --- _redirects | 9 +- packages/storyteller/src/App.tsx | 4 - .../src/pages/obs-layer/ObsLayerPage.tsx | 218 ------------------ 3 files changed, 4 insertions(+), 227 deletions(-) delete mode 100644 packages/storyteller/src/pages/obs-layer/ObsLayerPage.tsx diff --git a/_redirects b/_redirects index 1cf5701381..307618bb69 100644 --- a/_redirects +++ b/_redirects @@ -1,6 +1,7 @@ # We can't redirect everything until legacy vocodes is dead /about* /index.html 200 /category* /index.html 200 +/coming-soon* /index.html 200 /contribute* /index.html 200 /firehose* /index.html 200 /leaderboard* /index.html 200 @@ -11,13 +12,11 @@ /pending* /index.html 200 /profile* /index.html 200 /signup* /index.html 200 +/stream* /index.html 200 /terms* /index.html 200 /tts* /index.html 200 +/tts_configs* /index.html 200 +/twitch* /index.html 200 /upload* /index.html 200 /video* /index.html 200 /w2l* /index.html 200 - -# These are Storyteller routes -/coming-soon* /index.html 200 -/stream* /index.html 200 -/twitch* /index.html 200 diff --git a/packages/storyteller/src/App.tsx b/packages/storyteller/src/App.tsx index 6fe1f00f3b..e4bee49898 100644 --- a/packages/storyteller/src/App.tsx +++ b/packages/storyteller/src/App.tsx @@ -12,7 +12,6 @@ import { SignupPage } from './pages/signup/SignupPage'; import { TtsConfigsIndexPage } from './pages/tts_configs/TtsConfigsIndexPage'; import { DetectLocale, DetectLocaleIsOk } from '@storyteller/components/src/api/locale/DetectLocale'; import { IndexPage } from './pages/index/IndexPage'; -import { ObsLayerPage } from './pages/obs-layer/ObsLayerPage'; import { STORYTELLER_MERGED_TRANSLATIONS } from './_i18n/StorytellerTranslations' import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper'; import { TopNav } from './layout/TopNav'; @@ -173,9 +172,6 @@ class App extends React.Component { allTtsModelsByToken={this.state.allTtsModelsByToken} /> - - - >>>>>> RENDER OBSLAYERPAGE <<<<<<<<'); - const { username } : { username : string } = useParams(); - - const [pendingTtsJobs, setPendingTtsJobs] = useState([]) - const webSocketRef = useRef(undefined); - const pendingTtsJobsRef = useRef([]); - - //const waveSurferInstance = useRef(undefined); - - // TODO: Do I need to use useCallback on everything? - - const openWebsocket = async (twitchUsername: string) => { - if (webSocketRef.current !== undefined) { - return; - } - //if (webSocketRef.current === undefined) { - // //waveSurferInstance.current = WaveSurfer.create({ - // // container: '#waveform', // Previousy I used 'this.ref.current' and React.createRef() - // // height: 200, - // // responsive: true, - // // waveColor: '#777', - // // progressColor: '#ccc', - // // cursorColor: '#3273dc', - // // cursorWidth: 2, - // // normalize: false, - // //}); - //} - console.warn('>>>>>>> CREATING WEB SOCKET <<<<<<<<'); - - const url = new ApiConfig().obsEventsWebsocket(twitchUsername); - const sock = new WebSocket(url); - - document.documentElement.addEventListener("mousedown", () => { - console.log('play dummy sound'); - let sound = new Howl({ - src: ['foo'] - }); - sound.play(); - }) - - - webSocketRef.current = sock; - - sock.onopen = function (event: Event) { - console.log('on open event', event); - sock.send('on open message from browser'); - }; - - sock.onmessage = function (event: MessageEvent) { - console.log('on message event', event.data); - //sock.send('ack'); - - const result = JSON.parse(event.data); - - if (result['response_type'] === 'TtsEvent') { - if ('tts_job_tokens' in result) { - let newJobs : TtsInferenceJob[] = []; - result['tts_job_tokens'].forEach((jobToken : string) => { - const newJob = new TtsInferenceJob(jobToken); - newJobs = newJobs.concat(newJob); - }); - pendingTtsJobsRef.current = pendingTtsJobsRef.current.concat(newJobs); - //setPendingTtsJobs(pendingTtsJobs.concat(newJobs)); - } - } - - return false; // TODO: Keeps socket alive? - } - - sock.onerror = function(event: Event) { - console.log('on error event', event); - } - - // NB: This has a direct bearing on how fast the backend responds. - // Increasing the delay will slow down the flow of events. - setInterval(() => { - console.log('sending ping'); - if (sock.readyState === sock.OPEN) { - sock.send('ping'); - } else { - console.warn('Socket is closed', sock.readyState, sock) - } - }, 1000); - }; - - const playAudio = async (job: TtsInferenceJob) => { - const audioLink = new BucketConfig().getGcsUrl(job.maybePublicBucketWavAudioPath); - - console.log('playing audio url: ', audioLink); - - //if (waveSurferInstance.current === undefined) { - // return; - //} - - //waveSurferInstance.current.load(audioLink) - //waveSurferInstance.current.on('load') - //waveSurferInstance.current.play(); - - let sound = new Howl({ - src: [audioLink] - }); - - sound.play(); - } - - const processUpdatedJob = useCallback(async (job: GetTtsInferenceJobStatusSuccessResponse) => { - let updatedJobs : TtsInferenceJob[] = []; - pendingTtsJobsRef.current.forEach(existingJob => { - if (existingJob.jobToken !== job.state!.job_token || - !jobStateCanChange(existingJob.jobState)) { - // TODO: Prune permanently dead jobs. - updatedJobs.push(existingJob); - return; - } - console.log('new or updated job', job.state.job_token); - const updatedJob = TtsInferenceJob.fromResponse(job.state); - - if (!!updatedJob.maybePublicBucketWavAudioPath) { - console.log('done with job, playing audio...'); - playAudio(updatedJob); - } else { - updatedJobs.push(updatedJob); - } - }); - - //setPendingTtsJobs(updatedJobs); - pendingTtsJobsRef.current = updatedJobs; - }, [pendingTtsJobs]); - - const checkTtsInferenceJob = useCallback(async (jobToken: string) => { - const response = await GetTtsInferenceJobStatus(jobToken); - if (GetTtsInferenceJobStatusIsOk(response)) { - await processUpdatedJob(response as GetTtsInferenceJobStatusSuccessResponse) - } else if (GetTtsInferenceJobStatusIsError(response)) { - // TODO - } - }, [processUpdatedJob]); - - const pollJobs = useCallback(async () => { - pendingTtsJobsRef.current.forEach(async job => { - if (jobStateCanChange(job.jobState)) { - await checkTtsInferenceJob(job.jobToken); - } - }); - }, [checkTtsInferenceJob, pendingTtsJobs]); - - useEffect(() => { - openWebsocket(username); - setInterval(() => { pollJobs() }, 1000); - }, [username, openWebsocket, pollJobs]); - - return ( -
-
-
-

- Paste this page's URL into OBS -

-
-
-
- ) -} - -/* - const openWebsocket = async ( - twitchUsername: string, - pendingTtsJobs: TtsInferenceJob[], - setPendingTtsJobs: (jobs: TtsInferenceJob[]) => void - ) => { - const url = new ApiConfig().obsEventsWebsocket(twitchUsername); - const sock = new WebSocket(url); - - sock.onopen = function (event: Event) { - console.log('on open event', event); - sock.send('on open message from browser'); - }; - - sock.onmessage = function (event: MessageEvent) { - console.log('on message event', event.data); - const result = JSON.parse(event.data); - - if ('tts_job_tokens' in result) { - let newJobs : TtsInferenceJob[] = []; - result['tts_job_tokens'].forEach((jobToken : string) => { - const newJob = new TtsInferenceJob(jobToken); - newJobs = newJobs.concat(newJob); - }); - setPendingTtsJobs(pendingTtsJobs.concat(newJobs)); - } - - return false; // TODO: Keeps socket alive? - } - - sock.onerror = function(event: Event) { - console.log('on error event', event); - } - - // NB: This has a direct bearing on how fast the backend responds. - // Increasing the delay will slow down the flow of events. - setInterval(() => { - sock.send('ping'); - }, 1000); - }; -*/ - -export { ObsLayerPage } \ No newline at end of file