@projektemacher/storymapjs 0.10.6 → 0.10.7

package/src/media/types/YouTube.ts

@@ -0,0 +1,192 @@
+import { unique_ID, getUrlVars, ratio } from "../../core/Util";
+import { Media } from "../Media";
+import Dom from "../../dom/Dom";
+import { Language } from "../../language/Language";
+
+/*	Media.YouTube
+================================================== */
+
+/*	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;
+
+    /*	Load the media
+	================================================== */
+    async _loadMedia() {
+        // Loading Message
+        this.message.updateMessage(Language.messages.loading + " " + this.options.media_name);
+
+        this.youtube_loaded = false;
+
+        // 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.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.media_id.start = url_vars["t"];
+        this.media_id.hd = url_vars["hd"];
+
+        // 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._el.content_item.style.height =
+            ratio.r16_9({ w: this._el.content_item.offsetWidth }) + "px";
+    }
+
+    _stopMedia() {
+        // cancel a pending API retry so a poll cannot outlive the slide
+        clearTimeout(this.timer);
+        this.timer = null;
+        if (this.youtube_loaded) {
+            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() {
+        clearTimeout(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, {
+                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();
+                        // After Loaded
+                        //this.onLoaded();
+                    },
+                    onStateChange: this.onStateChange,
+                },
+            });
+        } else {
+            this.timer = setTimeout(() => {
+                this.createPlayer();
+            }, 1000);
+        }
+        this.onLoaded();
+    }
+
+    /*	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;
+        }
+        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();
+        }
+    }
+}

package/src/scss/Typography.scss

@@ -0,0 +1,237 @@
+@use "sass:color";
+@use "Variables" as *;
+@use "core/Mixins" as *;
+
+.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 {
+        font-size: $base-font-size-xlarge;
+        line-height: $base-font-size-xlarge;
+
+        small {
+            font-size: $base-font-size-large;
+            line-height: $base-font-size-large;
+        }
+    }
+
+    h4,
+    h5,
+    h6 {
+        font-size: $base-font-size-large;
+        line-height: $base-font-size-large;
+        margin-bottom: 0;
+
+        small {
+            font-size: $base-font-size;
+            line-height: $base-font-size;
+        }
+    }
+
+    h2.vco-headline-title {
+        font-size: $base-font-size-xlarge + 10;
+        line-height: $base-font-size-xlarge + 10;
+
+        small {
+            display: block;
+            margin-top: 5px;
+        }
+    }
+
+    h2 {
+        margin-top: 20px;
+        margin-bottom: 5px;
+    }
+
+    p {
+        margin-top: 5px;
+        margin-bottom: 10px;
+        font-size: $base-font-size;
+
+        // font-family: $font-secondary;
+        color: var(--vco-color-text-muted);
+
+        a {
+            color: var(--vco-color-text-muted);
+            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%
+            );
+            background-repeat: repeat-x;
+            background-size: 2px 2px;
+            background-position: 0 $base-font-size + 2;
+            text-shadow:
+                -2px -1px 0 white,
+                2px -1px 0 white,
+                -2px 1px 0 white,
+                2px 1px 0 white;
+
+            &:hover,
+            &:focus {
+                color: $color-theme;
+                text-decoration: none;
+            }
+        }
+
+        @media (resolution >= 144dpi) {
+            a {
+                text-decoration: underline;
+                background-image: none;
+                text-shadow: none;
+
+                &:hover,
+                &:focus {
+                    color: $color-theme;
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+
+    b,
+    strong {
+        font-weight: bold;
+
+        // color: $color-dark;
+    }
+
+    i,
+    em {
+        font-style: italic;
+    }
+
+    a {
+        text-decoration: none;
+        color: $color-theme;
+    }
+
+    a:hover {
+        text-decoration: underline;
+        color: color.adjust($color-theme, $lightness: -20%);
+    }
+
+    .vco-caption,
+    .vco-credit,
+    .vco-slidenav-next,
+    .vco-slidenav-previous {
+        // font-family: $font-sanserif;
+        font-size: $base-font-size-small;
+        line-height: $base-font-size-small;
+
+        a {
+            color: $color-dark;
+        }
+    }
+
+    blockquote,
+    blockquote p {
+        font-family: $font-serif;
+        color: color.adjust($color-dark, $lightness: 60%);
+        text-align: left;
+        background: transparent;
+        border: 0;
+        padding: 0;
+
+        cite {
+            font-family: $font-sanserif;
+            font-size: $base-font-size-small;
+            text-align: right;
+            font-style: normal;
+        }
+
+        cite::before {
+            content: "\2014";
+        }
+    }
+
+    blockquote p::before {
+        content: open-quote;
+        display: inline-block;
+        position: relative;
+        top: 8px;
+        margin-right: 5px;
+    }
+
+    blockquote p::after {
+        content: close-quote;
+        margin-left: 3px;
+    }
+
+    blockquote {
+        margin: 10px;
+
+        p {
+            margin: 0;
+        }
+
+        // margin-left:18px;
+    }
+
+    .vcard {
+        font-family: $font-main;
+        line-height: $base-font-size;
+    }
+
+    .vco-text {
+        ul {
+            padding: 0;
+            padding-left: 30px;
+
+            li {
+                margin-bottom: 5px;
+            }
+        }
+    }
+
+    .vco-note {
+        display: block;
+        line-height: $base-font-size + 2;
+        padding: 10px;
+
+        @include border-radius(7px);
+
+        color: #8a6d3b;
+        background-color: #fcf8e3;
+        border: 1px solid #faebcc;
+    }
+}
+
+// Skinnier
+@media only screen and (width <= 800px), only screen and (device-width <= 800px) {
+    .vco-storymap {
+        h1,
+        h2,
+        h3 {
+            font-size: $base-font-size-xlarge;
+            line-height: $base-font-size-xlarge;
+        }
+    }
+}
+
+// Mobile, iPhone and skinny
+@media only screen and (width <= 500px), only screen and (device-width <= 500px) {
+    .vco-storymap {
+        h1,
+        h2,
+        h3 {
+            font-size: $base-font-size-xlarge - 4;
+            line-height: $base-font-size-xlarge - 4;
+        }
+    }
+}
+
+.vco-skinny {
+    h2 {
+        margin-top: 0;
+        padding-top: 20px;
+    }
+}

package/src/scss/VCO.StoryMap.Dark.scss

@@ -0,0 +1,138 @@
+/*!
+	StoryMap
+	
+	Designed and built by Zach Wise for the Northwestern University Knight Lab
+	
+	This Source Code Form is subject to the terms of the Mozilla Public
+	License, v. 2.0. If a copy of the MPL was not distributed with this
+	file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+*/
+
+/* Includes
+================================================== */
+@use "sass:color";
+@use "Variables.Dark" as *; // Variables (easy way to make style changes)
+@use "core/Mixins" as *; // Less shortcuts and functions
+@use "core/Reset" as *; // CSS Reset
+@use "Typography" as *;
+
+// Icons
+@use "icons/Icons" as *;
+
+//	Components
+@use "ui/VCO.MenuBar" as *;
+@use "ui/VCO.MenuBar.Button" as *;
+@use "ui/VCO.Message" as *;
+@use "slider/VCO.Slide" as *;
+@use "slider/VCO.SlideNav" as *;
+@use "slider/VCO.StorySlider" as *;
+@use "media/VCO.Media" as *;
+@use "media/types/VCO.Media.Text" as *;
+@use "media/types/VCO.Media.Image" as *;
+@use "media/types/VCO.Media.Twitter" as *;
+@use "media/types/VCO.Media.Blockquote" as *;
+@use "media/types/VCO.Media.Instagram" as *;
+@use "media/types/VCO.Media.Profile" as *;
+@use "media/types/VCO.Media.IFrame" as *;
+@use "media/types/VCO.Media.Wikipedia" as *;
+@use "map/openlayers/VCO.Map.OpenLayers" as *;
+@use "map/VCO.MapMarker" as *;
+@use "map/VCO.ImageMarker" as *;
+@use "map/VCO.Map" as *;
+@use "snapmap/VCO.SnapMap" as *;
+
+/* StoryMap
+================================================== */
+.vco-storymap {
+    width: 100%;
+    height: 100%;
+    font-size: 16px;
+    line-height: normal;
+    overflow: hidden;
+    position: relative;
+
+    @include user-select(none);
+}
+
+/* Portrait
+================================================== */
+.vco-layout-portrait {
+    .vco-storyslider {
+        padding-top: 10px;
+
+        @include box-shadow(0 -3px 6px rgba(0, 0, 0, 0.2));
+    }
+}
+
+/* Landscape
+================================================== */
+.vco-layout-landscape {
+    .vco-storyslider {
+        padding-top: 0;
+        position: absolute;
+        width: 50%;
+        left: 50%;
+        overflow: visible;
+
+        .vco-slider-background {
+            margin-left: -20%;
+            width: 120%;
+            overflow: hidden;
+
+            @include gradient-horizontal(
+                rgba(255, 255, 255, 0.0001),
+                rgba(255, 255, 255, 0.85),
+                0%,
+                15%
+            );
+        }
+
+        .vco-slider-container-mask {
+            overflow: visible;
+        }
+
+        .vco-slidenav-next,
+        .vco-slidenav-previous {
+            .vco-slidenav-icon::before {
+                background-color: $color-background;
+                padding: 20px;
+                border: 1px solid color.adjust($color-background, $lightness: -30%);
+            }
+
+            .vco-slidenav-icon,
+            .vco-slidenav-title,
+            .vco-slidenav-description {
+                text-shadow: none;
+            }
+
+            .vco-slidenav-title,
+            .vco-slidenav-description {
+                display: none;
+            }
+        }
+
+        .vco-slidenav-previous {
+            left: -100%;
+            margin-left: 0;
+
+            .vco-slidenav-icon::before {
+                @include border-right-radius(7px);
+            }
+        }
+
+        .vco-slidenav-next {
+            right: 130px;
+
+            .vco-slidenav-icon::before {
+                @include border-left-radius(7px);
+            }
+        }
+
+        .vco-slidenav-previous:hover {
+            .vco-slidenav-icon {
+                margin-left: -4px;
+            }
+        }
+    }
+}