show video in imageviewer (pytest-dev#14)

* show video in imageviewer

Author: drRedflint

src/layout/css/style.scss

@@ -140,63 +140,50 @@ $extra-media-width: 320px;
   }
 }
 
-div.image {
+div.media {
   border: $border-width solid #e6e6e6;
   float: right;
   height: $extra-height;
   margin: 0 $spacing;
   overflow: hidden;
   width: $extra-media-width;
-
-  img {
-    // width: $extra-media-width;
-  }
 }
 
-.image-container {
-  display: flex;
+.media-container {
+  display: grid;
+  grid-template-columns: 25px auto 25px;
   align-items: center;
   flex: 1 1;
   overflow: hidden;
   height: 200px;
 }
-.image-container__nav--right,
-.image-container__nav--left {
-  flex: 0 0 25px;
+.media-container__nav--right,
+.media-container__nav--left {
   text-align: center;
   cursor: pointer;
 }
 
-.image-container__frame {
-  flex: 1 1;
+.media-container__viewport {
   cursor: pointer;
   text-align: center;
+  height: inherit;
+  img,
+  video {
+    object-fit: cover;
+    width: 100%;
+    max-height: 100%;
+  }
 }
 
-.image-name,
-.image-overview {
+.media__name,
+.media__counter {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   flex: 0 0 25px;
   align-items: center;
 }
 
-div.video {
-  border: $border-width solid #e6e6e6;
-  float: right;
-  height: $extra-height;
-  margin-left: $spacing;
-  overflow: hidden;
-  width: $extra-media-width;
-
-  video {
-    overflow: hidden;
-    width: $extra-media-width;
-    height: $extra-height;
-  }
-}
-
 .collapsed {
   display: none;
 }

src/pytest_html/resources/index.jinja2

@@ -31,11 +31,6 @@
     <template id="template_a">
       <a target="_blank"></a>
     </template>
-    <template id="template_img">
-      <a target="_blank">
-        <img />
-      </a>
-    </template>
     <template id="template_results-table__tbody">
       <tbody class="results-table-row">
         <tr>
@@ -46,14 +41,19 @@
         </tr>
         <tr class="extras-row">
           <td class="extra" colspan="4">
-            <div class="image">
-              <div class="image-container">
-                  <div class="image-container__nav--left"><</div>
-                  <div class="image-container__frame"></div>
-                  <div class="image-container__nav--right">></div>
+            <div class="media">
+              <div class="media-container">
+                  <div class="media-container__nav--left"><</div>
+                  <div class="media-container__viewport">
+                    <img src="" />
+                    <video controls>
+                      <source src="" type="video/mp4">
+                    </video>
+                  </div>
+                  <div class="media-container__nav--right">></div>
                 </div>
-                <div class="image-name"></div> 
-                <div class="image-overview"></div> 
+                <div class="media__name"></div> 
+                <div class="media__counter"></div> 
             </div>
             <div class="log"></div>
           </td>

src/pytest_html/resources/style.css

@@ -1,5 +1,5 @@
 const { formatDuration } = require('./utils.js')
-const imgViewer = require('./imgViewer.js')
+const mediaViewer = require('./mediaViewer.js')
 const templateEnvRow = document.querySelector('#template_environment_row')
 const templateResult = document.querySelector('#template_results-table__tbody')
 const aTag = document.querySelector('#template_a')
@@ -77,7 +77,7 @@ const dom = {
         } else {
             resultBody.querySelector('.extras-row').classList.add('hidden')
         }
-        const images = []
+        const media = []
         extras?.forEach(({ name, format_type, content }) => {
             const extraLink = aTag.content.cloneNode(true)
             const extraLinkItem = extraLink.querySelector('a')
@@ -87,11 +87,11 @@ const dom = {
             extraLinkItem.innerText = name
             resultBody.querySelector('.col-links').appendChild(extraLinkItem)
 
-            if (format_type === 'image') {
-                images.push({ path: content, name })
+            if (['image', 'video'].includes(format_type)) {
+                media.push({ path: content, name, format_type })
             }
         })
-        imgViewer.setupImgViewer(resultBody, images)
+        mediaViewer.setUp(resultBody, media)
 
         // Add custom html from the pytest_html_results_table_row hook
         resultsTableRow && insertAdditionalHTML(resultsTableRow, resultBody, 'td')

src/pytest_html/scripts/dom.js

@@ -0,0 +1,74 @@
+class MediaViewer {
+    constructor(assets) {
+        this.assets = assets
+        this.index = 0
+    }
+    nextActive() {
+        this.index = this.index === this.assets.length - 1 ? 0 : this.index + 1
+        return [this.activeFile, this.index]
+    }
+    prevActive() {
+        this.index = this.index === 0 ? this.assets.length - 1 : this.index -1
+        return [this.activeFile, this.index]
+    }
+
+    get currentIndex() {
+        return this.index
+    }
+    get activeFile() {
+        return this.assets[this.index]
+    }
+}
+
+
+const setUp = (resultBody, assets) => {
+    if (!assets.length) {
+        resultBody.querySelector('.media').classList.add('hidden')
+        return
+    }
+
+    const mediaViewer = new MediaViewer(assets)
+    const leftArrow = resultBody.querySelector('.media-container__nav--left')
+    const rightArrow = resultBody.querySelector('.media-container__nav--right')
+    const mediaName = resultBody.querySelector('.media__name')
+    const counter = resultBody.querySelector('.media__counter')
+    const imageEl = resultBody.querySelector('img')
+    const sourceEl = resultBody.querySelector('source')
+    const videoEl = resultBody.querySelector('video')
+
+    const setImg = (media, index) => {
+        if (media?.format_type === 'image') {
+            imageEl.src = media.path
+
+            imageEl.classList.remove('hidden')
+            videoEl.classList.add('hidden')
+        } else if (media?.format_type === 'video') {
+            sourceEl.src = media.path
+
+            videoEl.classList.remove('hidden')
+            imageEl.classList.add('hidden')
+        }
+
+        mediaName.innerText = media?.name
+        counter.innerText = `${index + 1} / ${assets.length}`
+    }
+    setImg(mediaViewer.activeFile, mediaViewer.currentIndex)
+
+    const moveLeft = () => {
+        const [media, index] = mediaViewer.prevActive()
+        setImg(media, index)
+    }
+    const doRight = () => {
+        const [media, index] = mediaViewer.nextActive()
+        setImg(media, index)
+    }
+    const openImg = () => {
+        window.open(mediaViewer.activeFile.path, '_blank')
+    }
+
+    leftArrow.addEventListener('click', moveLeft)
+    rightArrow.addEventListener('click', doRight)
+    imageEl.addEventListener('click', openImg)
+}
+
+exports.setUp = setUp