@projektemacher/storymapjs 0.10.7 → 0.10.8

package/src/media/types/DailyMotion.ts

@@ -1,7 +1,6 @@
+import { dailymotionId } from "../embedId";
 import { Media } from "../Media";
 import Dom from "../../dom/Dom";
-import { Language } from "../../language/Language";
-import { ratio } from "../../core/Util";
 
 /*	Media.DailyMotion
 ================================================== */
@@ -13,7 +12,7 @@ export default class DailyMotion extends Media {
 	================================================== */
     _loadMedia() {
         // Loading Message
-        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+        this.loadingMessage();
 
         // Create Dom element
         this._el.content_item = Dom.create(
@@ -23,13 +22,10 @@ export default class DailyMotion extends Media {
         );
 
         // Get Media ID
-        const id = this.data.url.match("video")
-            ? this.data.url.split("video/")[1]
-            : this.data.url.split("embed/")[1];
-        if (!id) {
+        this.media_id = dailymotionId(this._url()) ?? "";
+        if (!this.media_id) {
             throw new Error("Invalid DailyMotion URL");
         }
-        this.media_id = id.split(/[?&]/)[0];
 
         // API URL
         const api_url =
@@ -47,8 +43,7 @@ export default class DailyMotion extends Media {
 
     // Update Media Display
     _updateMediaDisplay() {
-        this._el.content_item.style.height =
-            ratio.r16_9({ w: this._el.content_item.offsetWidth }) + "px";
+        this._sizeContentItemTo16x9();
     }
 
     _stopMedia() {

package/src/media/types/DocumentCloud.ts

@@ -1,41 +1,12 @@
-import { Media } from "../Media";
-import Dom from "../../dom/Dom";
-import { Language } from "../../language/Language";
-import { validateWebURL } from "../EmbedUtil";
+import { WebsiteBase } from "./Website";
 
 /*	Media.DocumentCloud
-	Embeds a DocumentCloud document viewer (issue #437)
+	Embeds a DocumentCloud document viewer (issue #437) — the same iframe
+	embed as the website type, with its own CSS class.
 ================================================= */
 
-export default class DocumentCloud extends Media {
-    /*	Load the media
-	================================================== */
-    _loadMedia() {
-        // Loading Message
-        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
-
-        // Create Dom element
-        this._el.content_item = Dom.create(
-            "div",
-            "vco-media-item vco-media-iframe vco-media-documentcloud",
-            this._el.content,
-        );
-
-        // the canonical document URL renders the standalone viewer; rebuilt
-        // from a validated src to keep stored XSS out of the storymap JSON
-        const src = validateWebURL(this.data.url);
-        if (!src) {
-            this.loadErrorDisplay("Invalid URL.");
-            return;
-        }
-        const iframe = document.createElement("iframe");
-        iframe.setAttribute("src", src);
-        this._el.content_item.appendChild(iframe);
-        this.onLoaded();
-    }
-
-    // Update Media Display
-    _updateMediaDisplay() {
-        this._el.content_item.style.height = this.options.height + "px";
+export default class DocumentCloud extends WebsiteBase {
+    protected extraClass(): string {
+        return "vco-media-documentcloud";
     }
 }

package/src/media/types/Facebook.ts

@@ -1,6 +1,5 @@
 import { Media } from "../Media";
 import Dom from "../../dom/Dom";
-import { Language } from "../../language/Language";
 
 /*	Media.Facebook
 	Embeds a Facebook post, video or reel via the plugins endpoint
@@ -12,7 +11,7 @@ export default class Facebook extends Media {
 	================================================== */
     _loadMedia() {
         // Loading Message
-        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+        this.loadingMessage();
 
         // Create Dom element
         this._el.content_item = Dom.create(
@@ -21,7 +20,7 @@ export default class Facebook extends Media {
             this._el.content,
         );
 
-        const url = this.data.url;
+        const url = this._url();
         const href = encodeURIComponent(url);
         const embed =
             /\/videos?\//.test(url) || /\/watch/.test(url) || /\/reel\//.test(url)
@@ -36,6 +35,6 @@ export default class Facebook extends Media {
 
     // Update Media Display
     _updateMediaDisplay() {
-        this._el.content_item.style.height = this.options.height + "px";
+        this._sizeContentItemToOptionHeight();
     }
 }

package/src/media/types/Flickr.ts

@@ -1,6 +1,6 @@
+import { flickrId } from "../embedId";
 import { Media } from "../Media";
 import Dom from "../../dom/Dom";
-import { Language } from "../../language/Language";
 
 /*	Media.Flickr
 
@@ -13,7 +13,7 @@ export default class Flickr extends Media {
 	================================================== */
     _loadMedia() {
         // Loading Message
-        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+        this.loadingMessage();
 
         // Create Dom element
         this._el.content_item = Dom.create(
@@ -55,18 +55,18 @@ export default class Flickr extends Media {
     }
 
     establishMediaID() {
-        const marker = "flickr.com/photos/";
-        const idx = this.data.url.indexOf(marker);
-        if (idx === -1) {
-            throw "Invalid Flickr URL";
+        // threw a bare string (not an Error) and could assign `undefined` when
+        // the URL had the host but no photo segment
+        const id = flickrId(this._url());
+        if (!id) {
+            throw new Error("Invalid Flickr URL");
         }
-        const pos = idx + marker.length;
-        this.media_id = this.data.url.slice(pos).split("/")[1];
+        this.media_id = id;
     }
 
     createMedia(d: unknown) {
         const data = d as { sizes: { size: { label: string; source: string }[] } };
-        const best_size = this.sizes(this.options.height);
+        const best_size = this.sizes(Number(this.options.height ?? 0));
         const sizes = data?.sizes?.size;
         if (!sizes || !sizes.length) {
             this.loadErrorDisplay("Photo not found or private.");

package/src/media/types/GoogleDoc.ts

@@ -1,6 +1,5 @@
 import { Media } from "../Media";
 import Dom from "../../dom/Dom";
-import { Language } from "../../language/Language";
 import { validateWebURL } from "../EmbedUtil";
 
 /*	Media.GoogleDoc
@@ -14,7 +13,7 @@ export default class GoogleDoc extends Media {
 	================================================== */
     _loadMedia() {
         // Loading Message
-        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+        this.loadingMessage();
 
         // Create Dom element
         this._el.content_item = Dom.create(
@@ -24,7 +23,7 @@ export default class GoogleDoc extends Media {
         );
 
         // Get Media ID
-        this.media_id = this.data.url;
+        this.media_id = this._url();
 
         // Rebuild a clean iframe from a validated src: injecting the raw
         // URL into markup would allow stored XSS via the storymap JSON
@@ -54,6 +53,6 @@ export default class GoogleDoc extends Media {
 
     // Update Media Display
     _updateMediaDisplay() {
-        this._el.content_item.style.height = this.options.height + "px";
+        this._sizeContentItemToOptionHeight();
     }
 }

package/src/media/types/HtmlMedia.ts

@@ -0,0 +1,167 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { Language } from "../../language/Language";
+
+/*	Media.HtmlMedia
+	Shared implementation for the <audio> and <video> types. The two differ
+	only in the element name, the CSS class, the fallback text and the
+	file extension -> MIME map, so all of that is data here.
+================================================== */
+
+/** The element this media type plays. */
+export type HtmlMediaKind = "audio" | "video";
+
+interface HtmlMediaSpec {
+    /** The element to create. */
+    kind: HtmlMediaKind;
+    /** File extension (lowercase, no dot) -> MIME subtype. */
+    extensions: Record<string, string>;
+}
+
+const AUDIO_DEFAULT: HtmlMediaSpec = { kind: "audio", extensions: { mp3: "mpeg" } };
+
+/** MIME subtype for a file extension, or "" when it is not recognised. */
+function mimeSubtype(ext: string, spec: HtmlMediaSpec): string {
+    return spec.extensions[ext.toLowerCase()] ?? "";
+}
+
+/** The behaviour shared by the audio and video media types. */
+export class HtmlMediaBase extends Media {
+    declare "player_element": HTMLMediaElement | null;
+    declare "_onCanPlay": (() => void) | null;
+    declare "_onEnded": (() => void) | null;
+    declare "_onSourceError": (() => void) | null;
+
+    /**
+     * The per-kind differences. Overridden by the Audio/Video subclasses; the
+     * base value is never used (an HtmlMediaBase is always subclassed).
+     */
+    protected spec(): HtmlMediaSpec {
+        return AUDIO_DEFAULT;
+    }
+
+    _loadMedia() {
+        const spec = this.spec();
+        this.loadingMessage();
+
+        const media_item = Dom.create(
+            spec.kind,
+            `vco-media-item vco-media-${spec.kind} vco-media-shadow`,
+            this._el.content,
+        ) as HTMLMediaElement;
+        this._el.content_item = media_item;
+        media_item.controls = true;
+
+        const source_item = Dom.create("source", "", media_item) as HTMLSourceElement;
+        this._el.source_item = source_item;
+
+        // Media Loaded Event. The references are kept so dispose() can detach
+        // them: an inline arrow function has no other handle.
+        this._onEnded = null;
+        this._onCanPlay = () => {
+            this.onLoaded();
+        };
+        media_item.addEventListener("canplay", this._onCanPlay);
+
+        // Load Error Event (the source element fires it, not the media element)
+        this._onSourceError = () => {
+            this.loadErrorDisplay(Language.messages.error + " " + this.options.media_name);
+        };
+        source_item.addEventListener("error", this._onSourceError);
+
+        const url = this._url();
+        source_item.src = url;
+        const media_type = this._getType(url, spec);
+        // An unrecognised extension leaves the type unset so the browser can
+        // work it out from the URL — setting a bare "audio/" (as this used to)
+        // is not a valid MIME type and makes the source fail outright.
+        if (media_type) {
+            source_item.type = media_type;
+        }
+        // Subtitles: a WebVTT track, opt-in via media.subtitles. The element
+        // is created before the fallback text node so the fallback stays last.
+        if (spec.kind === "video" || spec.kind === "audio") {
+            const subtitles = (this.data as { subtitles?: string | null }).subtitles;
+            if (typeof subtitles === "string" && subtitles !== "") {
+                const track = Dom.create(
+                    "track",
+                    "vco-media-track",
+                    media_item,
+                ) as HTMLTrackElement;
+                track.kind = "subtitles";
+                track.srclang = "en";
+                track.label = "Subtitles";
+                track.src = subtitles;
+                track.default = true;
+            }
+        }
+
+        // append as a text node: re-serializing innerHTML would replace the
+        // source element and drop its error listener, leaving the loading
+        // message on screen forever
+        media_item.appendChild(
+            document.createTextNode(
+                `Your browser doesn't support HTML5 ${spec.kind} with ` + source_item.type,
+            ),
+        );
+
+        // `ended` is what autoplay_media waits for instead of its timer; the
+        // reference is kept so dispose() can detach it, like the two above
+        this._onEnded = () => {
+            this.fire("media_ended", this.data);
+        };
+        media_item.addEventListener("ended", this._onEnded);
+
+        this.player_element = media_item;
+    }
+
+    // Update Media Display
+    _updateMediaDisplay() {
+        // the height is CSS-driven; nothing to compute here
+    }
+
+    _stopMedia() {
+        this.player_element?.pause();
+    }
+
+    /**
+     * Detach the media listeners and release the source, so a disposed audio
+     * or video element stops buffering instead of playing into a detached
+     * tree. Pausing alone (what `stopMedia()` does per slide change) is not
+     * enough for a full teardown.
+     */
+    _disposeMedia() {
+        if (this._onCanPlay) {
+            this.player_element?.removeEventListener("canplay", this._onCanPlay);
+            this._onCanPlay = null;
+        }
+        if (this._onEnded) {
+            this.player_element?.removeEventListener("ended", this._onEnded);
+            this._onEnded = null;
+        }
+        if (this._onSourceError) {
+            this._el.source_item?.removeEventListener("error", this._onSourceError);
+            this._onSourceError = null;
+        }
+        const el = this.player_element;
+        if (el) {
+            el.pause();
+            // dropping the source stops the network fetch immediately
+            el.removeAttribute("src");
+            el.load();
+        }
+        this.player_element = null;
+
+        this._onCanPlay = null;
+
+        this._onSourceError = null;
+    }
+
+    _getType(url: string, spec: HtmlMediaSpec): string {
+        const ext = url.match((this.data.mediatype as { match_str: string | RegExp }).match_str);
+        if (!ext) {
+            return "";
+        }
+        return mimeSubtype(ext[1], spec);
+    }
+}

package/src/media/types/IFrame.ts

@@ -1,6 +1,5 @@
 import { Media } from "../Media";
 import Dom from "../../dom/Dom";
-import { Language } from "../../language/Language";
 import { buildIframe } from "../EmbedUtil";
 
 /*	Media.IFrame
@@ -13,7 +12,7 @@ export default class IFrame extends Media {
 	================================================== */
     _loadMedia() {
         // Loading Message
-        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+        this.loadingMessage();
 
         // Create Dom element
         this._el.content_item = Dom.create(
@@ -23,7 +22,7 @@ export default class IFrame extends Media {
         );
 
         // Get Media ID
-        this.media_id = this.data.url;
+        this.media_id = this._url();
 
         // The url field holds a user-pasted embed snippet. Rebuild a
         // clean iframe from its src instead of injecting the raw markup,
@@ -46,6 +45,6 @@ export default class IFrame extends Media {
 
     // Update Media Display
     _updateMediaDisplay() {
-        this._el.content_item.style.height = this.options.height + "px";
+        this._sizeContentItemToOptionHeight();
     }
 }

package/src/media/types/Image.ts

@@ -1,6 +1,31 @@
 import { Media } from "../Media";
 import Dom from "../../dom/Dom";
-import { Language } from "../../language/Language";
+import { validateWebURL } from "../EmbedUtil";
+
+/* IIIF Image API 2/3 URL tail: .../region/size/rotation/quality.format
+   (optionally a query string). Used to request container-matched widths
+   instead of the full-size image (perf, backwards-compatible). */
+const IIIF_TAIL =
+    /\/(full|max|pct:[\d.]+|\d+,?\d*)\/(full|max|pct:[\d.]+|\d+,?\d*)\/(\d+|full)\/(default|color|gray|bitonal)\.(jpg|jpeg|png|webp|gif)(\?.*)?$/i;
+
+/**
+ * Rewrite an IIIF Image API URL to the given pixel width (`w,` size
+ * component, height unconstrained). Returns the URL unchanged when it is
+ * not a recognizable IIIF image URL.
+ */
+export function iiifSizedUrl(url: string | null, width: number): string | null {
+    if (!url || !(width > 0)) {
+        return url;
+    }
+    const match = url.match(IIIF_TAIL);
+    if (!match) {
+        return url;
+    }
+    return (
+        url.slice(0, match.index) +
+        `/${match[1]}/${width},/${match[3]}/${match[4]}.${match[5]}${match[6] ?? ""}`
+    );
+}
 
 /*	Media.Image
 	Produces image assets.
@@ -12,14 +37,17 @@ export default class Image extends Media {
 	================================================== */
     _loadMedia() {
         // Loading Message
-        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+        this.loadingMessage();
 
-        // Link
-        if (this.data.link) {
+        // Link — protocol-checked: a `javascript:` href in the storymap JSON
+        // would be a click-through XSS (see Media._initLayout)
+        const link_href = this.data.link ? validateWebURL(this.data.link) : null;
+        if (link_href) {
             this._el.content_link = Dom.create("a", "", this._el.content);
             const content_link = this._el.content_link as HTMLAnchorElement;
-            content_link.href = this.data.link;
+            content_link.href = link_href;
             content_link.target = "_blank";
+            content_link.rel = "noopener noreferrer";
             this._el.content_item = Dom.create(
                 "img",
                 "vco-media-item vco-media-image vco-media-shadow",
@@ -38,11 +66,49 @@ export default class Image extends Media {
             this.onMediaLoaded();
         });
 
-        (this._el.content_item as HTMLImageElement).src = this.data.url;
+        const img = this._el.content_item as HTMLImageElement;
+        // offscreen/preloaded slides stay lazy (the active slide is
+        // upgraded to eager on activation, see Slide.setActive); decoding
+        // is only a hint — old browsers ignore both attributes
+        img.decoding = "async";
+        img.loading = this._state.eager ? "eager" : "lazy";
+        // responsive sizes (perf): IIIF image URLs request a container-
+        // matched width; author-provided srcset/sizes pass through;
+        // everything else renders byte-identically
+        const media_width = Number(this.options.width) || 0;
+        const sized = iiifSizedUrl(this._url(), media_width);
+        img.src = sized ?? this._url();
+        // accessibility: explicit alt text, falling back to the caption as
+        // plain text; an empty string marks a decorative image
+        img.alt = this._altText();
+        if (this.data.srcset) {
+            img.srcset = this.data.srcset as string;
+        }
+        if (this.data.sizes) {
+            img.sizes = this.data.sizes as string;
+        }
 
+        // the element is built and the src is set: hand over to Media so the
+        // loading overlay is hidden and credit/caption are rendered. The
+        // `load` listener above only fires the separate media_loaded event.
         this.onLoaded();
     }
 
+    _altText(): string {
+        const alt = this.data.alt as string | undefined;
+        if (alt !== undefined && alt !== "") {
+            return alt;
+        }
+        const caption = this.data.caption as string | null | undefined;
+        if (caption) {
+            return caption
+                .replace(/<[^>]*>/g, " ")
+                .replace(/\s+/g, " ")
+                .trim();
+        }
+        return "";
+    }
+
     _updateMediaDisplay(layout?: string) {
         // modern browsers size media correctly without engine-specific fixes
     }

package/src/media/types/Juxtapose.ts

@@ -1,6 +1,6 @@
 import { Media } from "../Media";
 import Dom from "../../dom/Dom";
-import { Language } from "../../language/Language";
+import { buildIframe } from "../EmbedUtil";
 
 /*	Media.Juxtapose
 	Embeds a JuxtaposeJS before/after slider (issue #360)
@@ -11,7 +11,7 @@ export default class Juxtapose extends Media {
 	================================================== */
     _loadMedia() {
         // Loading Message
-        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+        this.loadingMessage();
 
         // Create Dom element
         this._el.content_item = Dom.create(
@@ -20,13 +20,22 @@ export default class Juxtapose extends Media {
             this._el.content,
         );
 
-        // published Juxtapose URLs are iframe-ready embeds
-        this._el.content_item.innerHTML = `<iframe src="${this.data.url}" />`;
+        // Built through buildIframe rather than an `<iframe src="${url}">`
+        // template string: interpolating a storymap-JSON string into markup
+        // is a stored-XSS break-out (`"><img src=x onerror=...>`), and
+        // MediaType routes *any* URL containing "juxtapose" here.
+        const embed = buildIframe(`<iframe src="${String(this._url() ?? "")}"></iframe>`);
+        if (!embed) {
+            this.loadErrorDisplay("Invalid URL.");
+            return;
+        }
+        embed.setAttribute("loading", "lazy");
+        this._el.content_item.appendChild(embed);
         this.onLoaded();
     }
 
     // Update Media Display
     _updateMediaDisplay() {
-        this._el.content_item.style.height = this.options.height + "px";
+        this._sizeContentItemToOptionHeight();
     }
 }

package/src/media/types/SoundCloud.ts

@@ -1,6 +1,6 @@
 import { Media } from "../Media";
 import Dom from "../../dom/Dom";
-import { Language } from "../../language/Language";
+import { sanitizeSlideText } from "../EmbedUtil";
 
 /*	Media.SoundCloud
 ================================================== */
@@ -8,18 +8,19 @@ import { Language } from "../../language/Language";
 /*	Minimal surface of the SoundCloud widget API used here. */
 interface SoundCloudWidget {
     pause: () => void;
+    unbind?: () => void;
 }
 
 export default class SoundCloud extends Media {
     declare "media_id": string;
     declare "soundCloudCreated": boolean;
-    declare "widget": SoundCloudWidget;
+    declare "widget": SoundCloudWidget | null;
 
     /*	Load the media
 	================================================== */
     async _loadMedia() {
         // Loading Message
-        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+        this.loadingMessage();
 
         // Create Dom element
         this._el.content_item = Dom.create(
@@ -29,7 +30,7 @@ export default class SoundCloud extends Media {
         );
 
         // Get Media ID
-        this.media_id = this.data.url;
+        this.media_id = this._url();
 
         // API URL
         const api_url = "https://soundcloud.com/oembed?url=" + this.media_id + "&format=json";
@@ -56,14 +57,24 @@ export default class SoundCloud extends Media {
             this.loadErrorDisplay("Unable to load this track.");
             return;
         }
-        this._el.content_item.innerHTML = data.html;
+        // The oEmbed response is third-party HTML. It is sanitized like any
+        // other untrusted markup, which in practice keeps the provider's
+        // <iframe> (rebuilt by the sanitizer) and drops its inline script —
+        // the widget is created from the iframe below, so the script was never
+        // needed in the first place.
+        const content_item = this._el.content_item;
+        if (!content_item) {
+            this.loadErrorDisplay("Unable to load this track.");
+            return;
+        }
+        content_item.appendChild(sanitizeSlideText(data.html));
 
         this.soundCloudCreated = true;
 
         const sc = SC as { Widget: (iframe: Element | null) => SoundCloudWidget };
         // per-instance widget: a global would be overwritten by every
         // SoundCloud slide and _stopMedia would pause the wrong one
-        this.widget = sc.Widget(this._el.content_item.querySelector("iframe"));
+        this.widget = sc.Widget(content_item.querySelector("iframe"));
 
         // After Loaded
         this.onLoaded();
@@ -74,4 +85,15 @@ export default class SoundCloud extends Media {
             this.widget?.pause();
         }
     }
+
+    /** Unbind the widget so it stops playing once the slide is gone. */
+    _disposeMedia() {
+        try {
+            this.widget?.unbind?.();
+        } catch (err) {
+            console.log(err);
+        }
+        this.widget = null;
+        this.soundCloudCreated = false;
+    }
 }