@projektemacher/storymapjs 0.10.6 → 0.10.8

package/src/media/MediaType.ts

@@ -0,0 +1,163 @@
+import Image from "./types/Image";
+import YouTube from "./types/YouTube";
+import Blockquote from "./types/Blockquote";
+import Wikipedia from "./types/Wikipedia";
+import SoundCloud from "./types/SoundCloud";
+import Vimeo from "./types/Vimeo";
+import Video from "./types/Video";
+import Audio from "./types/Audio";
+import DailyMotion from "./types/DailyMotion";
+import Twitter from "./types/Twitter";
+import Flickr from "./types/Flickr";
+import GoogleDoc from "./types/GoogleDoc";
+import IFrame from "./types/IFrame";
+import Website from "./types/Website";
+import Facebook from "./types/Facebook";
+import DocumentCloud from "./types/DocumentCloud";
+import Juxtapose from "./types/Juxtapose";
+import { Media } from "./Media";
+import { MediaTypeMatch, StorymapSlideMedia } from "../types";
+
+/*	MediaType
+	Determines the type of media the url string is.
+	returns an object with .type and .id
+	You can add new media types by adding a regex
+	to match and the media class name to use to
+	render the media
+================================================== */
+
+/* A media type table entry: like MediaTypeMatch, but match_str may be
+	a RegExp for pattern-based types (e.g. images). */
+type MediaTypeEntry = Omit<MediaTypeMatch, "match_str"> & {
+    match_str: string | RegExp;
+};
+
+/**
+ * Resolve the media handler for a slide's media object: matches the URL (and
+ * optional explicit `type`) against the supported media types — YouTube,
+ * Vimeo, images, audio, video, ...
+ *
+ * @param m - The slide media definition.
+ * @returns The matching media type entry, or `false` for unknown media.
+ */
+export default function MediaType(m: StorymapSlideMedia): MediaTypeMatch | false {
+    const media_types: MediaTypeEntry[] = [
+        {
+            type: "youtube",
+            name: "YouTube",
+            match_str: "(www.)?youtube|youtu.be",
+            cls: YouTube,
+        },
+        {
+            type: "vimeo",
+            name: "Vimeo",
+            match_str: "(player.)?vimeo.com",
+            cls: Vimeo,
+        },
+        {
+            type: "dailymotion",
+            name: "DailyMotion",
+            match_str: "(www.)?dailymotion.com",
+            cls: DailyMotion,
+        },
+        {
+            type: "soundcloud",
+            name: "SoundCloud",
+            match_str: "(player.)?soundcloud.com",
+            cls: SoundCloud,
+        },
+        {
+            type: "twitter",
+            name: "Twitter",
+            match_str: "^(https?:)?/+(www.)?(twitter|x).com",
+            cls: Twitter,
+        },
+        {
+            type: "flickr",
+            name: "Flickr",
+            match_str: "flickr.com/photos",
+            cls: Flickr,
+        },
+        {
+            type: "image",
+            name: "Image",
+            match_str: /jpg|jpeg|png|gif|webp/i,
+            cls: Image,
+        },
+        {
+            type: "video",
+            name: "Video",
+            match_str: /(mp4|webm)(\?.*)?$/i,
+            cls: Video,
+        },
+        {
+            type: "audio",
+            name: "Audio",
+            match_str: /(mp3|wav|m4a)(\?.*)?$/i,
+            cls: Audio,
+        },
+        {
+            type: "googledocs",
+            name: "Google Doc",
+            match_str:
+                "^(https?:)?/*[^.]*.google.com/[^/]*/d/[^/]*/[^/]*?usp=sharing|^(https?:)?/*drive.google.com/open?id=[^&]*&authuser=0|^(https?:)?//*drive.google.com/open\\?id=[^&]*|^(https?:)?/*[^.]*.googledrive.com/host/[^/]*/",
+            cls: GoogleDoc,
+        },
+        {
+            type: "wikipedia",
+            name: "Wikipedia",
+            match_str: "(www.)?wikipedia.org",
+            cls: Wikipedia,
+        },
+        {
+            type: "iframe",
+            name: "iFrame",
+            match_str: "iframe",
+            cls: IFrame,
+        },
+        {
+            type: "facebook",
+            name: "Facebook",
+            match_str: "(www.)?facebook.com",
+            cls: Facebook,
+        },
+        {
+            type: "documentcloud",
+            name: "DocumentCloud",
+            match_str: "documentcloud.org/documents/",
+            cls: DocumentCloud,
+        },
+        {
+            type: "juxtapose",
+            name: "Juxtapose",
+            match_str: "juxtapose",
+            cls: Juxtapose,
+        },
+        {
+            type: "blockquote",
+            name: "Quote",
+            match_str: "blockquote",
+            cls: Blockquote,
+        },
+        {
+            type: "website",
+            name: "Website",
+            match_str: "https?://",
+            cls: Website,
+        },
+        {
+            type: "",
+            name: "",
+            match_str: "",
+            cls: Media,
+        },
+    ];
+
+    for (const media_type of media_types) {
+        if (typeof m.url === "string" && m.url.match(media_type.match_str)) {
+            return media_type as MediaTypeMatch;
+        }
+    }
+
+    return false;
+}

package/src/media/embedId.ts

@@ -0,0 +1,104 @@
+/*	embedId
+	Provider id extraction.
+
+	Each media type used to roll its own: six different ways of stripping the
+	query string, three different failure modes (throw an Error, throw a bare
+	string, or log a warning and carry on with `undefined`), and a fourth
+	divergence between the URL shapes the code accepted and the ones
+	`MediaType`'s routing regex actually matched.
+
+	These helpers are the single implementation. Each returns null when the
+	url does not carry that provider's id, and the caller decides how to
+	report it.
+================================================== */
+
+/** Strip the query string and fragment. */
+function withoutQuery(url: string): string {
+    return url.split(/[?#]/)[0];
+}
+
+/**
+ * The first path segment after any of `markers`, with the query string
+ * removed. Returns null when none of the markers is present.
+ */
+export function segmentAfter(url: string, ...markers: RegExp[]): string | null {
+    for (const marker of markers) {
+        const match = url.match(marker);
+        if (match) {
+            const rest = url.slice((match.index ?? 0) + match[0].length);
+            const segment = withoutQuery(rest).split("/")[0];
+            if (segment) {
+                return segment;
+            }
+        }
+    }
+    return null;
+}
+
+/** A query parameter, via the platform parser rather than a hand-rolled split. */
+export function queryParam(url: string, name: string): string | null {
+    try {
+        return new URL(url).searchParams.get(name);
+    } catch {
+        // not an absolute URL; fall back to the raw query string
+        const query = url.split("?")[1];
+        if (!query) return null;
+        for (const pair of query.split("&")) {
+            const [key, value] = pair.split("=");
+            if (key === name) {
+                return value ?? "";
+            }
+        }
+        return null;
+    }
+}
+
+/** YouTube video id: watch, embed, short, shorts, live and youtu.be links. */
+export function youtubeId(url: string): string | null {
+    const fromQuery = queryParam(url, "v");
+    if (fromQuery) {
+        return fromQuery;
+    }
+    return segmentAfter(
+        url,
+        /youtu\.be\//i,
+        /\/embed\//i,
+        /\/shorts\//i,
+        /\/live\//i,
+        /\/v\//i,
+        /[?&]v=/i,
+    );
+}
+
+/**
+ * Vimeo video id. Watch URLs are the bare `vimeo.com/<id>` form, so the
+ * explicit `/video/` path alone is not enough — the previous implementation
+ * split on `video\/|\/\/vimeo\.com\//` and relied on the second alternative.
+ * Non-numeric pages (channels, albums, showcases) are rejected.
+ */
+export function vimeoId(url: string): string | null {
+    const explicit = segmentAfter(url, /vimeo\.com\/video\//i, /player\.vimeo\.com\/video\//i);
+    if (explicit) {
+        return explicit;
+    }
+    return url.match(/vimeo\.com\/(\d+)(?:$|[/?#])/i)?.[1] ?? null;
+}
+
+/** Dailymotion video id from a watch or embed link. */
+export function dailymotionId(url: string): string | null {
+    return segmentAfter(url, /dailymotion\.com\/video\//i, /dai\.ly\//i, /\/embed\/video\//i);
+}
+
+/** Flickr photo id from a photo page URL. */
+export function flickrId(url: string): string | null {
+    const id = segmentAfter(url, /flickr\.com\/photos\/[^/]+\//i);
+    if (id && /^\d+$/.test(id)) {
+        return id;
+    }
+    return null;
+}
+
+/** Tweet id from a twitter.com or x.com status URL. */
+export function tweetId(url: string): string | null {
+    return segmentAfter(url, /\/status(?:es)?\//i);
+}

package/src/media/types/Audio.ts

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

package/src/media/types/Blockquote.ts

@@ -0,0 +1,39 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { sanitizeBlockquote } from "../EmbedUtil";
+
+/*	Media.Blockquote
+================================================== */
+
+export default class Blockquote 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-blockquote",
+            this._el.content,
+        );
+
+        // Get Media ID
+        this.media_id = this._url();
+
+        // The url field holds user-pasted blockquote markup. Sanitize it
+        // instead of injecting the raw markup, which would allow stored
+        // XSS via the storymap JSON.
+        this._el.content_item.appendChild(sanitizeBlockquote(this.media_id));
+
+        // After Loaded
+        this.onLoaded();
+    }
+
+    updateMediaDisplay() {}
+
+    _updateMediaDisplay() {}
+}

package/src/media/types/DailyMotion.ts

@@ -0,0 +1,53 @@
+import { dailymotionId } from "../embedId";
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+
+/*	Media.DailyMotion
+================================================== */
+
+export default class DailyMotion 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-iframe vco-media-dailymotion",
+            this._el.content,
+        );
+
+        // Get Media ID
+        this.media_id = dailymotionId(this._url()) ?? "";
+        if (!this.media_id) {
+            throw new Error("Invalid DailyMotion URL");
+        }
+
+        // API URL
+        const api_url =
+            "https://www.dailymotion.com/embed/video/" + this.media_id + "?api=postMessage";
+
+        // API Call
+        this._el.content_item.innerHTML =
+            "<iframe autostart='false' frameborder='0' width='100%' height='100%' src='" +
+            api_url +
+            "'></iframe>";
+
+        // After Loaded
+        this.onLoaded();
+    }
+
+    // Update Media Display
+    _updateMediaDisplay() {
+        this._sizeContentItemTo16x9();
+    }
+
+    _stopMedia() {
+        const iframe = this._el.content_item?.querySelector("iframe") as HTMLIFrameElement | null;
+        iframe?.contentWindow?.postMessage('{"command":"pause","parameters":[]}', "*");
+    }
+}

package/src/media/types/DocumentCloud.ts

@@ -0,0 +1,12 @@
+import { WebsiteBase } from "./Website";
+
+/*	Media.DocumentCloud
+	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 WebsiteBase {
+    protected extraClass(): string {
+        return "vco-media-documentcloud";
+    }
+}

package/src/media/types/Facebook.ts

@@ -0,0 +1,40 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+
+/*	Media.Facebook
+	Embeds a Facebook post, video or reel via the plugins endpoint
+	(issue #272)
+================================================== */
+
+export default class Facebook extends Media {
+    /*	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-facebook",
+            this._el.content,
+        );
+
+        const url = this._url();
+        const href = encodeURIComponent(url);
+        const embed =
+            /\/videos?\//.test(url) || /\/watch/.test(url) || /\/reel\//.test(url)
+                ? `https://www.facebook.com/plugins/video.php?href=${href}&show_text=true`
+                : `https://www.facebook.com/plugins/post.php?href=${href}&show_text=true`;
+        this._el.content_item.innerHTML =
+            `<iframe src="${embed}" scrolling="no" frameborder="0" ` +
+            `allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; ` +
+            `picture-in-picture; web-share"></iframe>`;
+        this.onLoaded();
+    }
+
+    // Update Media Display
+    _updateMediaDisplay() {
+        this._sizeContentItemToOptionHeight();
+    }
+}

package/src/media/types/Flickr.ts

@@ -0,0 +1,115 @@
+import { flickrId } from "../embedId";
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+
+/*	Media.Flickr
+
+================================================== */
+
+export default class Flickr extends Media {
+    declare "media_id": string;
+
+    /*	Load the media
+	================================================== */
+    _loadMedia() {
+        // Loading Message
+        this.loadingMessage();
+
+        // Create Dom element
+        this._el.content_item = Dom.create(
+            "img",
+            "vco-media-item vco-media-image vco-media-flickr vco-media-shadow",
+            this._el.content,
+        );
+
+        // Media Loaded Event
+        this._el.content_item.addEventListener("load", (e) => {
+            this.onMediaLoaded();
+        });
+
+        // Get Media ID
+        this.establishMediaID();
+
+        const api_url =
+            "https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=" +
+            this.options.api_key_flickr +
+            "&photo_id=" +
+            this.media_id +
+            "&format=json&nojsoncallback=1";
+
+        void this._fetchSizes(api_url);
+    }
+
+    async _fetchSizes(api_url: string) {
+        try {
+            const response = await fetch(api_url);
+            const d = (await response.json()) as { stat: string };
+            if (d.stat === "ok") {
+                this.createMedia(d);
+            } else {
+                this.loadErrorDisplay("Photo not found or private.");
+            }
+        } catch {
+            this.loadErrorDisplay("Photo not found or private.");
+        }
+    }
+
+    establishMediaID() {
+        // 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");
+        }
+        this.media_id = id;
+    }
+
+    createMedia(d: unknown) {
+        const data = d as { sizes: { size: { label: string; source: string }[] } };
+        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.");
+            return;
+        }
+        let size = sizes[Math.max(0, sizes.length - 2)].source;
+
+        for (let i = 0; i < sizes.length; i++) {
+            if (sizes[i].label === best_size) {
+                size = sizes[i].source;
+            }
+        }
+
+        // Set Image Source
+        (this._el.content_item as HTMLImageElement).src = size;
+
+        // After Loaded
+        this.onLoaded();
+    }
+
+    sizes(s: number): string {
+        let _size;
+
+        if (s <= 75) {
+            if (s <= 0) {
+                _size = "Large";
+            } else {
+                _size = "Thumbnail";
+            }
+        } else if (s <= 180) {
+            _size = "Small";
+        } else if (s <= 240) {
+            _size = "Small 320";
+        } else if (s <= 375) {
+            _size = "Medium";
+        } else if (s <= 480) {
+            _size = "Medium 640";
+        } else if (s <= 600) {
+            _size = "Large";
+        } else {
+            _size = "Large";
+        }
+
+        return _size;
+    }
+}

package/src/media/types/GoogleDoc.ts

@@ -0,0 +1,58 @@
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { validateWebURL } from "../EmbedUtil";
+
+/*	Media.GoogleDoc
+
+================================================= */
+
+export default class GoogleDoc 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-iframe",
+            this._el.content,
+        );
+
+        // Get Media ID
+        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
+        const src = validateWebURL(this.media_id);
+        if (!src) {
+            this.loadErrorDisplay("Invalid URL.");
+            return;
+        }
+        const iframe = document.createElement("iframe");
+        iframe.className = "doc";
+        iframe.setAttribute("frameborder", "0");
+        iframe.setAttribute("width", "100%");
+        iframe.setAttribute("height", "100%");
+        if (this.media_id.match(/docs.google.com/i)) {
+            iframe.setAttribute("src", src + "&embedded=true");
+        } else {
+            iframe.setAttribute(
+                "src",
+                "http://docs.google.com/viewer?url=" + encodeURIComponent(src) + "&embedded=true",
+            );
+        }
+        this._el.content_item.appendChild(iframe);
+
+        // After Loaded
+        this.onLoaded();
+    }
+
+    // Update Media Display
+    _updateMediaDisplay() {
+        this._sizeContentItemToOptionHeight();
+    }
+}