@schukai/monster 4.22.1 → 4.22.2

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.22.2] - 2025-06-22
+
+### Bug Fixes
+
+- Add audio and video support to the viewer [#309](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/309)
+
+
+
 ## [4.22.1] - 2025-06-22
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.1","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.22.1"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.1","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.22.2"}

package/source/components/content/viewer.mjs

@@ -87,6 +87,8 @@ class Viewer extends CustomElement {
                 pdf: this.setPDF,
                 plaintext: this.setPlainText,
                 markdown: this.setMarkdown,
+                audio: this.setAudio,
+                video: this.setVideo,
             }
         });
     }
@@ -189,6 +191,18 @@ class Viewer extends CustomElement {
                 }
                 break;
 
+            case "audio":
+                if (checkRenderer(mediaTypeObject.type, mediaTypeObject.toString())) {
+                    renderers[mediaTypeObject.type].call(this, content);
+                }
+                break;
+
+            case "video":
+                if (checkRenderer(mediaTypeObject.type, mediaTypeObject.toString())) {
+                    renderers[mediaTypeObject.type].call(this, content);
+                }
+                break;
+
             case "image":
                 if (checkRenderer("image", mediaTypeObject.toString())) {
                     renderers.image.call(this, content);
@@ -202,6 +216,63 @@ class Viewer extends CustomElement {
         }
     }
 
+    /**
+     * Sets the audio content for the viewer. Accepts a Blob, URL, or string and processes it
+     * to configure audio playback within the viewer. Throws an error if the input type is invalid.
+     *
+     * @param {Blob|string} data - The audio content. This can be a Blob, a URL, or a string.
+     * @return {void} No return value.
+     */
+    setAudio(data) {
+        if (isBlob(data)) {
+            data = URL.createObjectURL(data);
+        } else if (isURL(data)) {
+            // nothing to do
+        } else if (isString(data)) {
+            // nothing to do
+        } else {
+            this.dispatchEvent(new CustomEvent("viewer-error", {detail: "Blob or URL expected"}));
+            throw new Error("Blob or URL expected");
+        }
+
+        this.setOption(
+            "content",
+            `
+                   <audio controls part="audio">
+                       <source src="${data}">
+                   </audio>`
+        );
+    }
+
+    /**
+     * Sets the video content for the viewer. The method accepts a Blob, URL, or string,
+     * verifies its type, and updates the viewer's content accordingly.
+     *
+     * @param {Blob|string} data - The video data to set. It can be a Blob, URL, or string.
+     * @return {void} This method does not return a value. It updates the viewer's state.
+     * @throws {Error} Throws an error if the provided data is not a Blob or URL.
+     */
+    setVideo(data) {
+        if (isBlob(data)) {
+            data = URL.createObjectURL(data);
+        } else if (isURL(data)) {
+            // nothing to do
+        } else if (isString(data)) {
+            // nothing to do
+        } else {
+            this.dispatchEvent(new CustomEvent("viewer-error", {detail: "Blob or URL expected"}));
+            throw new Error("Blob or URL expected");
+        }
+
+        this.setOption(
+            "content",
+            `
+                   <video controls part="video">
+                     <source src="${data}">
+                   </video>`
+        );
+    }
+
     /**
      * Renders Markdown content using built-in or custom Markdown parser.
      * Overrideable via `customRenderers['text/markdown']`.