Audio Sequences for Schedule

app/lib/constants.ts

@@ -4,7 +4,7 @@ export const RequiredVersions = {
   controller: VERSION,
   tts: '2.0.0',
   piper: '1.3.0',
-  sounder: '2.0.0'
+  sounder: '2.1.0'
 }
 
 export const DOCS_URL = `https://openschoolbell.co.uk`

app/lib/i18n.server.ts

@@ -1,6 +1,6 @@
 import {type LoaderFunctionArgs} from '@remix-run/node'
 
 import {
   locales,
   type SupportedLocale,
   FALLBACK_LOCALE,
@@ -46,7 +46,10 @@
   const messages: Messages = {}
 
   ;(Object.keys(locales[FALLBACK_LOCALE]) as MessageKey[]).forEach(key => {
-    messages[key] = locales[locale][key] ?? locales[FALLBACK_LOCALE][key]
+    messages[key] =
+      (locales[locale] as Partial<(typeof locales)[typeof FALLBACK_LOCALE]>)[
+        key
+      ] ?? locales[FALLBACK_LOCALE][key]
   })
 
   return messages

app/lib/sequence-builder.tsx

@@ -0,0 +1,132 @@
+import {useState, useEffect} from 'react'
+import {type Audio} from '@prisma/client'
+
+import CopyIcon from '@heroicons/react/24/outline/DocumentDuplicateIcon'
+import PasteIcon from '@heroicons/react/24/outline/ClipboardDocumentIcon'
+
+import {getSecondsAsTime, INPUT_CLASSES} from './utils'
+import {HelperText} from './ui'
+import {useTranslation} from './i18n'
+
+export const SequenceBuilder = ({
+  sounds,
+  initialQueue,
+  name,
+  label,
+  helperText
+}: {
+  sounds: Audio[]
+  initialQueue: string[]
+  name: string
+  label: string
+  helperText: string
+}) => {
+  const [queue, setQueue] = useState(initialQueue)
+  const [selected, setSelected] = useState(sounds[0].id)
+  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-4">
+        <HelperText>{helperText}</HelperText>
+      </div>
+      <input type="hidden" value={JSON.stringify(queue)} name={name} />
+      <div>
+        <select
+          className={INPUT_CLASSES}
+          defaultValue={sounds[0].id}
+          onChange={e => {
+            setSelected(e.target.value)
+          }}
+        >
+          {sounds.map(({id, name, duration}) => {
+            return (
+              <option key={id} value={id}>
+                {name} ({getSecondsAsTime(duration)})
+              </option>
+            )
+          })}
+        </select>
+        <button
+          className={`${INPUT_CLASSES} bg-green-300 mt-4`}
+          onClick={e => {
+            e.preventDefault()
+            setQueue([...queue, selected])
+          }}
+        >
+          Add Sound
+        </button>
+        <div className="grid grid-cols-2 gap-4 mt-4">
+          <button
+            className={`${INPUT_CLASSES} bg-blue-300 cursor-pointer`}
+            onClick={e => {
+              e.preventDefault()
+              localStorage.setItem(
+                'sequence-builder-clipboard',
+                JSON.stringify(queue)
+              )
+              alert('Copied sequence.')
+            }}
+          >
+            <CopyIcon className="w-6 m-auto" />
+          </button>
+          <button
+            className={`${INPUT_CLASSES} bg-blue-300 cursor-pointer disabled:bg-gray-300`}
+            onClick={e => {
+              e.preventDefault()
+              const item = localStorage.getItem('sequence-builder-clipboard')
+              if (item) {
+                setQueue(JSON.parse(item))
+              }
+            }}
+          >
+            <PasteIcon className="w-6 m-auto" />
+          </button>
+        </div>
+      </div>
+      <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>
+              <button
+                className="cursor-pointer row-span-2"
+                type="button"
+                onClick={e => {
+                  e.preventDefault()
+                  setQueue([
+                    ...queue.filter((v, di) => {
+                      return di !== i
+                    })
+                  ])
+                }}
+              >
+                ❌
+              </button>
+              <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

@@ -212,8 +212,7 @@ export const en = {
   'schedule.defaultOption': 'Default',
   'schedule.table.time': 'Time',
   'schedule.table.zone': 'Zone',
-  'schedule.table.sound': 'Sound',
-  'schedule.table.count': 'Count',
+  'schedule.table.sequenceLength': 'Sequence Length',
   'schedule.addButton': 'Add entry',
   'schedule.add.pageTitle': 'Add schedule entry',
   'schedule.form.time.label': 'Time',
@@ -223,10 +222,9 @@ export const en = {
   'schedule.form.day.helper': 'Day type that this schedule entry applies to.',
   'schedule.form.zone.label': 'Zone',
   'schedule.form.zone.helper': 'Zone where this schedule entry applies.',
-  'schedule.form.sound.label': 'Sound',
-  'schedule.form.sound.helper': 'Sound to play for this schedule entry.',
-  'schedule.form.count.label': 'Repeat count',
-  'schedule.form.count.helper': 'How many times to play the sound.',
+  'schedule.form.sequence.label': 'Sequence',
+  'schedule.form.sequence.helper':
+    'The sequence of sounds to play at this schedule. You can add the same sound multiple times.',
   'schedule.add.submit': 'Add entry',
   'schedule.error.noDays': 'At least one day must be selected',
   'schedule.edit.metaTitle': 'Edit {{time}}',

app/routes/schedule.$schedule.tsx

@@ -15,6 +15,7 @@ import {useTranslation} from '~/lib/i18n'
 import {translate} from '~/lib/i18n.shared'
 import {getRootI18n} from '~/lib/i18n.meta'
 import {initTranslations} from '~/lib/i18n.server'
+import {SequenceBuilder} from '~/lib/sequence-builder'
 
 export const meta: MetaFunction<typeof loader> = ({data, matches}) => {
   const {messages} = getRootI18n(matches)
@@ -94,14 +95,12 @@ export const action: ActionFunction = async ({request, params}) => {
   const time = formData.get('time') as string | undefined
   const zone = formData.get('zone') as string | undefined
   const day = formData.get('dayType') as string | undefined
-  const sound = formData.get('sound') as string | undefined
-  const count = formData.get('count') as string | undefined
+  const sequence = formData.get('sequence') as string | undefined
 
   invariant(time)
   invariant(zone)
   invariant(day)
-  invariant(sound)
-  invariant(count)
+  invariant(sequence)
 
   await prisma.schedule.update({
     where: {id: params.schedule},
@@ -110,8 +109,9 @@ export const action: ActionFunction = async ({request, params}) => {
       time,
       zoneId: zone,
       dayTypeId: day === '_' ? undefined : day,
-      audioId: sound,
-      count: parseInt(count)
+      audioId: JSON.parse(sequence)[0],
+      count: 0,
+      audioSequence: sequence
     }
   })
 
@@ -199,35 +199,13 @@ const EditSchedule = () => {
             })}
           </select>
         </FormElement>
-        <FormElement
-          label={t('schedule.form.sound.label')}
-          helperText={t('schedule.form.sound.helper')}
-        >
-          <select
-            name="sound"
-            className={INPUT_CLASSES}
-            defaultValue={schedule.audioId}
-          >
-            {sounds.map(({id, name}) => {
-              return (
-                <option key={id} value={id}>
-                  {name}
-                </option>
-              )
-            })}
-          </select>
-        </FormElement>
-        <FormElement
-          label={t('schedule.form.count.label')}
-          helperText={t('schedule.form.count.helper')}
-        >
-          <input
-            type="number"
-            defaultValue={schedule.count}
-            name="count"
-            className={INPUT_CLASSES}
-          />
-        </FormElement>
+        <SequenceBuilder
+          sounds={sounds}
+          initialQueue={JSON.parse(schedule.audioSequence)}
+          name="sequence"
+          label={t('schedule.form.sequence.label')}
+          helperText={t('schedule.form.sequence.helper')}
+        />
         <Actions
           actions={[
             {

app/routes/schedule._index.tsx

@@ -76,8 +76,7 @@ const Schedule = () => {
             <th className="p-2">{t('calendar.weekdays.saturday')}</th>
             <th className="p-2">{t('calendar.weekdays.sunday')}</th>
             <th className="p-2">{t('schedule.table.zone')}</th>
-            <th className="p-2">{t('schedule.table.sound')}</th>
-            <th className="p-2">{t('schedule.table.count')}</th>
+            <th className="p-2">{t('schedule.table.sequenceLength')}</th>
             <th></th>
           </tr>
         </thead>
@@ -86,7 +85,7 @@ const Schedule = () => {
             .filter(({dayTypeId}) => {
               return dayTypeId === (day === '_' ? null : day)
             })
-            .map(({id, time, weekDays, zone, audio, count}) => {
+            .map(({id, time, weekDays, zone, audioSequence}) => {
               const days = weekDays.split(',')
 
               return (
@@ -117,9 +116,8 @@ const Schedule = () => {
                   </td>
                   <td className="text-center">{zone.name}</td>
                   <td className="text-center">
-                    <Link to={`/sounds/${audio.id}`}>{audio.name}</Link>
+                    {(JSON.parse(audioSequence) as string[]).length}
                   </td>
-                  <td className="text-center">{count}</td>
                   <td className="text-center">
                     <form method="post" action={`/schedule/${id}/delete`}>
                       <button className="cursor-pointer">🗑️</button>

app/routes/schedule.add.tsx

@@ -16,6 +16,7 @@
 import {translate} from '~/lib/i18n.shared'
 import {getRootI18n} from '~/lib/i18n.meta'
 import {initTranslations} from '~/lib/i18n.server'
+import {SequenceBuilder} from '~/lib/sequence-builder'
 
 export const meta: MetaFunction = ({matches}) => {
   const {messages} = getRootI18n(matches)
@@ -90,23 +91,22 @@
   const time = formData.get('time') as string | undefined
   const zone = formData.get('zone') as string | undefined
   const day = formData.get('dayType') as string | undefined
-  const sound = formData.get('sound') as string | undefined
-  const count = formData.get('count') as string | undefined
+  const sequence = formData.get('sequence') as string | undefined
 
   invariant(time)
   invariant(zone)
   invariant(day)
-  invariant(sound)
-  invariant(count)
+  invariant(sequence)
 
   await prisma.schedule.create({
     data: {
       weekDays: days,
       time,
       zoneId: zone,
       dayTypeId: day === '_' ? undefined : day,
-      audioId: sound,
-      count: parseInt(count)
+      audioId: JSON.parse(sequence)[0],
+      count: 0,
+      audioSequence: sequence
     }
   })
 
@@ -118,8 +118,8 @@
   const navigate = useNavigate()
   const [day, setDay] = useLocalStorage<string>('day', '_')
   const [zone, setZone] = useLocalStorage<string>('zone', zones[0].id)
   const [sound, setSound] = useLocalStorage<string>('sound', sounds[0].id)
   const [count, setCount] = useLocalStorage<string>('count', '1')
   const {t} = useTranslation()
 
   return (
@@ -192,41 +192,13 @@
             })}
           </select>
         </FormElement>
-        <FormElement
-          label={t('schedule.form.sound.label')}
-          helperText={t('schedule.form.sound.helper')}
-        >
-          <select
-            name="sound"
-            className={INPUT_CLASSES}
-            defaultValue={sound}
-            onChange={e => {
-              setSound(e.target.value)
-            }}
-          >
-            {sounds.map(({id, name}) => {
-              return (
-                <option key={id} value={id}>
-                  {name}
-                </option>
-              )
-            })}
-          </select>
-        </FormElement>
-        <FormElement
-          label={t('schedule.form.count.label')}
-          helperText={t('schedule.form.count.helper')}
-        >
-          <input
-            type="number"
-            defaultValue={parseInt(count)}
-            name="count"
-            className={INPUT_CLASSES}
-            onChange={e => {
-              setCount(e.target.value)
-            }}
-          />
-        </FormElement>
+        <SequenceBuilder
+          sounds={sounds}
+          initialQueue={[]}
+          name="sequence"
+          label={t('schedule.form.sequence.label')}
+          helperText={t('schedule.form.sequence.helper')}
+        />
         <Actions
           actions={[
             {

app/routes/sounder-api.get-schedule.tsx

@@ -31,13 +31,12 @@ export const action = async ({request}: ActionFunctionArgs) => {
     }
   })
 
-  const data = schedules.map(({time, dayTypeId, weekDays, audioId, count}) => {
+  const data = schedules.map(({time, dayTypeId, weekDays, audioSequence}) => {
     return {
       time,
       day: dayTypeId ? dayTypeId : 'null',
       weekDays,
-      soundId: audioId,
-      count
+      sequence: audioSequence
     }
   })