update description

public/cuelist.json

@@ -4,7 +4,7 @@
             "id": 1, 
             "name": "Q1", 
             "type": "bg",
-            "description": "preset bg",
+            "description": "[外場+電話亭] preset 音樂",
             "audioCue": "Q0",
             "clientCue":"Q1",
             "reset":true
@@ -13,14 +13,14 @@
             "id": 2, 
             "name": "Q2", 
             "type": "announce",
-            "description": "announce",
+            "description": "[外場] announce",
             "audioCue": "Q1"
         },
         {
           "id": 3, 
             "name": "Q3", 
             "type": "bg",
-            "description": "(START) CQ2-CQ4.1",
+            "description": "[電話亭] 開始流程 CQ2-CQ4.1",
             "audioCue": "Q3",
             "clientCue":"Q2",
             "duration":482,
@@ -31,7 +31,7 @@
           "id": 4, 
             "name": "Q4", 
             "type": "light",
-            "description": "(AI) CQ4.11-CQ5.6",
+            "description": "[電話亭] 記憶裝置啟動 (AI) CQ4.11-CQ5.6",
             "lightCue":"fade_out_light",
             "duration":298,
             "clientCue":"Q4.11",
@@ -41,7 +41,7 @@
             "id": 5, 
             "name": "Q5", 
             "type": "bg",
-            "description": "(END)",
+            "description": "[外場+電話亭] 結尾音樂(END)",
             "audioCue": "Q4",
             "status":"end",
             "lightCue":"fade_in_light",

src/App.jsx

@@ -220,7 +220,7 @@ function App() {
   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">            
+            <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>
@@ -228,8 +228,8 @@ function App() {
               <p>
                 {timestamp}
               </p>
-              <button className="text-4xl" onClick={stop}>stop all</button>
-              <button className="text-4xl" onClick={reset}>reset all</button>
+              <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>
@@ -272,19 +272,19 @@ function App() {
                                     }}>stop</button>}
                             </td>
                             <td>{name}</td>
-                            <td>{description}</td>
+                            <td className="text-sm">{description}</td>
                             <td>{EmojiType[type]}</td>
                             <td>{auto ? '⤵️' : ''}</td>
                             <td>{props.duration}</td>
-                            <td>{props.lightCue && `L${props.lightCue}`}</td>
-                            <td>{props.audioCue && `S${props.audioCue}`}</td>
-                            <td className={`${props.clientCue&& 'bg-green-300 rounded-full text-center font-[900]'}`}>{props.clientCue || ''}</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">
+          <table className="flex-1 text-sm">
             <thead className="bg-blue-500">
               <tr className="text-center lowercase font-[900]">
                 <th>id</th>
@@ -317,7 +317,7 @@ function App() {
                   <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).map((c, index)=>(
+                    {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>