feat: goto with osc

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

@@ -14,6 +14,8 @@ import style from './EventBlock.module.css';
 const ExpandedBlock = (props) => {
   const { provided, data, next, delay, delayValue, actionHandler } = props;
 
+  const oscid = data.id.length > 4 ? '...' : data.id;
+
   return (
     <>
       <span className={style.drag} {...provided.dragHandleProps}>
@@ -69,6 +71,7 @@ const ExpandedBlock = (props) => {
             actionHandler('update', { field: 'note', value: v })
           }
         />
+        <span className={style.oscLabel}>{`OSC ID: ${oscid}`}</span>
       </div>
       <Icon
         className={style.more}

client/src/features/editors/list/EventBlock.module.css

@@ -138,9 +138,6 @@
 
 .titleContainer {
   grid-area: text;
-  display: inline-flex;
-  position: relative;
-  align-self: flex-start;
   height: 100%;
 
   background-color: rgba(255, 255, 255, 0.03);
@@ -149,6 +146,14 @@
   width: 100%;
   display: block;
 }
+
+.oscLabel {
+  color: #4bffabcc;
+  font-size: 0.8em;
+  float: right;
+  padding-right: 1em;
+}
+
 /* ================ MORE ================ */
 
 .more {

client/src/features/modals/SettingsModal.jsx

@@ -14,11 +14,7 @@ import {
   Button,
   Textarea,
 } from '@chakra-ui/react';
-import {
+import { fetchEvent, postEvent, eventNamespace } from '../../app/api/eventApi';
-  fetchEvent,
-  postEvent,
-  eventNamespace,
-} from '../../app/api/eventApi';
 import { useEffect, useState } from 'react';
 import { useFetch } from '../../app/hooks/useFetch';
 

server/classes/EventTimer.js

@@ -424,6 +424,22 @@ class EventTimer extends Timer {
     this.broadcastState();
   }
 
+  loadEventById(eventId) {
+    let eventIndex = this._eventlist.findIndex((e) => e.id === eventId);
+
+    console.log(
+      eventId,
+      this.selectedEventId,
+      eventIndex === this.selectedEventId
+    );
+
+    if (eventIndex === -1) return;
+    this.pause();
+    this.loadEvent(eventIndex);
+
+    this.broadcastState();
+  }
+
   // Loads a given event
   // load timers
   // load selectedEvent

server/controllers/OscController.js

@@ -56,6 +56,7 @@ const initiateOSC = (config) => {
         break;
       case 'goto':
         console.log('calling goto with', args);
+        global.timer.loadEventById(args.toLowerCase());
         break;
 
       default:

server/controllers/eventsController.js

@@ -2,7 +2,8 @@
 const db = require('../app.js').db;
 
 // utils
-const { nanoid } = require('nanoid');
+const customAlphabet = require('nanoid').customAlphabet;
+const nanoid = customAlphabet('1234567890abcdef', 4);
 const eventDefs = require('../data/eventsDefinition.js');
 
 function _getEventsCount() {
@@ -85,7 +86,7 @@ exports.eventsPost = async (req, res) => {
 
   // ensure structure
   let newEvent = {};
-  req.body.id = nanoid(6);
+  req.body.id = nanoid();
 
   switch (req.body.type) {
     case 'event':