Source-Tauri-24070-ControlPanel/src/App.jsx

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";


const DefaultFadeDuration = 3; // 1 second
const CLIENT_COUNT=12;

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);


  function sendOsc(addr, message, id){

    invoke('send_osc_message', {
          key: addr,
          message: `${id}#${message}`,
          host:'0.0.0.0:0',
          target:'192.168.234.255:8000',
    });

  }


  function sendOscToSound(addr, message){

    invoke('send_osc_message', {
          key: addr,
          message,
          host:'0.0.0.0:0',
          target:'192.168.234.255:58100',
    });

  }

  function onOsc(message){
    
    const [id, status, name]= message.args[0]?.split('#');
    if(clientStatus[id]){
      setClientStatus(prev=>({
        ...prev,
        [id]:[
          {            
            status,
            name,
            timestamp: new Date().toLocaleTimeString(),
          },
          ...prev[id],         
        ]
      }));
    }else{
      setClientStatus(prev=>({
        ...prev,
        [id]:[{
          status,
          name,
          timestamp: new Date().toLocaleTimeString(),
        }]
      }));
    }

    

  }
  

 

  function playCue({id, name, description, type, auto, audioFile, ...props}) {
      
    console.log('Playing cue:', {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);
      }

  }
  function stop() {
    console.log('Stop all');

    sendOsc(OSC_ADDRESS.STOPCUE,'','all');
    sendOscToSound(OSC_ADDRESS.SCS_STOP_ALL, '');
  }
  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('/cuelist.json')
          .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: ${event.payload}`);
          onOsc(event.payload);
      });



  },[]);

  return (
    <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>
            <thead className="bg-blue-500">
              <tr className="text-left lowercase font-[900]">
                <th>id</th>
                <th>status</th>
                <th>cue</th>
                <th>timestamp</th>
                <th>control</th>
              </tr>
            </thead>
            <tbody>
              {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>
    </main>
  );
}

export default App;