daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-05 09:48:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
Brandon Thomas committed 2022-03-02 04:31:22 -05:00
1 parent 3013d76b57
commit 4637cda65d
1 file changed
+2 -202
Download Patch File Download Diff File Expand all files Collapse all files
packages/storyteller-obs/src/pages/obs-layer/ObsLayerPage.tsx
+2 -202
View File
@@ -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<WebSocket|undefined>(undefined);
const pendingTtsJobsRef = useRef<TtsInferenceJob[]>([]);
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 }