@projektemacher/storymapjs 0.10.6 → 0.10.8

package/src/media/types/Twitter.ts

@@ -0,0 +1,109 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { sanitizeSlideText } from "../EmbedUtil";
+import { loadJSONP, uniqueGlobalName } from "../../core/Load";
+
+/*	Media.Twitter
+	Produces Twitter Display
+================================================== */
+
+export default class Twitter extends Media {
+    declare "user_id": string;
+    declare "media_id": string;
+
+    /*	Load the media
+	================================================== */
+    _loadMedia() {
+        // Loading Message
+        this.loadingMessage();
+
+        // Create Dom element
+        this._el.content_item = Dom.create("div", "vco-media-twitter", this._el.content);
+
+        // Get Media ID
+
+        const r = /(?:twitter\.com|x\.com)\/(.+?)\/status\/(\d+)/;
+        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}`;
+        void this._fetchEmbed(api_url, callbackName);
+    }
+
+    async _fetchEmbed(api_url: string, callbackName: string) {
+        try {
+            this.createMedia(await loadJSONP<unknown>(api_url, callbackName));
+        } catch {
+            this.loadErrorDisplay("Unable to load this tweet.");
+        }
+    }
+
+    createMedia(d: unknown) {
+        const data = d as { html: string; author_url: string; author_name: string };
+        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 "&mdash;" 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
+        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');
+
+        // 	TWEET CONTENT
+        tweet += tweet_text;
+
+        //	TWEET AUTHOR
+        tweet += "<div class='vcard'>";
+        tweet +=
+            "<a href='" +
+            tweet_status_url +
+            "' class='twitter-date' target='_blank'>" +
+            tweet_status_date +
+            "</a>";
+        tweet += "<div class='author'>";
+        tweet += "<a class='screen-name url' href='" + data.author_url + "' target='_blank'>";
+        tweet += "<span class='avatar'></span>";
+        tweet +=
+            "<span class='fn'>" +
+            data.author_name +
+            " <span class='vco-icon-twitter'></span></span>";
+        tweet +=
+            "<span class='nickname'>@" +
+            tweetuser +
+            "<span class='thumbnail-inline'></span></span>";
+        tweet += "</a>";
+        tweet += "</div>";
+        tweet += "</div>";
+
+        // Add to DOM
+        // 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();
+    }
+
+    updateMediaDisplay() {}
+
+    _updateMediaDisplay() {}
+}

package/src/media/types/Video.ts

@@ -0,0 +1,14 @@
+import { HtmlMediaBase, type HtmlMediaKind } from "./HtmlMedia";
+
+/*	Media.Video
+	A <video> element with a single <source> child.
+================================================== */
+
+export default class Video extends HtmlMediaBase {
+    protected spec() {
+        return {
+            kind: "video" as HtmlMediaKind,
+            extensions: { mp4: "mp4", webm: "webm" },
+        };
+    }
+}

package/src/media/types/Vimeo.ts

@@ -0,0 +1,65 @@
+import { vimeoId } from "../embedId";
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+
+/*	Media.Vimeo
+================================================== */
+
+export default class Vimeo extends Media {
+    declare "media_id": string;
+    declare "player": HTMLIFrameElement;
+
+    /*	Load the media
+	================================================== */
+    _loadMedia() {
+        // Loading Message
+        this.loadingMessage();
+
+        // Create Dom element
+        this._el.content_item = Dom.create(
+            "div",
+            "vco-media-item vco-media-iframe vco-media-vimeo vco-media-shadow",
+            this._el.content,
+        );
+
+        // Get Media ID
+        this.media_id = vimeoId(this._url()) ?? "";
+        if (!this.media_id) {
+            throw new Error("Invalid Vimeo 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";
+
+        this.player = Dom.create("iframe", "", this._el.content_item) as HTMLIFrameElement;
+        this.player.width = "100%";
+        this.player.height = "100%";
+        this.player.frameBorder = "0";
+        this.player.src = api_url;
+
+        // After Loaded
+        this.onLoaded();
+    }
+
+    // Update Media Display
+    _updateMediaDisplay() {
+        this._sizeContentItemTo16x9();
+    }
+
+    _stopMedia() {
+        try {
+            this.player?.contentWindow?.postMessage(
+                JSON.stringify({ method: "pause" }),
+                "https://player.vimeo.com",
+            );
+        } catch (err) {
+            console.log(err);
+        }
+    }
+}

package/src/media/types/Website.ts

@@ -0,0 +1,46 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+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 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.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.");
+            return;
+        }
+        const iframe = document.createElement("iframe");
+        iframe.setAttribute("src", src);
+        content_item.appendChild(iframe);
+        this.onLoaded();
+    }
+
+    _updateMediaDisplay() {
+        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

@@ -0,0 +1,134 @@
+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
+================================================== */
+
+const CALLBACK_PREFIX = "wikipediaCallback_";
+const MAX_ID_LENGTH = 512 - CALLBACK_PREFIX.length;
+
+/**
+ * Split a Wikipedia article URL into its decoded title and language subdomain.
+ * Underscores and percent-encoding both decode to spaces; hash fragments are
+ * stripped. Falls back to the raw path segment when decoding fails.
+ */
+export function parseWikipediaUrl(pageUrl: string): { title: string; language: string } {
+    const raw = pageUrl.split("wiki/")[1].split("#")[0];
+    const underscored = raw.replace(/_/g, " ");
+    let title: string;
+    try {
+        title = decodeURIComponent(underscored);
+    } catch {
+        title = underscored;
+    }
+    const language = pageUrl.split("//")[1].split(".wikipedia")[0];
+    return { title, language };
+}
+
+/** The deterministic part of the JSONP callback name for an article title. */
+export function wikipediaCallbackBase(title: string): string {
+    return CALLBACK_PREFIX + title.replace(/[^0-9a-z]/gi, "").slice(0, MAX_ID_LENGTH);
+}
+
+/** The MediaWiki extracts API URL for a title, wrapping its answer in `callbackName`. */
+export function wikipediaApiUrl(language: string, title: string, callbackName: string): string {
+    return `https://${language}.wikipedia.org/w/api.php?action=query&prop=extracts&redirects=&titles=${encodeURIComponent(title)}&exintro=1&format=json&callback=${callbackName}`;
+}
+
+export default class Wikipedia extends Media {
+    declare "media_id": string;
+
+    /*	Load the media
+	================================================== */
+    _loadMedia() {
+        // Loading Message
+        this.loadingMessage();
+
+        // Create Dom element
+        this._el.content_item = Dom.create(
+            "div",
+            "vco-media-item vco-media-wikipedia",
+            this._el.content,
+        );
+
+        // Get Media ID
+        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).
+        const callbackName = uniqueGlobalName(wikipediaCallbackBase(title));
+        const api_url = wikipediaApiUrl(language, title, callbackName);
+        void this._fetchExtract(api_url, callbackName);
+    }
+
+    async _fetchExtract(api_url: string, callbackName: string) {
+        try {
+            this.createMedia(await loadJSONP<unknown>(api_url, callbackName));
+        } catch {
+            this.loadErrorDisplay("Unable to load this article.");
+        }
+    }
+
+    createMedia(d: unknown) {
+        const data = d as { query?: unknown };
+        if (data.query) {
+            let content;
+            const wiki = {
+                entry: {} as Record<string, string>,
+                title: "",
+                text: "",
+                extract: "",
+                paragraphs: 1,
+                text_array: [] as string[],
+            };
+
+            const pages = data.query as { pages: Record<string, unknown> };
+            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>");
+            } else {
+                wiki.text_array.push(wiki.extract);
+            }
+
+            for (let i = 0; i < wiki.text_array.length; i++) {
+                if (i + 1 <= wiki.paragraphs && i + 1 < wiki.text_array.length) {
+                    wiki.text += "<p>" + wiki.text_array[i + 1];
+                }
+            }
+
+            content =
+                "<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. `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();
+            }
+        }
+    }
+
+    updateMediaDisplay() {}
+
+    _updateMediaDisplay() {}
+}

package/src/media/types/YouTube.ts

@@ -0,0 +1,224 @@
+import { unique_ID, clearTimer } from "../../core/Util";
+import { youtubeId, queryParam } from "../embedId";
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+
+/*	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;
+    pauseVideo: () => void;
+    seekTo: (seconds: number) => void;
+    destroy: () => void;
+    loadVideoById: (id: string) => void;
+    cueVideoById: (id: string) => void;
+    setVolume: (volume: number) => void;
+    getDuration: () => number;
+    getPlayerState: () => number;
+}
+
+/*	The externally loaded YT global, narrowed at its usage sites. */
+type YTGlobal = {
+    Player: new (el: HTMLElement | string, opts: unknown) => YTPlayer;
+    PlayerState: Record<string, number>;
+};
+
+interface YouTubeMediaID {
+    id?: string;
+    start?: number | string;
+    hd?: boolean | string;
+}
+
+export default class YouTube extends Media {
+    declare "youtube_loaded": boolean;
+    declare "media_id": YouTubeMediaID;
+    declare "player": YTPlayer | null;
+    declare "_player_attempts": number;
+
+    /*	Load the media
+	================================================== */
+    async _loadMedia() {
+        // Loading Message
+        this.loadingMessage();
+
+        this.youtube_loaded = false;
+        this._player_attempts = 0;
+
+        // Create Dom element
+        this._el.content_item = Dom.create(
+            "div",
+            "vco-media-item vco-media-youtube vco-media-shadow",
+            this._el.content,
+        );
+        (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 = { id: id };
+        this.media_id.start = queryParam(this._url(), "t") ?? undefined;
+        this.media_id.hd = queryParam(this._url(), "hd") ?? undefined;
+
+        // API Call
+        try {
+            await this.loadScript("https://www.youtube.com/iframe_api");
+        } catch {
+            // aborted or failed to load; nothing to show
+            return;
+        }
+        this.createMedia();
+    }
+
+    // Update Media Display
+    _updateMediaDisplay() {
+        this._sizeContentItemTo16x9();
+    }
+
+    _stopMedia() {
+        // cancel a pending API retry so a poll cannot outlive the slide
+        clearTimer(this.timer);
+        this.timer = null;
+        if (this.youtube_loaded && this.player) {
+            try {
+                const yt = YT as YTGlobal;
+                if (this.player.getPlayerState() === yt.PlayerState.PLAYING) {
+                    this.player.pauseVideo();
+                }
+            } catch (err) {
+                console.log(err);
+            }
+        }
+    }
+
+    createMedia() {
+        // Determine Start of Media
+        if (typeof this.media_id.start != "undefined") {
+            const vidstart = this.media_id.start.toString();
+            // supports the "90" (seconds), "1m30s" and "1h2m30s" formats
+            const hours = /(\d+)h/.exec(vidstart);
+            const minutes = /(\d+)m/.exec(vidstart);
+            const seconds = /(\d+)s/.exec(vidstart);
+            if (hours || minutes || seconds) {
+                this.media_id.start =
+                    (hours ? parseInt(hours[1], 10) * 3600 : 0) +
+                    (minutes ? parseInt(minutes[1], 10) * 60 : 0) +
+                    (seconds ? parseInt(seconds[1], 10) : 0);
+            } else {
+                const parsed = parseInt(vidstart, 10);
+                this.media_id.start = Number.isNaN(parsed) ? 0 : parsed;
+            }
+        } else {
+            this.media_id.start = 0;
+        }
+        // Determine HD
+        if (typeof this.media_id.hd != "undefined") {
+            this.media_id.hd = true;
+        } else {
+            this.media_id.hd = false;
+        }
+        this.createPlayer();
+    }
+
+    createPlayer() {
+        clearTimer(this.timer);
+        if (typeof YT != "undefined" && typeof YT.Player != "undefined") {
+            // Create Player
+            const yt = YT as YTGlobal;
+            const mount_id = this._el.content_item?.id;
+            if (!mount_id) {
+                return;
+            }
+            this.player = new yt.Player(mount_id, {
+                playerVars: {
+                    enablejsapi: 1,
+                    color: "white",
+                    autohide: 1,
+                    showinfo: 0,
+                    theme: "light",
+                    start: this.media_id.start,
+                    fs: 0,
+                    rel: 0,
+                },
+                videoId: this.media_id.id,
+                events: {
+                    onReady: () => {
+                        this.onPlayerReady();
+                    },
+                    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);
+        }
+    }
+
+    /**
+     * 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 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();
+    }
+
+    onStateChange(e: { data: number; target: YTPlayer }) {
+        const yt = YT as YTGlobal;
+        if (e.data === yt.PlayerState.ENDED) {
+            e.target.seekTo(0);
+            e.target.pauseVideo();
+        }
+    }
+}