@nysds/nys-video 1.15.0

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./nys-video";

package/dist/nys-video.d.ts

@@ -0,0 +1,71 @@
+import { LitElement } from "lit";
+declare global {
+    interface Window {
+        YT: any;
+        onYouTubeIframeAPIReady: () => void;
+    }
+}
+export declare class NysVideo extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Full YouTube URL — required. Component will not render if invalid. */
+    id: string;
+    /** Title text for the thumbnail of the video */
+    titleText: string;
+    /** Full YouTube URL — required. Component will not render if invalid. */
+    videourl: string;
+    /**
+     * Largest size for the video player.
+     * If not set, size is determined automatically by viewport width.
+     */
+    size: "full" | "md" | "sm" | "";
+    loading: "lazy" | "eager";
+    /** Time in seconds where playback begins. **/
+    starttime: number;
+    /**
+     * Custom thumbnail image path.
+     * Falls back to YouTube's auto-generated thumbnail if not provided.
+     */
+    thumbnail: string | null;
+    /** Triggers autoplay when the iframe loads */
+    autoplay: boolean;
+    /** Prevents the video from being played */
+    disabled: boolean;
+    /** Tracks whether the user has clicked to load the player */
+    private _playerActive;
+    /** Screen reader announcement text */
+    private _announcement;
+    /** Tracks whether an ad is currently playing to suppress false "Video is playing" announcements */
+    private _adPlaying;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Functions
+     * --------------------------------------------------------------------------
+     */
+    private _isValidYouTubeUrl;
+    private _getVideoId;
+    private _getThumbnailUrl;
+    private _getEmbedUrl;
+    /**
+     * Because I need to know if Youtube ADs are playing, I need to call YT's API.
+     * Hence, the YT API setup below. The VO has 2 types of announcements:
+     * - "Advertisement is playing"
+     * - "Video is playing"
+     *
+     * YT IFrame Player API: https://developers.google.com/youtube/iframe_api_reference
+     */
+    private _announceVideoVO;
+    /**
+     * Event Handlers
+     * --------------------------------------------------------------------------
+     */
+    private _handleThumbnailClick;
+    /**
+     * Render Helpers
+     * --------------------------------------------------------------------------
+     */
+    private _renderAnnouncer;
+    private _renderPlayIcon;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/nys-video.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/nys-video.js

@@ -0,0 +1,240 @@
+import { LitElement as u, unsafeCSS as p, html as s } from "lit";
+import { property as n, state as c } from "lit/decorators.js";
+/*!
+   * █▄  █  █   █  █▀▀▀█  █▀▀▄  █▀▀▀█
+   * █ █ █  █▄▄▄█  ▀▀▀▄▄  █   █ ▀▀▀▄▄
+   * █  ▀█    █    █▄▄▄█  █▄▄▀  █▄▄▄█
+   *
+   * Video Component v1.15.0
+   * Part of the New York State Design System
+   * Repository: https://github.com/its-hcd/nysds
+   * License: MIT
+*/
+const h = '@charset "UTF-8";:host{--_nys-video-width: fit-content;--_nys-video-height: var(--nys-size-600, 48px);--_nys-video-radius: var(--nys-radius-lg, 8px);--_nys-video-padding: var(--nys-space-100, 8px);--_nys-video-gap: var(--nys-space-100, 8px);--_nys-video-font-size: var(--nys-font-size-ui-md, 16px);--_nys-video-font-weight: var(--nys-font-weight-semibold, 600);--_nys-video-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-video-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-video-background-color--play-button: var( --nys-color-black-transparent-600, rgba(27, 27, 27, .6) );--_nys-video-outline-color--play-button: var(--nys-color-focus, #004dd1);--_nys-video-svg-color--play-button: var( --nys-color-white-transparent-400, rgba(255, 255, 255, .4) );--_nys-video-color--title-text: var(--nys-color-text-reverse, #ffffff);--_nys-video-background-color--title-text: var( --nys-color-ink, var(--nys-color-neutral-900, #1b1b1b) );--_nys-video-padding--title-text: var(--nys-space-250, 20px)}.nys-video--full{width:100%}.nys-video--md{width:100%;max-width:675px;min-width:440px}.nys-video--sm{width:100%;min-width:320px;max-width:439px}:host([size=full]) .nys-video .nys-video__title-text{position:absolute;bottom:0;--_nys-video-background-color--title-text: var( --nys-color-black-transparent-900, rgba(27, 27, 27, .9) )}@media(min-width:480px){.nys-video:not(.nys-video--sm):not(.nys-video--md) .nys-video__title-text{position:absolute;bottom:0;--_nys-video-background-color--title-text: var( --nys-color-black-transparent-900, rgba(27, 27, 27, .9) )}}.nys-video{border-radius:var(--_nys-video-radius);display:flex;flex-direction:column;position:relative;overflow:hidden}.nys-video .nys-video__ratio-box{aspect-ratio:16/9;position:relative}.nys-video .nys-video__ratio-box iframe,.nys-video .nys-video__ratio-box .nys-video__thumbnail{position:absolute;top:0;left:0;width:100%;height:100%;display:block;border:none}.nys-video .nys-video__ratio-box .nys-video__thumbnail{cursor:pointer;padding:0;background-color:none}.nys-video .nys-video__ratio-box .nys-video__thumbnail img{width:100%;height:100%;object-fit:cover}.nys-video .nys-video__ratio-box .nys-video__thumbnail .nys-video__play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:96px;height:96px;background-color:var(--_nys-video-background-color--play-button);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none}.nys-video .nys-video__ratio-box .nys-video__thumbnail .nys-video__play-icon svg{display:flex;margin-left:10px}.nys-video .nys-video__ratio-box .nys-video__thumbnail .nys-video__play-icon:focus-visible{outline:3.5px solid var(--_nys-video-outline-color--play-button);outline-offset:1px}.nys-video .nys-video__ratio-box .nys-video__thumbnail:hover .nys-video__play-icon{--_nys-video-background-color--play-button: var( --nys-color-black-transparent-700, rgba(27, 27, 27, .7) )}.nys-video .nys-video__ratio-box .nys-video__thumbnail:active .nys-video__play-icon{--_nys-video-background-color--play-button: var( --nys-color-black-transparent-800, rgba(27, 27, 27, .8) )}.nys-video--disabled .nys-video__ratio-box{cursor:not-allowed}.nys-video--disabled .nys-video__ratio-box .nys-video__thumbnail{pointer-events:none}.nys-video--disabled .nys-video__ratio-box .nys-video__thumbnail .nys-video__play-icon{--_nys-video-background-color--play-button: var( --nys-color-black-transparent-200, rgba(27, 27, 27, .2) )}.nys-video--disabled .nys-video__ratio-box .nys-video__thumbnail .nys-video__play-icon svg{fill:var(--_nys-video-svg-color--play-button)}.nys-video .nys-video__title-text{width:100%;padding:var(--_nys-video-padding--title-text);background-color:var(--_nys-video-background-color--title-text);box-sizing:border-box;color:var(--_nys-video-color--title-text);display:flex;justify-content:start;font-family:var(--_nys-video-font-family);font-size:var(--_nys-video-font-size);font-weight:var(--_nys-video-font-weight);line-height:var(--_nys-video-line-height)}.nys-video .nys-video__title-text p{margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}';
+var _ = Object.defineProperty, o = (y, e, t, r) => {
+  for (var a = void 0, d = y.length - 1, v; d >= 0; d--)
+    (v = y[d]) && (a = v(e, t, a) || a);
+  return a && _(e, t, a), a;
+};
+let b = 0;
+const l = class l extends u {
+  // Lifecycle Methods
+  constructor() {
+    super(), this.id = "", this.titleText = "", this.videourl = "", this.size = "", this.loading = "lazy", this.starttime = 0, this.thumbnail = null, this.autoplay = !1, this.disabled = !1, this._playerActive = !1, this._announcement = "", this._adPlaying = !1;
+  }
+  // Generate a unique ID if one is not provided
+  connectedCallback() {
+    super.connectedCallback(), this.id || (this.id = `nys-video-${Date.now()}-${b++}`), this.autoplay && this._announceVideoVO();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  /**
+   * Functions
+   * --------------------------------------------------------------------------
+   */
+  _isValidYouTubeUrl() {
+    return /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+/.test(
+      this.videourl
+    );
+  }
+  _getVideoId() {
+    const e = /(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([^?&]+)/, t = this.videourl.match(e);
+    return t ? t[1] : null;
+  }
+  _getThumbnailUrl() {
+    return this.thumbnail ? this.thumbnail : `https://img.youtube.com/vi/${this._getVideoId()}/maxresdefault.jpg`;
+  }
+  _getEmbedUrl() {
+    const e = this._getVideoId();
+    if (!e) return null;
+    const t = new URLSearchParams({
+      autoplay: "1",
+      enablejsapi: "1",
+      ...this.autoplay && { mute: "1" },
+      ...this.starttime > 0 && { start: String(this.starttime) }
+    });
+    return `https://www.youtube.com/embed/${e}?${t}`;
+  }
+  /**
+   * Because I need to know if Youtube ADs are playing, I need to call YT's API.
+   * Hence, the YT API setup below. The VO has 2 types of announcements:
+   * - "Advertisement is playing"
+   * - "Video is playing"
+   *
+   * YT IFrame Player API: https://developers.google.com/youtube/iframe_api_reference
+   */
+  _announceVideoVO() {
+    const e = () => {
+      this.updateComplete.then(() => {
+        const t = this.shadowRoot?.querySelector("iframe");
+        t && new window.YT.Player(t, {
+          events: {
+            onStateChange: (r) => {
+              this._adPlaying || r.data === window.YT.PlayerState.PLAYING && (this._announcement = this.autoplay ? "Video is playing, muted" : "Video is playing", setTimeout(() => this._announcement = "", 1e3));
+            },
+            // // NOTE: onAdStateChange is not officially documented by YouTube.
+            // It is a real event fired by the IFrame player, discovered through community reverse-engineering
+            onAdStateChange: (r) => {
+              this._adPlaying = r.data === window.YT.PlayerState.PLAYING, this._adPlaying && (this._announcement = "Advertisement is playing", setTimeout(() => this._announcement = "", 1e3));
+            }
+          }
+        });
+      });
+    };
+    if (window.YT?.Player)
+      e();
+    else {
+      if (!document.getElementById("yt-iframe-api")) {
+        const t = document.createElement("script");
+        t.id = "yt-iframe-api", t.src = "https://www.youtube.com/iframe_api", document.head.appendChild(t);
+      }
+      window.onYouTubeIframeAPIReady = e;
+    }
+  }
+  /**
+   * Event Handlers
+   * --------------------------------------------------------------------------
+   */
+  _handleThumbnailClick() {
+    this.disabled || (this._playerActive = !0, this.updateComplete.then(() => {
+      const e = this.shadowRoot?.querySelector("iframe");
+      e && e.addEventListener(
+        "load",
+        () => {
+          e.focus();
+        },
+        { once: !0 }
+      );
+    }), this._announceVideoVO());
+  }
+  /**
+   * Render Helpers
+   * --------------------------------------------------------------------------
+   */
+  _renderAnnouncer() {
+    return s`
+      <div
+        aria-live="assertive"
+        aria-atomic="true"
+        class="nys-video__announcer sr-only"
+      >
+        ${this._announcement}
+      </div>
+    `;
+  }
+  _renderPlayIcon() {
+    return this.disabled ? s`<svg
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          width="31"
+          height="35"
+          viewBox="0 0 31 35"
+          fill="none"
+        >
+          <path
+            d="M29.4221 15.7357L2.568 0.231711C1.42656 -0.426849 0 0.396831 0 1.71395V32.7229C0 34.041 1.42656 34.8647 2.568 34.2052L29.4221 18.7012C30.5635 18.0426 30.5635 16.3952 29.4221 15.7357Z"
+            fill="white"
+            fill-opacity="0.4"
+          />
+        </svg>` : s`<svg
+          aria-hidden="true"
+          width="31"
+          height="35"
+          viewBox="0 0 31 35"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M29.4221 15.7357L2.568 0.231711C1.42656 -0.426849 0 0.396831 0 1.71395V32.7229C0 34.041 1.42656 34.8647 2.568 34.2052L29.4221 18.7012C30.5635 18.0426 30.5635 16.3952 29.4221 15.7357Z"
+            fill="white"
+          />
+        </svg>`;
+  }
+  render() {
+    if (!this._isValidYouTubeUrl())
+      return s``;
+    const e = this._getEmbedUrl();
+    if (!e) return s``;
+    const t = this.size || "md";
+    return !this._playerActive && !this.autoplay ? s`
+        <div
+          class="nys-video nys-video--${t} ${this.disabled ? "nys-video--disabled" : ""}"
+        >
+          ${this._renderAnnouncer()}
+          <div class="nys-video__ratio-box">
+            <div
+              class="nys-video__thumbnail"
+              @click=${this._handleThumbnailClick}
+            >
+              <img src=${this._getThumbnailUrl()} alt="" />
+              <button
+                class="nys-video__play-icon"
+                aria-label="Play ${this.titleText}"
+                ?disabled=${this.disabled}
+              >
+                ${this._renderPlayIcon()}
+              </button>
+            </div>
+          </div>
+          ${this.titleText && s`<div class="nys-video__title-text">
+            <p>${this.titleText}</p>
+          </div>`}
+        </div>
+      ` : s`<div class="nys-video nys-video--${t}">
+      ${this._renderAnnouncer()}
+      <div class="nys-video__ratio-box">
+        <iframe
+          tabindex="0"
+          src=${e}
+          title=${this.titleText}
+          aria-label=${this.titleText}
+          loading=${this.loading}
+          allowfullscreen
+          frameborder="0"
+          allow="accelerometer;autoplay;clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        ></iframe>
+      </div>
+    </div>`;
+  }
+};
+l.styles = p(h);
+let i = l;
+o([
+  n({ type: String, reflect: !0 })
+], i.prototype, "id");
+o([
+  n({ type: String, reflect: !0 })
+], i.prototype, "titleText");
+o([
+  n({ type: String })
+], i.prototype, "videourl");
+o([
+  n({ type: String, reflect: !0 })
+], i.prototype, "size");
+o([
+  n({ type: String })
+], i.prototype, "loading");
+o([
+  n({ type: Number })
+], i.prototype, "starttime");
+o([
+  n({ type: String })
+], i.prototype, "thumbnail");
+o([
+  n({ type: Boolean })
+], i.prototype, "autoplay");
+o([
+  n({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled");
+o([
+  c()
+], i.prototype, "_playerActive");
+o([
+  c()
+], i.prototype, "_announcement");
+customElements.get("nys-video") || customElements.define("nys-video", i);
+export {
+  i as NysVideo
+};
+//# sourceMappingURL=nys-video.js.map

package/dist/nys-video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nys-video.js","sources":["../src/nys-video.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-video.scss?inline\";\n\ndeclare global {\n  interface Window {\n    YT: any;\n    onYouTubeIframeAPIReady: () => void;\n  }\n}\n\nlet videoIdCounter = 0;\n\nexport class NysVideo extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  /** Full YouTube URL — required. Component will not render if invalid. */\n  @property({ type: String, reflect: true }) id = \"\";\n\n  /** Title text for the thumbnail of the video */\n  @property({ type: String, reflect: true }) titleText = \"\";\n\n  /** Full YouTube URL — required. Component will not render if invalid. */\n  @property({ type: String }) videourl = \"\";\n\n  /**\n   * Largest size for the video player.\n   * If not set, size is determined automatically by viewport width.\n   */\n  @property({ type: String, reflect: true }) size: \"full\" | \"md\" | \"sm\" | \"\" =\n    \"\";\n\n  @property({ type: String }) loading: \"lazy\" | \"eager\" = \"lazy\";\n\n  // /** Accessible label describing the video content **/\n  // @property({ type: String }) ariaLabel = \"\";\n\n  /** Time in seconds where playback begins. **/\n  @property({ type: Number }) starttime = 0;\n\n  /**\n   * Custom thumbnail image path.\n   * Falls back to YouTube's auto-generated thumbnail if not provided.\n   */\n  @property({ type: String }) thumbnail: string | null = null;\n\n  /** Triggers autoplay when the iframe loads */\n  @property({ type: Boolean }) autoplay = false;\n\n  /** Prevents the video from being played */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Tracks whether the user has clicked to load the player */\n  @state() private _playerActive = false;\n\n  /** Screen reader announcement text */\n  @state() private _announcement = \"\";\n\n  /** Tracks whether an ad is currently playing to suppress false \"Video is playing\" announcements */\n  private _adPlaying = false;\n\n  // Lifecycle Methods\n  constructor() {\n    super();\n  }\n\n  // Generate a unique ID if one is not provided\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.id) {\n      this.id = `nys-video-${Date.now()}-${videoIdCounter++}`;\n    }\n\n    if (this.autoplay) {\n      this._announceVideoVO();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n  }\n\n  /**\n   * Functions\n   * --------------------------------------------------------------------------\n   */\n  private _isValidYouTubeUrl(): boolean {\n    return /^(https?:\\/\\/)?(www\\.)?(youtube\\.com|youtu\\.be)\\/.+/.test(\n      this.videourl,\n    );\n  }\n\n  private _getVideoId() {\n    const regExp =\n      /(?:youtube\\.com\\/(?:watch\\?v=|embed\\/|shorts\\/)|youtu\\.be\\/)([^?&]+)/;\n    const match = this.videourl.match(regExp);\n    return match ? match[1] : null;\n  }\n\n  private _getThumbnailUrl() {\n    if (this.thumbnail) return this.thumbnail;\n    const videoId = this._getVideoId();\n    return `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;\n  }\n\n  private _getEmbedUrl() {\n    const videoId = this._getVideoId();\n    if (!videoId) return null;\n\n    const params = new URLSearchParams({\n      autoplay: \"1\",\n      enablejsapi: \"1\",\n      ...(this.autoplay && { mute: \"1\" }),\n      ...(this.starttime > 0 && { start: String(this.starttime) }),\n    });\n\n    return `https://www.youtube.com/embed/${videoId}?${params}`;\n  }\n\n  /**\n   * Because I need to know if Youtube ADs are playing, I need to call YT's API.\n   * Hence, the YT API setup below. The VO has 2 types of announcements:\n   * - \"Advertisement is playing\"\n   * - \"Video is playing\"\n   *\n   * YT IFrame Player API: https://developers.google.com/youtube/iframe_api_reference\n   */\n  private _announceVideoVO() {\n    const setup = () => {\n      this.updateComplete.then(() => {\n        const iframe = this.shadowRoot?.querySelector(\"iframe\");\n        if (!iframe) return;\n\n        new window.YT.Player(iframe, {\n          events: {\n            onStateChange: (event: { data: number }) => {\n              if (this._adPlaying) return;\n\n              if (event.data === window.YT.PlayerState.PLAYING) {\n                this._announcement = this.autoplay\n                  ? \"Video is playing, muted\"\n                  : \"Video is playing\";\n                setTimeout(() => (this._announcement = \"\"), 1000);\n              }\n            },\n            // // NOTE: onAdStateChange is not officially documented by YouTube.\n            // It is a real event fired by the IFrame player, discovered through community reverse-engineering\n            onAdStateChange: (event: { data: number }) => {\n              this._adPlaying = event.data === window.YT.PlayerState.PLAYING;\n\n              if (this._adPlaying) {\n                this._announcement = \"Advertisement is playing\";\n                setTimeout(() => (this._announcement = \"\"), 1000);\n              }\n            },\n          },\n        });\n      });\n    };\n\n    // The window.YT is YouTube's API object. If already loaded, run setup immediately.\n    if (window.YT?.Player) {\n      setup();\n    } else {\n      if (!document.getElementById(\"yt-iframe-api\")) {\n        const script = document.createElement(\"script\");\n        script.id = \"yt-iframe-api\";\n        script.src = \"https://www.youtube.com/iframe_api\";\n        document.head.appendChild(script);\n      }\n      window.onYouTubeIframeAPIReady = setup;\n    }\n  }\n\n  /**\n   * Event Handlers\n   * --------------------------------------------------------------------------\n   */\n\n  private _handleThumbnailClick() {\n    if (this.disabled) return;\n    this._playerActive = true;\n\n    this.updateComplete.then(() => {\n      const iframe = this.shadowRoot?.querySelector(\"iframe\");\n      if (!iframe) return;\n\n      iframe.addEventListener(\n        \"load\",\n        () => {\n          iframe.focus();\n        },\n        { once: true },\n      );\n    });\n\n    this._announceVideoVO();\n  }\n\n  /**\n   * Render Helpers\n   * --------------------------------------------------------------------------\n   */\n  private _renderAnnouncer() {\n    return html`\n      <div\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        class=\"nys-video__announcer sr-only\"\n      >\n        ${this._announcement}\n      </div>\n    `;\n  }\n\n  private _renderPlayIcon() {\n    return this.disabled\n      ? html`<svg\n          aria-hidden=\"true\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"31\"\n          height=\"35\"\n          viewBox=\"0 0 31 35\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M29.4221 15.7357L2.568 0.231711C1.42656 -0.426849 0 0.396831 0 1.71395V32.7229C0 34.041 1.42656 34.8647 2.568 34.2052L29.4221 18.7012C30.5635 18.0426 30.5635 16.3952 29.4221 15.7357Z\"\n            fill=\"white\"\n            fill-opacity=\"0.4\"\n          />\n        </svg>`\n      : html`<svg\n          aria-hidden=\"true\"\n          width=\"31\"\n          height=\"35\"\n          viewBox=\"0 0 31 35\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M29.4221 15.7357L2.568 0.231711C1.42656 -0.426849 0 0.396831 0 1.71395V32.7229C0 34.041 1.42656 34.8647 2.568 34.2052L29.4221 18.7012C30.5635 18.0426 30.5635 16.3952 29.4221 15.7357Z\"\n            fill=\"white\"\n          />\n        </svg>`;\n  }\n\n  render() {\n    if (!this._isValidYouTubeUrl()) {\n      return html``;\n    }\n\n    const embedUrl = this._getEmbedUrl();\n    if (!embedUrl) return html``;\n\n    // Use explicit size if set, otherwise fall back to auto-computed size\n    const effectiveSize = this.size || \"md\";\n\n    /**\n     * Show thumbnail first, unless until user clicks or developer sets \"autoplay\".\n     * Then, swap to iframe.\n     */\n    if (!this._playerActive && !this.autoplay) {\n      return html`\n        <div\n          class=\"nys-video nys-video--${effectiveSize} ${this.disabled\n            ? \"nys-video--disabled\"\n            : \"\"}\"\n        >\n          ${this._renderAnnouncer()}\n          <div class=\"nys-video__ratio-box\">\n            <div\n              class=\"nys-video__thumbnail\"\n              @click=${this._handleThumbnailClick}\n            >\n              <img src=${this._getThumbnailUrl()} alt=\"\" />\n              <button\n                class=\"nys-video__play-icon\"\n                aria-label=\"Play ${this.titleText}\"\n                ?disabled=${this.disabled}\n              >\n                ${this._renderPlayIcon()}\n              </button>\n            </div>\n          </div>\n          ${this.titleText &&\n          html`<div class=\"nys-video__title-text\">\n            <p>${this.titleText}</p>\n          </div>`}\n        </div>\n      `;\n    }\n\n    return html`<div class=\"nys-video nys-video--${effectiveSize}\">\n      ${this._renderAnnouncer()}\n      <div class=\"nys-video__ratio-box\">\n        <iframe\n          tabindex=\"0\"\n          src=${embedUrl}\n          title=${this.titleText}\n          aria-label=${this.titleText}\n          loading=${this.loading}\n          allowfullscreen\n          frameborder=\"0\"\n          allow=\"accelerometer;autoplay;clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n        ></iframe>\n      </div>\n    </div>`;\n  }\n}\n\nif (!customElements.get(\"nys-video\")) {\n  customElements.define(\"nys-video\", NysVideo);\n}\n"],"names":["videoIdCounter","_NysVideo","LitElement","regExp","match","videoId","params","setup","iframe","event","script","html","embedUrl","effectiveSize","unsafeCSS","styles","NysVideo","__decorateClass","property","state"],"mappings":"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"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@nysds/nys-video",
+  "version": "1.15.0",
+  "description": "The Video Player component from the NYS Design System.",
+  "module": "dist/nys-video.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/nys-video.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "type": "module",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "dev": "tsc --emitDeclarationOnly && vite",
+    "build": "tsc --emitDeclarationOnly && vite build",
+    "test": "vite build && wtr",
+    "build:watch": "tsc --emitDeclarationOnly && vite build --watch",
+    "test:watch": "vite build && wtr --watch",
+    "lit-analyze": "lit-analyzer '*.ts'"
+  },
+  "dependencies": {
+  },
+  "devDependencies": {
+    "lit": "^3.3.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  },
+  "keywords": [
+    "new-york-state",
+    "design-system",
+    "web-components",
+    "lit",
+    "nys",
+    "video"
+  ],
+  "author": "New York State Design System Team",
+  "license": "MIT"
+}
+