Merge pull request #833 from steveseguin/copilot/fix-display-media-overlay-duration

Preserve `0ms` duration for Display Media Overlay in Event Flow Editor

Author: steveseguin

actions.html

@@ -1149,7 +1149,7 @@ <h2>Session ID Required</h2>
                             useLayer: payload.useLayer,
                             clearFirst: payload.clearFirst
                         };
-                        playMediaFullscreen(payload.url, payload.mediaType || 'iframe', payload.duration || defaultDuration, opts);
+                        playMediaFullscreen(payload.url, payload.mediaType || 'iframe', payload.duration ?? defaultDuration, opts);
                     } else {
                         console.warn("Play media action received without a URL.");
                     }
@@ -1572,7 +1572,7 @@ <h2>Session ID Required</h2>
 
         // Function to play media with optional positioned area (percent-based)
 		function playMediaFullscreen(url, mediaType, duration, opts = {}) {
-			duration = duration || defaultDuration;
+			duration = duration ?? defaultDuration;
 			// Determine target container - use layer system if opts.useLayer is true
 			const useLayer = !!opts.useLayer;
 			const targetContainer = useLayer ? overlayLayers.media : mediaContainer;

actions/EventFlowEditor.js

@@ -2025,7 +2025,7 @@ class EventFlowEditor {
                 // Media & Layer actions
                 case 'playTenorGiphy': {
                     const url = node.config.mediaUrl || '';
-                    const duration = node.config.duration || 10000;
+                    const duration = node.config.duration ?? 10000;
                     const shortUrl = url.length > 25 ? url.substring(0, 25) + '...' : url;
                     return `${shortUrl} (${duration}ms)`;
                 }
@@ -4238,7 +4238,7 @@ class EventFlowEditor {
 						 </div>
 						 <div class="property-group">
 							<label class="property-label">Duration (ms, 0 for manual close)</label>
-							<input type="number" class="property-input" id="prop-duration" value="${node.config.duration || 10000}" min="0">
+							<input type="number" class="property-input" id="prop-duration" value="${node.config.duration ?? 10000}" min="0">
 							<div class="property-help">How long the media stays on screen. 0 means it stays until the next 'play_media' action or manual intervention.</div>
 						</div>
 						<div class="property-group">

actions/EventFlowSystem.js

@@ -2939,7 +2939,7 @@ class EventFlowSystem {
 						actionType: 'play_media', // This corresponds to the 'actionType' in actions.html
 						url: config.mediaUrl,
 						mediaType: config.mediaType || 'iframe',
-						duration: config.duration || 10000, // Pass duration to actions.html
+						duration: config.duration ?? 10000, // Pass duration to actions.html
 						// Positioning and sizing (percent-based)
 						width: (typeof config.width === 'number') ? config.width : undefined,
 						height: (typeof config.height === 'number') ? config.height : undefined,

tests/eventflow-play-media-duration.test.js

@@ -0,0 +1,116 @@
+#!/usr/bin/env node
+
+const vm = require('vm');
+const fs = require('fs');
+const path = require('path');
+
+const EFS_SRC = fs.readFileSync(
+    path.join(__dirname, '..', 'actions', 'EventFlowSystem.js'),
+    'utf8'
+);
+
+function loadEventFlowSystem(windowOverrides = {}, globals = {}) {
+    const sandbox = vm.createContext({
+        window: {
+            location: { search: '' },
+            sendMessageToTabs: null,
+            sendTargetP2P: null,
+            sendToDestinations: null,
+            fetchWithTimeout: null,
+            sanitizeRelay: null,
+            checkExactDuplicateAlreadyRelayed: null,
+            messageStore: {},
+            handleMessageStore: null,
+            ...windowOverrides,
+        },
+        console,
+        setTimeout,
+        clearTimeout,
+        setInterval,
+        clearInterval,
+        Promise,
+        IDBKeyRange: {},
+        indexedDB: { open: () => ({}) },
+        ...globals,
+    });
+
+    vm.runInContext(EFS_SRC + '\nwindow.EventFlowSystem = EventFlowSystem;', sandbox);
+    return sandbox.window.EventFlowSystem;
+}
+
+let passed = 0;
+let failed = 0;
+
+function assert(condition, label) {
+    if (condition) {
+        console.log(`  PASS  ${label}`);
+        passed++;
+    } else {
+        console.error(`  FAIL  ${label}`);
+        failed++;
+    }
+}
+
+async function runTests() {
+    console.log('\n[1] playTenorGiphy preserves explicit duration 0');
+    {
+        let sentPayload = null;
+        const EFS = loadEventFlowSystem();
+        const sys = new EFS({
+            sendTargetP2P: (payload) => {
+                sentPayload = payload;
+            },
+        });
+
+        await sys.executeAction(
+            {
+                id: 'media1',
+                actionType: 'playTenorGiphy',
+                config: {
+                    mediaUrl: 'https://giphy.com/embed/X9izlczKyCpmCSZu0l',
+                    mediaType: 'iframe',
+                    duration: 0,
+                },
+            },
+            { textonly: true }
+        );
+
+        assert(sentPayload?.overlayNinja?.duration === 0, 'duration 0 is sent as 0 (manual close)');
+    }
+
+    console.log('\n[2] playTenorGiphy keeps default duration when not configured');
+    {
+        let sentPayload = null;
+        const EFS = loadEventFlowSystem();
+        const sys = new EFS({
+            sendTargetP2P: (payload) => {
+                sentPayload = payload;
+            },
+        });
+
+        await sys.executeAction(
+            {
+                id: 'media2',
+                actionType: 'playTenorGiphy',
+                config: {
+                    mediaUrl: 'https://giphy.com/embed/X9izlczKyCpmCSZu0l',
+                    mediaType: 'iframe',
+                },
+            },
+            { textonly: true }
+        );
+
+        assert(sentPayload?.overlayNinja?.duration === 10000, 'undefined duration falls back to 10000ms');
+    }
+
+    console.log(`\n${'-'.repeat(50)}`);
+    console.log(`Results: ${passed} passed, ${failed} failed`);
+    if (failed > 0) {
+        process.exit(1);
+    }
+}
+
+runTests().catch((err) => {
+    console.error('Unexpected error:', err);
+    process.exit(1);
+});