From 732ba1eb1aa6a5155f58dd47f1135694c9df88c7 Mon Sep 17 00:00:00 2001
From: Marc Taipala <github@taipala.com>
Date: Sat, 7 Sep 2024 12:25:26 -0400
Subject: [PATCH] Create in report support for webm video in the report output
 (#369)

A small PR to add video attachment support (webm) similar to the way image (png) is supported. This is change is primarily to support Playwright's video functionality.

See documentation: https://playwright.dev/docs/videos

Co-authored-by: MarcTaipala <github.prancing198@passmail.net>
---
 lib/generate-report.js              |  9 +++++++++
 templates/components/scenarios.tmpl | 18 ++++++++++++++++--
 templates/style.css                 |  7 +++++++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/lib/generate-report.js b/lib/generate-report.js
index 4c395ca9..f05fadfe 100755
--- a/lib/generate-report.js
+++ b/lib/generate-report.js
@@ -445,6 +445,14 @@ function generateReport(options) {
               'data:image/png;base64,' + embedding.data,
             ]);
             step.embeddings[embeddingIndex] = {};
+          } else if (
+            embedding.mime_type === 'video/webm' ||
+            (embedding.media && embedding.media.type === 'video/webm')
+          ) {
+            step.video = (step.video ? step.video : []).concat([
+              'data:video/webm;base64,' + embedding.data,
+            ]);
+            step.embeddings[embeddingIndex] = {};
           } else {
             let embeddingType = 'text/plain';
             if (embedding.mime_type) {
@@ -479,6 +487,7 @@ function generateReport(options) {
         (step.hidden &&
           !step.text &&
           !step.image &&
+          !step.video &&
           _.size(step.attachments) === 0 &&
           step.result.status !== RESULT_STATUS.failed)
       ) {
diff --git a/templates/components/scenarios.tmpl b/templates/components/scenarios.tmpl
index f5b8f709..aa8ad518 100755
--- a/templates/components/scenarios.tmpl
+++ b/templates/components/scenarios.tmpl
@@ -74,7 +74,7 @@
             <div class="x_content" style="display: none;">
                 <div class="scenario-step-container"><%= scenario.description %></div>
                     <% _.each(scenario.steps, function(step, stepIndex) { %>
-                        <% if(!step.hidden || step.image || step.text || step.html || step.attachment) { %>
+                        <% if(!step.hidden || step.image || step.video || step.text || step.html || step.attachment) { %>
                             <div class="scenario-step-container">
 
                                 <% if(step.result) { %>
@@ -156,7 +156,7 @@
                                     <% if (step.json) { %>
                                         <a href="#info<%= scenarioIndex %>-<%= stepIndex %>-json" data-toggle="collapse">+ Show Info</a>
                                     <% } %>
-                                    
+
                                     <% if (step.text) { %>
                                         <a href="#info<%= scenarioIndex %>-<%= stepIndex %>-text" data-toggle="collapse">+ Show Info</a>
                                     <% } %>
@@ -169,6 +169,10 @@
                                         <a href="#info<%= scenarioIndex %>-<%= stepIndex %>-image" data-toggle="collapse">+ Screenshot</a>
                                     <% } %>
 
+                                    <% if (step.video) { %>
+                                        <a href="#info<%= scenarioIndex %>-<%= stepIndex %>-video" data-toggle="collapse">+ Video</a>
+                                    <% } %>
+
                                     <% if (!_.isEmpty(step.attachments)) { %>
                                         <span>[</span>
                                             <% _.each(step.attachments, function(attachment, attachmentIndex) { %>
@@ -215,6 +219,16 @@
                                 </div>
                             <% } %>
 
+                            <% if (step.video) { %>
+                                <div id="info<%= scenarioIndex %>-<%= stepIndex %>-video" class="scenario-step-collapse collapse">
+                                    <% for( var i = 0; i < step.video.length; i++ ) { %>
+                                        <video class="videoCapture" controls>
+                                            <source type="video/webm" src="<%= step.video[i] %>"/>
+                                        </video>
+                                    <% } %>
+                                </div>
+                            <% } %>
+
                             <% if (!_.isEmpty(step.attachments)) { %>
                                 <% _.each(step.attachments, function(attachment, attachmentIndex) { %>
                                     <div id="info<%= scenarioIndex %>-<%= stepIndex %>-attachment<%= attachmentIndex %>" class="scenario-step-collapse collapse">
diff --git a/templates/style.css b/templates/style.css
index 6e652ed8..ba46dddb 100644
--- a/templates/style.css
+++ b/templates/style.css
@@ -381,6 +381,13 @@ ul.quick-list li i {
     max-width: 100%;
 }
 
+.videoCapture{
+    width: 50%;
+    height: 50%;
+    max-height: 100%;
+    max-width: 100%;
+}
+
 /* Features / Scenarios */
 ul.panel_toolbox li .step {
     border-radius: 50%;