@haklex/rich-renderer-video 0.0.20 → 0.0.21

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.
Files changed (2) hide show
  1. package/dist/rich-renderer-video.css +1 -266
  2. package/package.json +4 -4
package/dist/rich-renderer-video.css CHANGED
@@ -1,266 +1 @@
1
- @keyframes _1x2h1ol3 {
2
- 0% {
3
- opacity: 1;
4
- transform: scale(1);
5
- }
6
- 100% {
7
- opacity: 0;
8
- transform: scale(1.3);
9
- }
10
- }
11
- @keyframes _1x2h1olc {
12
- from {
13
- transform: rotate(0deg);
14
- }
15
- to {
16
- transform: rotate(360deg);
17
- }
18
- }
19
- ._1x2h1ol0 {
20
- margin: 1.25rem 0;
21
- }
22
- ._1x2h1ol1 {
23
- position: relative;
24
- width: 100%;
25
- background: #000;
26
- border-radius: 0.75rem;
27
- overflow: hidden;
28
- }
29
- ._1x2h1ol2 {
30
- width: 100%;
31
- height: 100%;
32
- display: block;
33
- object-fit: contain;
34
- background: #000;
35
- cursor: pointer;
36
- }
37
- ._1x2h1ol4 {
38
- position: absolute;
39
- inset: 0;
40
- margin: auto;
41
- width: 5rem;
42
- height: 5rem;
43
- border-radius: 999px;
44
- display: inline-flex;
45
- align-items: center;
46
- justify-content: center;
47
- background: rgba(0, 0, 0, 0.7);
48
- color: #fff;
49
- pointer-events: none;
50
- animation: _1x2h1ol3 0.5s ease forwards;
51
- }
52
- ._1x2h1ol5 {
53
- position: absolute;
54
- left: 2rem;
55
- right: 2rem;
56
- bottom: 0.5rem;
57
- height: 2.5rem;
58
- border-radius: 999px;
59
- border: 1px solid color-mix(in srgb, var(--rc-border) 20%, transparent);
60
- background: color-mix(in srgb, var(--rc-bg-secondary) 90%, transparent);
61
- backdrop-filter: blur(24px) saturate(180%);
62
- color: var(--rc-text);
63
- display: flex;
64
- align-items: center;
65
- gap: 0.75rem;
66
- padding: 0 1rem;
67
- max-width: 80vw;
68
- margin: 0 auto;
69
- opacity: 0;
70
- transform: translateY(4px);
71
- transition: opacity 0.2s ease, transform 0.2s ease;
72
- }
73
- ._1x2h1ol1:hover ._1x2h1ol5, ._1x2h1ol1:focus-within ._1x2h1ol5 {
74
- opacity: 1;
75
- transform: translateY(0);
76
- }
77
- ._1x2h1ol6 {
78
- appearance: none;
79
- border: none;
80
- background: none;
81
- color: inherit;
82
- display: inline-flex;
83
- align-items: center;
84
- justify-content: center;
85
- cursor: pointer;
86
- padding: 0.125rem;
87
- line-height: 1;
88
- flex-shrink: 0;
89
- transition: transform 0.15s ease;
90
- }
91
- ._1x2h1ol6:hover {
92
- transform: scale(1.1);
93
- }
94
- ._1x2h1ol6:active {
95
- transform: scale(0.93);
96
- }
97
- ._1x2h1ol6:focus-visible {
98
- outline: 2px solid currentColor;
99
- outline-offset: 2px;
100
- border-radius: 4px;
101
- }
102
- ._1x2h1ol6:disabled {
103
- opacity: 0.5;
104
- pointer-events: none;
105
- }
106
- ._1x2h1ol7 {
107
- flex: 1;
108
- height: 100%;
109
- }
110
- ._1x2h1ol8 {
111
- position: relative;
112
- display: flex;
113
- align-items: center;
114
- width: 100%;
115
- height: 100%;
116
- touch-action: none;
117
- user-select: none;
118
- }
119
- ._1x2h1ol9 {
120
- position: relative;
121
- flex: 1;
122
- height: 0.25rem;
123
- border-radius: 999px;
124
- background: var(--rc-bg);
125
- }
126
- ._1x2h1ola {
127
- position: absolute;
128
- height: 100%;
129
- border-radius: 999px;
130
- background: color-mix(in srgb, var(--rc-text-secondary) 40%, transparent);
131
- }
132
- ._1x2h1olb {
133
- display: block;
134
- height: 0.75rem;
135
- width: 3px;
136
- border-radius: 1px;
137
- border: none;
138
- background: var(--rc-text-secondary);
139
- }
140
- ._1x2h1old {
141
- animation: _1x2h1olc 0.8s linear infinite;
142
- }
143
- ._1x2h1ole {
144
- display: block;
145
- cursor: pointer;
146
- }
147
- ._1x2h1olf {
148
- position: relative;
149
- width: 100%;
150
- border-radius: 0.75rem;
151
- overflow: hidden;
152
- background: #000;
153
- background-size: cover;
154
- background-position: center;
155
- cursor: pointer;
156
- }
157
- ._1x2h1olg {
158
- width: 100%;
159
- height: 100%;
160
- display: block;
161
- object-fit: contain;
162
- pointer-events: none;
163
- }
164
- ._1x2h1olh {
165
- position: absolute;
166
- inset: 0;
167
- display: flex;
168
- align-items: center;
169
- justify-content: center;
170
- background: rgba(0, 0, 0, 0.35);
171
- color: #fff;
172
- transition: background 0.2s;
173
- }
174
- ._1x2h1ole:hover ._1x2h1olh {
175
- background: rgba(0, 0, 0, 0.5);
176
- }
177
- ._1x2h1oli {
178
- display: flex;
179
- align-items: center;
180
- justify-content: center;
181
- gap: 8px;
182
- padding: 2rem;
183
- border: 2px dashed var(--rc-border);
184
- border-radius: var(--rc-radius-md);
185
- color: var(--rc-text-secondary);
186
- font-size: 0.875rem;
187
- cursor: pointer;
188
- transition: border-color 0.2s, color 0.2s;
189
- }
190
- ._1x2h1oli:hover {
191
- border-color: var(--rc-accent);
192
- color: var(--rc-text);
193
- }
194
- ._1x2h1olj {
195
- display: flex;
196
- flex-direction: column;
197
- gap: 8px;
198
- width: 340px;
199
- padding: 12px;
200
- font-size: 13px;
201
- font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
202
- }
203
- ._1x2h1olk {
204
- display: flex;
205
- align-items: center;
206
- gap: 8px;
207
- padding: 6px 10px;
208
- background-color: var(--rc-bg-secondary);
209
- border-radius: 6px;
210
- min-width: 0;
211
- }
212
- ._1x2h1oll {
213
- flex-shrink: 0;
214
- color: var(--rc-text-secondary);
215
- }
216
- ._1x2h1olm {
217
- flex: 1;
218
- appearance: none;
219
- border: none;
220
- background-color: transparent;
221
- color: inherit;
222
- font-size: 13px;
223
- padding: 0;
224
- outline: none;
225
- min-width: 0;
226
- }
227
- ._1x2h1olm::placeholder {
228
- color: var(--rc-text-secondary);
229
- }
230
- ._1x2h1oln {
231
- display: flex;
232
- align-items: center;
233
- gap: 4px;
234
- }
235
- ._1x2h1olo {
236
- display: inline-flex;
237
- align-items: center;
238
- gap: 6px;
239
- appearance: none;
240
- border: none;
241
- background: none;
242
- color: inherit;
243
- font-size: 13px;
244
- font-weight: 500;
245
- cursor: pointer;
246
- padding: 4px 8px;
247
- border-radius: 4px;
248
- transition: color 0.15s ease, background-color 0.15s ease;
249
- white-space: nowrap;
250
- }
251
- ._1x2h1olo:hover {
252
- background-color: var(--rc-bg-secondary);
253
- }
254
- ._1x2h1olp {
255
- margin-left: auto;
256
- }
257
- @media (max-width: 768px) {
258
- ._1x2h1ol5 {
259
- left: 0.75rem;
260
- right: 0.75rem;
261
- opacity: 1;
262
- transform: none;
263
- gap: 0.5rem;
264
- padding: 0 0.75rem;
265
- }
266
- }
1
+ @keyframes _1x2h1ol3{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.3)}}@keyframes _1x2h1olc{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._1x2h1ol0{margin:1.25rem 0}._1x2h1ol1{position:relative;width:100%;background:#000;border-radius:.75rem;overflow:hidden}._1x2h1ol2{width:100%;height:100%;display:block;object-fit:contain;background:#000;cursor:pointer}._1x2h1ol4{position:absolute;inset:0;margin:auto;width:5rem;height:5rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#000000b3;color:#fff;pointer-events:none;animation:_1x2h1ol3 .5s ease forwards}._1x2h1ol5{position:absolute;left:2rem;right:2rem;bottom:.5rem;height:2.5rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--rc-border) 20%,transparent);background:color-mix(in srgb,var(--rc-bg-secondary) 90%,transparent);backdrop-filter:blur(24px) saturate(180%);color:var(--rc-text);display:flex;align-items:center;gap:.75rem;padding:0 1rem;max-width:80vw;margin:0 auto;opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease}._1x2h1ol1:hover ._1x2h1ol5,._1x2h1ol1:focus-within ._1x2h1ol5{opacity:1;transform:translateY(0)}._1x2h1ol6{appearance:none;border:none;background:none;color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:.125rem;line-height:1;flex-shrink:0;transition:transform .15s ease}._1x2h1ol6:hover{transform:scale(1.1)}._1x2h1ol6:active{transform:scale(.93)}._1x2h1ol6:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}._1x2h1ol6:disabled{opacity:.5;pointer-events:none}._1x2h1ol7{flex:1;height:100%}._1x2h1ol8{position:relative;display:flex;align-items:center;width:100%;height:100%;touch-action:none;user-select:none}._1x2h1ol9{position:relative;flex:1;height:.25rem;border-radius:999px;background:var(--rc-bg)}._1x2h1ola{position:absolute;height:100%;border-radius:999px;background:color-mix(in srgb,var(--rc-text-secondary) 40%,transparent)}._1x2h1olb{display:block;height:.75rem;width:3px;border-radius:1px;border:none;background:var(--rc-text-secondary)}._1x2h1old{animation:_1x2h1olc .8s linear infinite}._1x2h1ole{display:block;cursor:pointer}._1x2h1olf{position:relative;width:100%;border-radius:.75rem;overflow:hidden;background:#000;background-size:cover;background-position:center;cursor:pointer}._1x2h1olg{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none}._1x2h1olh{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#00000059;color:#fff;transition:background .2s}._1x2h1ole:hover ._1x2h1olh{background:#00000080}._1x2h1oli{display:flex;align-items:center;justify-content:center;gap:8px;padding:2rem;border:2px dashed var(--rc-border);border-radius:var(--rc-radius-md);color:var(--rc-text-secondary);font-size:var(--rc-font-size-md);cursor:pointer;transition:border-color .2s,color .2s}._1x2h1oli:hover{border-color:var(--rc-accent);color:var(--rc-text)}._1x2h1olj{display:flex;flex-direction:column;gap:8px;width:340px;padding:12px;font-size:var(--rc-font-size-sm);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}._1x2h1olk{display:flex;align-items:center;gap:8px;padding:6px 10px;background-color:var(--rc-bg-secondary);border-radius:6px;min-width:0}._1x2h1oll{flex-shrink:0;color:var(--rc-text-secondary)}._1x2h1olm{flex:1;appearance:none;border:none;background-color:transparent;color:inherit;font-size:var(--rc-font-size-sm);padding:0;outline:none;min-width:0}._1x2h1olm::placeholder{color:var(--rc-text-secondary)}._1x2h1oln{display:flex;align-items:center;gap:4px}._1x2h1olo{display:inline-flex;align-items:center;gap:6px;appearance:none;border:none;background:none;color:inherit;font-size:var(--rc-font-size-sm);font-weight:500;cursor:pointer;padding:4px 8px;border-radius:4px;transition:color .15s ease,background-color .15s ease;white-space:nowrap}._1x2h1olo:hover{background-color:var(--rc-bg-secondary)}._1x2h1olp{margin-left:auto}@media(max-width:768px){._1x2h1ol5{left:.75rem;right:.75rem;opacity:1;transform:none;gap:.5rem;padding:0 .75rem}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@haklex/rich-renderer-video",
3
- "version": "0.0.20",
3
+ "version": "0.0.21",
4
4
  "description": "Video player renderer",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -18,9 +18,9 @@
18
18
  "dependencies": {
19
19
  "@base-ui/react": "^1.2.0",
20
20
  "lucide-react": "^0.574.0",
21
- "@haklex/rich-style-token": "0.0.20",
22
- "@haklex/rich-editor-ui": "0.0.20",
23
- "@haklex/rich-editor": "0.0.20"
21
+ "@haklex/rich-editor": "0.0.21",
22
+ "@haklex/rich-editor-ui": "0.0.21",
23
+ "@haklex/rich-style-token": "0.0.21"
24
24
  },
25
25
  "devDependencies": {
26
26
  "@lexical/react": "^0.40.0",