@nuralyui/video 0.0.8 → 0.0.9
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/package.json +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};
|