feat: allow media urls to be base 64 data urls

src/js/media/MediaType.js

@@ -34,6 +34,7 @@ import PDF from "./types/PDF"
 import Audio from "./types/Audio"
 import Video from "./types/Video"
 import Wistia from "./types/Wistia"
+import Base64 from "./types/Base64"
 
 /**
  * Given a JavaScript Object for an event from a TimelineConfig,
@@ -217,7 +218,14 @@ export function lookupMediaType(m, image_only) {
                 name: "Imageblank",
                 match_str: "",
                 cls: Image
-            }
+            },
+            {
+                type: "base64",
+                name: "Base64",
+                match_str: /data:(image\/(?:apng|avif|gif|jpeg|png|webp));base64,[a-zA-Z0-9+\/]+/i
+                /i,
+                cls: Image
+            },
         ]
 
     if (image_only) {

src/js/media/types/Base64.js

@@ -0,0 +1,61 @@
+import { Media } from "../Media"
+import { unhtmlify, transformMediaURL } from "../../core/Util"
+import * as Browser from "../../core/Browser"
+
+export default class Base64 extends Media {
+
+    _loadMedia() {
+        // Loading Message
+        this.loadingMessage();
+
+        // Create media?
+        if (!this.options.background) {
+            this.createMedia();
+        }
+
+        // After loaded
+        this.onLoaded();
+    }
+
+    createMedia() {
+        var self = this,
+            image_class = "tl-media-item tl-media-image";
+
+        // if (this.data.url.match(/.png(\?.*)?$/) || this.data.url.match(/.svg(\?.*)?$/)) {
+        //     image_class = "tl-media-item tl-media-image"
+        // }
+
+        this._el.content_item = this.domCreate("img", image_class, this._el.content);
+
+        if (this.data.alt) {
+            this._el.content_item.alt = this.data.alt;
+        } else if (this.data.caption) {
+            this._el.content_item.alt = unhtmlify(this.data.caption);
+        }
+
+        if (this.data.title) {
+            this._el.content_item.title = this.data.title;
+        } else if (this.data.caption) {
+            this._el.content_item.title = unhtmlify(this.data.caption);
+        }
+
+        // Media Loaded Event
+        this._el.content_item.addEventListener('load', function(e) {
+            self.onMediaLoaded();
+        });
+
+        this._el.content_item.src = this.getImageURL();
+    }
+
+    getImageURL(w, h) {
+        return transformMediaURL(this.data.url);
+    }
+
+    _updateMediaDisplay(layout) {
+        if (Browser.firefox) {
+            //this._el.content_item.style.maxWidth = (this.options.width/2) - 40 + "px";
+            this._el.content_item.style.width = "auto";
+        }
+    }
+
+}