Segment demo video by scene with embedded GIF segments (#990)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

src/spec/SceneBuilder.ts

@@ -3,6 +3,7 @@ export interface Scene {
   start: number
   stop: number
   duration: number
+  title?: string
 }
 
 export type SceneNames =
@@ -22,6 +23,24 @@ export type SceneNames =
   | 'sparkplugb-decoding'
   | 'end'
 
+export const SCENE_TITLES: Record<SceneNames, string> = {
+  connect: 'Connecting to MQTT Broker',
+  topic_updates: 'Topic Updates',
+  numeric_plots: 'Plot Topic History',
+  'json-formatting': 'Formatted Messages',
+  diffs: 'Diff Capability',
+  publish_topic: 'Publish Topics',
+  json_formatting_publish: 'JSON Formatting Publish',
+  clipboard: 'Copy to Clipboard',
+  topic_filter: 'Search Topic Hierarchy',
+  delete_retained_topics: 'Delete Retained Topics',
+  settings: 'Settings',
+  customize_subscriptions: 'Customize Subscriptions',
+  keyboard_shortcuts: 'Keyboard Shortcuts',
+  'sparkplugb-decoding': 'SparkplugB Decoding',
+  end: 'The End',
+}
+
 export class SceneBuilder {
   public scenes: Array<Scene> = []
   public offset = Date.now()
@@ -36,6 +55,7 @@ export class SceneBuilder {
       start,
       stop,
       duration: stop - start,
+      title: SCENE_TITLES[name],
     })
   }
 }