@nuralyui/video 0.0.8 → 0.0.10
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/bundle.js +171 -1
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
- package/video.component.d.ts +1 -1
- package/video.component.js.map +1 -1
- package/video.style.js.map +1 -1
- package/video.types.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -1 +1,171 @@
|
|
|
1
|
-
import{css as e,LitElement as i,html as o}from"lit";import{property as r,state as t,customElement as s}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{styleMap as
|
|
1
|
+
import{css as e,LitElement as i,html as o}from"lit";import{property as r,state as t,customElement as s}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{styleMap as n}from"lit/directives/style-map.js";import{NuralyUIBaseMixin as d}from"@nuralyui/common/mixins";var l=e`
|
|
2
|
+
:host {
|
|
3
|
+
display: inline-block;
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
:host([block]) {
|
|
8
|
+
display: block;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.video-container {
|
|
12
|
+
position: relative;
|
|
13
|
+
width: 100%;
|
|
14
|
+
height: 100%;
|
|
15
|
+
background-color: var(--nuraly-video-bg, #000);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
video {
|
|
19
|
+
display: block;
|
|
20
|
+
width: 100%;
|
|
21
|
+
height: 100%;
|
|
22
|
+
border-radius: var(--nuraly-video-border-radius, 4px);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.video--error {
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
min-height: 200px;
|
|
30
|
+
background-color: var(--nuraly-video-error-bg, #f5f5f5);
|
|
31
|
+
color: var(--nuraly-video-error-color, #999);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.error-message {
|
|
35
|
+
text-align: center;
|
|
36
|
+
padding: 20px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.error-icon {
|
|
40
|
+
width: 64px;
|
|
41
|
+
height: 64px;
|
|
42
|
+
margin: 0 auto 16px;
|
|
43
|
+
opacity: 0.5;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* Preview/Fullscreen Modal */
|
|
47
|
+
.preview-modal {
|
|
48
|
+
position: fixed;
|
|
49
|
+
top: 0;
|
|
50
|
+
left: 0;
|
|
51
|
+
right: 0;
|
|
52
|
+
bottom: 0;
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
justify-content: center;
|
|
56
|
+
background-color: var(--nuraly-video-preview-bg, rgba(0, 0, 0, 0.95));
|
|
57
|
+
z-index: var(--nuraly-video-preview-zindex, 1000);
|
|
58
|
+
animation: fadeIn 0.3s ease;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.preview-modal video {
|
|
62
|
+
max-width: 90%;
|
|
63
|
+
max-height: 90%;
|
|
64
|
+
border-radius: var(--nuraly-video-preview-border-radius, 4px);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.preview-close {
|
|
68
|
+
position: absolute;
|
|
69
|
+
top: 20px;
|
|
70
|
+
right: 20px;
|
|
71
|
+
width: 40px;
|
|
72
|
+
height: 40px;
|
|
73
|
+
background: var(--nuraly-video-preview-close-bg, rgba(255, 255, 255, 0.2));
|
|
74
|
+
border: none;
|
|
75
|
+
border-radius: 50%;
|
|
76
|
+
color: var(--nuraly-video-preview-close-color, white);
|
|
77
|
+
font-size: 24px;
|
|
78
|
+
line-height: 1;
|
|
79
|
+
cursor: pointer;
|
|
80
|
+
transition: background-color 0.3s ease;
|
|
81
|
+
display: flex;
|
|
82
|
+
align-items: center;
|
|
83
|
+
justify-content: center;
|
|
84
|
+
outline: none;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.preview-close:hover {
|
|
88
|
+
background: var(--nuraly-video-preview-close-hover-bg, rgba(255, 255, 255, 0.3));
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.preview-button {
|
|
92
|
+
position: absolute;
|
|
93
|
+
top: 10px;
|
|
94
|
+
right: 10px;
|
|
95
|
+
background-color: var(--nuraly-video-fullscreen-btn-bg, rgba(0, 0, 0, 0.5));
|
|
96
|
+
border: none;
|
|
97
|
+
border-radius: 4px;
|
|
98
|
+
padding: 8px 12px;
|
|
99
|
+
cursor: pointer;
|
|
100
|
+
color: var(--nuraly-video-fullscreen-btn-color, white);
|
|
101
|
+
font-size: 12px;
|
|
102
|
+
display: flex;
|
|
103
|
+
align-items: center;
|
|
104
|
+
gap: 4px;
|
|
105
|
+
transition: background-color 0.3s ease;
|
|
106
|
+
z-index: 10;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.preview-button:hover {
|
|
110
|
+
background-color: var(--nuraly-video-fullscreen-btn-hover-bg, rgba(0, 0, 0, 0.7));
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* Animations */
|
|
114
|
+
@keyframes fadeIn {
|
|
115
|
+
from {
|
|
116
|
+
opacity: 0;
|
|
117
|
+
}
|
|
118
|
+
to {
|
|
119
|
+
opacity: 1;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
`,v=function(e,i,o,r){for(var t,s=arguments.length,a=s<3?i:null===r?r=Object.getOwnPropertyDescriptor(i,o):r,n=e.length-1;n>=0;n--)(t=e[n])&&(a=(s<3?t(a):s>3?t(i,o,a):t(i,o))||a);return s>3&&a&&Object.defineProperty(i,o,a),a};let p=class extends(d(i)){constructor(){super(...arguments),this.width="auto",this.height="auto",this.autoplay=!1,this.loop=!1,this.muted=!1,this.controls=!0,this.preload="metadata",this.previewable=!1,this.block=!1,this.showPreview=!1,this.hasError=!1,this.defaultFallback="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI0MCAxODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNGM0Y0RjYiLz48cGF0aCBkPSJNMTg4IDY5TDE2OCA4OU0xNjggNjlMMTg4IDg5IiBzdHJva2U9IiM5Q0EzQUYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+"}handleError(){this.hasError=!0,this.dispatchEvent(new CustomEvent("nr-video-error",{bubbles:!0,composed:!0,detail:{error:`Error loading video: ${this.src}`,src:this.src}}))}handlePlay(){this.dispatchEvent(new CustomEvent("nr-video-play",{bubbles:!0,composed:!0,detail:{src:this.src}}))}handlePause(){this.dispatchEvent(new CustomEvent("nr-video-pause",{bubbles:!0,composed:!0,detail:{src:this.src}}))}handleEnded(){this.dispatchEvent(new CustomEvent("nr-video-ended",{bubbles:!0,composed:!0,detail:{src:this.src}}))}showPreviewModal(){this.previewable&&!this.hasError&&(this.showPreview=!0,this.dispatchEvent(new CustomEvent("nr-video-preview-open",{bubbles:!0,composed:!0,detail:{src:this.src}})))}closePreviewModal(){this.showPreview=!1,this.dispatchEvent(new CustomEvent("nr-video-preview-close",{bubbles:!0,composed:!0,detail:{src:this.src}}))}render(){const e={"video-container":!0,"video--error":this.hasError},i={width:"number"==typeof this.width?`${this.width}px`:this.width,height:"number"==typeof this.height?`${this.height}px`:this.height};return this.hasError?o`
|
|
123
|
+
<div class=${a(e)}>
|
|
124
|
+
<div class="error-message">
|
|
125
|
+
<img class="error-icon" src=${this.defaultFallback} alt="Video error" />
|
|
126
|
+
<p>Unable to load video</p>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
`:o`
|
|
130
|
+
<div class=${a(e)}>
|
|
131
|
+
<video
|
|
132
|
+
style=${n(i)}
|
|
133
|
+
?autoplay=${this.autoplay}
|
|
134
|
+
?loop=${this.loop}
|
|
135
|
+
?muted=${this.muted}
|
|
136
|
+
?controls=${this.controls}
|
|
137
|
+
preload=${this.preload}
|
|
138
|
+
poster=${this.poster||""}
|
|
139
|
+
@error=${this.handleError}
|
|
140
|
+
@play=${this.handlePlay}
|
|
141
|
+
@pause=${this.handlePause}
|
|
142
|
+
@ended=${this.handleEnded}
|
|
143
|
+
>
|
|
144
|
+
<source src=${this.src} />
|
|
145
|
+
Your browser does not support the video tag.
|
|
146
|
+
</video>
|
|
147
|
+
${this.previewable?o`
|
|
148
|
+
<button class="preview-button" @click=${this.showPreviewModal}>
|
|
149
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
150
|
+
<path d="M5.5 5.5A.5.5 0 0 1 6 6v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0V6z"/>
|
|
151
|
+
<path d="M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zM1 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2z"/>
|
|
152
|
+
</svg>
|
|
153
|
+
Fullscreen
|
|
154
|
+
</button>
|
|
155
|
+
`:""}
|
|
156
|
+
${this.showPreview?o`
|
|
157
|
+
<div class="preview-modal" @click=${this.closePreviewModal}>
|
|
158
|
+
<button class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
|
|
159
|
+
<video
|
|
160
|
+
?autoplay=${!0}
|
|
161
|
+
?loop=${this.loop}
|
|
162
|
+
?muted=${this.muted}
|
|
163
|
+
controls
|
|
164
|
+
poster=${this.poster||""}
|
|
165
|
+
>
|
|
166
|
+
<source src=${this.src} />
|
|
167
|
+
</video>
|
|
168
|
+
</div>
|
|
169
|
+
`:""}
|
|
170
|
+
</div>
|
|
171
|
+
`}};p.styles=l,v([r({type:String})],p.prototype,"src",void 0),v([r({type:String})],p.prototype,"poster",void 0),v([r({type:String})],p.prototype,"width",void 0),v([r({type:String})],p.prototype,"height",void 0),v([r({type:Boolean})],p.prototype,"autoplay",void 0),v([r({type:Boolean})],p.prototype,"loop",void 0),v([r({type:Boolean})],p.prototype,"muted",void 0),v([r({type:Boolean})],p.prototype,"controls",void 0),v([r({type:String})],p.prototype,"preload",void 0),v([r({type:Boolean})],p.prototype,"previewable",void 0),v([r({type:Boolean,reflect:!0})],p.prototype,"block",void 0),v([t()],p.prototype,"showPreview",void 0),v([t()],p.prototype,"hasError",void 0),p=v([s("nr-video")],p);export{p as NrVideoElement};
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/video/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './video.component.js';\nexport * from './video.types.js';\n"]}
|
package/package.json
CHANGED
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/video/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,cAAc;IAC5B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,MAAM,EAAE,eAAe;QACvB,OAAO,EAAE,gBAAgB;QACzB,OAAO,EAAE,gBAAgB;QACzB,OAAO,EAAE,gBAAgB;QACzB,aAAa,EAAE,uBAAuB;QACtC,cAAc,EAAE,wBAAwB;KACzC;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrVideoElement } from './video.component.js';\n\nexport const NrVideo = createComponent({\n tagName: 'nr-video',\n elementClass: NrVideoElement,\n react: React,\n events: {\n onPlay: 'nr-video-play',\n onPause: 'nr-video-pause',\n onEnded: 'nr-video-ended',\n onError: 'nr-video-error',\n onPreviewOpen: 'nr-video-preview-open',\n onPreviewClose: 'nr-video-preview-close',\n },\n});\n"]}
|
package/video.component.d.ts
CHANGED
|
@@ -23,7 +23,7 @@ export declare class NrVideoElement extends NrVideoElement_base {
|
|
|
23
23
|
private handleEnded;
|
|
24
24
|
private showPreviewModal;
|
|
25
25
|
private closePreviewModal;
|
|
26
|
-
render(): import("lit").TemplateResult<1>;
|
|
26
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
27
27
|
}
|
|
28
28
|
declare global {
|
|
29
29
|
interface HTMLElementTagNameMap {
|
package/video.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video.component.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"video.component.js","sourceRoot":"","sources":["../../../../src/components/video/video.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport styles from \"./video.style.js\";\nimport { VideoPreload } from \"./video.types.js\";\n\n@customElement('nr-video')\nexport class NrVideoElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n @property({ type: String })\n src!: string;\n\n @property({ type: String })\n poster?: string;\n\n @property({ type: String })\n width = 'auto';\n\n @property({ type: String })\n height = 'auto';\n\n @property({ type: Boolean })\n autoplay = false;\n\n @property({ type: Boolean })\n loop = false;\n\n @property({ type: Boolean })\n muted = false;\n\n @property({ type: Boolean })\n controls = true;\n\n @property({ type: String })\n preload: VideoPreload = VideoPreload.Metadata;\n\n @property({ type: Boolean })\n previewable = false;\n\n @property({ type: Boolean, reflect: true })\n block = false;\n\n @state()\n private showPreview = false;\n\n @state()\n private hasError = false;\n\n private readonly defaultFallback = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI0MCAxODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNGM0Y0RjYiLz48cGF0aCBkPSJNMTg4IDY5TDE2OCA4OU0xNjggNjlMMTg4IDg5IiBzdHJva2U9IiM5Q0EzQUYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+';\n\n private handleError() {\n this.hasError = true;\n this.dispatchEvent(new CustomEvent('nr-video-error', {\n bubbles: true,\n composed: true,\n detail: { error: `Error loading video: ${this.src}`, src: this.src }\n }));\n }\n\n private handlePlay() {\n this.dispatchEvent(new CustomEvent('nr-video-play', {\n bubbles: true,\n composed: true,\n detail: { src: this.src }\n }));\n }\n\n private handlePause() {\n this.dispatchEvent(new CustomEvent('nr-video-pause', {\n bubbles: true,\n composed: true,\n detail: { src: this.src }\n }));\n }\n\n private handleEnded() {\n this.dispatchEvent(new CustomEvent('nr-video-ended', {\n bubbles: true,\n composed: true,\n detail: { src: this.src }\n }));\n }\n\n private showPreviewModal() {\n if (this.previewable && !this.hasError) {\n this.showPreview = true;\n this.dispatchEvent(new CustomEvent('nr-video-preview-open', {\n bubbles: true,\n composed: true,\n detail: { src: this.src }\n }));\n }\n }\n\n private closePreviewModal() {\n this.showPreview = false;\n this.dispatchEvent(new CustomEvent('nr-video-preview-close', {\n bubbles: true,\n composed: true,\n detail: { src: this.src }\n }));\n }\n\n override render() {\n const containerClasses = {\n 'video-container': true,\n 'video--error': this.hasError\n };\n\n const videoStyles: Record<string, string> = {\n width: typeof this.width === 'number' ? `${this.width}px` : this.width,\n height: typeof this.height === 'number' ? `${this.height}px` : this.height,\n };\n\n if (this.hasError) {\n return html`\n <div class=${classMap(containerClasses)}>\n <div class=\"error-message\">\n <img class=\"error-icon\" src=${this.defaultFallback} alt=\"Video error\" />\n <p>Unable to load video</p>\n </div>\n </div>\n `;\n }\n\n return html`\n <div class=${classMap(containerClasses)}>\n <video\n style=${styleMap(videoStyles)}\n ?autoplay=${this.autoplay}\n ?loop=${this.loop}\n ?muted=${this.muted}\n ?controls=${this.controls}\n preload=${this.preload}\n poster=${this.poster || ''}\n @error=${this.handleError}\n @play=${this.handlePlay}\n @pause=${this.handlePause}\n @ended=${this.handleEnded}\n >\n <source src=${this.src} />\n Your browser does not support the video tag.\n </video>\n ${this.previewable ? html`\n <button class=\"preview-button\" @click=${this.showPreviewModal}>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M5.5 5.5A.5.5 0 0 1 6 6v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0V6z\"/>\n <path d=\"M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zM1 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2z\"/>\n </svg>\n Fullscreen\n </button>\n ` : ''}\n ${this.showPreview ? html`\n <div class=\"preview-modal\" @click=${this.closePreviewModal}>\n <button class=\"preview-close\" @click=${this.closePreviewModal} aria-label=\"Close preview\">×</button>\n <video\n ?autoplay=${true}\n ?loop=${this.loop}\n ?muted=${this.muted}\n controls\n poster=${this.poster || ''}\n >\n <source src=${this.src} />\n </video>\n </div>\n ` : ''}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-video': NrVideoElement;\n }\n}\n"]}
|
package/video.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"video.style.js","sourceRoot":"","sources":["../../../../src/components/video/video.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHjB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport default css`\n :host {\n display: inline-block;\n box-sizing: border-box;\n }\n\n :host([block]) {\n display: block;\n }\n\n .video-container {\n position: relative;\n width: 100%;\n height: 100%;\n background-color: var(--nuraly-video-bg, #000);\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n border-radius: var(--nuraly-video-border-radius, 4px);\n }\n\n .video--error {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 200px;\n background-color: var(--nuraly-video-error-bg, #f5f5f5);\n color: var(--nuraly-video-error-color, #999);\n }\n\n .error-message {\n text-align: center;\n padding: 20px;\n }\n\n .error-icon {\n width: 64px;\n height: 64px;\n margin: 0 auto 16px;\n opacity: 0.5;\n }\n\n /* Preview/Fullscreen Modal */\n .preview-modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--nuraly-video-preview-bg, rgba(0, 0, 0, 0.95));\n z-index: var(--nuraly-video-preview-zindex, 1000);\n animation: fadeIn 0.3s ease;\n }\n\n .preview-modal video {\n max-width: 90%;\n max-height: 90%;\n border-radius: var(--nuraly-video-preview-border-radius, 4px);\n }\n\n .preview-close {\n position: absolute;\n top: 20px;\n right: 20px;\n width: 40px;\n height: 40px;\n background: var(--nuraly-video-preview-close-bg, rgba(255, 255, 255, 0.2));\n border: none;\n border-radius: 50%;\n color: var(--nuraly-video-preview-close-color, white);\n font-size: 24px;\n line-height: 1;\n cursor: pointer;\n transition: background-color 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n outline: none;\n }\n\n .preview-close:hover {\n background: var(--nuraly-video-preview-close-hover-bg, rgba(255, 255, 255, 0.3));\n }\n\n .preview-button {\n position: absolute;\n top: 10px;\n right: 10px;\n background-color: var(--nuraly-video-fullscreen-btn-bg, rgba(0, 0, 0, 0.5));\n border: none;\n border-radius: 4px;\n padding: 8px 12px;\n cursor: pointer;\n color: var(--nuraly-video-fullscreen-btn-color, white);\n font-size: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n transition: background-color 0.3s ease;\n z-index: 10;\n }\n\n .preview-button:hover {\n background-color: var(--nuraly-video-fullscreen-btn-hover-bg, rgba(0, 0, 0, 0.7));\n }\n\n /* Animations */\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n`;\n"]}
|
package/video.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"video.types.js","sourceRoot":"","sources":["../../../../src/components/video/video.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Video player controls visibility\n */\nexport const enum VideoControls {\n /** Show controls */\n Show = 'show',\n /** Hide controls */\n Hide = 'hide',\n /** Show controls on hover */\n Hover = 'hover',\n}\n\n/**\n * Video preload strategy\n */\nexport const enum VideoPreload {\n /** No preloading */\n None = 'none',\n /** Preload metadata only */\n Metadata = 'metadata',\n /** Preload entire video */\n Auto = 'auto',\n}\n\n/**\n * Video configuration interface\n */\nexport interface VideoConfig {\n /** Video source URL */\n src: string;\n \n /** Fallback video URL or image */\n fallback?: string;\n \n /** Video width */\n width?: string | number;\n \n /** Video height */\n height?: string | number;\n \n /** Whether video should autoplay */\n autoplay?: boolean;\n \n /** Whether video should loop */\n loop?: boolean;\n \n /** Whether video is muted */\n muted?: boolean;\n \n /** Show video controls */\n controls?: boolean | VideoControls;\n \n /** Video poster image */\n poster?: string;\n \n /** Preload strategy */\n preload?: VideoPreload;\n \n /** Whether video is previewable (fullscreen) */\n previewable?: boolean;\n \n /** Custom CSS class */\n customClass?: string;\n \n /** Callback when video starts playing */\n onPlay?: () => void;\n \n /** Callback when video is paused */\n onPause?: () => void;\n \n /** Callback when video ends */\n onEnded?: () => void;\n \n /** Callback when video fails to load */\n onError?: (error: Error) => void;\n}\n\n/**\n * Video event detail\n */\nexport interface VideoEventDetail {\n /** Original event */\n originalEvent?: Event;\n \n /** Error message if applicable */\n error?: string;\n \n /** Video source */\n src?: string;\n \n /** Current time in seconds */\n currentTime?: number;\n \n /** Duration in seconds */\n duration?: number;\n}\n"]}
|