@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.
- package/package.json +1 -1
- package/src/tool/chromaticLens/component.astro +38 -38
- package/src/tool/collageMaker/component.astro +47 -47
- package/src/tool/exifCleaner/component.astro +49 -48
- package/src/tool/imageCompressor/component.astro +144 -106
- package/src/tool/imageCompressor/i18n/en.ts +11 -1
- package/src/tool/imageCompressor/i18n/es.ts +12 -2
- package/src/tool/imageCompressor/i18n/fr.ts +12 -2
- package/src/tool/imageCompressor/index.ts +10 -0
- package/src/tool/printQualityCalculator/component.astro +129 -104
- package/src/tool/printQualityCalculator/i18n/en.ts +15 -1
- package/src/tool/printQualityCalculator/i18n/es.ts +16 -2
- package/src/tool/printQualityCalculator/i18n/fr.ts +16 -2
- package/src/tool/printQualityCalculator/index.ts +14 -0
- package/src/tool/privacyBlur/component.astro +35 -35
- package/src/tool/subtitleSync/component.astro +42 -42
- package/src/tool/timelapseCalculator/component.astro +41 -42
- package/src/tool/tvDistance/component.astro +55 -55
- package/src/tool/videoFrameExtractor/component.astro +54 -54
|
@@ -284,7 +284,7 @@ const { ui } = Astro.props;
|
|
|
284
284
|
</script>
|
|
285
285
|
|
|
286
286
|
<style>
|
|
287
|
-
.vfe-root {
|
|
287
|
+
:global(.vfe-root) {
|
|
288
288
|
--vfe-bg: #fff;
|
|
289
289
|
--vfe-bg-muted: #f8fafc;
|
|
290
290
|
--vfe-bg-glass: #fff;
|
|
@@ -307,7 +307,7 @@ const { ui } = Astro.props;
|
|
|
307
307
|
padding: 1rem;
|
|
308
308
|
}
|
|
309
309
|
|
|
310
|
-
:global(.theme-dark
|
|
310
|
+
:global(.theme-dark .vfe-root) {
|
|
311
311
|
--vfe-bg: #18181b;
|
|
312
312
|
--vfe-bg-muted: #09090b;
|
|
313
313
|
--vfe-bg-glass: #27272a;
|
|
@@ -326,7 +326,7 @@ const { ui } = Astro.props;
|
|
|
326
326
|
--vfe-shadow: 0 25px 60px rgba(0,0,0,0.4);
|
|
327
327
|
}
|
|
328
328
|
|
|
329
|
-
.vfe-premium-card {
|
|
329
|
+
:global(.vfe-premium-card) {
|
|
330
330
|
background: var(--vfe-bg);
|
|
331
331
|
border: 1px solid var(--vfe-border);
|
|
332
332
|
border-radius: 1.5rem;
|
|
@@ -334,7 +334,7 @@ const { ui } = Astro.props;
|
|
|
334
334
|
overflow: hidden;
|
|
335
335
|
}
|
|
336
336
|
|
|
337
|
-
.vfe-uploader-box {
|
|
337
|
+
:global(.vfe-uploader-box) {
|
|
338
338
|
padding: 4rem 2rem;
|
|
339
339
|
display: flex;
|
|
340
340
|
flex-direction: column;
|
|
@@ -348,13 +348,13 @@ const { ui } = Astro.props;
|
|
|
348
348
|
transition: border-color 0.2s, background 0.2s;
|
|
349
349
|
}
|
|
350
350
|
|
|
351
|
-
.vfe-uploader-box:hover,
|
|
352
|
-
.vfe-dragover {
|
|
351
|
+
:global(.vfe-uploader-box:hover),
|
|
352
|
+
:global(.vfe-dragover) {
|
|
353
353
|
border-color: var(--vfe-primary);
|
|
354
354
|
background: var(--vfe-primary-light);
|
|
355
355
|
}
|
|
356
356
|
|
|
357
|
-
.vfe-uploader-icon {
|
|
357
|
+
:global(.vfe-uploader-icon) {
|
|
358
358
|
width: 5rem;
|
|
359
359
|
height: 5rem;
|
|
360
360
|
background: var(--vfe-primary-light);
|
|
@@ -366,25 +366,25 @@ const { ui } = Astro.props;
|
|
|
366
366
|
margin-bottom: 0.5rem;
|
|
367
367
|
}
|
|
368
368
|
|
|
369
|
-
.vfe-uploader-icon svg {
|
|
369
|
+
:global(.vfe-uploader-icon svg) {
|
|
370
370
|
width: 2.5rem;
|
|
371
371
|
height: 2.5rem;
|
|
372
372
|
}
|
|
373
373
|
|
|
374
|
-
.vfe-uploader-text h3 {
|
|
374
|
+
:global(.vfe-uploader-text h3) {
|
|
375
375
|
font-size: 1.5rem;
|
|
376
376
|
font-weight: 800;
|
|
377
377
|
color: var(--vfe-text);
|
|
378
378
|
margin: 0 0 0.25rem;
|
|
379
379
|
}
|
|
380
380
|
|
|
381
|
-
.vfe-uploader-text p {
|
|
381
|
+
:global(.vfe-uploader-text p) {
|
|
382
382
|
color: var(--vfe-text-muted);
|
|
383
383
|
font-size: 0.95rem;
|
|
384
384
|
margin: 0;
|
|
385
385
|
}
|
|
386
386
|
|
|
387
|
-
.vfe-privacy-note {
|
|
387
|
+
:global(.vfe-privacy-note) {
|
|
388
388
|
font-size: 0.7rem;
|
|
389
389
|
font-weight: 700;
|
|
390
390
|
text-transform: uppercase;
|
|
@@ -393,19 +393,19 @@ const { ui } = Astro.props;
|
|
|
393
393
|
margin-top: 0.5rem;
|
|
394
394
|
}
|
|
395
395
|
|
|
396
|
-
.vfe-player-container {
|
|
396
|
+
:global(.vfe-player-container) {
|
|
397
397
|
display: flex;
|
|
398
398
|
flex-direction: column;
|
|
399
399
|
}
|
|
400
400
|
|
|
401
|
-
.vfe-video-wrapper video {
|
|
401
|
+
:global(.vfe-video-wrapper video) {
|
|
402
402
|
width: 100%;
|
|
403
403
|
display: block;
|
|
404
404
|
max-height: 65vh;
|
|
405
405
|
background: #000;
|
|
406
406
|
}
|
|
407
407
|
|
|
408
|
-
.vfe-controls-glass {
|
|
408
|
+
:global(.vfe-controls-glass) {
|
|
409
409
|
background: var(--vfe-bg-glass);
|
|
410
410
|
border: 1px solid var(--vfe-glass-border);
|
|
411
411
|
border-radius: 1rem;
|
|
@@ -416,7 +416,7 @@ const { ui } = Astro.props;
|
|
|
416
416
|
gap: 1rem;
|
|
417
417
|
}
|
|
418
418
|
|
|
419
|
-
.vfe-time-row {
|
|
419
|
+
:global(.vfe-time-row) {
|
|
420
420
|
display: flex;
|
|
421
421
|
justify-content: space-between;
|
|
422
422
|
font-size: 0.875rem;
|
|
@@ -424,7 +424,7 @@ const { ui } = Astro.props;
|
|
|
424
424
|
color: var(--vfe-glass-text);
|
|
425
425
|
}
|
|
426
426
|
|
|
427
|
-
.vfe-scrubber {
|
|
427
|
+
:global(.vfe-scrubber) {
|
|
428
428
|
width: 100%;
|
|
429
429
|
height: 4px;
|
|
430
430
|
accent-color: var(--vfe-primary);
|
|
@@ -432,13 +432,13 @@ const { ui } = Astro.props;
|
|
|
432
432
|
border-radius: 9999px;
|
|
433
433
|
}
|
|
434
434
|
|
|
435
|
-
.vfe-actions-row {
|
|
435
|
+
:global(.vfe-actions-row) {
|
|
436
436
|
display: flex;
|
|
437
437
|
align-items: center;
|
|
438
438
|
gap: 0.625rem;
|
|
439
439
|
}
|
|
440
440
|
|
|
441
|
-
.vfe-btn-main {
|
|
441
|
+
:global(.vfe-btn-main) {
|
|
442
442
|
display: inline-flex;
|
|
443
443
|
align-items: center;
|
|
444
444
|
gap: 0.4rem;
|
|
@@ -452,7 +452,7 @@ const { ui } = Astro.props;
|
|
|
452
452
|
text-decoration: none;
|
|
453
453
|
}
|
|
454
454
|
|
|
455
|
-
.vfe-btn-control {
|
|
455
|
+
:global(.vfe-btn-control) {
|
|
456
456
|
padding: 0.5rem 0.875rem;
|
|
457
457
|
background: var(--vfe-glass-btn-bg);
|
|
458
458
|
color: var(--vfe-glass-btn-text);
|
|
@@ -461,18 +461,18 @@ const { ui } = Astro.props;
|
|
|
461
461
|
justify-content: center;
|
|
462
462
|
}
|
|
463
463
|
|
|
464
|
-
.vfe-btn-control:hover {
|
|
464
|
+
:global(.vfe-btn-control:hover) {
|
|
465
465
|
border-color: var(--vfe-primary);
|
|
466
466
|
color: var(--vfe-primary);
|
|
467
467
|
}
|
|
468
468
|
|
|
469
|
-
.vfe-btn-icon-only {
|
|
469
|
+
:global(.vfe-btn-icon-only) {
|
|
470
470
|
flex: none;
|
|
471
471
|
width: 50px;
|
|
472
472
|
justify-content: center;
|
|
473
473
|
}
|
|
474
474
|
|
|
475
|
-
.vfe-btn-capture {
|
|
475
|
+
:global(.vfe-btn-capture) {
|
|
476
476
|
padding: 0.625rem 1.25rem;
|
|
477
477
|
background: var(--vfe-primary);
|
|
478
478
|
color: #fff;
|
|
@@ -481,28 +481,28 @@ const { ui } = Astro.props;
|
|
|
481
481
|
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
|
|
482
482
|
}
|
|
483
483
|
|
|
484
|
-
.vfe-btn-capture:hover {
|
|
484
|
+
:global(.vfe-btn-capture:hover) {
|
|
485
485
|
filter: brightness(1.1);
|
|
486
486
|
}
|
|
487
487
|
|
|
488
|
-
.vfe-btn-capture:disabled {
|
|
488
|
+
:global(.vfe-btn-capture:disabled) {
|
|
489
489
|
opacity: 0.5;
|
|
490
490
|
cursor: not-allowed;
|
|
491
491
|
}
|
|
492
492
|
|
|
493
|
-
.vfe-btn-batch {
|
|
493
|
+
:global(.vfe-btn-batch) {
|
|
494
494
|
padding: 0.45rem 1rem;
|
|
495
495
|
font-size: 0.8rem;
|
|
496
496
|
flex: none;
|
|
497
497
|
}
|
|
498
498
|
|
|
499
|
-
.vfe-btn-main svg {
|
|
499
|
+
:global(.vfe-btn-main svg) {
|
|
500
500
|
width: 1.1rem;
|
|
501
501
|
height: 1.1rem;
|
|
502
502
|
flex-shrink: 0;
|
|
503
503
|
}
|
|
504
504
|
|
|
505
|
-
.vfe-batch-panel {
|
|
505
|
+
:global(.vfe-batch-panel) {
|
|
506
506
|
background: var(--vfe-batch-bg);
|
|
507
507
|
border-radius: 0.875rem;
|
|
508
508
|
padding: 0.875rem 1rem;
|
|
@@ -512,7 +512,7 @@ const { ui } = Astro.props;
|
|
|
512
512
|
gap: 0.75rem;
|
|
513
513
|
}
|
|
514
514
|
|
|
515
|
-
.vfe-batch-header {
|
|
515
|
+
:global(.vfe-batch-header) {
|
|
516
516
|
display: flex;
|
|
517
517
|
align-items: center;
|
|
518
518
|
gap: 0.5rem;
|
|
@@ -521,19 +521,19 @@ const { ui } = Astro.props;
|
|
|
521
521
|
color: var(--vfe-primary);
|
|
522
522
|
}
|
|
523
523
|
|
|
524
|
-
.vfe-batch-header svg {
|
|
524
|
+
:global(.vfe-batch-header svg) {
|
|
525
525
|
width: 1rem;
|
|
526
526
|
height: 1rem;
|
|
527
527
|
}
|
|
528
528
|
|
|
529
|
-
.vfe-batch-controls {
|
|
529
|
+
:global(.vfe-batch-controls) {
|
|
530
530
|
display: flex;
|
|
531
531
|
align-items: center;
|
|
532
532
|
gap: 0.625rem;
|
|
533
533
|
flex-wrap: wrap;
|
|
534
534
|
}
|
|
535
535
|
|
|
536
|
-
.vfe-batch-input-group {
|
|
536
|
+
:global(.vfe-batch-input-group) {
|
|
537
537
|
display: flex;
|
|
538
538
|
align-items: center;
|
|
539
539
|
gap: 0.375rem;
|
|
@@ -548,7 +548,7 @@ const { ui } = Astro.props;
|
|
|
548
548
|
padding: 0.4rem 0.75rem;
|
|
549
549
|
}
|
|
550
550
|
|
|
551
|
-
.vfe-batch-input-group input {
|
|
551
|
+
:global(.vfe-batch-input-group input) {
|
|
552
552
|
width: 48px;
|
|
553
553
|
background: transparent;
|
|
554
554
|
border: none;
|
|
@@ -559,19 +559,19 @@ const { ui } = Astro.props;
|
|
|
559
559
|
outline: none;
|
|
560
560
|
}
|
|
561
561
|
|
|
562
|
-
.vfe-gallery-minimal {
|
|
562
|
+
:global(.vfe-gallery-minimal) {
|
|
563
563
|
background: var(--vfe-bg);
|
|
564
564
|
border-top: 1px solid var(--vfe-border);
|
|
565
565
|
}
|
|
566
566
|
|
|
567
|
-
.vfe-gallery-header {
|
|
567
|
+
:global(.vfe-gallery-header) {
|
|
568
568
|
display: flex;
|
|
569
569
|
justify-content: space-between;
|
|
570
570
|
align-items: center;
|
|
571
571
|
padding: 1rem 1.25rem 0.75rem;
|
|
572
572
|
}
|
|
573
573
|
|
|
574
|
-
.vfe-gallery-header h4 {
|
|
574
|
+
:global(.vfe-gallery-header h4) {
|
|
575
575
|
font-size: 0.7rem;
|
|
576
576
|
font-weight: 800;
|
|
577
577
|
text-transform: uppercase;
|
|
@@ -580,19 +580,19 @@ const { ui } = Astro.props;
|
|
|
580
580
|
margin: 0;
|
|
581
581
|
}
|
|
582
582
|
|
|
583
|
-
.vfe-gallery-minimal .vfe-btn-control {
|
|
583
|
+
:global(.vfe-gallery-minimal .vfe-btn-control) {
|
|
584
584
|
background: var(--vfe-bg-muted);
|
|
585
585
|
color: var(--vfe-text);
|
|
586
586
|
border-color: var(--vfe-border);
|
|
587
587
|
flex: none;
|
|
588
588
|
}
|
|
589
589
|
|
|
590
|
-
.vfe-gallery-minimal .vfe-btn-control:hover {
|
|
590
|
+
:global(.vfe-gallery-minimal .vfe-btn-control:hover) {
|
|
591
591
|
border-color: var(--vfe-primary);
|
|
592
592
|
color: var(--vfe-primary);
|
|
593
593
|
}
|
|
594
594
|
|
|
595
|
-
.vfe-frame-footer .vfe-btn-control {
|
|
595
|
+
:global(.vfe-frame-footer .vfe-btn-control) {
|
|
596
596
|
background: var(--vfe-bg-muted);
|
|
597
597
|
color: var(--vfe-text-muted);
|
|
598
598
|
border-color: var(--vfe-border);
|
|
@@ -600,12 +600,12 @@ const { ui } = Astro.props;
|
|
|
600
600
|
padding: 0.25rem 0.4rem;
|
|
601
601
|
}
|
|
602
602
|
|
|
603
|
-
.vfe-btn-sm {
|
|
603
|
+
:global(.vfe-btn-sm) {
|
|
604
604
|
padding: 0.35rem 0.625rem;
|
|
605
605
|
font-size: 0.75rem;
|
|
606
606
|
}
|
|
607
607
|
|
|
608
|
-
.vfe-frames-scroll {
|
|
608
|
+
:global(.vfe-frames-scroll) {
|
|
609
609
|
display: flex;
|
|
610
610
|
gap: 0.75rem;
|
|
611
611
|
overflow-x: auto;
|
|
@@ -613,7 +613,7 @@ const { ui } = Astro.props;
|
|
|
613
613
|
scrollbar-width: thin;
|
|
614
614
|
}
|
|
615
615
|
|
|
616
|
-
.vfe-gallery-empty-text {
|
|
616
|
+
:global(.vfe-gallery-empty-text) {
|
|
617
617
|
padding: 1.5rem;
|
|
618
618
|
text-align: center;
|
|
619
619
|
color: var(--vfe-text-muted);
|
|
@@ -622,7 +622,7 @@ const { ui } = Astro.props;
|
|
|
622
622
|
margin: 0;
|
|
623
623
|
}
|
|
624
624
|
|
|
625
|
-
.vfe-frame-card {
|
|
625
|
+
:global(.vfe-frame-card) {
|
|
626
626
|
flex-shrink: 0;
|
|
627
627
|
width: 160px;
|
|
628
628
|
background: var(--vfe-bg-muted);
|
|
@@ -632,11 +632,11 @@ const { ui } = Astro.props;
|
|
|
632
632
|
transition: border-color 0.15s;
|
|
633
633
|
}
|
|
634
634
|
|
|
635
|
-
.vfe-frame-card:hover {
|
|
635
|
+
:global(.vfe-frame-card:hover) {
|
|
636
636
|
border-color: var(--vfe-primary);
|
|
637
637
|
}
|
|
638
638
|
|
|
639
|
-
.vfe-frame-thumb {
|
|
639
|
+
:global(.vfe-frame-thumb) {
|
|
640
640
|
width: 100%;
|
|
641
641
|
aspect-ratio: 16/9;
|
|
642
642
|
object-fit: cover;
|
|
@@ -644,20 +644,20 @@ const { ui } = Astro.props;
|
|
|
644
644
|
cursor: zoom-in;
|
|
645
645
|
}
|
|
646
646
|
|
|
647
|
-
.vfe-frame-footer {
|
|
647
|
+
:global(.vfe-frame-footer) {
|
|
648
648
|
display: flex;
|
|
649
649
|
justify-content: space-between;
|
|
650
650
|
align-items: center;
|
|
651
651
|
padding: 0.4rem 0.625rem;
|
|
652
652
|
}
|
|
653
653
|
|
|
654
|
-
.vfe-frame-time {
|
|
654
|
+
:global(.vfe-frame-time) {
|
|
655
655
|
font-size: 0.7rem;
|
|
656
656
|
font-weight: 800;
|
|
657
657
|
color: var(--vfe-primary);
|
|
658
658
|
}
|
|
659
659
|
|
|
660
|
-
.vfe-lightbox {
|
|
660
|
+
:global(.vfe-lightbox) {
|
|
661
661
|
position: fixed;
|
|
662
662
|
inset: 0;
|
|
663
663
|
z-index: 9999;
|
|
@@ -668,11 +668,11 @@ const { ui } = Astro.props;
|
|
|
668
668
|
justify-content: center;
|
|
669
669
|
}
|
|
670
670
|
|
|
671
|
-
.vfe-lightbox-open {
|
|
671
|
+
:global(.vfe-lightbox-open) {
|
|
672
672
|
display: flex;
|
|
673
673
|
}
|
|
674
674
|
|
|
675
|
-
.vfe-lightbox-content {
|
|
675
|
+
:global(.vfe-lightbox-content) {
|
|
676
676
|
position: relative;
|
|
677
677
|
display: flex;
|
|
678
678
|
flex-direction: column;
|
|
@@ -681,7 +681,7 @@ const { ui } = Astro.props;
|
|
|
681
681
|
max-width: 90vw;
|
|
682
682
|
}
|
|
683
683
|
|
|
684
|
-
.vfe-lightbox-close {
|
|
684
|
+
:global(.vfe-lightbox-close) {
|
|
685
685
|
position: absolute;
|
|
686
686
|
top: -3rem;
|
|
687
687
|
right: 0;
|
|
@@ -691,23 +691,23 @@ const { ui } = Astro.props;
|
|
|
691
691
|
line-height: 1;
|
|
692
692
|
}
|
|
693
693
|
|
|
694
|
-
.vfe-lightbox-close:hover {
|
|
694
|
+
:global(.vfe-lightbox-close:hover) {
|
|
695
695
|
color: #fff;
|
|
696
696
|
}
|
|
697
697
|
|
|
698
|
-
.vfe-lightbox-img {
|
|
698
|
+
:global(.vfe-lightbox-img) {
|
|
699
699
|
max-width: 100%;
|
|
700
700
|
max-height: 70vh;
|
|
701
701
|
border-radius: 0.75rem;
|
|
702
702
|
box-shadow: 0 32px 80px rgba(0, 0, 0, 1);
|
|
703
703
|
}
|
|
704
704
|
|
|
705
|
-
.vfe-lightbox .vfe-btn-capture {
|
|
705
|
+
:global(.vfe-lightbox .vfe-btn-capture) {
|
|
706
706
|
padding: 0.875rem 2rem;
|
|
707
707
|
font-size: 0.95rem;
|
|
708
708
|
}
|
|
709
709
|
|
|
710
|
-
.vfe-hidden {
|
|
710
|
+
:global(.vfe-hidden) {
|
|
711
711
|
display: none;
|
|
712
712
|
}
|
|
713
713
|
</style>
|