style: clarify OSC triggers

- show path for goto
- show path for gotoid

client/src/features/editors/list/EventBlock.jsx

@@ -14,7 +14,8 @@ import { SelectCollapse, HandleCollapse } from 'app/context/collapseAtom';
 import { useAtom } from 'jotai';
 
 const ExpandedBlock = (props) => {
-  const { provided, data, next, delay, delayValue, actionHandler } = props;
+  const { provided, data, eventIndex, next, delay, delayValue, actionHandler } =
+    props;
 
   const oscid = data.id.length > 4 ? '...' : data.id;
 
@@ -80,7 +81,9 @@ const ExpandedBlock = (props) => {
             actionHandler('update', { field: 'note', value: v })
           }
         />
-        <span className={style.oscLabel}>{`OSC ID: ${oscid}`}</span>
+        <span className={style.oscLabel}>
+          {`/ontime/goto ${eventIndex}  << OSC >> /ontime/gotoid ${oscid}`}
+        </span>
       </div>
       <Icon
         className={style.more}
@@ -156,7 +159,7 @@ const CollapsedBlock = (props) => {
 };
 
 export default function EventBlock(props) {
-  const { data, selected, delay, index, actionHandler } = props;
+  const { data, selected, delay, index, eventIndex, actionHandler } = props;
 
   // const [collapsed, setCollapsed] = useState(checkLocalStorage(data.id));
 
@@ -200,6 +203,7 @@ export default function EventBlock(props) {
           ) : (
             <ExpandedBlock
               provided={provided}
+              eventIndex={eventIndex}
               data={data}
               next={props.next}
               delay={delay}

client/src/features/editors/list/EventList.jsx

@@ -117,6 +117,7 @@ export default function EventList(props) {
 
   console.log('EventList: events in event list', events);
   let cumulativeDelay = 0;
+  let eventIndex = -1;
 
   console.log('debug selected', selected);
 
@@ -132,10 +133,18 @@ export default function EventList(props) {
             >
               {events.map((e, index) => {
                 let isCursor = cursor === index;
-                if (index === 0) cumulativeDelay = 0;
+                if (index === 0) {
+                  cumulativeDelay = 0;
+                  eventIndex = -1;
+                }
                 if (e.type === 'delay' && e.duration != null) {
                   cumulativeDelay += e.duration;
-                } else if (e.type === 'block') cumulativeDelay = 0;
+                } else if (e.type === 'block') {
+                  cumulativeDelay = 0;
+                } else if (e.type === 'event') {
+                  eventIndex++;
+                }
+
                 return (
                   <div
                     ref={isCursor ? cursorRef : undefined}
@@ -145,6 +154,7 @@ export default function EventList(props) {
                     <EventListItem
                       type={e.type}
                       index={index}
+                      eventIndex={eventIndex}
                       data={e}
                       selected={selected?.id === e.id}
                       next={next === e.id}

client/src/features/editors/list/EventListItem.jsx

@@ -18,6 +18,7 @@ const EventListItem = (props) => {
   const {
     type,
     index,
+    eventIndex,
     data,
     selected,
     next,
@@ -71,6 +72,7 @@ const EventListItem = (props) => {
       return (
         <EventBlock
           index={index}
+          eventIndex={eventIndex}
           data={data}
           selected={selected}
           next={next}