|
|
import { useState, useEffect, useRef } from "react";
|
|
|
import {Howl, Howler} from 'howler';
|
|
|
import { invoke } from "@tauri-apps/api/core";
|
|
|
import { listen } from '@tauri-apps/api/event';
|
|
|
import "./App.css";
|
|
|
import { OSC_ADDRESS } from "./utils/constant";
|
|
|
import { Light } from "./utils/light";
|
|
|
|
|
|
|
|
|
const DefaultFadeDuration = 3; // 1 second
|
|
|
const CLIENT_COUNT=13;
|
|
|
const CUE_FILE='cuelist_0924.json';
|
|
|
|
|
|
|
|
|
const CueType={
|
|
|
Bg: 'bg',
|
|
|
Announce: 'announce',
|
|
|
Light: 'light'
|
|
|
}
|
|
|
const EmojiType={
|
|
|
bg: '🎵',
|
|
|
announce: '📢',
|
|
|
light: '💡'
|
|
|
}
|
|
|
|
|
|
function App() {
|
|
|
|
|
|
const [cuelist, setCuelist] = useState([]);
|
|
|
const [currentCue, setCurrentCue] = useState(null);
|
|
|
const [fadeDuration, setFadeDuration] = useState(DefaultFadeDuration); // Default fade duration in seconds
|
|
|
const [timestamp, setTimestamp] = useState();
|
|
|
const [clientStatus, setClientStatus] = useState({});
|
|
|
|
|
|
const refCue = useRef(null);
|
|
|
// const refNextCue = useRef(null);
|
|
|
const refLight= useRef();
|
|
|
const refDuration= useRef();
|
|
|
const refTimer= useRef();
|
|
|
|
|
|
|
|
|
function sendOsc(addr, message, id){
|
|
|
|
|
|
invoke('send_osc_message', {
|
|
|
key: addr,
|
|
|
message: `${id}#${message}`,
|
|
|
host:'0.0.0.0:0',
|
|
|
target:'192.168.51.255:8000',
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
function sendOscToSound(addr, message){
|
|
|
|
|
|
invoke('send_osc_message', {
|
|
|
key: addr,
|
|
|
message,
|
|
|
host:'0.0.0.0:0',
|
|
|
target:'192.168.51.100:58200',
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function onOsc(message){
|
|
|
|
|
|
const addr= message.addr;
|
|
|
const [id, status, name]= message.args[0]?.split('#');
|
|
|
// console.log('receive osc:', id, status,name);
|
|
|
|
|
|
switch(addr){
|
|
|
case OSC_ADDRESS.CLIENT_STATUS:
|
|
|
|
|
|
setClientStatus(prev=>({
|
|
|
...prev,
|
|
|
[id]:{
|
|
|
status,
|
|
|
name,
|
|
|
timestamp: new Date().toLocaleTimeString(),
|
|
|
}
|
|
|
}));
|
|
|
break;
|
|
|
case OSC_ADDRESS.CLIENT_DURATION:
|
|
|
setClientStatus(prev=>({
|
|
|
...prev,
|
|
|
[id]:{
|
|
|
...prev[id],
|
|
|
duration: status,
|
|
|
timestamp: new Date().toLocaleTimeString(),
|
|
|
}
|
|
|
}));
|
|
|
break;
|
|
|
case OSC_ADDRESS.CLIENT_INPUT:
|
|
|
setClientStatus(prev=>({
|
|
|
...prev,
|
|
|
[id]:{
|
|
|
...prev[id],
|
|
|
input: status,
|
|
|
timestamp: new Date().toLocaleTimeString(),
|
|
|
}
|
|
|
}));
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function playCue({id, name, description, type, auto, audioFile, ...props}) {
|
|
|
|
|
|
console.log('Playing cue:', {id, name, description, type, auto, audioFile, ...props});
|
|
|
setCurrentCue({id, name, description, type, auto, audioFile, ...props});
|
|
|
|
|
|
// Handle other cue types and properties here
|
|
|
if(props.audioCue){
|
|
|
sendOscToSound(OSC_ADDRESS.SCS_GO_CUE, props.audioCue);
|
|
|
}
|
|
|
|
|
|
if(props.clientCue){
|
|
|
sendOsc(OSC_ADDRESS.PLAYCUE, props.clientCue,'all');
|
|
|
}
|
|
|
|
|
|
if(props.lightCue){
|
|
|
// sendOsc(OSC_ADDRESS.CLIENT_INPUT, props.lightCue);
|
|
|
|
|
|
if(props.lightCue=='fade_in_light') refLight.current.fadeIn(); // Fade in light for conversation start
|
|
|
if(props.lightCue=='fade_out_light') refLight.current.fadeOut(); // Fade out light for conversation end
|
|
|
|
|
|
}
|
|
|
if(props.reset){
|
|
|
//sendOsc(OSC_ADDRESS.RESETCUE,'','all');
|
|
|
refLight.current.set(1);
|
|
|
|
|
|
}
|
|
|
|
|
|
if(props.duration){
|
|
|
if(refTimer.current) clearInterval(refTimer.current);
|
|
|
let due= props.duration;
|
|
|
|
|
|
console.log('Start timer:', due);
|
|
|
const next=cuelist.find(c=>c.id==id+1);
|
|
|
|
|
|
refTimer.current= setInterval(()=>{
|
|
|
due--;
|
|
|
if(due<=0){
|
|
|
clearInterval(refTimer.current);
|
|
|
refTimer.current=null;
|
|
|
if(auto){
|
|
|
console.log('Auto play next cue:', next);
|
|
|
playCue(next);
|
|
|
}
|
|
|
}
|
|
|
refDuration.current.innerText= secondToTime(due);
|
|
|
},1000);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
function stop() {
|
|
|
console.log('Stop all');
|
|
|
|
|
|
sendOsc(OSC_ADDRESS.STOPCUE,'','all');
|
|
|
sendOscToSound(OSC_ADDRESS.SCS_FADE_ALL, '');
|
|
|
|
|
|
// cear timer
|
|
|
if(refTimer.current) clearInterval(refTimer.current);
|
|
|
}
|
|
|
function reset() {
|
|
|
console.log('Reset all');
|
|
|
|
|
|
sendOsc(OSC_ADDRESS.RESETCUE,'','all');
|
|
|
sendOscToSound(OSC_ADDRESS.SCS_STOP_ALL, '');
|
|
|
refLight.current.set(1);
|
|
|
|
|
|
}
|
|
|
function secondToTime(seconds) {
|
|
|
const minutes = Math.floor(seconds / 60);
|
|
|
const secs = Math.floor(seconds % 60);
|
|
|
return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
|
|
|
}
|
|
|
function getAudioDuration(){
|
|
|
|
|
|
const type= refCue.current?.type;
|
|
|
// console.log('getAudioDuration', type, refCue.current);
|
|
|
// switch(type) {
|
|
|
// case CueType.Bg:
|
|
|
if(refAudioBg.current) {
|
|
|
return `${secondToTime(refAudioBg.current.seek())} / ${secondToTime(refAudioBg.current.duration())} ${refAudioBg.current?.volume()}`;
|
|
|
} else {
|
|
|
return 'N/A';
|
|
|
}
|
|
|
// case CueType.Announce:
|
|
|
// return refAudioAnnounce.current ? `${secondToTime(refAudioAnnounce.current.seek())} / ${secondToTime(refAudioAnnounce.current.duration())}` : 'N/A';
|
|
|
// default:
|
|
|
// return 'N/A';
|
|
|
// }
|
|
|
|
|
|
|
|
|
}
|
|
|
useEffect(()=>{
|
|
|
if(currentCue) {
|
|
|
refCue.current = currentCue;
|
|
|
// console.log('Current Cue:', currentCue);
|
|
|
}
|
|
|
},[currentCue]);
|
|
|
useEffect(()=>{
|
|
|
fetch(`/${CUE_FILE}`)
|
|
|
.then(response => response.json())
|
|
|
.then(data => {
|
|
|
console.log('Cuelist data:', data);
|
|
|
setCuelist(data.cuelist);
|
|
|
})
|
|
|
.catch(error => {
|
|
|
console.error('Error fetching cuelist:', error);
|
|
|
});
|
|
|
|
|
|
|
|
|
listen('osc_message', (event) => {
|
|
|
// console.log(`Received OSC message: ${JSON.stringify(event.payload)}`);
|
|
|
onOsc(event.payload);
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
},[]);
|
|
|
|
|
|
return (
|
|
|
<main className="overflow-y-auto flex flex-row gap-8 p-4 min-h-screen">
|
|
|
<section className="flex-1 flex flex-col gap-4">
|
|
|
<section className="flex flex-row justify-between items-center gap-2">
|
|
|
<div className="flex flex-row font-bold items-stretch justify-center w-1/3 bg-pink-300 gap-4 p-2">
|
|
|
<div className="text-4xl">{currentCue ? `${currentCue.name}` : 'None'}</div>
|
|
|
<div className="text-4xl" ref={refDuration}></div>
|
|
|
</div>
|
|
|
<p>
|
|
|
{timestamp}
|
|
|
</p>
|
|
|
<button className="text-4xl self-stretch" onClick={stop}>stop all</button>
|
|
|
<button className="text-4xl self-stretch" onClick={reset}>reset all</button>
|
|
|
<Light ref={refLight} />
|
|
|
<span className="flex flex-col gap-2 items-stretch hidden">
|
|
|
<label htmlFor="fade_duration">Fade Duration</label>
|
|
|
<input type="range" id="fade_duration" min="0" max="30" step="0.1" defaultValue={DefaultFadeDuration} className="slider"
|
|
|
onChange={(e) => {
|
|
|
const value = parseFloat(e.target.value);
|
|
|
setFadeDuration(value);
|
|
|
}}></input>
|
|
|
<span className="text-2xl">{fadeDuration}s</span>
|
|
|
</span>
|
|
|
</section>
|
|
|
<table className="border-collapse w-full **:p-1 border-green-500 border-4">
|
|
|
<thead className="bg-green-500">
|
|
|
<tr className="text-left lowercase font-[900]">
|
|
|
{/* <th>ID</th> */}
|
|
|
<th></th>
|
|
|
<th>Name</th>
|
|
|
<th>Description</th>
|
|
|
<th>Type</th>
|
|
|
<th>Auto</th>
|
|
|
<th>Due</th>
|
|
|
<th>Light</th>
|
|
|
<th>Audio</th>
|
|
|
<th>Client</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
{cuelist?.map(({id, name, description, type, auto,...props}, index) => (
|
|
|
<tr key={id} className={currentCue?.id === id ? 'bg-green-200' : `${props.debug && 'text-red-500'}`}>
|
|
|
<td className="flex flex-row gap-2">
|
|
|
<button
|
|
|
onClick={()=>{
|
|
|
playCue({id, name, description, type, auto, ...props});
|
|
|
}}>go</button>
|
|
|
</td>
|
|
|
<td>{name}</td>
|
|
|
<td className="text-sm">{description}</td>
|
|
|
<td>{EmojiType[type]}</td>
|
|
|
<td>{auto ? '⤵️' : ''}</td>
|
|
|
<td>{props.duration}</td>
|
|
|
<td className="text-sm">{props.lightCue && `L${props.lightCue}`}</td>
|
|
|
<td className="text-sm">{props.audioCue && `S${props.audioCue}`}</td>
|
|
|
<td className={`text-sm ${props.clientCue&& 'bg-green-300 rounded-full text-center font-[900]'}`}>{props.clientCue || ''}</td>
|
|
|
</tr>
|
|
|
))}
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</section>
|
|
|
<table className="flex-1 text-sm">
|
|
|
<thead className="bg-blue-500">
|
|
|
<tr className="text-center lowercase font-[900]">
|
|
|
<th>id</th>
|
|
|
<th>status</th>
|
|
|
<th>cue</th>
|
|
|
<th>input</th>
|
|
|
<th>due</th>
|
|
|
<th>timestamp</th>
|
|
|
<th></th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
{Array.from(Array(CLIENT_COUNT).keys()).map((i) => {
|
|
|
const id=(i+1).toString();//.padStart(2,'0');
|
|
|
const log = clientStatus[id.toString()];
|
|
|
return (
|
|
|
<tr key={id} className="text-left lowercase">
|
|
|
<td className="font-[900]">{id}</td>
|
|
|
{<>
|
|
|
<td>{log?.status}</td>
|
|
|
<td>
|
|
|
<span className="bg-green-200 rounded-full p-2">{log?.name}</span>
|
|
|
</td>
|
|
|
<td className="flex-1 text-[9px] min-w-[80px]">
|
|
|
{log?.input?.substr(log.input.length - 20)?.split('').map((ch,i)=>i%3<1?ch:'*').join('')}
|
|
|
</td>
|
|
|
<td>{log?.duration}</td>
|
|
|
<td className="text-[12px]">{log?.timestamp}</td>
|
|
|
</>}
|
|
|
<td className="flex flex-row justify-end gap-1 p-1">
|
|
|
<button onClick={()=>sendOsc(OSC_ADDRESS.STOPCUE,'',id)}>stop</button>
|
|
|
<button onClick={()=>sendOsc(OSC_ADDRESS.RESETCUE,'',id)}>reset</button>
|
|
|
{cuelist?.filter(c=>c.clientCue && !c.debug).map((c, index)=>(
|
|
|
<button key={`${id}${c.clientCue}${index}`} onClick={()=>{
|
|
|
sendOsc(OSC_ADDRESS.PLAYCUE, c.clientCue, id);
|
|
|
}}>{c.clientCue}</button>
|
|
|
))}
|
|
|
</td>
|
|
|
</tr>
|
|
|
);
|
|
|
})}
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</main>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
export default App;
|
|
|
|
