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.spec.ts

@@ -0,0 +1,50 @@
+import { expect } from 'chai'
+import { SceneBuilder, SCENE_TITLES } from './SceneBuilder'
+
+describe('SceneBuilder', () => {
+  it('should record scenes with titles', async () => {
+    const builder = new SceneBuilder()
+    
+    await builder.record('connect', async () => {
+      // Simulate some work
+      await new Promise(resolve => setTimeout(resolve, 100))
+    })
+    
+    expect(builder.scenes).to.have.length(1)
+    expect(builder.scenes[0].name).to.equal('connect')
+    expect(builder.scenes[0].title).to.equal('Connecting to MQTT Broker')
+    expect(builder.scenes[0].duration).to.be.greaterThan(90)
+  })
+  
+  it('should have titles for all scene types', () => {
+    const sceneNames = Object.keys(SCENE_TITLES)
+    expect(sceneNames.length).to.be.greaterThan(0)
+    
+    // Verify each scene has a non-empty title
+    sceneNames.forEach(name => {
+      expect(SCENE_TITLES[name as keyof typeof SCENE_TITLES]).to.be.a('string')
+      expect(SCENE_TITLES[name as keyof typeof SCENE_TITLES].length).to.be.greaterThan(0)
+    })
+  })
+  
+  it('should record multiple scenes in sequence', async () => {
+    const builder = new SceneBuilder()
+    
+    await builder.record('connect', async () => {
+      await new Promise(resolve => setTimeout(resolve, 50))
+    })
+    
+    await builder.record('numeric_plots', async () => {
+      await new Promise(resolve => setTimeout(resolve, 50))
+    })
+    
+    expect(builder.scenes).to.have.length(2)
+    expect(builder.scenes[0].name).to.equal('connect')
+    expect(builder.scenes[0].title).to.equal('Connecting to MQTT Broker')
+    expect(builder.scenes[1].name).to.equal('numeric_plots')
+    expect(builder.scenes[1].title).to.equal('Plot Topic History')
+    
+    // Second scene should start at or after first one ends
+    expect(builder.scenes[1].start).to.be.at.least(builder.scenes[0].stop)
+  })
+})

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],
     })
   }
 }