24070-TheGreatTipsy
/
Source-Tauri-24070-ControlPanel
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
main
reng 3 months ago
parent 815720cebc
commit 4f808506c7
2 changed files with 83 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/App.css
  2. 154
      src/App.jsx

1
src/App.css
Unescape View File

@ -33,3 +33,4 @@ tr{
background: #15ff00; background: #15ff00;
box-shadow: -80px 0 0 80px #43e5f7; box-shadow: -80px 0 0 80px #43e5f7;
} }

154
src/App.jsx
Unescape View File

@ -7,6 +7,7 @@ import { OSC_ADDRESS } from "./utils/constant";
const DefaultFadeDuration = 3; // 1 second const DefaultFadeDuration = 3; // 1 second
const CLIENT_COUNT=12;
const CueType={ const CueType={
Bg: 'bg', Bg: 'bg',
@ -31,11 +32,11 @@ function App() {
const refNextCue = useRef(null); const refNextCue = useRef(null);
function sendOsc(addr, message){ function sendOsc(addr, message, id){
invoke('send_osc_message', { invoke('send_osc_message', {
key: addr, key: addr,
message, message: `${id}#${message}`,
host:'0.0.0.0:0', host:'0.0.0.0:0',
target:'192.168.234.255:8000', target:'192.168.234.255:8000',
}); });
@ -97,7 +98,7 @@ function App() {
} }
if(props.clientCue){ if(props.clientCue){
sendOsc(OSC_ADDRESS.PLAYCUE, props.clientCue); sendOsc(OSC_ADDRESS.PLAYCUE, props.clientCue,'all');
} }
if(props.lightCue){ if(props.lightCue){
@ -108,7 +109,7 @@ function App() {
function stop() { function stop() {
console.log('Stop all'); console.log('Stop all');
sendOsc(OSC_ADDRESS.STOPCUE,''); sendOsc(OSC_ADDRESS.STOPCUE,'','all');
sendOscToSound(OSC_ADDRESS.SCS_STOP_ALL, ''); sendOscToSound(OSC_ADDRESS.SCS_STOP_ALL, '');
} }
function secondToTime(seconds) { function secondToTime(seconds) {
@ -163,63 +164,63 @@ function App() {
},[]); },[]);
return ( return (
<main className="container"> <main className="overflow-y-auto flex flex-row gap-8 p-4 min-h-screen">
<div className="overflow-y-auto flex flex-col gap-8 p-4"> <section className="flex flex-col gap-4">
<section className="flex flex-row gap-4 justify-between items-center"> <section className="flex flex-row justify-between items-center">
<div className="text-6xl p-4 bg-pink-300">{currentCue ? `${currentCue.name}` : 'None'}</div> <div className="text-6xl p-4 bg-pink-300">{currentCue ? `${currentCue.name}` : 'None'}</div>
<p> <p>
{timestamp} {timestamp}
</p> </p>
<button onClick={stop}>stop all</button> <button onClick={stop}>stop all</button>
<span className="flex flex-col gap-2 items-stretch"> <span className="flex flex-col gap-2 items-stretch">
<label htmlFor="fade_duration">Fade Duration</label> <label htmlFor="fade_duration">Fade Duration</label>
<input type="range" id="fade_duration" min="0" max="30" step="0.1" defaultValue={DefaultFadeDuration} className="slider" <input type="range" id="fade_duration" min="0" max="30" step="0.1" defaultValue={DefaultFadeDuration} className="slider"
onChange={(e) => { onChange={(e) => {
const value = parseFloat(e.target.value); const value = parseFloat(e.target.value);
setFadeDuration(value); setFadeDuration(value);
}}></input> }}></input>
<span className="text-2xl">{fadeDuration}s</span> <span className="text-2xl">{fadeDuration}s</span>
</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 | Light | Audio</th>
<th>clientCue</th>
</tr>
</thead>
<tbody>
{cuelist?.map(({id, name, description, type, auto,...props}, index) => (
<tr key={id} className={currentCue?.id === id ? 'bg-green-200' : ''}>
<td className="flex flex-row gap-2">
<button
onClick={()=>{
playCue({id, name, description, type, auto, ...props});
}}>go</button>
{type==CueType.Announce && <button
onClick={()=>{
if(props.audioCue){
sendOscToSound(OSC_ADDRESS.SCS_STOP_ALL, '');
}
}}>stop</button>}
</td>
<td>{name}</td>
<td>{description}</td>
<td>{EmojiType[type]}</td>
<td>{auto ? '⤵️' : ''}</td>
<td>{props.duration} {props.lightCue && `L${props.lightCue}`} {props.audioCue && `S${props.audioCue}`}</td>
<td className={`${props.clientCue&& 'bg-green-300 rounded-full text-center font-[900]'}`}>{props.clientCue || ''}</td>
</tr>
))}
</tbody>
</table>
</section> </section>
<table className="border-collapse w-full **:p-2 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 | Light | Audio</th>
<th>clientCue</th>
</tr>
</thead>
<tbody>
{cuelist?.map(({id, name, description, type, auto,...props}, index) => (
<tr key={id} className={currentCue?.id === id ? 'bg-green-200' : ''}>
<td className="flex flex-row gap-2">
<button
onClick={()=>{
playCue({id, name, description, type, auto, audioFile, ...props});
}}>go</button>
{type==CueType.Announce && <button
onClick={()=>{
if(props.audioCue){
sendOscToSound(OSC_ADDRESS.SCS_STOP_ALL, '');
}
}}>stop</button>}
</td>
<td>{name}</td>
<td>{description}</td>
<td>{EmojiType[type]}</td>
<td>{auto ? '⤵️' : ''}</td>
<td>{props.duration} {props.lightCue && `L${props.lightCue}`} {props.audioCue && `S${props.audioCue}`}</td>
<td className={`${props.clientCue&& 'bg-green-300 rounded-full text-center font-[900]'}`}>{props.clientCue || ''}</td>
</tr>
))}
</tbody>
</table>
<table> <table>
<thead className="bg-blue-500"> <thead className="bg-blue-500">
<tr className="text-left lowercase font-[900]"> <tr className="text-left lowercase font-[900]">
@ -231,23 +232,30 @@ function App() {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{Object.entries(clientStatus).map(([id, log])=>( {Array.from(Array(CLIENT_COUNT).keys()).map((i) => {
<tr key={id} className="text-left lowercase font-[900]"> const id=i+1;
<td className="font-[900]">{id}</td> const log = clientStatus[id];
<td>{log[0]?.status}</td> return (
<td>{log[0]?.name}</td> <tr key={id} className="text-left lowercase font-[900]">
<td>{log[0]?.timestamp}</td> <td className="font-[900]">{id}</td>
<td> {<>
<button>stop</button> <td>{log?.length>0 &&log[0]?.status}</td>
<button>Q1</button> <td>{log?.length>0 && log[0]?.name}</td>
<button>Q2</button> <td>{log?.length>0 &&log[0]?.timestamp}</td>
<button>Q6</button> </>}
<td className="flex flex-row gap-1 p-1">
<button onClick={()=>sendOsc(OSC_ADDRESS.STOPCUE,'',id)}>stop</button>
{cuelist?.filter(c=>c.clientCue).map(c=>(
<button key={c.clientCue} onClick={()=>{
sendOsc(OSC_ADDRESS.PLAYCUE, c.clientCue, id);
}}>{c.clientCue}</button>
))}
</td> </td>
</tr> </tr>
))} );
})}
</tbody> </tbody>
</table> </table>
</div>
</main> </main>
); );
} }

Write Preview
Loading…
Cancel
Save