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

build error, redirects

Browse Source
This commit is contained in:
Brandon Thomas committed 2022-02-27 07:20:02 -05:00
1 parent 35e969070d
commit e6a21783c8
3 files changed
+4 -227
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

_redirects
+4 -5
View File
@@ -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
packages/storyteller/src/App.tsx
-4
View File
@@ -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<Props, State> {
allTtsModelsByToken={this.state.allTtsModelsByToken}
/>
</Route>
<Route path="/obs/:username">
<ObsLayerPage />
</Route>
<Route exact={true} path="/">
<IndexPage
sessionWrapper={this.state.sessionWrapper}
packages/storyteller/src/pages/obs-layer/ObsLayerPage.tsx
-218
View File
@@ -1,218 +0,0 @@
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 { 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';
function ObsLayerPage() {
console.warn('>>>>>>> RENDER OBSLAYERPAGE <<<<<<<<');
const { username } : { username : string } = useParams();
const [pendingTtsJobs, setPendingTtsJobs] = useState<TtsInferenceJob[]>([])
const webSocketRef = useRef<WebSocket|undefined>(undefined);
const pendingTtsJobsRef = useRef<TtsInferenceJob[]>([]);
//const waveSurferInstance = useRef<WaveSurfer|undefined>(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 (
<div>
<section className="section">
<div className="container">
<h1 className="title">
Paste this page's URL into OBS
</h1>
</div>
</section>
</div>
)
}
/*
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 }