@projektemacher/storymapjs 0.10.7 → 0.11.0

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,22 +80,21 @@ 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) {
                     this.player.pauseVideo();
                 }
             } catch (err) {
-                console.log(err);
+                console.warn("StoryMapJS: error pausing YouTube player.", err);
             }
         }
     }
@@ -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.warn("StoryMapJS: error destroying YouTube player.", 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

@@ -5,11 +5,6 @@
 .vco-storymap {
     font-family: $font-main;
 
-    // runtime-themable text colors (issue #177); set inline via the
-    // text_color/text_background_color options
-    --vco-color-text: #{$color-text};
-    --vco-color-text-muted: #{color.adjust($color-dark, $lightness: 40%)};
-
     h1,
     h2,
     h3 {
@@ -56,15 +51,20 @@
         font-size: $base-font-size;
 
         // font-family: $font-secondary;
-        color: var(--vco-color-text-muted);
+        color: var(--vco-color-text-muted, #{color.adjust($color-dark, $lightness: 40%)});
 
         a {
-            color: var(--vco-color-text-muted);
+            color: var(--vco-color-text-muted, #{color.adjust($color-dark, $lightness: 40%)});
             text-decoration: none;
             background-image: linear-gradient(
                 to bottom,
-                rgba(color.adjust($color-dark, $lightness: 40%), 0%) 50%,
-                rgba(color.adjust($color-dark, $lightness: 40%), 60%) 50%
+                rgba(var(--vco-color-text-muted, #{color.adjust($color-dark, $lightness: 40%)}), 0%)
+                    50%,
+                rgba(
+                        var(--vco-color-text-muted, #{color.adjust($color-dark, $lightness: 40%)}),
+                        60%
+                    )
+                    50%
             );
             background-repeat: repeat-x;
             background-size: 2px 2px;
@@ -77,7 +77,7 @@
 
             &:hover,
             &:focus {
-                color: $color-theme;
+                color: var(--vco-color-theme, #{$color-theme});
                 text-decoration: none;
             }
         }
@@ -90,7 +90,7 @@
 
                 &:hover,
                 &:focus {
-                    color: $color-theme;
+                    color: var(--vco-color-theme, #{$color-theme});
                     text-decoration: underline;
                 }
             }
@@ -111,12 +111,12 @@
 
     a {
         text-decoration: none;
-        color: $color-theme;
+        color: var(--vco-color-theme, #{$color-theme});
     }
 
     a:hover {
         text-decoration: underline;
-        color: color.adjust($color-theme, $lightness: -20%);
+        color: var(--vco-color-theme-deep, #{color.adjust($color-theme, $lightness: -20%)});
     }
 
     .vco-caption,
@@ -128,14 +128,14 @@
         line-height: $base-font-size-small;
 
         a {
-            color: $color-dark;
+            color: var(--vco-color-dark, #{$color-dark});
         }
     }
 
     blockquote,
     blockquote p {
         font-family: $font-serif;
-        color: color.adjust($color-dark, $lightness: 60%);
+        color: var(--vco-color-text, #{$color-text});
         text-align: left;
         background: transparent;
         border: 0;
@@ -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;