From eda73421448916b4f4a64d789c2274666a4137ed Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Sun, 23 Jun 2024 15:07:16 +0400
Subject: [PATCH 1/2] Closing full screen viewer on click

---
 src/lib/components/ImageShowFullscreenButton.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/lib/components/ImageShowFullscreenButton.js b/src/lib/components/ImageShowFullscreenButton.js
index 0e3198e..794abf1 100644
--- a/src/lib/components/ImageShowFullscreenButton.js
+++ b/src/lib/components/ImageShowFullscreenButton.js
@@ -61,6 +61,10 @@ export class ImageShowFullscreenButton extends BaseComponent {
       }
     });
 
+    element.addEventListener('click', () => {
+      element.classList.remove('shown');
+    });
+
     return element;
   }
 }

From a81a7c5d2720b20df735aa28728e47591fcdf21e Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Sun, 23 Jun 2024 18:25:05 +0400
Subject: [PATCH 2/2] Support video content in Fullscreen Viewer

---
 .../components/ImageShowFullscreenButton.js   | 56 +++++++++++++++++--
 src/styles/content/listing.scss               |  2 +-
 2 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/ImageShowFullscreenButton.js b/src/lib/components/ImageShowFullscreenButton.js
index 794abf1..ebf0df0 100644
--- a/src/lib/components/ImageShowFullscreenButton.js
+++ b/src/lib/components/ImageShowFullscreenButton.js
@@ -24,10 +24,34 @@ export class ImageShowFullscreenButton extends BaseComponent {
 
   #onButtonClicked() {
     const imageViewer = ImageShowFullscreenButton.#resolveFullscreenViewer();
-    let imageElement = imageViewer.querySelector('img') ?? document.createElement('img');
+    const largeSourceUrl = this.#mediaBoxTools.mediaBox.imageLinks.large;
 
-    imageElement.src = this.#mediaBoxTools.mediaBox.imageLinks.large;
-    imageViewer.appendChild(imageElement);
+    let imageElement = imageViewer.querySelector('img');
+    let videoElement = imageViewer.querySelector('video');
+
+    if (imageElement) {
+      imageElement.remove();
+    }
+
+    if (videoElement) {
+      videoElement.remove();
+    }
+
+    if (largeSourceUrl.endsWith('.webm') || largeSourceUrl.endsWith('.mp4')) {
+      videoElement ??= document.createElement('video');
+      videoElement.src = largeSourceUrl;
+      videoElement.volume = 0;
+      videoElement.autoplay = true;
+      videoElement.loop = true;
+      videoElement.controls = true;
+
+      imageViewer.appendChild(videoElement);
+    } else {
+      imageElement ??= document.createElement('img');
+      imageElement.src = largeSourceUrl;
+
+      imageViewer.appendChild(imageElement);
+    }
 
     imageViewer.classList.add('shown');
   }
@@ -57,16 +81,38 @@ export class ImageShowFullscreenButton extends BaseComponent {
     document.addEventListener('keydown', event => {
       // When ESC pressed
       if (event.code === 'Escape' || event.code === 'Esc') {
-        element.classList.remove('shown');
+        this.#closeFullscreenViewer(element);
       }
     });
 
     element.addEventListener('click', () => {
-      element.classList.remove('shown');
+      this.#closeFullscreenViewer(element);
     });
 
     return element;
   }
+
+  /**
+   * @param {HTMLElement} [viewerElement]
+   */
+  static #closeFullscreenViewer(viewerElement = null) {
+    viewerElement ??= this.#resolveFullscreenViewer();
+    viewerElement.classList.remove('shown');
+
+    /** @type {HTMLVideoElement} */
+    const videoElement = viewerElement.querySelector('video');
+
+    if (!videoElement) {
+      return;
+    }
+
+    // Stopping and muting the video
+    requestAnimationFrame(() => {
+      videoElement.volume = 0;
+      videoElement.pause();
+      videoElement.remove();
+    })
+  }
 }
 
 export function createImageShowFullscreenButton() {
diff --git a/src/styles/content/listing.scss b/src/styles/content/listing.scss
index 324c71c..1c1cdfd 100644
--- a/src/styles/content/listing.scss
+++ b/src/styles/content/listing.scss
@@ -127,7 +127,7 @@
   justify-content: stretch;
   align-items: stretch;
 
-  img {
+  img, video {
     object-fit: contain;
     width: 100%;
     height: 100%;