@xiboplayer/renderer 0.3.7 → 0.4.0

package/src/renderer-lite.test.js

@@ -155,6 +155,121 @@ describe('RendererLite', () => {
         direction: 'S'
       });
     });
+
+    it('should parse region exit transition from options', () => {
+      const xlf = `
+        <layout>
+          <region id="r1" width="960" height="540" top="0" left="0">
+            <options>
+              <exitTransType>fadeOut</exitTransType>
+              <exitTransDuration>500</exitTransDuration>
+              <exitTransDirection>N</exitTransDirection>
+            </options>
+            <media id="m1" type="image" duration="10">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const layout = renderer.parseXlf(xlf);
+      const region = layout.regions[0];
+
+      expect(region.exitTransition).toEqual({
+        type: 'fadeOut',
+        duration: 500,
+        direction: 'N'
+      });
+    });
+
+    it('should parse region exit transition with defaults for missing duration and direction', () => {
+      const xlf = `
+        <layout>
+          <region id="r1" width="960" height="540" top="0" left="0">
+            <options>
+              <exitTransType>flyOut</exitTransType>
+            </options>
+            <media id="m1" type="image" duration="10">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const layout = renderer.parseXlf(xlf);
+      const region = layout.regions[0];
+
+      expect(region.exitTransition).toEqual({
+        type: 'flyOut',
+        duration: 1000,
+        direction: 'N'
+      });
+    });
+
+    it('should set exitTransition to null when region has no options', () => {
+      const xlf = `
+        <layout>
+          <region id="r1" width="960" height="540" top="0" left="0">
+            <media id="m1" type="image" duration="10">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const layout = renderer.parseXlf(xlf);
+      const region = layout.regions[0];
+
+      expect(region.exitTransition).toBeNull();
+    });
+
+    it('should set exitTransition to null when region options have no exitTransType', () => {
+      const xlf = `
+        <layout>
+          <region id="r1" width="960" height="540" top="0" left="0">
+            <options>
+              <someOtherOption>value</someOtherOption>
+            </options>
+            <media id="m1" type="image" duration="10">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const layout = renderer.parseXlf(xlf);
+      const region = layout.regions[0];
+
+      expect(region.exitTransition).toBeNull();
+    });
+
+    it('should not confuse media options with region options for exit transitions', () => {
+      const xlf = `
+        <layout>
+          <region id="r1" width="960" height="540" top="0" left="0">
+            <media id="m1" type="image" duration="10">
+              <options>
+                <uri>test.png</uri>
+                <transOut>fadeOut</transOut>
+                <transOutDuration>1500</transOutDuration>
+              </options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const layout = renderer.parseXlf(xlf);
+      const region = layout.regions[0];
+
+      // Region should have no exit transition (only media has transOut)
+      expect(region.exitTransition).toBeNull();
+      // Widget should have its own out transition
+      expect(region.widgets[0].transitions.out).toEqual({
+        type: 'fadeOut',
+        duration: 1500,
+        direction: 'N'
+      });
+    });
   });
 
   describe('enableStat parsing', () => {
@@ -303,6 +418,136 @@ describe('RendererLite', () => {
       expect(mockGetMediaUrl).toHaveBeenCalledWith(1);
     });
 
+    it('should default to objectFit contain and objectPosition center center', async () => {
+      const widget = {
+        type: 'image',
+        id: 'm1',
+        fileId: '1',
+        options: { uri: 'test.png' },
+        duration: 10,
+        transitions: { in: null, out: null }
+      };
+
+      const region = { width: 1920, height: 1080 };
+      const element = await renderer.renderImage(widget, region);
+
+      expect(element.style.objectFit).toBe('contain');
+      expect(element.style.objectPosition).toBe('center center');
+    });
+
+    it('should apply objectFit fill when scaleType is stretch', async () => {
+      const widget = {
+        type: 'image',
+        id: 'm1',
+        fileId: '1',
+        options: { uri: 'test.png', scaleType: 'stretch' },
+        duration: 10,
+        transitions: { in: null, out: null }
+      };
+
+      const region = { width: 1920, height: 1080 };
+      const element = await renderer.renderImage(widget, region);
+
+      expect(element.style.objectFit).toBe('fill');
+    });
+
+    it('should apply objectFit none when scaleType is center (natural size)', async () => {
+      const widget = {
+        type: 'image',
+        id: 'm1',
+        fileId: '1',
+        options: { uri: 'test.png', scaleType: 'center' },
+        duration: 10,
+        transitions: { in: null, out: null }
+      };
+
+      const region = { width: 1920, height: 1080 };
+      const element = await renderer.renderImage(widget, region);
+
+      expect(element.style.objectFit).toBe('none');
+    });
+
+    it('should apply objectFit contain when scaleType is fit', async () => {
+      const widget = {
+        type: 'image',
+        id: 'm1',
+        fileId: '1',
+        options: { uri: 'test.png', scaleType: 'fit' },
+        duration: 10,
+        transitions: { in: null, out: null }
+      };
+
+      const region = { width: 1920, height: 1080 };
+      const element = await renderer.renderImage(widget, region);
+
+      expect(element.style.objectFit).toBe('contain');
+    });
+
+    it('should map align and valign to objectPosition', async () => {
+      const widget = {
+        type: 'image',
+        id: 'm1',
+        fileId: '1',
+        options: { uri: 'test.png', align: 'left', valign: 'top' },
+        duration: 10,
+        transitions: { in: null, out: null }
+      };
+
+      const region = { width: 1920, height: 1080 };
+      const element = await renderer.renderImage(widget, region);
+
+      expect(element.style.objectPosition).toBe('left top');
+    });
+
+    it('should map align right and valign bottom to objectPosition', async () => {
+      const widget = {
+        type: 'image',
+        id: 'm1',
+        fileId: '1',
+        options: { uri: 'test.png', align: 'right', valign: 'bottom' },
+        duration: 10,
+        transitions: { in: null, out: null }
+      };
+
+      const region = { width: 1920, height: 1080 };
+      const element = await renderer.renderImage(widget, region);
+
+      expect(element.style.objectPosition).toBe('right bottom');
+    });
+
+    it('should map valign middle to center in objectPosition', async () => {
+      const widget = {
+        type: 'image',
+        id: 'm1',
+        fileId: '1',
+        options: { uri: 'test.png', align: 'center', valign: 'middle' },
+        duration: 10,
+        transitions: { in: null, out: null }
+      };
+
+      const region = { width: 1920, height: 1080 };
+      const element = await renderer.renderImage(widget, region);
+
+      expect(element.style.objectPosition).toBe('center center');
+    });
+
+    it('should combine scaleType stretch with alignment options', async () => {
+      const widget = {
+        type: 'image',
+        id: 'm1',
+        fileId: '1',
+        options: { uri: 'test.png', scaleType: 'stretch', align: 'left', valign: 'bottom' },
+        duration: 10,
+        transitions: { in: null, out: null }
+      };
+
+      const region = { width: 1920, height: 1080 };
+      const element = await renderer.renderImage(widget, region);
+
+      expect(element.style.objectFit).toBe('fill');
+      expect(element.style.objectPosition).toBe('left bottom');
+    });
+
     it('should create video widget element', async () => {
       const widget = {
         type: 'video',
@@ -978,4 +1223,1028 @@ describe('RendererLite', () => {
       expect(renderer.currentLayout.duration).toBe(45);
     });
   });
+
+  describe('Audio Widget Support', () => {
+    it('should parse audio widget with type, loop and volume options', () => {
+      const xlf = `
+        <layout>
+          <region id="r1">
+            <media id="a1" type="audio" duration="30" fileId="10">
+              <options>
+                <uri>song.mp3</uri>
+                <loop>1</loop>
+                <volume>80</volume>
+              </options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const layout = renderer.parseXlf(xlf);
+      const widget = layout.regions[0].widgets[0];
+
+      expect(widget.type).toBe('audio');
+      expect(widget.duration).toBe(30);
+      expect(widget.fileId).toBe('10');
+      expect(widget.options.loop).toBe('1');
+      expect(widget.options.volume).toBe('80');
+      expect(widget.options.uri).toBe('song.mp3');
+    });
+
+    it('should create audio element inside container for audio widget', async () => {
+      const xlf = `
+        <layout>
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="a1" type="audio" duration="10" fileId="10">
+              <options>
+                <uri>test.mp3</uri>
+                <loop>0</loop>
+                <volume>50</volume>
+              </options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      await renderer.renderLayout(xlf, 1);
+
+      const region = renderer.regions.get('r1');
+      expect(region).toBeDefined();
+      expect(region.widgetElements.size).toBe(1);
+
+      const widgetEl = region.widgetElements.get('a1');
+      expect(widgetEl).toBeDefined();
+      expect(widgetEl.classList.contains('audio-widget')).toBe(true);
+
+      const audioEl = widgetEl.querySelector('audio');
+      expect(audioEl).toBeDefined();
+      expect(audioEl.autoplay).toBe(true);
+      expect(audioEl.loop).toBe(false);
+      expect(audioEl.volume).toBe(0.5);
+    });
+
+    it('should set loop=true on audio element when widget options loop is 1', async () => {
+      const xlf = `
+        <layout>
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="a1" type="audio" duration="10" fileId="10">
+              <options>
+                <uri>test.mp3</uri>
+                <loop>1</loop>
+                <volume>100</volume>
+              </options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      await renderer.renderLayout(xlf, 1);
+
+      const widgetEl = renderer.regions.get('r1').widgetElements.get('a1');
+      const audioEl = widgetEl.querySelector('audio');
+      expect(audioEl.loop).toBe(true);
+      expect(audioEl.volume).toBe(1);
+    });
+
+    it('should default volume to 100 when not specified', async () => {
+      const xlf = `
+        <layout>
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="a1" type="audio" duration="10" fileId="10">
+              <options><uri>test.mp3</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      await renderer.renderLayout(xlf, 1);
+
+      const widgetEl = renderer.regions.get('r1').widgetElements.get('a1');
+      const audioEl = widgetEl.querySelector('audio');
+      expect(audioEl.volume).toBe(1);
+    });
+  });
+
+  describe('Audio Overlay Support', () => {
+    it('should parse audio overlay nodes from widget XML', () => {
+      const xlf = `
+        <layout>
+          <region id="r1">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <audio mediaId="50" uri="bgmusic.mp3" volume="80" loop="1"/>
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const layout = renderer.parseXlf(xlf);
+      const widget = layout.regions[0].widgets[0];
+
+      expect(widget.audioNodes).toBeDefined();
+      expect(widget.audioNodes).toHaveLength(1);
+      expect(widget.audioNodes[0]).toEqual({
+        mediaId: '50',
+        uri: 'bgmusic.mp3',
+        volume: 80,
+        loop: true
+      });
+    });
+
+    it('should parse multiple audio overlay nodes', () => {
+      const xlf = `
+        <layout>
+          <region id="r1">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <audio mediaId="50" uri="bgmusic.mp3" volume="80" loop="1"/>
+              <audio mediaId="51" uri="sfx.mp3" volume="40" loop="0"/>
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const layout = renderer.parseXlf(xlf);
+      const widget = layout.regions[0].widgets[0];
+
+      expect(widget.audioNodes).toHaveLength(2);
+      expect(widget.audioNodes[0].uri).toBe('bgmusic.mp3');
+      expect(widget.audioNodes[0].loop).toBe(true);
+      expect(widget.audioNodes[1].uri).toBe('sfx.mp3');
+      expect(widget.audioNodes[1].loop).toBe(false);
+      expect(widget.audioNodes[1].volume).toBe(40);
+    });
+
+    it('should parse spec-format audio nodes with <uri> child element', () => {
+      const xlf = `
+        <layout>
+          <region id="r1">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <audio>
+                <uri volume="80" loop="1" mediaId="50">bgmusic.mp3</uri>
+              </audio>
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const layout = renderer.parseXlf(xlf);
+      const widget = layout.regions[0].widgets[0];
+
+      expect(widget.audioNodes).toHaveLength(1);
+      expect(widget.audioNodes[0]).toEqual({
+        mediaId: '50',
+        uri: 'bgmusic.mp3',
+        volume: 80,
+        loop: true
+      });
+    });
+
+    it('should handle mixed audio formats (spec + flat)', () => {
+      const xlf = `
+        <layout>
+          <region id="r1">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <audio>
+                <uri volume="60" loop="0" mediaId="51">track1.mp3</uri>
+              </audio>
+              <audio mediaId="52" uri="track2.mp3" volume="40" loop="1"/>
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const layout = renderer.parseXlf(xlf);
+      const widget = layout.regions[0].widgets[0];
+
+      expect(widget.audioNodes).toHaveLength(2);
+      // Spec format
+      expect(widget.audioNodes[0].uri).toBe('track1.mp3');
+      expect(widget.audioNodes[0].mediaId).toBe('51');
+      expect(widget.audioNodes[0].volume).toBe(60);
+      expect(widget.audioNodes[0].loop).toBe(false);
+      // Flat format
+      expect(widget.audioNodes[1].uri).toBe('track2.mp3');
+      expect(widget.audioNodes[1].mediaId).toBe('52');
+      expect(widget.audioNodes[1].volume).toBe(40);
+      expect(widget.audioNodes[1].loop).toBe(true);
+    });
+
+    it('should have empty audioNodes when widget has no audio children', () => {
+      const xlf = `
+        <layout>
+          <region id="r1">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const layout = renderer.parseXlf(xlf);
+      const widget = layout.regions[0].widgets[0];
+
+      expect(widget.audioNodes).toBeDefined();
+      expect(widget.audioNodes).toHaveLength(0);
+    });
+
+    it('should create audio overlay elements when widget is shown', async () => {
+      const xlf = `
+        <layout>
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <audio mediaId="50" uri="bgmusic.mp3" volume="75" loop="1"/>
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      await renderer.renderLayout(xlf, 1);
+      // Explicitly show the widget to trigger audio overlay (renderLayout fires it async)
+      const region = renderer.regions.get('r1');
+      await renderer._showWidget(region, 0);
+
+      // Audio overlay should be tracked
+      const overlays = renderer.audioOverlays.get('m1');
+      expect(overlays).toBeDefined();
+      expect(overlays).toHaveLength(1);
+      expect(overlays[0]).toBeInstanceOf(HTMLAudioElement);
+      expect(overlays[0].loop).toBe(true);
+      expect(overlays[0].volume).toBeCloseTo(0.75);
+    });
+
+    it('should stop audio overlays when widget is hidden', async () => {
+      const xlf = `
+        <layout>
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <audio mediaId="50" uri="bgmusic.mp3" volume="80" loop="1"/>
+              <options><uri>test.png</uri></options>
+            </media>
+            <media id="m2" type="image" duration="10" fileId="2">
+              <options><uri>test2.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      await renderer.renderLayout(xlf, 1);
+      // Explicitly show widget to trigger audio overlay
+      const region = renderer.regions.get('r1');
+      await renderer._showWidget(region, 0);
+
+      // Audio overlay should be active for m1
+      expect(renderer.audioOverlays.has('m1')).toBe(true);
+
+      // Hide widget m1
+      renderer._hideWidget(region, 0);
+
+      // Audio overlay should be cleaned up
+      expect(renderer.audioOverlays.has('m1')).toBe(false);
+    });
+
+    it('should clean up audio overlays on renderer cleanup', async () => {
+      const xlf = `
+        <layout>
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <audio mediaId="50" uri="bgmusic.mp3" volume="80" loop="1"/>
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      await renderer.renderLayout(xlf, 1);
+      // Explicitly show widget to trigger audio overlay
+      const region = renderer.regions.get('r1');
+      await renderer._showWidget(region, 0);
+      expect(renderer.audioOverlays.size).toBeGreaterThan(0);
+
+      renderer.cleanup();
+      expect(renderer.audioOverlays.size).toBe(0);
+    });
+
+    it('should clamp volume to valid range', async () => {
+      const xlf = `
+        <layout>
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <audio mediaId="50" uri="bgmusic.mp3" volume="150" loop="0"/>
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      await renderer.renderLayout(xlf, 1);
+      // Explicitly show widget to trigger audio overlay
+      const region = renderer.regions.get('r1');
+      await renderer._showWidget(region, 0);
+
+      const overlays = renderer.audioOverlays.get('m1');
+      expect(overlays).toBeDefined();
+      expect(overlays[0].volume).toBeLessThanOrEqual(1);
+    });
+  });
+
+
+  describe('Widget webhookUrl parsing', () => {
+    it('should parse webhookUrl from widget options', () => {
+      const xlf = `
+        <layout>
+          <region id="r1">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options>
+                <uri>test.png</uri>
+                <webhookUrl>https://example.com/hook</webhookUrl>
+              </options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const layout = renderer.parseXlf(xlf);
+      const widget = layout.regions[0].widgets[0];
+
+      expect(widget.webhookUrl).toBe('https://example.com/hook');
+    });
+
+    it('should set webhookUrl to null when not present in options', () => {
+      const xlf = `
+        <layout>
+          <region id="r1">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const layout = renderer.parseXlf(xlf);
+      const widget = layout.regions[0].widgets[0];
+
+      expect(widget.webhookUrl).toBeNull();
+    });
+  });
+
+  describe('Widget duration completion webhook', () => {
+    it('should emit widgetAction event when widget with webhookUrl reaches duration end', async () => {
+      vi.useFakeTimers();
+
+      const xlf = `
+        <layout duration="60">
+          <region id="r1">
+            <media id="m1" type="image" duration="5" fileId="1">
+              <options>
+                <uri>1.png</uri>
+                <webhookUrl>https://example.com/hook</webhookUrl>
+              </options>
+            </media>
+            <media id="m2" type="image" duration="5" fileId="2">
+              <options><uri>2.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const widgetActionHandler = vi.fn();
+      renderer.on('widgetAction', widgetActionHandler);
+
+      const renderPromise = renderer.renderLayout(xlf, 1);
+      await vi.advanceTimersByTimeAsync(10000);
+      await renderPromise;
+
+      // Advance past first widget duration (5s) to trigger timer
+      vi.advanceTimersByTime(5000);
+
+      expect(widgetActionHandler).toHaveBeenCalledWith({
+        type: 'durationEnd',
+        widgetId: 'm1',
+        layoutId: 1,
+        regionId: 'r1',
+        url: 'https://example.com/hook'
+      });
+
+      vi.useRealTimers();
+    });
+
+    it('should not emit widgetAction event when widget has no webhookUrl', async () => {
+      vi.useFakeTimers();
+
+      const xlf = `
+        <layout duration="60">
+          <region id="r1">
+            <media id="m1" type="image" duration="5" fileId="1">
+              <options><uri>1.png</uri></options>
+            </media>
+            <media id="m2" type="image" duration="5" fileId="2">
+              <options><uri>2.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const widgetActionHandler = vi.fn();
+      renderer.on('widgetAction', widgetActionHandler);
+
+      const renderPromise = renderer.renderLayout(xlf, 1);
+      await vi.advanceTimersByTimeAsync(10000);
+      await renderPromise;
+
+      // Advance past first widget duration (5s) to trigger timer
+      vi.advanceTimersByTime(5000);
+
+      expect(widgetActionHandler).not.toHaveBeenCalled();
+
+      vi.useRealTimers();
+    });
+  });
+
+  describe('Drawer Nodes (#11)', () => {
+    it('should parse drawer elements as regions with isDrawer flag', () => {
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+          <drawer id="d1" width="400" height="300" top="100" left="100">
+            <media id="dm1" type="image" duration="5" fileId="2">
+              <options><uri>drawer.png</uri></options>
+            </media>
+          </drawer>
+        </layout>
+      `;
+
+      const layout = renderer.parseXlf(xlf);
+
+      expect(layout.regions).toHaveLength(2);
+      expect(layout.regions[0].isDrawer).toBe(false);
+      expect(layout.regions[0].id).toBe('r1');
+      expect(layout.regions[1].isDrawer).toBe(true);
+      expect(layout.regions[1].id).toBe('d1');
+      expect(layout.regions[1].widgets).toHaveLength(1);
+      expect(layout.regions[1].widgets[0].id).toBe('dm1');
+    });
+
+    it('should exclude drawers from layout duration calculation', () => {
+      const xlf = `
+        <layout width="1920" height="1080">
+          <region id="r1" width="960" height="540" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+          <drawer id="d1" width="400" height="300" top="100" left="100">
+            <media id="dm1" type="image" duration="120" fileId="2">
+              <options><uri>drawer.png</uri></options>
+            </media>
+          </drawer>
+        </layout>
+      `;
+
+      const layout = renderer.parseXlf(xlf);
+
+      // Duration should be 10s (from region), not 120s (from drawer)
+      expect(layout.duration).toBe(10);
+    });
+
+    it('should assign high z-index to drawer regions by default', () => {
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" width="960" height="540" top="0" left="0" zindex="1">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+          <drawer id="d1">
+            <media id="dm1" type="image" duration="5" fileId="2">
+              <options><uri>drawer.png</uri></options>
+            </media>
+          </drawer>
+        </layout>
+      `;
+
+      const layout = renderer.parseXlf(xlf);
+
+      expect(layout.regions[0].zindex).toBe(1);
+      expect(layout.regions[1].zindex).toBe(2000); // Drawer default z-index
+    });
+
+    it('should create drawer regions with display:none', async () => {
+      vi.useFakeTimers();
+
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+          <drawer id="d1" width="400" height="300" top="100" left="100">
+            <media id="dm1" type="image" duration="5" fileId="2">
+              <options><uri>drawer.png</uri></options>
+            </media>
+          </drawer>
+        </layout>
+      `;
+
+      const renderPromise = renderer.renderLayout(xlf, 1);
+      await vi.advanceTimersByTimeAsync(10000);
+      await renderPromise;
+
+      const drawerRegion = renderer.regions.get('d1');
+      expect(drawerRegion).toBeDefined();
+      expect(drawerRegion.isDrawer).toBe(true);
+      expect(drawerRegion.element.style.display).toBe('none');
+
+      vi.useRealTimers();
+    });
+
+    it('should reveal drawer region when navigateToWidget targets drawer widget', async () => {
+      vi.useFakeTimers();
+
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+          <drawer id="d1" width="400" height="300" top="100" left="100">
+            <media id="dm1" type="image" duration="5" fileId="2">
+              <options><uri>drawer.png</uri></options>
+            </media>
+          </drawer>
+        </layout>
+      `;
+
+      const renderPromise = renderer.renderLayout(xlf, 1);
+      await vi.advanceTimersByTimeAsync(10000);
+      await renderPromise;
+
+      // Drawer starts hidden
+      const drawerRegion = renderer.regions.get('d1');
+      expect(drawerRegion.element.style.display).toBe('none');
+
+      // Navigate to drawer widget — should reveal the drawer
+      renderer.navigateToWidget('dm1');
+      expect(drawerRegion.element.style.display).toBe('');
+
+      vi.useRealTimers();
+    });
+  });
+
+  describe('Sub-Playlist (#10)', () => {
+    it('should parse sub-playlist attributes from media elements', () => {
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" parentWidgetId="sp1"
+                   displayOrder="1" cyclePlayback="1" playCount="1" isRandom="0" fileId="1">
+              <options><uri>img1.png</uri></options>
+            </media>
+            <media id="m2" type="image" duration="10" parentWidgetId="sp1"
+                   displayOrder="2" cyclePlayback="1" playCount="1" isRandom="0" fileId="2">
+              <options><uri>img2.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const layout = renderer.parseXlf(xlf);
+      const w1 = layout.regions[0].widgets[0];
+      const w2 = layout.regions[0].widgets[1];
+
+      expect(w1.parentWidgetId).toBe('sp1');
+      expect(w1.displayOrder).toBe(1);
+      expect(w1.cyclePlayback).toBe(true);
+      expect(w1.playCount).toBe(1);
+      expect(w1.isRandom).toBe(false);
+
+      expect(w2.parentWidgetId).toBe('sp1');
+      expect(w2.displayOrder).toBe(2);
+    });
+
+    it('should select one widget per group when cyclePlayback is enabled', () => {
+      const widgets = [
+        { id: 'm1', type: 'image', duration: 10, parentWidgetId: 'sp1',
+          displayOrder: 1, cyclePlayback: true, playCount: 1, isRandom: false },
+        { id: 'm2', type: 'image', duration: 10, parentWidgetId: 'sp1',
+          displayOrder: 2, cyclePlayback: true, playCount: 1, isRandom: false },
+        { id: 'm3', type: 'image', duration: 10, parentWidgetId: 'sp1',
+          displayOrder: 3, cyclePlayback: true, playCount: 1, isRandom: false },
+      ];
+
+      const result = renderer._applyCyclePlayback(widgets);
+
+      // Should select exactly 1 widget from the 3-widget group
+      expect(result).toHaveLength(1);
+      expect(['m1', 'm2', 'm3']).toContain(result[0].id);
+    });
+
+    it('should pass through non-grouped widgets unchanged', () => {
+      const widgets = [
+        { id: 'standalone', type: 'image', duration: 10,
+          parentWidgetId: null, cyclePlayback: false },
+        { id: 'm1', type: 'image', duration: 10, parentWidgetId: 'sp1',
+          displayOrder: 1, cyclePlayback: true, playCount: 1, isRandom: false },
+        { id: 'm2', type: 'image', duration: 10, parentWidgetId: 'sp1',
+          displayOrder: 2, cyclePlayback: true, playCount: 1, isRandom: false },
+      ];
+
+      const result = renderer._applyCyclePlayback(widgets);
+
+      // Standalone + 1 from group = 2
+      expect(result).toHaveLength(2);
+      expect(result[0].id).toBe('standalone');
+    });
+
+    it('should round-robin across cycles for deterministic playback', () => {
+      const widgets = [
+        { id: 'm1', type: 'image', duration: 10, parentWidgetId: 'sp1',
+          displayOrder: 1, cyclePlayback: true, playCount: 1, isRandom: false },
+        { id: 'm2', type: 'image', duration: 10, parentWidgetId: 'sp1',
+          displayOrder: 2, cyclePlayback: true, playCount: 1, isRandom: false },
+      ];
+
+      // Reset cycle index for clean test
+      renderer._subPlaylistCycleIndex = new Map();
+
+      const result1 = renderer._applyCyclePlayback(widgets);
+      const result2 = renderer._applyCyclePlayback(widgets);
+
+      // First cycle picks widget at index 0, second cycle picks at index 1
+      expect(result1[0].id).toBe('m1');
+      expect(result2[0].id).toBe('m2');
+    });
+
+    it('should handle multiple groups independently', () => {
+      const widgets = [
+        { id: 'a1', type: 'image', duration: 10, parentWidgetId: 'grpA',
+          displayOrder: 1, cyclePlayback: true, playCount: 1, isRandom: false },
+        { id: 'a2', type: 'image', duration: 10, parentWidgetId: 'grpA',
+          displayOrder: 2, cyclePlayback: true, playCount: 1, isRandom: false },
+        { id: 'b1', type: 'image', duration: 10, parentWidgetId: 'grpB',
+          displayOrder: 1, cyclePlayback: true, playCount: 1, isRandom: false },
+        { id: 'b2', type: 'image', duration: 10, parentWidgetId: 'grpB',
+          displayOrder: 2, cyclePlayback: true, playCount: 1, isRandom: false },
+      ];
+
+      renderer._subPlaylistCycleIndex = new Map();
+      const result = renderer._applyCyclePlayback(widgets);
+
+      // 1 from each group = 2 total
+      expect(result).toHaveLength(2);
+      const ids = result.map(w => w.id);
+      // Should have one from grpA and one from grpB
+      expect(ids.some(id => id.startsWith('a'))).toBe(true);
+      expect(ids.some(id => id.startsWith('b'))).toBe(true);
+    });
+  });
+
+  // ── Medium-Priority Spec Compliance ────────────────────────────────
+
+  describe('Widget fromDt/toDt Expiry', () => {
+    it('should parse fromDt and toDt attributes on widgets', () => {
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1"
+                   fromDt="2025-01-01 09:00:00" toDt="2025-12-31 17:00:00">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.regions[0].widgets[0].fromDt).toBe('2025-01-01 09:00:00');
+      expect(layout.regions[0].widgets[0].toDt).toBe('2025-12-31 17:00:00');
+    });
+
+    it('should set fromDt/toDt to null when absent', () => {
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.regions[0].widgets[0].fromDt).toBeNull();
+      expect(layout.regions[0].widgets[0].toDt).toBeNull();
+    });
+
+    it('should filter out expired widgets (toDt in the past)', () => {
+      const widget = { id: 'm1', fromDt: null, toDt: '2020-01-01 00:00:00' };
+      expect(renderer._isWidgetActive(widget)).toBe(false);
+    });
+
+    it('should filter out future widgets (fromDt in the future)', () => {
+      const widget = { id: 'm1', fromDt: '2099-12-31 23:59:59', toDt: null };
+      expect(renderer._isWidgetActive(widget)).toBe(false);
+    });
+
+    it('should accept widgets with no date constraints', () => {
+      const widget = { id: 'm1', fromDt: null, toDt: null };
+      expect(renderer._isWidgetActive(widget)).toBe(true);
+    });
+
+    it('should accept widgets within their date range', () => {
+      const widget = { id: 'm1', fromDt: '2020-01-01 00:00:00', toDt: '2099-12-31 23:59:59' };
+      expect(renderer._isWidgetActive(widget)).toBe(true);
+    });
+  });
+
+  describe('Render Attribute', () => {
+    it('should parse render attribute on widgets', () => {
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="text" duration="10" render="native">
+              <options><uri>test.html</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.regions[0].widgets[0].render).toBe('native');
+    });
+
+    it('should set render to null when absent', () => {
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.regions[0].widgets[0].render).toBeNull();
+    });
+  });
+
+  describe('NUMITEMS/DURATION HTML Comments', () => {
+    it('should override widget duration with DURATION comment', () => {
+      const widget = { id: 'w1', duration: 10 };
+      const html = '<html><!-- DURATION=45 --><body>content</body></html>';
+      renderer._parseDurationComments(html, widget);
+      expect(widget.duration).toBe(45);
+    });
+
+    it('should multiply duration by NUMITEMS when no DURATION present', () => {
+      const widget = { id: 'w2', duration: 5 };
+      const html = '<html><!-- NUMITEMS=8 --><body>content</body></html>';
+      renderer._parseDurationComments(html, widget);
+      expect(widget.duration).toBe(40); // 8 × 5
+    });
+
+    it('should prefer DURATION over NUMITEMS when both present', () => {
+      const widget = { id: 'w3', duration: 5 };
+      const html = '<html><!-- NUMITEMS=8 --><!-- DURATION=30 --><body>content</body></html>';
+      renderer._parseDurationComments(html, widget);
+      expect(widget.duration).toBe(30); // DURATION takes precedence
+    });
+
+    it('should not modify duration when no comments present', () => {
+      const widget = { id: 'w4', duration: 15 };
+      const html = '<html><body>plain content</body></html>';
+      renderer._parseDurationComments(html, widget);
+      expect(widget.duration).toBe(15);
+    });
+
+    it('should handle whitespace variations in comments', () => {
+      const widget = { id: 'w5', duration: 10 };
+      const html = '<html><!--  DURATION=60  --><body>content</body></html>';
+      renderer._parseDurationComments(html, widget);
+      expect(widget.duration).toBe(60);
+    });
+  });
+
+  // ── Low-Priority Spec Compliance ─────────────────────────────────
+
+  describe('Layout schemaVersion', () => {
+    it('should parse schemaVersion from layout element', () => {
+      const xlf = `
+        <layout schemaVersion="5" width="1920" height="1080" duration="60">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.schemaVersion).toBe(5);
+    });
+
+    it('should default schemaVersion to 1 when absent', () => {
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.schemaVersion).toBe(1);
+    });
+  });
+
+  describe('Layout backgroundColor', () => {
+    it('should prefer backgroundColor over bgcolor', () => {
+      const xlf = `
+        <layout backgroundColor="#FF0000" bgcolor="#00FF00" width="1920" height="1080" duration="60">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.bgcolor).toBe('#FF0000');
+    });
+
+    it('should fall back to bgcolor when backgroundColor absent', () => {
+      const xlf = `
+        <layout bgcolor="#00FF00" width="1920" height="1080" duration="60">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.bgcolor).toBe('#00FF00');
+    });
+  });
+
+  describe('Region enableStat', () => {
+    it('should parse enableStat on region elements', () => {
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" width="960" height="540" top="0" left="0" enableStat="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+          <region id="r2" width="960" height="540" top="0" left="960" enableStat="1">
+            <media id="m2" type="image" duration="10" fileId="2">
+              <options><uri>test2.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.regions[0].enableStat).toBe(false);
+      expect(layout.regions[1].enableStat).toBe(true);
+    });
+
+    it('should default enableStat to true when absent', () => {
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.regions[0].enableStat).toBe(true);
+    });
+  });
+
+  describe('Layout-level actions', () => {
+    it('should parse action elements at layout level', () => {
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <action actionType="navLayout" triggerType="webhook" triggerCode="showPromo"
+                  layoutCode="promo-1"/>
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.actions).toHaveLength(1);
+      expect(layout.actions[0].actionType).toBe('navLayout');
+      expect(layout.actions[0].triggerType).toBe('webhook');
+      expect(layout.actions[0].triggerCode).toBe('showPromo');
+      expect(layout.actions[0].layoutCode).toBe('promo-1');
+    });
+
+    it('should return empty actions array when no layout-level actions', () => {
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.actions).toEqual([]);
+    });
+  });
+
+  describe('Region loop option', () => {
+    it('should default loop to true when no loop option present', () => {
+      const xlf = `
+        <layout width="1920" height="1080">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.regions[0].loop).toBe(true);
+    });
+
+    it('should set loop to false when loop option is 0', () => {
+      const xlf = `
+        <layout width="1920" height="1080">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <options><loop>0</loop></options>
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.regions[0].loop).toBe(false);
+    });
+
+    it('should set loop to true when loop option is 1', () => {
+      const xlf = `
+        <layout width="1920" height="1080">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <options><loop>1</loop></options>
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.regions[0].loop).toBe(true);
+    });
+  });
+
+  describe('Widget commands parsing', () => {
+    it('should parse commands on media elements', () => {
+      const xlf = `
+        <layout width="1920" height="1080">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+              <commands>
+                <command commandCode="shellCommand" commandString="echo hello"/>
+                <command commandCode="reboot" commandString=""/>
+              </commands>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      const widget = layout.regions[0].widgets[0];
+      expect(widget.commands).toHaveLength(2);
+      expect(widget.commands[0].commandCode).toBe('shellCommand');
+      expect(widget.commands[0].commandString).toBe('echo hello');
+      expect(widget.commands[1].commandCode).toBe('reboot');
+    });
+
+    it('should return empty commands array when no commands element', () => {
+      const xlf = `
+        <layout width="1920" height="1080">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.regions[0].widgets[0].commands).toEqual([]);
+    });
+  });
 });