@projektemacher/storymapjs 0.10.7 → 0.10.8

package/src/media/types/Text.ts

@@ -1,6 +1,7 @@
-import { mergeData, setData, htmlify, convertUnixTime } from "../../core/Util";
+import { mergeData, htmlify, convertUnixTime } from "../../core/Util";
 import { Evented, type EventedInstance } from "../../core/mixins";
 import Dom from "../../dom/Dom";
+import { sanitizeSlideText } from "../EmbedUtil";
 
 interface TextData {
     uniqueid?: string | null;
@@ -34,11 +35,14 @@ class TextBase {
             start_btn: {} as HTMLElement,
         };
 
-        // Data
+        // Data. The placeholders were the literal strings "headline" and
+        // "text", which mergeData only overwrites when the key is present — so
+        // a slide with body text and no headline rendered an <h2>headline</h2>.
+        // The renderer guards both on `!== ""`, so empty is the real default.
         this.data = {
             uniqueid: "",
-            headline: "headline",
-            text: "text",
+            headline: "",
+            text: "",
         };
 
         // Options
@@ -46,13 +50,13 @@ class TextBase {
             title: false,
         };
 
-        setData(this, data);
+        mergeData(this.data, data);
 
         // Merge Options
         mergeData(this.options, options);
 
         this._el.container = Dom.create("div", "vco-text");
-        this._el.container.id = this.data.uniqueid;
+        this._el.container.id = this.data.uniqueid ?? "";
 
         this._initLayout();
 
@@ -126,21 +130,23 @@ class TextBase {
             this.addDateText(convertUnixTime(this.data.date.created_time));
         }
 
-        // Headline
-        if (this.data.headline !== "") {
+        // Headline (sanitized; issue #358 keeps formatting but drops scripts)
+        const headline = this.data.headline ?? "";
+        if (headline !== "") {
             let headline_class = "vco-headline";
             if (this.options.title) {
                 headline_class = "vco-headline vco-headline-title";
             }
             this._el.headline = Dom.create("h2", headline_class, this._el.content_container);
-            this._el.headline.innerHTML = this.data.headline;
+            this._el.headline.appendChild(sanitizeSlideText(headline));
         }
 
-        // Text
-        if (this.data.text !== "") {
+        // Text (sanitized; issue #358 allows extra iframe media in the text field)
+        const text = this.data.text ?? "";
+        if (text !== "") {
             let text_content = "";
 
-            text_content += htmlify(this.data.text);
+            text_content += htmlify(text);
 
             // Date
             if (
@@ -157,7 +163,7 @@ class TextBase {
             }
 
             this._el.content = Dom.create("div", "vco-text-content", this._el.content_container);
-            this._el.content.innerHTML = text_content;
+            this._el.content.appendChild(sanitizeSlideText(text_content));
         }
 
         // Fire event that the slide is loaded

package/src/media/types/Twitter.ts

@@ -1,6 +1,6 @@
 import { Media } from "../Media";
 import Dom from "../../dom/Dom";
-import { Language } from "../../language/Language";
+import { sanitizeSlideText } from "../EmbedUtil";
 import { loadJSONP, uniqueGlobalName } from "../../core/Load";
 
 /*	Media.Twitter
@@ -15,7 +15,7 @@ export default class Twitter 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("div", "vco-media-twitter", this._el.content);
@@ -23,10 +23,12 @@ export default class Twitter extends Media {
         // Get Media ID
 
         const r = /(?:twitter\.com|x\.com)\/(.+?)\/status\/(\d+)/;
-        const match = r.exec(this.data.url);
+        const match = r.exec(this._url());
         if (match) {
             this.user_id = match[1];
             this.media_id = match[2];
+        } else {
+            throw new Error("Invalid Twitter URL");
         }
         const callbackName = uniqueGlobalName(`twitterCallback_${this.media_id}`);
         const api_url = `https://api.twitter.com/1/statuses/oembed.json?id=${this.media_id}&include_entities=true&callback=${callbackName}`;
@@ -43,17 +45,22 @@ export default class Twitter extends Media {
 
     createMedia(d: unknown) {
         const data = d as { html: string; author_url: string; author_name: string };
-        let tweet = "",
-            tweet_text;
-
+        if (!data?.html) {
+            this.loadErrorDisplay("Unable to load this post.");
+            return;
+        }
+        // The oEmbed markup is positional: the date link follows the tweet text
+        // after a "—" separator. Every step below is optional so a markup
+        // change upstream degrades to a missing date/link rather than throwing.
+        const afterText = data.html.split("</p>&mdash;")[1] ?? "";
+        const tweetuser = data.author_url.split(/twitter\.com|x\.com\//)[1] ?? "";
+        const statusLink = afterText.split('<a href="')[1] ?? "";
+        const tweet_status_url = statusLink.split('">')[0] ?? "";
+        const tweet_status_date = (statusLink.split('">')[1] ?? "").split("</a>")[0] ?? "";
+
+        let tweet = "";
         //	TWEET CONTENT
-        tweet_text = data.html.split("</p>&mdash;")[0] + "</p></blockquote>";
-        // the oembed endpoint returns x.com URLs since the rebrand — parse both
-        const tweetuser = data.author_url.split(/twitter\.com|x\.com\//)[1];
-        const tweet_status_temp = data.html.split("</p>&mdash;")[1].split('<a href="')[1];
-        const tweet_status_url = tweet_status_temp.split('">')[0];
-        const tweet_status_date = tweet_status_temp.split('">')[1].split("</a>")[0];
-
+        let tweet_text = afterText ? data.html.split("</p>&mdash;")[0] + "</p></blockquote>" : "";
         // Open links in new window
         tweet_text = tweet_text.replace(/<a href/gi, '<a target="_blank" href');
 
@@ -84,7 +91,13 @@ export default class Twitter extends Media {
         tweet += "</div>";
 
         // Add to DOM
-        this._el.content_item.innerHTML = tweet;
+        // The whole tweet is assembled from the oEmbed response's own HTML
+        // plus five string-concatenated fields, and that API does not escape
+        // HTML — so the result is untrusted third-party markup and goes
+        // through the sanitizer. It also repairs the four unguarded
+        // positional splits above: a markup change upstream now degrades to a
+        // missing date instead of throwing.
+        this._el.content_item?.appendChild(sanitizeSlideText(tweet));
 
         // After Loaded
         this.onLoaded();

package/src/media/types/Video.ts

@@ -1,84 +1,14 @@
-import { Media } from "../Media";
-import Dom from "../../dom/Dom";
-import { Language } from "../../language/Language";
+import { HtmlMediaBase, type HtmlMediaKind } from "./HtmlMedia";
 
-/*	Media.Vimeo
+/*	Media.Video
+	A <video> element with a single <source> child.
 ================================================== */
 
-export default class Video extends Media {
-    declare "player_element": HTMLMediaElement;
-
-    /*	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(
-            "video",
-            "vco-media-item vco-media-video vco-media-shadow",
-            this._el.content,
-        );
-        const media_item = this._el.content_item as HTMLMediaElement;
-        media_item.controls = true;
-        this._el.source_item = Dom.create("source", "", this._el.content_item);
-        const source_item = this._el.source_item as HTMLSourceElement;
-
-        // Media Loaded Event
-        media_item.addEventListener("canplay", () => {
-            this.onLoaded();
-        });
-
-        // Load Error Event (the source element fires it, not the media element)
-        source_item.addEventListener("error", () => {
-            this.loadErrorDisplay(Language.messages.error + " " + this.options.media_name);
-        });
-
-        source_item.src = this.data.url;
-        const media_type = this._getType(this.data.url, this.data.mediatype.match_str);
-        if (media_type) {
-            source_item.type = media_type;
-        }
-        // 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 video with " + source_item.type,
-            ),
-        );
-        this.player_element = media_item;
-    }
-
-    // Update Media Display
-    _updateMediaDisplay() {
-        // video height is CSS-driven; nothing to compute here
-    }
-
-    _stopMedia() {
-        if (this.player_element) {
-            this.player_element.pause();
-        }
-    }
-
-    _getType(url: string, reg: string | RegExp) {
-        const ext = url.match(reg);
-        let type = "video/";
-        if (!ext) {
-            return type;
-        }
-        switch (ext[1]) {
-            case "mp4":
-                type += "mp4";
-                break;
-            case "webm":
-                type += "webm";
-                break;
-            default:
-                type = "";
-                break;
-        }
-        return type;
+export default class Video extends HtmlMediaBase {
+    protected spec() {
+        return {
+            kind: "video" as HtmlMediaKind,
+            extensions: { mp4: "mp4", webm: "webm" },
+        };
     }
 }

package/src/media/types/Vimeo.ts

@@ -1,7 +1,6 @@
+import { vimeoId } from "../embedId";
 import { Media } from "../Media";
 import Dom from "../../dom/Dom";
-import { Language } from "../../language/Language";
-import { ratio } from "../../core/Util";
 
 /*	Media.Vimeo
 ================================================== */
@@ -14,7 +13,7 @@ export default class Vimeo 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,17 +23,19 @@ export default class Vimeo extends Media {
         );
 
         // Get Media ID
-        const parts = this.data.url.split(/video\/|\/\/vimeo\.com\//);
-        if (!parts[1]) {
+        this.media_id = vimeoId(this._url()) ?? "";
+        if (!this.media_id) {
             throw new Error("Invalid Vimeo URL");
         }
-        this.media_id = parts[1].split(/[?&]/)[0];
 
-        // API URL
+        // API URL — plain `&` separators. The HTML entity `&` is correct
+        // inside markup but is not decoded in a URL property, so Vimeo was
+        // receiving params literally named `amp;byline` / `amp;color` and
+        // ignoring them.
         const api_url =
             "https://player.vimeo.com/video/" +
             this.media_id +
-            "?api=1&title=0&byline=0&portrait=0&color=ffffff";
+            "?api=1&title=0&byline=0&portrait=0&color=ffffff";
 
         this.player = Dom.create("iframe", "", this._el.content_item) as HTMLIFrameElement;
         this.player.width = "100%";
@@ -48,8 +49,7 @@ export default class Vimeo 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/Website.ts

@@ -1,24 +1,30 @@
 import { Media } from "../Media";
 import Dom from "../../dom/Dom";
-import { Language } from "../../language/Language";
 import { validateWebURL } from "../EmbedUtil";
 
 /*	Media.Website
+	An <iframe> pointed straight at a URL. Shared with the DocumentCloud
+	type, which is the same embed with a different CSS class.
 ================================================= */
 
-export default class Website extends Media {
+export class WebsiteBase extends Media {
     declare "media_id": string;
 
+    /** Extra class on the wrapper element, e.g. "vco-media-documentcloud". */
+    protected extraClass(): string {
+        return "";
+    }
+
     _loadMedia() {
-        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
-        this._el.content_item = Dom.create(
-            "div",
-            "vco-media-item vco-media-iframe",
-            this._el.content,
-        );
-        this.media_id = this.data.url;
-        // rebuild a clean iframe from a validated src: injecting the raw
-        // URL as markup would allow stored XSS via the storymap JSON
+        this.loadingMessage();
+
+        const classes = `vco-media-item vco-media-iframe ${this.extraClass()}`.trim();
+        const content_item = Dom.create("div", classes, this._el.content);
+        this._el.content_item = content_item;
+
+        this.media_id = this._url();
+        // rebuilt from a validated src: injecting the raw URL as markup would
+        // allow stored XSS via the storymap JSON
         const src = validateWebURL(this.media_id);
         if (!src) {
             this.loadErrorDisplay("Invalid URL.");
@@ -26,11 +32,15 @@ export default class Website extends Media {
         }
         const iframe = document.createElement("iframe");
         iframe.setAttribute("src", src);
-        this._el.content_item.appendChild(iframe);
+        content_item.appendChild(iframe);
         this.onLoaded();
     }
 
     _updateMediaDisplay() {
-        this._el.content_item.style.height = this.options.height + "px";
+        if (this._el.content_item) {
+            this._el.content_item.style.height = Number(this.options.height ?? 0) + "px";
+        }
     }
 }
+
+export default class Website extends WebsiteBase {}

package/src/media/types/Wikipedia.ts

@@ -2,6 +2,7 @@ import { Media } from "../Media";
 import Dom from "../../dom/Dom";
 import { Language } from "../../language/Language";
 import { getObjectAttributeByIndex } from "../../core/Util";
+import { sanitizeSlideText } from "../EmbedUtil";
 import { loadJSONP, uniqueGlobalName } from "../../core/Load";
 
 /*	Media.Wikipedia
@@ -45,7 +46,7 @@ export default class Wikipedia 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,7 +56,7 @@ export default class Wikipedia extends Media {
         );
 
         // Get Media ID
-        const { title, language } = parseWikipediaUrl(this.data.url);
+        const { title, language } = parseWikipediaUrl(this._url());
         this.media_id = title;
         // Claim a unique global slot: same-article concurrent loads must not
         // share one (the loser's script would call a deleted global).
@@ -86,9 +87,16 @@ export default class Wikipedia extends Media {
             };
 
             const pages = data.query as { pages: Record<string, unknown> };
-            wiki.entry = getObjectAttributeByIndex(pages.pages, 0) as Record<string, string>;
-            wiki.extract = wiki.entry.extract;
-            wiki.title = wiki.entry.title;
+            const first = getObjectAttributeByIndex(pages.pages, 0) as
+                Record<string, string> | undefined;
+            if (!first) {
+                this.loadErrorDisplay("Unable to load this article.");
+                return;
+            }
+            wiki.entry = first;
+            // a missing extract used to throw on the next line
+            wiki.extract = first.extract ?? "";
+            wiki.title = first.title ?? "";
 
             if (wiki.extract.match("<p>")) {
                 wiki.text_array = wiki.extract.split("<p>");
@@ -103,15 +111,17 @@ export default class Wikipedia extends Media {
             }
 
             content =
-                "<h4><a href='" + this.data.url + "' target='_blank'>" + wiki.title + "</a></h4>";
+                "<h4><a href='" + this._url() + "' target='_blank'>" + wiki.title + "</a></h4>";
             content += "<span class='wiki-source'>" + Language.messages.wikipedia + "</span>";
             content += wiki.text;
 
             if (wiki.extract.match("REDIRECT")) {
                 // redirect page: leave content empty
             } else {
-                // Add to DOM
-                this._el.content_item.innerHTML = content;
+                // Add to DOM. `wiki.text` is MediaWiki API output and
+                // the media URL is storymap JSON, so the assembled markup is
+                // untrusted — it goes through the sanitizer.
+                this._el.content_item?.appendChild(sanitizeSlideText(content));
                 // After Loaded
                 this.onLoaded();
             }

package/src/media/types/YouTube.ts

@@ -1,11 +1,14 @@
-import { unique_ID, getUrlVars, ratio } from "../../core/Util";
+import { unique_ID, clearTimer } from "../../core/Util";
+import { youtubeId, queryParam } from "../embedId";
 import { Media } from "../Media";
 import Dom from "../../dom/Dom";
-import { Language } from "../../language/Language";
 
 /*	Media.YouTube
 ================================================== */
 
+/** How long to wait for the IFrame API script before giving up (one second apart). */
+const YOUTUBE_API_ATTEMPTS = 10;
+
 /*	Minimal surface of the YouTube iframe API player used here. */
 interface YTPlayer {
     playVideo: () => void;
@@ -34,15 +37,17 @@ interface YouTubeMediaID {
 export default class YouTube extends Media {
     declare "youtube_loaded": boolean;
     declare "media_id": YouTubeMediaID;
-    declare "player": YTPlayer;
+    declare "player": YTPlayer | null;
+    declare "_player_attempts": number;
 
     /*	Load the media
 	================================================== */
     async _loadMedia() {
         // Loading Message
-        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+        this.loadingMessage();
 
         this.youtube_loaded = false;
+        this._player_attempts = 0;
 
         // Create Dom element
         this._el.content_item = Dom.create(
@@ -50,28 +55,18 @@ export default class YouTube extends Media {
             "vco-media-item vco-media-youtube vco-media-shadow",
             this._el.content,
         );
-        this._el.content_item.id = unique_ID(7);
-
-        // URL Vars
-        const url_vars = getUrlVars(this.data.url);
-
-        // Get Media ID
-        this.media_id = {};
-
-        if (this.data.url.match("v=")) {
-            this.media_id.id = url_vars["v"];
-        } else if (this.data.url.match("/embed/")) {
-            this.media_id.id = this.data.url.split("embed/")[1].split(/[?&]/)[0];
-        } else if (this.data.url.match(/v\/|v=|youtu\.be\/|shorts\//)) {
-            this.media_id.id = this.data.url
-                .split(/v\/|v=|youtu\.be\/|shorts\//)[1]
-                .split(/[?&]/)[0];
-        } else {
-            console.log("YouTube in URL but not a valid video");
+        (this._el.content_item as HTMLElement).id = unique_ID(7);
+
+        // Get Media ID — the previous four-way branch chain missed /live/ and
+        // playlist links, and fell through to a console.log while still
+        // building a player with `id === undefined`
+        const id = youtubeId(this._url());
+        if (!id) {
+            throw new Error("Invalid YouTube URL");
         }
-
-        this.media_id.start = url_vars["t"];
-        this.media_id.hd = url_vars["hd"];
+        this.media_id = { id: id };
+        this.media_id.start = queryParam(this._url(), "t") ?? undefined;
+        this.media_id.hd = queryParam(this._url(), "hd") ?? undefined;
 
         // API Call
         try {
@@ -85,15 +80,14 @@ export default class YouTube 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() {
         // cancel a pending API retry so a poll cannot outlive the slide
-        clearTimeout(this.timer);
+        clearTimer(this.timer);
         this.timer = null;
-        if (this.youtube_loaded) {
+        if (this.youtube_loaded && this.player) {
             try {
                 const yt = YT as YTGlobal;
                 if (this.player.getPlayerState() === yt.PlayerState.PLAYING) {
@@ -135,11 +129,15 @@ export default class YouTube extends Media {
     }
 
     createPlayer() {
-        clearTimeout(this.timer);
+        clearTimer(this.timer);
         if (typeof YT != "undefined" && typeof YT.Player != "undefined") {
             // Create Player
             const yt = YT as YTGlobal;
-            this.player = new yt.Player(this._el.content_item.id, {
+            const mount_id = this._el.content_item?.id;
+            if (!mount_id) {
+                return;
+            }
+            this.player = new yt.Player(mount_id, {
                 playerVars: {
                     enablejsapi: 1,
                     color: "white",
@@ -154,29 +152,63 @@ export default class YouTube extends Media {
                 events: {
                     onReady: () => {
                         this.onPlayerReady();
-                        // After Loaded
-                        //this.onLoaded();
                     },
                     onStateChange: this.onStateChange,
                 },
             });
+            this.onLoaded();
         } else {
+            // The IFrame API script has not arrived yet. Poll for it, but cap
+            // the attempts — an unbounded setTimeout recursion kept a timer
+            // alive forever on any network failure, and the loading message
+            // used to be dismissed by an unconditional onLoaded() below even
+            // though nothing was playing.
+            this._player_attempts = (this._player_attempts ?? 0) + 1;
+            if (this._player_attempts > YOUTUBE_API_ATTEMPTS) {
+                this.loadErrorDisplay("The YouTube player could not be loaded.");
+                return;
+            }
             this.timer = setTimeout(() => {
                 this.createPlayer();
             }, 1000);
         }
-        this.onLoaded();
+    }
+
+    /**
+     * Destroy the player, not just pause it: `stopMedia()` runs on every
+     * slide change, but teardown runs once and the iframe otherwise keeps
+     * the embedded video and its event listeners alive after disposal.
+     */
+    _disposeMedia() {
+        clearTimer(this.timer);
+        this.timer = null;
+        if (this.youtube_loaded) {
+            try {
+                this.player?.destroy?.();
+            } catch (err) {
+                console.log(err);
+            }
+        }
+        this.player = null;
+        this.youtube_loaded = false;
     }
 
     /*	Events
 	================================================== */
     onPlayerReady(e?: unknown) {
         this.youtube_loaded = true;
-        // the iframe replaces the placeholder div — re-resolve it, but a
-        // slide removed in the meantime must not crash the display update
-        const el = document.getElementById(this._el.content_item.id);
-        if (el) {
-            this._el.content_item = el;
+        // The IFrame API replaces the placeholder div with its own iframe, so
+        // re-resolve the mount. Prefer the element this instance already
+        // holds: a document-wide getElementById() reads the global id space,
+        // which two viewers on a page both write into, and would hand this
+        // player the sibling's container. The id lookup stays as a fallback
+        // for the case where the node really was replaced under us.
+        if (!this._el.content_item?.isConnected) {
+            const mount_id = (this._el.content_item as HTMLElement | undefined)?.id;
+            const found = mount_id ? document.getElementById(mount_id) : null;
+            if (found) {
+                this._el.content_item = found;
+            }
         }
         this.onMediaLoaded();
         this.onLoaded();

package/src/scss/Typography.scss

@@ -196,9 +196,7 @@
         display: block;
         line-height: $base-font-size + 2;
         padding: 10px;
-
-        @include border-radius(7px);
-
+        border-radius: 7px;
         color: #8a6d3b;
         background-color: #fcf8e3;
         border: 1px solid #faebcc;