softbuilders-react-video-player 1.1.68 → 1.1.70

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 (33) hide show
  1. package/LICENSE +21 -21
  2. package/dist/components/ChapterTooltip/index.tsx +65 -65
  3. package/dist/components/ControlBar/index.js +15 -2
  4. package/dist/components/ControlBar/index.js.map +1 -1
  5. package/dist/components/ControlBar/index.tsx +32 -1
  6. package/dist/components/CreateNoteMenu/index.d.ts +3 -1
  7. package/dist/components/CreateNoteMenu/index.js +2 -2
  8. package/dist/components/CreateNoteMenu/index.js.map +1 -1
  9. package/dist/components/CreateNoteMenu/index.tsx +6 -0
  10. package/dist/components/CurrentTimeLabel/index.tsx +13 -13
  11. package/dist/components/Menu/index.tsx +49 -49
  12. package/dist/components/MenuButton/index.d.ts +3 -1
  13. package/dist/components/MenuButton/index.js +2 -2
  14. package/dist/components/MenuButton/index.js.map +1 -1
  15. package/dist/components/MenuButton/index.tsx +9 -1
  16. package/dist/components/NoteTooltip/index.tsx +46 -46
  17. package/dist/components/SubtitleMenu/index.d.ts +3 -1
  18. package/dist/components/SubtitleMenu/index.js +2 -2
  19. package/dist/components/SubtitleMenu/index.js.map +1 -1
  20. package/dist/components/SubtitleMenu/index.tsx +10 -1
  21. package/dist/components/TimeSliderContainer/index.tsx +1 -1
  22. package/dist/components/Tooltip/index.d.ts +3 -2
  23. package/dist/components/Tooltip/index.js +10 -2
  24. package/dist/components/Tooltip/index.js.map +1 -1
  25. package/dist/components/Tooltip/index.tsx +34 -16
  26. package/dist/components/VideoPlayerComponent/index.js +3 -2
  27. package/dist/components/VideoPlayerComponent/index.js.map +1 -1
  28. package/dist/components/VideoPlayerComponent/index.tsx +3 -2
  29. package/dist/components/VideoPlayerComponent/provider.tsx +82 -82
  30. package/dist/index.css +52 -4
  31. package/dist/index.mjs +90 -36
  32. package/dist/styles/tailwind.css +175 -130
  33. package/package.json +1 -1
@@ -498,417 +498,462 @@ video {
498
498
  /* Make elements with the HTML hidden attribute stay hidden by default */
499
499
  [hidden] {
500
500
  display: none;
501
- }
501
+ }
502
502
  .sb-visible {
503
503
  visibility: visible;
504
- }
504
+ }
505
505
  .sb-invisible {
506
506
  visibility: hidden;
507
- }
507
+ }
508
508
  .sb-static {
509
509
  position: static;
510
- }
510
+ }
511
511
  .sb-absolute {
512
512
  position: absolute;
513
- }
513
+ }
514
514
  .sb-relative {
515
515
  position: relative;
516
- }
516
+ }
517
517
  .\!sb-top-8 {
518
518
  top: 2rem !important;
519
- }
519
+ }
520
520
  .-sb-left-9 {
521
521
  left: -2.25rem;
522
- }
522
+ }
523
523
  .-sb-left-\[9\.75rem\] {
524
524
  left: -9.75rem;
525
- }
525
+ }
526
526
  .-sb-top-1 {
527
527
  top: -0.25rem;
528
- }
528
+ }
529
529
  .sb-bottom-0 {
530
530
  bottom: 0px;
531
- }
531
+ }
532
532
  .sb-bottom-1 {
533
533
  bottom: 0.25rem;
534
- }
534
+ }
535
535
  .sb-bottom-10 {
536
536
  bottom: 2.5rem;
537
- }
537
+ }
538
538
  .sb-bottom-2 {
539
539
  bottom: 0.5rem;
540
- }
540
+ }
541
541
  .sb-bottom-full {
542
542
  bottom: 100%;
543
- }
543
+ }
544
544
  .sb-left-0 {
545
545
  left: 0px;
546
- }
546
+ }
547
547
  .sb-left-1\/2 {
548
548
  left: 50%;
549
- }
549
+ }
550
+ .sb-left-full {
551
+ left: 100%;
552
+ }
550
553
  .sb-right-0 {
551
554
  right: 0px;
552
- }
555
+ }
556
+ .sb-right-full {
557
+ right: 100%;
558
+ }
553
559
  .sb-top-0 {
554
560
  top: 0px;
555
- }
561
+ }
556
562
  .sb-top-1 {
557
563
  top: 0.25rem;
558
- }
564
+ }
565
+ .sb-top-1\/2 {
566
+ top: 50%;
567
+ }
559
568
  .sb-top-2 {
560
569
  top: 0.5rem;
561
- }
570
+ }
562
571
  .sb-top-\[27\%\] {
563
572
  top: 27%;
564
- }
573
+ }
574
+ .sb-top-full {
575
+ top: 100%;
576
+ }
565
577
  .sb-z-10 {
566
578
  z-index: 10;
567
- }
579
+ }
568
580
  .sb-z-20 {
569
581
  z-index: 20;
570
- }
582
+ }
571
583
  .sb-z-30 {
572
584
  z-index: 30;
573
- }
585
+ }
586
+ .sb-z-50 {
587
+ z-index: 50;
588
+ }
574
589
  .sb-col-span-3 {
575
590
  grid-column: span 3 / span 3;
576
- }
591
+ }
577
592
  .sb-col-span-9 {
578
593
  grid-column: span 9 / span 9;
579
- }
594
+ }
580
595
  .sb-mb-1 {
581
596
  margin-bottom: 0.25rem;
582
- }
597
+ }
583
598
  .sb-mb-2 {
584
599
  margin-bottom: 0.5rem;
585
- }
600
+ }
586
601
  .sb-ml-0 {
587
602
  margin-left: 0px;
588
- }
603
+ }
604
+ .sb-ml-2 {
605
+ margin-left: 0.5rem;
606
+ }
589
607
  .sb-mr-0 {
590
608
  margin-right: 0px;
591
- }
609
+ }
610
+ .sb-mr-2 {
611
+ margin-right: 0.5rem;
612
+ }
613
+ .sb-mt-2 {
614
+ margin-top: 0.5rem;
615
+ }
592
616
  .sb-flex {
593
617
  display: flex;
594
- }
618
+ }
595
619
  .sb-grid {
596
620
  display: grid;
597
- }
621
+ }
598
622
  .sb-h-1 {
599
623
  height: 0.25rem;
600
- }
624
+ }
601
625
  .sb-h-16 {
602
626
  height: 4rem;
603
- }
627
+ }
604
628
  .sb-h-2 {
605
629
  height: 0.5rem;
606
- }
630
+ }
607
631
  .sb-h-3 {
608
632
  height: 0.75rem;
609
- }
633
+ }
610
634
  .sb-h-4 {
611
635
  height: 1rem;
612
- }
636
+ }
613
637
  .sb-h-5 {
614
638
  height: 1.25rem;
615
- }
639
+ }
616
640
  .sb-h-\[\.1px\] {
617
641
  height: .1px;
618
- }
642
+ }
619
643
  .sb-h-\[3px\] {
620
644
  height: 3px;
621
- }
645
+ }
622
646
  .sb-h-full {
623
647
  height: 100%;
624
- }
648
+ }
625
649
  .\!sb-w-16 {
626
650
  width: 4rem !important;
627
- }
651
+ }
628
652
  .sb-w-1 {
629
653
  width: 0.25rem;
630
- }
654
+ }
631
655
  .sb-w-16 {
632
656
  width: 4rem;
633
- }
657
+ }
634
658
  .sb-w-3 {
635
659
  width: 0.75rem;
636
- }
660
+ }
637
661
  .sb-w-4 {
638
662
  width: 1rem;
639
- }
663
+ }
640
664
  .sb-w-5 {
641
665
  width: 1.25rem;
642
- }
666
+ }
643
667
  .sb-w-\[150px\] {
644
668
  width: 150px;
645
- }
669
+ }
646
670
  .sb-w-\[220px\] {
647
671
  width: 220px;
648
- }
672
+ }
649
673
  .sb-w-\[22px\] {
650
674
  width: 22px;
651
- }
675
+ }
652
676
  .sb-w-\[90px\] {
653
677
  width: 90px;
654
- }
678
+ }
655
679
  .sb-w-full {
656
680
  width: 100%;
657
- }
681
+ }
658
682
  .sb-flex-1 {
659
683
  flex: 1 1 0%;
660
- }
684
+ }
661
685
  .sb-border-spacing-x-2 {
662
686
  --tw-border-spacing-x: 0.5rem;
663
687
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
664
- }
688
+ }
689
+ .-sb-translate-x-1\/2 {
690
+ --tw-translate-x: -50%;
691
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
692
+ }
665
693
  .-sb-translate-y-0 {
666
694
  --tw-translate-y: -0px;
667
695
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
668
- }
696
+ }
669
697
  .-sb-translate-y-1 {
670
698
  --tw-translate-y: -0.25rem;
671
699
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
672
- }
673
- .sb--translate-x-1\/2 {
674
- --tw-translate-x: -50%;
700
+ }
701
+ .-sb-translate-y-1\/2 {
702
+ --tw-translate-y: -50%;
675
703
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
676
- }
704
+ }
677
705
  .sb-translate-y-0 {
678
706
  --tw-translate-y: 0px;
679
707
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
680
- }
708
+ }
681
709
  .sb-translate-y-1 {
682
710
  --tw-translate-y: 0.25rem;
683
711
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
684
- }
712
+ }
685
713
  .-sb-rotate-90 {
686
714
  --tw-rotate: -90deg;
687
715
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
688
- }
716
+ }
689
717
  .sb-rotate-0 {
690
718
  --tw-rotate: 0deg;
691
719
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
692
- }
720
+ }
693
721
  .sb-rotate-90 {
694
722
  --tw-rotate: 90deg;
695
723
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
696
- }
724
+ }
697
725
  .sb-transform {
698
726
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
699
- }
727
+ }
700
728
  .sb-cursor-pointer {
701
729
  cursor: pointer;
702
- }
730
+ }
703
731
  .sb-appearance-none {
704
732
  -webkit-appearance: none;
705
733
  -moz-appearance: none;
706
734
  appearance: none;
707
- }
735
+ }
708
736
  .sb-grid-cols-12 {
709
737
  grid-template-columns: repeat(12, minmax(0, 1fr));
710
- }
738
+ }
711
739
  .\!sb-flex-row {
712
740
  flex-direction: row !important;
713
- }
741
+ }
714
742
  .sb-flex-row {
715
743
  flex-direction: row;
716
- }
744
+ }
717
745
  .sb-flex-col {
718
746
  flex-direction: column;
719
- }
747
+ }
720
748
  .sb-flex-col-reverse {
721
749
  flex-direction: column-reverse;
722
- }
750
+ }
723
751
  .\!sb-items-start {
724
752
  align-items: flex-start !important;
725
- }
753
+ }
726
754
  .sb-items-start {
727
755
  align-items: flex-start;
728
- }
756
+ }
729
757
  .sb-items-end {
730
758
  align-items: flex-end;
731
- }
759
+ }
732
760
  .sb-items-center {
733
761
  align-items: center;
734
- }
762
+ }
735
763
  .\!sb-justify-start {
736
764
  justify-content: flex-start !important;
737
- }
765
+ }
738
766
  .sb-justify-center {
739
767
  justify-content: center;
740
- }
768
+ }
741
769
  .sb-justify-between {
742
770
  justify-content: space-between;
743
- }
771
+ }
744
772
  .sb-gap-1 {
745
773
  gap: 0.25rem;
746
- }
774
+ }
747
775
  .sb-gap-2 {
748
776
  gap: 0.5rem;
749
- }
777
+ }
750
778
  .sb-gap-3 {
751
779
  gap: 0.75rem;
752
- }
780
+ }
753
781
  .sb-gap-4 {
754
782
  gap: 1rem;
755
- }
783
+ }
756
784
  .sb-overflow-hidden {
757
785
  overflow: hidden;
758
- }
759
- .sb-whitespace-nowrap {
760
- white-space: nowrap;
761
- }
786
+ }
787
+ .sb-rounded {
788
+ border-radius: 0.25rem;
789
+ }
762
790
  .sb-rounded-full {
763
791
  border-radius: 9999px;
764
- }
792
+ }
765
793
  .sb-rounded-lg {
766
794
  border-radius: 0.5rem;
767
- }
795
+ }
768
796
  .sb-rounded-md {
769
797
  border-radius: 0.375rem;
770
- }
798
+ }
771
799
  .sb-border {
772
800
  border-width: 1px;
773
- }
801
+ }
774
802
  .sb-border-\[\#AAAAAA\] {
775
803
  --tw-border-opacity: 1;
776
804
  border-color: rgb(170 170 170 / var(--tw-border-opacity));
777
- }
805
+ }
778
806
  .sb-bg-\[\#303030\] {
779
807
  --tw-bg-opacity: 1;
780
808
  background-color: rgb(48 48 48 / var(--tw-bg-opacity));
781
- }
809
+ }
782
810
  .sb-bg-\[\#AAAAAA\] {
783
811
  --tw-bg-opacity: 1;
784
812
  background-color: rgb(170 170 170 / var(--tw-bg-opacity));
785
- }
813
+ }
786
814
  .sb-bg-\[red\] {
787
815
  --tw-bg-opacity: 1;
788
816
  background-color: rgb(255 0 0 / var(--tw-bg-opacity));
789
- }
817
+ }
818
+ .sb-bg-black {
819
+ --tw-bg-opacity: 1;
820
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
821
+ }
790
822
  .sb-bg-orange-500 {
791
823
  --tw-bg-opacity: 1;
792
824
  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
793
- }
825
+ }
794
826
  .sb-bg-slate-400 {
795
827
  --tw-bg-opacity: 1;
796
828
  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
797
- }
829
+ }
798
830
  .sb-bg-transparent {
799
831
  background-color: transparent;
800
- }
832
+ }
801
833
  .sb-bg-white {
802
834
  --tw-bg-opacity: 1;
803
835
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
804
- }
836
+ }
805
837
  .sb-bg-white\/30 {
806
838
  background-color: rgb(255 255 255 / 0.3);
807
- }
839
+ }
808
840
  .sb-bg-opacity-50 {
809
841
  --tw-bg-opacity: 0.5;
810
- }
842
+ }
811
843
  .sb-bg-opacity-70 {
812
844
  --tw-bg-opacity: 0.7;
813
- }
845
+ }
814
846
  .sb-p-2 {
815
847
  padding: 0.5rem;
816
- }
848
+ }
817
849
  .\!sb-px-4 {
818
850
  padding-left: 1rem !important;
819
851
  padding-right: 1rem !important;
820
- }
852
+ }
853
+ .sb-px-2 {
854
+ padding-left: 0.5rem;
855
+ padding-right: 0.5rem;
856
+ }
821
857
  .sb-px-4 {
822
858
  padding-left: 1rem;
823
859
  padding-right: 1rem;
824
- }
860
+ }
825
861
  .sb-px-5 {
826
862
  padding-left: 1.25rem;
827
863
  padding-right: 1.25rem;
828
- }
864
+ }
829
865
  .sb-py-1 {
830
866
  padding-top: 0.25rem;
831
867
  padding-bottom: 0.25rem;
832
- }
868
+ }
833
869
  .sb-py-3 {
834
870
  padding-top: 0.75rem;
835
871
  padding-bottom: 0.75rem;
836
- }
872
+ }
837
873
  .sb-py-5 {
838
874
  padding-top: 1.25rem;
839
875
  padding-bottom: 1.25rem;
840
- }
876
+ }
841
877
  .sb-pb-2 {
842
878
  padding-bottom: 0.5rem;
843
- }
879
+ }
844
880
  .sb-pt-2 {
845
881
  padding-top: 0.5rem;
846
- }
882
+ }
847
883
  .sb-text-left {
848
884
  text-align: left;
849
- }
885
+ }
850
886
  .sb-text-center {
851
887
  text-align: center;
852
- }
888
+ }
889
+ .sb-text-sm {
890
+ font-size: 0.875rem;
891
+ line-height: 1.25rem;
892
+ }
853
893
  .sb-font-bold {
854
894
  font-weight: 700;
855
- }
895
+ }
856
896
  .sb-text-white {
857
897
  --tw-text-opacity: 1;
858
898
  color: rgb(255 255 255 / var(--tw-text-opacity));
859
- }
899
+ }
860
900
  .sb-opacity-0 {
861
901
  opacity: 0;
862
- }
902
+ }
863
903
  .sb-opacity-100 {
864
904
  opacity: 1;
865
- }
905
+ }
866
906
  .sb-shadow-lg {
867
907
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
868
908
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
869
909
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
870
- }
910
+ }
911
+ .sb-shadow-md {
912
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
913
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
914
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
915
+ }
871
916
  .sb-backdrop-blur-lg {
872
917
  --tw-backdrop-blur: blur(16px);
873
918
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
874
919
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
875
- }
920
+ }
876
921
  .sb-transition-all {
877
922
  transition-property: all;
878
923
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
879
924
  transition-duration: 150ms;
880
- }
925
+ }
881
926
  .sb-transition-opacity {
882
927
  transition-property: opacity;
883
928
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
884
929
  transition-duration: 150ms;
885
- }
930
+ }
886
931
  .sb-duration-500 {
887
932
  transition-duration: 500ms;
888
- }
933
+ }
889
934
  .sb-ease-in-out {
890
935
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
891
- }
936
+ }
892
937
  .placeholder\:sb-text-white::-moz-placeholder {
893
938
  --tw-text-opacity: 1;
894
939
  color: rgb(255 255 255 / var(--tw-text-opacity));
895
- }
940
+ }
896
941
  .placeholder\:sb-text-white::placeholder {
897
942
  --tw-text-opacity: 1;
898
943
  color: rgb(255 255 255 / var(--tw-text-opacity));
899
- }
944
+ }
900
945
  .hover\:sb-w-\[45\%\]:hover {
901
946
  width: 45%;
902
- }
947
+ }
903
948
  .hover\:sb-scale-150:hover {
904
949
  --tw-scale-x: 1.5;
905
950
  --tw-scale-y: 1.5;
906
951
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
907
- }
952
+ }
908
953
  .hover\:sb-cursor-pointer:hover {
909
954
  cursor: pointer;
910
- }
955
+ }
911
956
  .hover\:sb-text-orange-500:hover {
912
957
  --tw-text-opacity: 1;
913
958
  color: rgb(249 115 22 / var(--tw-text-opacity));
914
- }
959
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "softbuilders-react-video-player",
3
3
  "description": "Standalone video player component",
4
- "version": "1.1.68",
4
+ "version": "1.1.70",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "files": [