@jjlmoya/utils-audiovisual 1.5.0 → 1.6.0

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 (19) hide show
  1. package/package.json +1 -1
  2. package/src/tool/chromaticLens/component.astro +38 -38
  3. package/src/tool/collageMaker/component.astro +47 -47
  4. package/src/tool/exifCleaner/component.astro +49 -48
  5. package/src/tool/imageCompressor/component.astro +144 -106
  6. package/src/tool/imageCompressor/i18n/en.ts +11 -1
  7. package/src/tool/imageCompressor/i18n/es.ts +12 -2
  8. package/src/tool/imageCompressor/i18n/fr.ts +12 -2
  9. package/src/tool/imageCompressor/index.ts +10 -0
  10. package/src/tool/printQualityCalculator/component.astro +129 -104
  11. package/src/tool/printQualityCalculator/i18n/en.ts +15 -1
  12. package/src/tool/printQualityCalculator/i18n/es.ts +16 -2
  13. package/src/tool/printQualityCalculator/i18n/fr.ts +16 -2
  14. package/src/tool/printQualityCalculator/index.ts +14 -0
  15. package/src/tool/privacyBlur/component.astro +35 -35
  16. package/src/tool/subtitleSync/component.astro +42 -42
  17. package/src/tool/timelapseCalculator/component.astro +41 -42
  18. package/src/tool/tvDistance/component.astro +55 -55
  19. package/src/tool/videoFrameExtractor/component.astro +54 -54
package/src/tool/timelapseCalculator/component.astro CHANGED
@@ -132,7 +132,6 @@ const { ui } = Astro.props;
132
132
  els.shutter.innerText = formatShutter(r.shutterSpeed);
133
133
  }
134
134
 
135
- // eslint-disable-next-line complexity
136
135
  function recalculate() {
137
136
  const h = +(els.hours?.value || 0), m = +(els.minutes?.value || 0), s = +(els.seconds?.value || 0), f = +(els.fps?.value || 24);
138
137
  updateResultDisplay(calculateTimelapse(h * 3600 + m * 60, s, f));
@@ -147,13 +146,13 @@ const { ui } = Astro.props;
147
146
  </script>
148
147
 
149
148
  <style>
150
- .tlc-root {
149
+ :global(.tlc-root) {
151
150
  width: 100%;
152
151
  max-width: 64rem;
153
152
  margin: 0 auto;
154
153
  }
155
154
 
156
- .tlc-grid {
155
+ :global(.tlc-grid) {
157
156
  display: grid;
158
157
  grid-template-columns: 1fr 1fr;
159
158
  border-radius: 1.5rem;
@@ -162,7 +161,7 @@ const { ui } = Astro.props;
162
161
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
163
162
  }
164
163
 
165
- :global(.theme-dark) .tlc-grid {
164
+ :global(.theme-dark .tlc-grid) {
166
165
  border-color: #334155;
167
166
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
168
167
  }
@@ -173,7 +172,7 @@ const { ui } = Astro.props;
173
172
  }
174
173
  }
175
174
 
176
- .tlc-inputs-panel {
175
+ :global(.tlc-inputs-panel) {
177
176
  padding: 2rem 3rem;
178
177
  background: #f8fafc;
179
178
  display: flex;
@@ -181,17 +180,17 @@ const { ui } = Astro.props;
181
180
  gap: 2rem;
182
181
  }
183
182
 
184
- :global(.theme-dark) .tlc-inputs-panel {
183
+ :global(.theme-dark .tlc-inputs-panel) {
185
184
  background: rgba(15, 23, 42, 0.5);
186
185
  }
187
186
 
188
187
  @media (max-width: 768px) {
189
- .tlc-inputs-panel {
188
+ :global(.tlc-inputs-panel) {
190
189
  padding: 2rem;
191
190
  }
192
191
  }
193
192
 
194
- .tlc-panel-title {
193
+ :global(.tlc-panel-title) {
195
194
  display: flex;
196
195
  align-items: center;
197
196
  gap: 0.5rem;
@@ -201,29 +200,29 @@ const { ui } = Astro.props;
201
200
  margin: 0;
202
201
  }
203
202
 
204
- :global(.theme-dark) .tlc-panel-title {
203
+ :global(.theme-dark .tlc-panel-title) {
205
204
  color: #f8fafc;
206
205
  }
207
206
 
208
- .tlc-panel-icon {
207
+ :global(.tlc-panel-icon) {
209
208
  width: 1.25rem;
210
209
  height: 1.25rem;
211
210
  color: #6366f1;
212
211
  }
213
212
 
214
- .tlc-fields {
213
+ :global(.tlc-fields) {
215
214
  display: flex;
216
215
  flex-direction: column;
217
216
  gap: 1.5rem;
218
217
  }
219
218
 
220
- .tlc-field-group {
219
+ :global(.tlc-field-group) {
221
220
  display: flex;
222
221
  flex-direction: column;
223
222
  gap: 0.75rem;
224
223
  }
225
224
 
226
- .tlc-group-label {
225
+ :global(.tlc-group-label) {
227
226
  font-size: 0.7rem;
228
227
  font-weight: 700;
229
228
  text-transform: uppercase;
@@ -231,25 +230,25 @@ const { ui } = Astro.props;
231
230
  color: #64748b;
232
231
  }
233
232
 
234
- .tlc-row {
233
+ :global(.tlc-row) {
235
234
  display: flex;
236
235
  gap: 1rem;
237
236
  }
238
237
 
239
- .tlc-field {
238
+ :global(.tlc-field) {
240
239
  flex: 1;
241
240
  display: flex;
242
241
  flex-direction: column;
243
242
  gap: 0.25rem;
244
243
  }
245
244
 
246
- .tlc-sub-label {
245
+ :global(.tlc-sub-label) {
247
246
  font-size: 0.7rem;
248
247
  color: #94a3b8;
249
248
  margin-left: 0.25rem;
250
249
  }
251
250
 
252
- .tlc-input {
251
+ :global(.tlc-input) {
253
252
  width: 100%;
254
253
  background: #fff;
255
254
  border: 2px solid #e2e8f0;
@@ -263,41 +262,41 @@ const { ui } = Astro.props;
263
262
  box-sizing: border-box;
264
263
  }
265
264
 
266
- :global(.theme-dark) .tlc-input {
265
+ :global(.theme-dark .tlc-input) {
267
266
  background: #1e293b;
268
267
  border-color: #334155;
269
268
  color: #f8fafc;
270
269
  }
271
270
 
272
- .tlc-input-indigo:focus {
271
+ :global(.tlc-input-indigo:focus) {
273
272
  border-color: #6366f1;
274
273
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
275
274
  }
276
275
 
277
- :global(.theme-dark) .tlc-input-indigo:focus {
276
+ :global(.theme-dark .tlc-input-indigo:focus) {
278
277
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
279
278
  }
280
279
 
281
- .tlc-input-pink:focus {
280
+ :global(.tlc-input-pink:focus) {
282
281
  border-color: #ec4899;
283
282
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15);
284
283
  }
285
284
 
286
- :global(.theme-dark) .tlc-input-pink:focus {
285
+ :global(.theme-dark .tlc-input-pink:focus) {
287
286
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.25);
288
287
  }
289
288
 
290
- .tlc-select-wrapper {
289
+ :global(.tlc-select-wrapper) {
291
290
  position: relative;
292
291
  }
293
292
 
294
- .tlc-select {
293
+ :global(.tlc-select) {
295
294
  appearance: none;
296
295
  cursor: pointer;
297
296
  width: 100%;
298
297
  }
299
298
 
300
- .tlc-select-arrow {
299
+ :global(.tlc-select-arrow) {
301
300
  position: absolute;
302
301
  right: 1rem;
303
302
  top: 50%;
@@ -308,7 +307,7 @@ const { ui } = Astro.props;
308
307
  pointer-events: none;
309
308
  }
310
309
 
311
- .tlc-results-panel {
310
+ :global(.tlc-results-panel) {
312
311
  padding: 2rem 3rem;
313
312
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
314
313
  color: #fff;
@@ -319,12 +318,12 @@ const { ui } = Astro.props;
319
318
  }
320
319
 
321
320
  @media (max-width: 768px) {
322
- .tlc-results-panel {
321
+ :global(.tlc-results-panel) {
323
322
  padding: 2rem;
324
323
  }
325
324
  }
326
325
 
327
- .tlc-results-title {
326
+ :global(.tlc-results-title) {
328
327
  display: flex;
329
328
  align-items: center;
330
329
  gap: 0.5rem;
@@ -334,19 +333,19 @@ const { ui } = Astro.props;
334
333
  margin: 0;
335
334
  }
336
335
 
337
- .tlc-results-icon {
336
+ :global(.tlc-results-icon) {
338
337
  width: 1.25rem;
339
338
  height: 1.25rem;
340
339
  color: #a5b4fc;
341
340
  }
342
341
 
343
- .tlc-interval-section {
342
+ :global(.tlc-interval-section) {
344
343
  display: flex;
345
344
  flex-direction: column;
346
345
  gap: 0.5rem;
347
346
  }
348
347
 
349
- .tlc-interval-label {
348
+ :global(.tlc-interval-label) {
350
349
  font-size: 0.7rem;
351
350
  font-weight: 700;
352
351
  text-transform: uppercase;
@@ -355,38 +354,38 @@ const { ui } = Astro.props;
355
354
  margin: 0;
356
355
  }
357
356
 
358
- .tlc-interval-value {
357
+ :global(.tlc-interval-value) {
359
358
  display: flex;
360
359
  align-items: baseline;
361
360
  gap: 0.5rem;
362
361
  }
363
362
 
364
- .tlc-big-number {
363
+ :global(.tlc-big-number) {
365
364
  font-size: clamp(3.5rem, 8vw, 5rem);
366
365
  font-weight: 900;
367
366
  letter-spacing: -0.03em;
368
367
  line-height: 1;
369
368
  }
370
369
 
371
- .tlc-big-unit {
370
+ :global(.tlc-big-unit) {
372
371
  font-size: 1.5rem;
373
372
  font-weight: 700;
374
373
  color: #a5b4fc;
375
374
  }
376
375
 
377
- .tlc-stats-grid {
376
+ :global(.tlc-stats-grid) {
378
377
  display: grid;
379
378
  grid-template-columns: 1fr 1fr;
380
379
  gap: 1.5rem 2rem;
381
380
  }
382
381
 
383
- .tlc-stat {
382
+ :global(.tlc-stat) {
384
383
  display: flex;
385
384
  flex-direction: column;
386
385
  gap: 0.25rem;
387
386
  }
388
387
 
389
- .tlc-stat-label {
388
+ :global(.tlc-stat-label) {
390
389
  font-size: 0.65rem;
391
390
  font-weight: 700;
392
391
  text-transform: uppercase;
@@ -395,7 +394,7 @@ const { ui } = Astro.props;
395
394
  margin: 0;
396
395
  }
397
396
 
398
- .tlc-stat-value {
397
+ :global(.tlc-stat-value) {
399
398
  font-size: 1.875rem;
400
399
  font-weight: 700;
401
400
  font-variant-numeric: tabular-nums;
@@ -403,12 +402,12 @@ const { ui } = Astro.props;
403
402
  line-height: 1.1;
404
403
  }
405
404
 
406
- .tlc-stat-value-sm {
405
+ :global(.tlc-stat-value-sm) {
407
406
  font-size: 1.25rem;
408
407
  color: #e0e7ff;
409
408
  }
410
409
 
411
- .tlc-rule-info {
410
+ :global(.tlc-rule-info) {
412
411
  display: flex;
413
412
  align-items: flex-start;
414
413
  gap: 1rem;
@@ -416,7 +415,7 @@ const { ui } = Astro.props;
416
415
  border-top: 1px solid rgba(165, 180, 252, 0.3);
417
416
  }
418
417
 
419
- .tlc-info-icon {
418
+ :global(.tlc-info-icon) {
420
419
  width: 1.5rem;
421
420
  height: 1.5rem;
422
421
  color: #a5b4fc;
@@ -424,7 +423,7 @@ const { ui } = Astro.props;
424
423
  margin-top: 0.1rem;
425
424
  }
426
425
 
427
- .tlc-info-text {
426
+ :global(.tlc-info-text) {
428
427
  font-size: 0.8rem;
429
428
  line-height: 1.5;
430
429
  color: #c7d2fe;