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
Split 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;
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 CLIENT_COUNT=12;
const CueType={
Bg: 'bg',
@ -31,11 +32,11 @@ function App() {
const refNextCue = useRef(null);
function sendOsc(addr, message){
function sendOsc(addr, message, id){
invoke('send_osc_message', {
key: addr,
message,
message: `${id}#${message}`,
host:'0.0.0.0:0',
target:'192.168.234.255:8000',
});
@ -97,7 +98,7 @@ function App() {
}
if(props.clientCue){
sendOsc(OSC_ADDRESS.PLAYCUE, props.clientCue);
sendOsc(OSC_ADDRESS.PLAYCUE, props.clientCue,'all');
}
if(props.lightCue){
@ -108,7 +109,7 @@ function App() {
function stop() {
console.log('Stop all');
sendOsc(OSC_ADDRESS.STOPCUE,'');
sendOsc(OSC_ADDRESS.STOPCUE,'','all');
sendOscToSound(OSC_ADDRESS.SCS_STOP_ALL, '');
}
function secondToTime(seconds) {
@ -163,63 +164,63 @@ function App() {
},[]);
return (
<main className="container">
<div className="overflow-y-auto flex flex-col gap-8 p-4">
<section className="flex flex-row gap-4 justify-between items-center">
<div className="text-6xl p-4 bg-pink-300">{currentCue ? `${currentCue.name}` : 'None'}</div>
<p>
{timestamp}
</p>
<button onClick={stop}>stop all</button>
<span className="flex flex-col gap-2 items-stretch">
<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>
<main className="overflow-y-auto flex flex-row gap-8 p-4 min-h-screen">
<section className="flex flex-col gap-4">
<section className="flex flex-row justify-between items-center">
<div className="text-6xl p-4 bg-pink-300">{currentCue ? `${currentCue.name}` : 'None'}</div>
<p>
{timestamp}
</p>
<button onClick={stop}>stop all</button>
<span className="flex flex-col gap-2 items-stretch">
<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 | 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>
<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>
<thead className="bg-blue-500">
<tr className="text-left lowercase font-[900]">
@ -231,23 +232,30 @@ function App() {
</tr>
</thead>
<tbody>
{Object.entries(clientStatus).map(([id, log])=>(
<tr key={id} className="text-left lowercase font-[900]">
<td className="font-[900]">{id}</td>
<td>{log[0]?.status}</td>
<td>{log[0]?.name}</td>
<td>{log[0]?.timestamp}</td>
<td>
<button>stop</button>
<button>Q1</button>
<button>Q2</button>
<button>Q6</button>
{Array.from(Array(CLIENT_COUNT).keys()).map((i) => {
const id=i+1;
const log = clientStatus[id];
return (
<tr key={id} className="text-left lowercase font-[900]">
<td className="font-[900]">{id}</td>
{<>
<td>{log?.length>0 &&log[0]?.status}</td>
<td>{log?.length>0 && log[0]?.name}</td>
<td>{log?.length>0 &&log[0]?.timestamp}</td>
</>}
<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>
</tr>
))}
);
})}
</tbody>
</table>
</div>
</main>
);
}

Write Preview
Loading…
Cancel
Save