@nysds/nys-video 1.16.0-alpha5 → 1.16.1
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/nys-video.js +2 -2
- package/package.json +2 -5
- package/dist/index.d.ts +0 -1
- package/dist/nys-video.d.ts +0 -71
- package/dist/nys-video.figma.d.ts +0 -1
package/dist/nys-video.js
CHANGED
|
@@ -5,12 +5,12 @@ import { property as n, state as c } from "lit/decorators.js";
|
|
|
5
5
|
* █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
|
|
6
6
|
* █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
|
|
7
7
|
*
|
|
8
|
-
* Video Component v1.16.
|
|
8
|
+
* Video Component v1.16.1
|
|
9
9
|
* Part of the New York State Design System
|
|
10
10
|
* Repository: https://github.com/its-hcd/nysds
|
|
11
11
|
* License: MIT
|
|
12
12
|
*/
|
|
13
|
-
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
|
|
13
|
+
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}.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:transparent}.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}';
|
|
14
14
|
var _ = Object.defineProperty, o = (y, e, t, r) => {
|
|
15
15
|
for (var a = void 0, d = y.length - 1, v; d >= 0; d--)
|
|
16
16
|
(v = y[d]) && (a = v(e, t, a) || a);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-video",
|
|
3
|
-
"version": "1.16.
|
|
3
|
+
"version": "1.16.1",
|
|
4
4
|
"description": "The Video Player component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-video.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -16,14 +16,12 @@
|
|
|
16
16
|
],
|
|
17
17
|
"scripts": {
|
|
18
18
|
"dev": "tsc --emitDeclarationOnly && vite",
|
|
19
|
-
"build": "
|
|
19
|
+
"build": "vite build",
|
|
20
20
|
"test": "vite build && wtr",
|
|
21
21
|
"build:watch": "tsc --emitDeclarationOnly && vite build --watch",
|
|
22
22
|
"test:watch": "vite build && wtr --watch",
|
|
23
23
|
"lit-analyze": "lit-analyzer '*.ts'"
|
|
24
24
|
},
|
|
25
|
-
"dependencies": {
|
|
26
|
-
},
|
|
27
25
|
"devDependencies": {
|
|
28
26
|
"lit": "^3.3.1",
|
|
29
27
|
"typescript": "^5.9.3",
|
|
@@ -40,4 +38,3 @@
|
|
|
40
38
|
"author": "New York State Design System Team",
|
|
41
39
|
"license": "MIT"
|
|
42
40
|
}
|
|
43
|
-
|
package/dist/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./nys-video";
|
package/dist/nys-video.d.ts
DELETED
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
declare global {
|
|
3
|
-
interface Window {
|
|
4
|
-
YT: any;
|
|
5
|
-
onYouTubeIframeAPIReady: () => void;
|
|
6
|
-
}
|
|
7
|
-
}
|
|
8
|
-
export declare class NysVideo extends LitElement {
|
|
9
|
-
static styles: import("lit").CSSResult;
|
|
10
|
-
/** Full YouTube URL — required. Component will not render if invalid. */
|
|
11
|
-
id: string;
|
|
12
|
-
/** Title text for the thumbnail of the video */
|
|
13
|
-
titleText: string;
|
|
14
|
-
/** Full YouTube URL — required. Component will not render if invalid. */
|
|
15
|
-
videourl: string;
|
|
16
|
-
/**
|
|
17
|
-
* Largest size for the video player.
|
|
18
|
-
* If not set, size is determined automatically by viewport width.
|
|
19
|
-
*/
|
|
20
|
-
size: "full" | "md" | "sm" | "";
|
|
21
|
-
loading: "lazy" | "eager";
|
|
22
|
-
/** Time in seconds where playback begins. **/
|
|
23
|
-
starttime: number;
|
|
24
|
-
/**
|
|
25
|
-
* Custom thumbnail image path.
|
|
26
|
-
* Falls back to YouTube's auto-generated thumbnail if not provided.
|
|
27
|
-
*/
|
|
28
|
-
thumbnail: string | null;
|
|
29
|
-
/** Triggers autoplay when the iframe loads */
|
|
30
|
-
autoplay: boolean;
|
|
31
|
-
/** Prevents the video from being played */
|
|
32
|
-
disabled: boolean;
|
|
33
|
-
/** Tracks whether the user has clicked to load the player */
|
|
34
|
-
private _playerActive;
|
|
35
|
-
/** Screen reader announcement text */
|
|
36
|
-
private _announcement;
|
|
37
|
-
/** Tracks whether an ad is currently playing to suppress false "Video is playing" announcements */
|
|
38
|
-
private _adPlaying;
|
|
39
|
-
constructor();
|
|
40
|
-
connectedCallback(): void;
|
|
41
|
-
disconnectedCallback(): void;
|
|
42
|
-
/**
|
|
43
|
-
* Functions
|
|
44
|
-
* --------------------------------------------------------------------------
|
|
45
|
-
*/
|
|
46
|
-
private _isValidYouTubeUrl;
|
|
47
|
-
private _getVideoId;
|
|
48
|
-
private _getThumbnailUrl;
|
|
49
|
-
private _getEmbedUrl;
|
|
50
|
-
/**
|
|
51
|
-
* Because I need to know if Youtube ADs are playing, I need to call YT's API.
|
|
52
|
-
* Hence, the YT API setup below. The VO has 2 types of announcements:
|
|
53
|
-
* - "Advertisement is playing"
|
|
54
|
-
* - "Video is playing"
|
|
55
|
-
*
|
|
56
|
-
* YT IFrame Player API: https://developers.google.com/youtube/iframe_api_reference
|
|
57
|
-
*/
|
|
58
|
-
private _announceVideoVO;
|
|
59
|
-
/**
|
|
60
|
-
* Event Handlers
|
|
61
|
-
* --------------------------------------------------------------------------
|
|
62
|
-
*/
|
|
63
|
-
private _handleThumbnailClick;
|
|
64
|
-
/**
|
|
65
|
-
* Render Helpers
|
|
66
|
-
* --------------------------------------------------------------------------
|
|
67
|
-
*/
|
|
68
|
-
private _renderAnnouncer;
|
|
69
|
-
private _renderPlayIcon;
|
|
70
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
71
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|