feat: re-implement action to broadcast using sequence builder

app/lib/sequence-builder.tsx

@@ -1,4 +1,4 @@
 import {useState, useEffect} from 'react'
 import {type Audio} from '@prisma/client'
 
 import CopyIcon from '@heroicons/react/24/outline/DocumentDuplicateIcon'
@@ -130,3 +130,49 @@
     </div>
   )
 }
+
+export const SequenceViewer = ({
+  queue,
+  sounds,
+  label
+}: {
+  queue: string[]
+  sounds: Audio[]
+  label: string
+}) => {
+  const {t} = useTranslation()
+
+  let duration = 0
+
+  return (
+    <div className="grid grid-cols-4 gap-4">
+      <span className="font-semibold col-span-4">{label}</span>
+      <div className="col-span-3 row-span-2">
+        {queue.map((queuedId, i) => {
+          const sound = sounds.filter(({id}) => {
+            return id === queuedId
+          })[0]
+
+          duration += sound.duration
+
+          return (
+            <div
+              key={`${sound.id}-${i}`}
+              className="border-b border-b-stone-100 mb-2 pb-2 grid grid-cols-5"
+            >
+              <p className="col-span-4">{sound.name}</p>
+              <p className="col-span-4 text-sm text-gray-400">
+                {getSecondsAsTime(sound.duration)}
+              </p>
+            </div>
+          )
+        })}
+        <div>
+          {t('broadcast.builder.totalDuration', {
+            duration: getSecondsAsTime(duration)
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

app/locales/en.ts

@@ -53,7 +53,9 @@ export const en = {
     'An emoji to use as the action icon. Note that emoji render differently on the RPi screen.',
   'actions.form.type.label': 'Type',
   'actions.form.type.helper':
-    'Broadcast runs a broadcast to the supplied zone. Lockdown toggles a system wide lockdown.',
+    'Broadcast runs a broadcast to the supplied zone, you can build the broadcaast once the action has been created. Lockdown toggles a system wide lockdown.',
+  'actions.form.sequence.label': 'Sequence',
+  'actions.form.sequence.helper': 'Build your broadcast sequence.',
   'actions.form.sound.label': 'Sound',
   'actions.form.sound.helper': 'Which sound should be used when broadcasting?',
   'button.cancel': 'Cancel',
@@ -66,6 +68,7 @@ export const en = {
   'actions.detail.sound': 'Sound:',
   'actions.edit.metaTitle': 'Edit {{name}}',
   'actions.edit.pageTitle': 'Edit {{name}}',
+  'actions.detail.sequence.label': 'Sequence',
   'backup.pageTitle': 'Backups',
   'backup.create': 'Create Backup',
   'broadcast.pageTitle': 'Broadcast',

app/routes/actions.$action._index.tsx

@@ -3,7 +3,7 @@
   type MetaFunction,
   redirect
 } from '@remix-run/node'
 import {useLoaderData, Link, useNavigate} from '@remix-run/react'
 
 import {getPrisma} from '~/lib/prisma.server'
 import {checkSession} from '~/lib/session'
@@ -12,6 +12,7 @@
 import {useTranslation} from '~/lib/i18n'
 import {translate} from '~/lib/i18n.shared'
 import {getRootI18n} from '~/lib/i18n.meta'
+import {SequenceViewer} from '~/lib/sequence-builder'
 
 export const meta: MetaFunction = ({matches}) => {
   const {messages} = getRootI18n(matches)
@@ -28,15 +29,16 @@
   const prisma = getPrisma()
 
   const action = await prisma.action.findFirstOrThrow({
-    where: {id: params.action},
-    include: {audio: true}
+    where: {id: params.action}
   })
 
-  return {action}
+  const sounds = await prisma.audio.findMany({orderBy: {name: 'asc'}})
+
+  return {action, sounds}
 }
 
 const Action = () => {
-  const {action} = useLoaderData<typeof loader>()
+  const {action, sounds} = useLoaderData<typeof loader>()
   const navigate = useNavigate()
   const {t} = useTranslation()
   const typeLabels: Record<string, string> = {
@@ -54,11 +56,12 @@
           {t('actions.detail.type')}:{' '}
           {typeLabels[action.action] ?? action.action}
         </p>
-        <p>
-          {t('actions.detail.sound')}{' '}
-          <Link to={`/sounds/${action.audioId}`}>{action.audio!.name}</Link>
-        </p>
       </div>
+      <SequenceViewer
+        sounds={sounds}
+        label={t('actions.detail.sequence.label')}
+        queue={action.data === '' ? [] : JSON.parse(action.data)}
+      />
       <Actions
         actions={[
           {

app/routes/actions.$action.edit.tsx

@@ -14,6 +14,7 @@ import {Page, FormElement, Actions} from '~/lib/ui'
 import {useTranslation} from '~/lib/i18n'
 import {translate} from '~/lib/i18n.shared'
 import {getRootI18n} from '~/lib/i18n.meta'
+import {SequenceBuilder} from '~/lib/sequence-builder'
 
 export const meta: MetaFunction<typeof loader> = ({matches, data}) => {
   const {messages} = getRootI18n(matches)
@@ -61,16 +62,16 @@ export const action = async ({params, request}: ActionFunctionArgs) => {
   const name = formData.get('name') as string | undefined
   const icon = formData.get('icon') as string | undefined
   const action = formData.get('action') as string | undefined
-  const sound = formData.get('sound') as string | undefined
+  const data = formData.get('data') as string | undefined
 
   invariant(name)
   invariant(icon)
   invariant(action)
-  invariant(sound)
+  invariant(data)
 
   await prisma.action.update({
     where: {id: params.action},
-    data: {name, icon, action, audioId: sound}
+    data: {name, icon, action, data}
   })
 
   return redirect(`/actions/${params.action}`)
@@ -117,24 +118,13 @@ const AddAction = () => {
             <option value="lockdown">{t('actions.types.lockdown')}</option>
           </select>
         </FormElement>
-        <FormElement
-          label={t('actions.form.sound.label')}
-          helperText={t('actions.form.sound.helper')}
-        >
-          <select
-            name="sound"
-            className={INPUT_CLASSES}
-            defaultValue={action.audioId!}
-          >
-            {sounds.map(({id, name}) => {
-              return (
-                <option key={id} value={id}>
-                  {name}
-                </option>
-              )
-            })}
-          </select>
-        </FormElement>
+        <SequenceBuilder
+          sounds={sounds}
+          initialQueue={action.data === '' ? [] : JSON.parse(action.data)}
+          name="data"
+          label={t('actions.form.sequence.label')}
+          helperText={t('actions.form.sequence.helper')}
+        />
         <Actions
           actions={[
             {

app/routes/actions.add.tsx

@@ -56,15 +56,13 @@
   const name = formData.get('name') as string | undefined
   const icon = formData.get('icon') as string | undefined
   const action = formData.get('action') as string | undefined
-  const sound = formData.get('sound') as string | undefined
 
   invariant(name)
   invariant(icon)
   invariant(action)
-  invariant(sound)
 
   const newAction = await prisma.action.create({
-    data: {name, icon, action, audioId: sound}
+    data: {name, icon, action}
   })
 
   void trigger(`New Action: ${name}`, 'newAction')
@@ -73,7 +71,7 @@
 }
 
 const AddAction = () => {
   const {sounds} = useLoaderData<typeof loader>()
   const navigate = useNavigate()
   const {t} = useTranslation()
 
@@ -101,20 +99,6 @@
             <option value="lockdown">{t('actions.types.lockdown')}</option>
           </select>
         </FormElement>
-        <FormElement
-          label={t('actions.form.sound.label')}
-          helperText={t('actions.form.sound.helper')}
-        >
-          <select name="sound" className={INPUT_CLASSES}>
-            {sounds.map(({id, name}) => {
-              return (
-                <option key={id} value={id}>
-                  {name}
-                </option>
-              )
-            })}
-          </select>
-        </FormElement>
         <Actions
           actions={[
             {

app/routes/hook.$hook.tsx

@@ -29,7 +29,7 @@ export const action = async ({request, params}: ActionFunctionArgs) => {
       }
 
       if (webhook.action.audioId) {
-        await broadcast(zone, webhook.action.audioId)
+        await broadcast(zone, webhook.action.data)
       }
       break
     case 'lockdown':

prisma/migrations/20260323193952_add_data_to_action/migration.sql

@@ -0,0 +1,17 @@
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Action" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "icon" TEXT NOT NULL,
+    "action" TEXT NOT NULL,
+    "data" TEXT NOT NULL DEFAULT '',
+    "audioId" TEXT,
+    CONSTRAINT "Action_audioId_fkey" FOREIGN KEY ("audioId") REFERENCES "Audio" ("id") ON DELETE SET NULL ON UPDATE CASCADE
+);
+INSERT INTO "new_Action" ("action", "audioId", "icon", "id", "name") SELECT "action", "audioId", "icon", "id", "name" FROM "Action";
+DROP TABLE "Action";
+ALTER TABLE "new_Action" RENAME TO "Action";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

prisma/schema.prisma

@@ -106,7 +106,9 @@ model Action {
   name   String
   icon   String
   action String
+  data   String @default("")
 
+  // BREAKING CHANGE When we make the jump to 2.x this can be removed. Not Worth a full V2 bump just to take it out.
   audio   Audio?  @relation(fields: [audioId], references: [id])
   audioId String?
 

prisma/seed.js

@@ -74,6 +74,19 @@ const main = async () => {
 
     await Promise.all(promises)
   }
+
+  const actionsWithAudioIdAndNoData = await prisma.action.findMany({
+    where: {audioId: {not: ''}, data: ''}
+  })
+
+  await Promise.all(
+    actionsWithAudioIdAndNoData.map(action => {
+      return prisma.action.update({
+        where: {id: action.id},
+        data: {data: `["${action.audioId}"]`}
+      })
+    })
+  )
 }
 
 main()