@nysds/nys-video 1.18.1 → 1.18.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -0
- package/dist/nys-video.d.ts +96 -0
- package/dist/nys-video.figma.d.ts +1 -0
- package/dist/nys-video.js +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./nys-video";
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
declare global {
|
|
3
|
+
interface Window {
|
|
4
|
+
YT: any;
|
|
5
|
+
onYouTubeIframeAPIReady: () => void;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* A YouTube video player with a thumbnail preview and play button.
|
|
10
|
+
* Loads the iframe only after the user clicks play, keeping initial page load light.
|
|
11
|
+
* Supports autoplay (muted), custom thumbnails, start time, lazy loading, and disabled state.
|
|
12
|
+
* Announces playback state and ad state to screen readers via a live region.
|
|
13
|
+
*
|
|
14
|
+
* For use with YouTube URLs only. Component renders nothing if the URL is invalid.
|
|
15
|
+
*
|
|
16
|
+
* @summary YouTube video player with thumbnail preview and accessibility announcements.
|
|
17
|
+
* @element nys-video
|
|
18
|
+
*
|
|
19
|
+
* @fires nys-video-play - Fired when the user clicks the thumbnail to load the player.
|
|
20
|
+
*
|
|
21
|
+
* @example Basic usage
|
|
22
|
+
* ```html
|
|
23
|
+
* <nys-video
|
|
24
|
+
* videourl="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
|
25
|
+
* titleText="Video Title"
|
|
26
|
+
* ></nys-video>
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
export declare class NysVideo extends LitElement {
|
|
30
|
+
static styles: import("lit").CSSResult;
|
|
31
|
+
/** Full YouTube URL — required. Component will not render if invalid. */
|
|
32
|
+
id: string;
|
|
33
|
+
/** Title text for the thumbnail of the video */
|
|
34
|
+
titleText: string;
|
|
35
|
+
/** Full YouTube URL — required. Component will not render if invalid. */
|
|
36
|
+
videourl: string;
|
|
37
|
+
/**
|
|
38
|
+
* Largest size for the video player.
|
|
39
|
+
* If not set, size is determined automatically by viewport width.
|
|
40
|
+
*/
|
|
41
|
+
size: "full" | "md" | "sm" | "";
|
|
42
|
+
loading: "lazy" | "eager";
|
|
43
|
+
/** Time in seconds where playback begins. **/
|
|
44
|
+
starttime: number;
|
|
45
|
+
/**
|
|
46
|
+
* Custom thumbnail image path.
|
|
47
|
+
* Falls back to YouTube's auto-generated thumbnail if not provided.
|
|
48
|
+
*/
|
|
49
|
+
thumbnail: string | null;
|
|
50
|
+
/** Triggers autoplay when the iframe loads */
|
|
51
|
+
autoplay: boolean;
|
|
52
|
+
/** Prevents the video from being played */
|
|
53
|
+
disabled: boolean;
|
|
54
|
+
/** Tracks whether the user has clicked to load the player */
|
|
55
|
+
private _playerActive;
|
|
56
|
+
/** Screen reader announcement text */
|
|
57
|
+
private _announcement;
|
|
58
|
+
/** Tracks whether an ad is currently playing to suppress false "Video is playing" announcements */
|
|
59
|
+
private _adPlaying;
|
|
60
|
+
/**
|
|
61
|
+
* Lifecycle methods
|
|
62
|
+
* --------------------------------------------------------------------------
|
|
63
|
+
*/
|
|
64
|
+
constructor();
|
|
65
|
+
connectedCallback(): void;
|
|
66
|
+
disconnectedCallback(): void;
|
|
67
|
+
/**
|
|
68
|
+
* Functions
|
|
69
|
+
* --------------------------------------------------------------------------
|
|
70
|
+
*/
|
|
71
|
+
private _isValidYouTubeUrl;
|
|
72
|
+
private _getVideoId;
|
|
73
|
+
private _getThumbnailUrl;
|
|
74
|
+
private _getEmbedUrl;
|
|
75
|
+
/**
|
|
76
|
+
* Because I need to know if Youtube ADs are playing, I need to call YT's API.
|
|
77
|
+
* Hence, the YT API setup below. The VO has 2 types of announcements:
|
|
78
|
+
* - "Advertisement is playing"
|
|
79
|
+
* - "Video is playing"
|
|
80
|
+
*
|
|
81
|
+
* YT IFrame Player API: https://developers.google.com/youtube/iframe_api_reference
|
|
82
|
+
*/
|
|
83
|
+
private _announceVideoVO;
|
|
84
|
+
/**
|
|
85
|
+
* Event Handlers
|
|
86
|
+
* --------------------------------------------------------------------------
|
|
87
|
+
*/
|
|
88
|
+
private _handleThumbnailClick;
|
|
89
|
+
/**
|
|
90
|
+
* Render Helpers
|
|
91
|
+
* --------------------------------------------------------------------------
|
|
92
|
+
*/
|
|
93
|
+
private _renderAnnouncer;
|
|
94
|
+
private _renderPlayIcon;
|
|
95
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
96
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/nys-video.js
CHANGED
|
@@ -5,7 +5,7 @@ import { property as n, state as c } from "lit/decorators.js";
|
|
|
5
5
|
* █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
|
|
6
6
|
* █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
|
|
7
7
|
*
|
|
8
|
-
* Video Component v1.18.
|
|
8
|
+
* Video Component v1.18.3
|
|
9
9
|
* Part of the New York State Design System
|
|
10
10
|
* Repository: https://github.com/its-hcd/nysds
|
|
11
11
|
* License: MIT
|