From 4637cda65d82ec89ce6bd1bf5213020bdf807869 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Wed, 2 Mar 2022 04:31:22 -0500 Subject: [PATCH] cleanup --- .../src/pages/obs-layer/ObsLayerPage.tsx | 204 +----------------- 1 file changed, 2 insertions(+), 202 deletions(-) diff --git a/packages/storyteller-obs/src/pages/obs-layer/ObsLayerPage.tsx b/packages/storyteller-obs/src/pages/obs-layer/ObsLayerPage.tsx index 5cb2926cfd..0df5c814ed 100644 --- a/packages/storyteller-obs/src/pages/obs-layer/ObsLayerPage.tsx +++ b/packages/storyteller-obs/src/pages/obs-layer/ObsLayerPage.tsx @@ -1,11 +1,5 @@ -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'; -import { GetTtsInferenceJobStatus, GetTtsInferenceJobStatusIsError, GetTtsInferenceJobStatusIsOk, GetTtsInferenceJobStatusSuccessResponse } from '@storyteller/components/src/api/jobs/GetTtsInferenceJobStatus'; +import React, { useEffect, useRef, useState } from 'react'; 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'; @@ -19,8 +13,6 @@ NB: Debugging with CORS and self signed certs in local dev is a nightmare. Use t */ function ObsLayerPage() { - console.warn('>>> OBS <<<'); - const { username } : { username : string } = useParams(); const [interfaceHidden, setInterfaceHidden]= useState(false); @@ -29,37 +21,8 @@ function ObsLayerPage() { useEffect(() => { webSocketProtocolRef.current.start(); - }, [username]); - - /* - const webSocketRef = useRef(undefined); - const pendingTtsJobsRef = useRef([]); - - - const openWebsocket = useCallback(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); - - console.log('websocket url: ', url); - - const sock = new WebSocket(url); + // Click anywhere on the page to activate sounds. document.documentElement.addEventListener("mousedown", () => { console.log('play dummy sound'); let sound = new Howl({ @@ -68,129 +31,8 @@ function ObsLayerPage() { 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); - - sock.close(); - openWebsocket(username); - } - - let intervalHandle : number | undefined = undefined; - - // NB: This has a direct bearing on how fast the backend responds. - // Increasing the delay will slow down the flow of events. - intervalHandle = window.setInterval(() => { - //console.log('sending ping'); - if (sock.readyState === sock.OPEN) { - sock.send('ping'); - } else { - console.warn('Socket is closed', sock.readyState, sock); - - sock.close(); - clearInterval(intervalHandle); - - openWebsocket(username); - } - }, 1000); }, [username]); - 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; - }, []); - - 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]); - - useEffect(() => { - openWebsocket(username); - setInterval(() => { pollJobs() }, 1000); - }, [username, openWebsocket, pollJobs]); - - */ - if (interfaceHidden) { return <>; } @@ -216,46 +58,4 @@ function ObsLayerPage() { ) } -/* - 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