softbuilders-react-video-player 1.1.8 → 1.1.10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (64) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +126 -126
  3. package/dist/components/BigPlayButton/index.js +1 -1
  4. package/dist/components/BigPlayButton/index.js.map +1 -1
  5. package/dist/components/BigPlayButton/index.tsx +33 -31
  6. package/dist/components/BufferTracker/index.tsx +19 -19
  7. package/dist/components/ChapterTooltip/index.tsx +65 -65
  8. package/dist/components/ChaptersPanal/index.tsx +40 -40
  9. package/dist/components/ControlBar/index.d.ts +2 -1
  10. package/dist/components/ControlBar/index.js +21 -6
  11. package/dist/components/ControlBar/index.js.map +1 -1
  12. package/dist/components/ControlBar/index.tsx +150 -127
  13. package/dist/components/CreateNoteMenu/index.tsx +61 -61
  14. package/dist/components/CurrentTimeLabel/index.tsx +13 -13
  15. package/dist/components/CurrentTimeTracker/index.tsx +18 -18
  16. package/dist/components/Menu/index.tsx +49 -49
  17. package/dist/components/MenuButton/index.js +1 -1
  18. package/dist/components/MenuButton/index.js.map +1 -1
  19. package/dist/components/MenuButton/index.tsx +67 -67
  20. package/dist/components/NoteTooltip/index.tsx +46 -46
  21. package/dist/components/NotesPanal/index.tsx +34 -34
  22. package/dist/components/QualityMenu/index.js +2 -2
  23. package/dist/components/QualityMenu/index.js.map +1 -1
  24. package/dist/components/QualityMenu/index.tsx +122 -122
  25. package/dist/components/Slider/index.d.ts +1 -1
  26. package/dist/components/Slider/index.js +3 -3
  27. package/dist/components/Slider/index.js.map +1 -1
  28. package/dist/components/Slider/index.tsx +36 -37
  29. package/dist/components/Slider/style.css +49 -15
  30. package/dist/components/SoftBuildersVideoPlayer/index.js +1 -1
  31. package/dist/components/SoftBuildersVideoPlayer/index.js.map +1 -1
  32. package/dist/components/SoftBuildersVideoPlayer/index.tsx +110 -109
  33. package/dist/components/SubtitleMenu/index.js +2 -2
  34. package/dist/components/SubtitleMenu/index.js.map +1 -1
  35. package/dist/components/SubtitleMenu/index.tsx +107 -108
  36. package/dist/components/TimeSlider/index.js +13 -13
  37. package/dist/components/TimeSlider/index.tsx +107 -107
  38. package/dist/components/TimeSliderContainer/index.tsx +35 -35
  39. package/dist/components/Tooltip/index.tsx +16 -16
  40. package/dist/components/VideoPlayerComponent/index.d.ts +2 -1
  41. package/dist/components/VideoPlayerComponent/index.js +54 -38
  42. package/dist/components/VideoPlayerComponent/index.js.map +1 -1
  43. package/dist/components/VideoPlayerComponent/index.tsx +271 -249
  44. package/dist/components/VideoPlayerComponent/provider.tsx +82 -82
  45. package/dist/components/VideoPlayerComponent/style/style.css +36 -36
  46. package/dist/components/VolumeSlider/index.d.ts +4 -2
  47. package/dist/components/VolumeSlider/index.js +12 -2
  48. package/dist/components/VolumeSlider/index.js.map +1 -1
  49. package/dist/components/VolumeSlider/index.tsx +91 -52
  50. package/dist/components/icons/SubIcon.d.ts +3 -0
  51. package/dist/components/icons/SubIcon.js +4 -0
  52. package/dist/components/icons/SubIcon.js.map +1 -0
  53. package/dist/components/icons/SubIcon.tsx +28 -0
  54. package/dist/components/icons/index.d.ts +1 -0
  55. package/dist/components/icons/index.js +1 -0
  56. package/dist/components/icons/index.js.map +1 -1
  57. package/dist/components/icons/index.ts +15 -14
  58. package/dist/images/index.d.ts +1 -0
  59. package/dist/images/index.js +1 -0
  60. package/dist/images/index.js.map +1 -1
  61. package/dist/index.css +78 -3
  62. package/dist/index.mjs +276 -169
  63. package/dist/styles/tailwind.css +140 -87
  64. package/package.json +45 -45
@@ -498,281 +498,334 @@ video {
498
498
  /* Make elements with the HTML hidden attribute stay hidden by default */
499
499
  [hidden] {
500
500
  display: none;
501
- }
501
+ }
502
+ .sb-static {
503
+ position: static;
504
+ }
502
505
  .sb-absolute {
503
506
  position: absolute;
504
- }
507
+ }
505
508
  .sb-relative {
506
509
  position: relative;
507
- }
510
+ }
508
511
  .sb-bottom-10 {
509
512
  bottom: 2.5rem;
510
- }
513
+ }
511
514
  .sb-bottom-full {
512
515
  bottom: 100%;
513
- }
516
+ }
514
517
  .sb-left-0 {
515
518
  left: 0px;
516
- }
519
+ }
517
520
  .sb-left-1\/2 {
518
521
  left: 50%;
519
- }
522
+ }
520
523
  .sb-right-0 {
521
524
  right: 0px;
522
- }
525
+ }
523
526
  .sb-top-0 {
524
527
  top: 0px;
525
- }
528
+ }
529
+ .sb-top-1 {
530
+ top: 0.25rem;
531
+ }
532
+ .sb-top-2 {
533
+ top: 0.5rem;
534
+ }
526
535
  .sb-top-\[27\%\] {
527
536
  top: 27%;
528
- }
537
+ }
529
538
  .sb-z-10 {
530
539
  z-index: 10;
531
- }
540
+ }
532
541
  .sb-z-20 {
533
542
  z-index: 20;
534
- }
543
+ }
535
544
  .sb-z-30 {
536
545
  z-index: 30;
537
- }
546
+ }
538
547
  .sb-col-span-3 {
539
548
  grid-column: span 3 / span 3;
540
- }
549
+ }
541
550
  .sb-col-span-9 {
542
551
  grid-column: span 9 / span 9;
543
- }
552
+ }
544
553
  .sb-mb-2 {
545
554
  margin-bottom: 0.5rem;
546
- }
555
+ }
547
556
  .sb-flex {
548
557
  display: flex;
549
- }
558
+ }
550
559
  .sb-grid {
551
560
  display: grid;
552
- }
561
+ }
562
+ .sb-hidden {
563
+ display: none;
564
+ }
553
565
  .sb-h-1 {
554
566
  height: 0.25rem;
555
- }
567
+ }
556
568
  .sb-h-16 {
557
569
  height: 4rem;
558
- }
570
+ }
559
571
  .sb-h-2 {
560
572
  height: 0.5rem;
561
- }
573
+ }
562
574
  .sb-h-3 {
563
575
  height: 0.75rem;
564
- }
576
+ }
565
577
  .sb-h-4 {
566
578
  height: 1rem;
567
- }
579
+ }
568
580
  .sb-h-5 {
569
581
  height: 1.25rem;
570
- }
582
+ }
571
583
  .sb-h-\[\.1px\] {
572
584
  height: .1px;
573
- }
585
+ }
574
586
  .sb-h-full {
575
587
  height: 100%;
576
- }
588
+ }
589
+ .\!sb-w-16 {
590
+ width: 4rem !important;
591
+ }
577
592
  .sb-w-1 {
578
593
  width: 0.25rem;
579
- }
594
+ }
580
595
  .sb-w-16 {
581
596
  width: 4rem;
582
- }
597
+ }
583
598
  .sb-w-3 {
584
599
  width: 0.75rem;
585
- }
600
+ }
586
601
  .sb-w-4 {
587
602
  width: 1rem;
588
- }
603
+ }
589
604
  .sb-w-5 {
590
605
  width: 1.25rem;
591
- }
592
- .sb-w-\[10\%\] {
593
- width: 10%;
594
- }
606
+ }
595
607
  .sb-w-\[150px\] {
596
608
  width: 150px;
597
- }
609
+ }
598
610
  .sb-w-\[220px\] {
599
611
  width: 220px;
600
- }
612
+ }
613
+ .sb-w-\[22px\] {
614
+ width: 22px;
615
+ }
601
616
  .sb-w-\[30\%\] {
602
617
  width: 30%;
603
- }
618
+ }
604
619
  .sb-w-full {
605
620
  width: 100%;
606
- }
621
+ }
622
+ .-sb-translate-y-2 {
623
+ --tw-translate-y: -0.5rem;
624
+ 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));
625
+ }
607
626
  .sb--translate-x-1\/2 {
608
627
  --tw-translate-x: -50%;
609
628
  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));
610
- }
629
+ }
630
+ .sb-translate-y-0 {
631
+ --tw-translate-y: 0px;
632
+ 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));
633
+ }
634
+ .-sb-rotate-90 {
635
+ --tw-rotate: -90deg;
636
+ 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));
637
+ }
638
+ .sb-rotate-0 {
639
+ --tw-rotate: 0deg;
640
+ 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));
641
+ }
611
642
  .sb-transform {
612
643
  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));
613
- }
644
+ }
614
645
  .sb-cursor-pointer {
615
646
  cursor: pointer;
616
- }
647
+ }
617
648
  .sb-appearance-none {
618
649
  -webkit-appearance: none;
619
650
  -moz-appearance: none;
620
651
  appearance: none;
621
- }
652
+ }
622
653
  .sb-grid-cols-12 {
623
654
  grid-template-columns: repeat(12, minmax(0, 1fr));
624
- }
655
+ }
656
+ .\!sb-flex-row {
657
+ flex-direction: row !important;
658
+ }
625
659
  .sb-flex-row {
626
660
  flex-direction: row;
627
- }
661
+ }
628
662
  .sb-flex-col {
629
663
  flex-direction: column;
630
- }
664
+ }
665
+ .sb-flex-col-reverse {
666
+ flex-direction: column-reverse;
667
+ }
631
668
  .sb-items-start {
632
669
  align-items: flex-start;
633
- }
670
+ }
671
+ .\!sb-items-end {
672
+ align-items: flex-end !important;
673
+ }
674
+ .sb-items-end {
675
+ align-items: flex-end;
676
+ }
634
677
  .sb-items-center {
635
678
  align-items: center;
636
- }
679
+ }
680
+ .sb-justify-start {
681
+ justify-content: flex-start;
682
+ }
637
683
  .sb-justify-center {
638
684
  justify-content: center;
639
- }
685
+ }
640
686
  .sb-justify-between {
641
687
  justify-content: space-between;
642
- }
688
+ }
643
689
  .sb-gap-2 {
644
690
  gap: 0.5rem;
645
- }
691
+ }
646
692
  .sb-gap-3 {
647
693
  gap: 0.75rem;
648
- }
694
+ }
649
695
  .sb-gap-4 {
650
696
  gap: 1rem;
651
- }
697
+ }
652
698
  .sb-overflow-hidden {
653
699
  overflow: hidden;
654
- }
700
+ }
655
701
  .sb-whitespace-nowrap {
656
702
  white-space: nowrap;
657
- }
703
+ }
658
704
  .sb-rounded-full {
659
705
  border-radius: 9999px;
660
- }
706
+ }
661
707
  .sb-rounded-lg {
662
708
  border-radius: 0.5rem;
663
- }
709
+ }
664
710
  .sb-rounded-md {
665
711
  border-radius: 0.375rem;
666
- }
712
+ }
667
713
  .sb-border {
668
714
  border-width: 1px;
669
- }
715
+ }
670
716
  .sb-border-\[\#AAAAAA\] {
671
717
  --tw-border-opacity: 1;
672
718
  border-color: rgb(170 170 170 / var(--tw-border-opacity));
673
- }
719
+ }
674
720
  .sb-bg-\[\#303030\] {
675
721
  --tw-bg-opacity: 1;
676
722
  background-color: rgb(48 48 48 / var(--tw-bg-opacity));
677
- }
723
+ }
678
724
  .sb-bg-\[\#AAAAAA\] {
679
725
  --tw-bg-opacity: 1;
680
726
  background-color: rgb(170 170 170 / var(--tw-bg-opacity));
681
- }
727
+ }
682
728
  .sb-bg-orange-500 {
683
729
  --tw-bg-opacity: 1;
684
730
  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
685
- }
731
+ }
686
732
  .sb-bg-slate-400 {
687
733
  --tw-bg-opacity: 1;
688
734
  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
689
- }
735
+ }
690
736
  .sb-bg-transparent {
691
737
  background-color: transparent;
692
- }
738
+ }
693
739
  .sb-bg-white {
694
740
  --tw-bg-opacity: 1;
695
741
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
696
- }
742
+ }
697
743
  .sb-bg-white\/30 {
698
744
  background-color: rgb(255 255 255 / 0.3);
699
- }
745
+ }
700
746
  .sb-bg-opacity-50 {
701
747
  --tw-bg-opacity: 0.5;
702
- }
748
+ }
703
749
  .sb-bg-opacity-70 {
704
750
  --tw-bg-opacity: 0.7;
705
- }
751
+ }
706
752
  .sb-p-2 {
707
753
  padding: 0.5rem;
708
- }
754
+ }
755
+ .sb-px-2 {
756
+ padding-left: 0.5rem;
757
+ padding-right: 0.5rem;
758
+ }
709
759
  .sb-px-4 {
710
760
  padding-left: 1rem;
711
761
  padding-right: 1rem;
712
- }
762
+ }
713
763
  .sb-px-5 {
714
764
  padding-left: 1.25rem;
715
765
  padding-right: 1.25rem;
716
- }
766
+ }
717
767
  .sb-py-3 {
718
768
  padding-top: 0.75rem;
719
769
  padding-bottom: 0.75rem;
720
- }
770
+ }
721
771
  .sb-py-5 {
722
772
  padding-top: 1.25rem;
723
773
  padding-bottom: 1.25rem;
724
- }
774
+ }
725
775
  .sb-text-left {
726
776
  text-align: left;
727
- }
777
+ }
728
778
  .sb-text-center {
729
779
  text-align: center;
730
- }
780
+ }
731
781
  .sb-font-bold {
732
782
  font-weight: 700;
733
- }
783
+ }
734
784
  .sb-text-white {
735
785
  --tw-text-opacity: 1;
736
786
  color: rgb(255 255 255 / var(--tw-text-opacity));
737
- }
787
+ }
738
788
  .sb-shadow-lg {
739
789
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
740
790
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
741
791
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
742
- }
792
+ }
743
793
  .sb-backdrop-blur-lg {
744
794
  --tw-backdrop-blur: blur(16px);
745
795
  -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);
746
796
  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);
747
- }
797
+ }
748
798
  .sb-transition-all {
749
799
  transition-property: all;
750
800
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
751
801
  transition-duration: 150ms;
752
- }
802
+ }
753
803
  .sb-duration-500 {
754
804
  transition-duration: 500ms;
755
- }
805
+ }
756
806
  .sb-ease-in-out {
757
807
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
758
- }
808
+ }
759
809
  .placeholder\:sb-text-white::-moz-placeholder {
760
810
  --tw-text-opacity: 1;
761
811
  color: rgb(255 255 255 / var(--tw-text-opacity));
762
- }
812
+ }
763
813
  .placeholder\:sb-text-white::placeholder {
764
814
  --tw-text-opacity: 1;
765
815
  color: rgb(255 255 255 / var(--tw-text-opacity));
766
- }
816
+ }
767
817
  .hover\:sb-w-\[45\%\]:hover {
768
818
  width: 45%;
769
- }
819
+ }
770
820
  .hover\:sb-scale-150:hover {
771
821
  --tw-scale-x: 1.5;
772
822
  --tw-scale-y: 1.5;
773
823
  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));
774
- }
824
+ }
825
+ .hover\:sb-cursor-pointer:hover {
826
+ cursor: pointer;
827
+ }
775
828
  .hover\:sb-text-orange-500:hover {
776
829
  --tw-text-opacity: 1;
777
830
  color: rgb(249 115 22 / var(--tw-text-opacity));
778
- }
831
+ }
package/package.json CHANGED
@@ -1,45 +1,45 @@
1
- {
2
- "name": "softbuilders-react-video-player",
3
- "description": "Standalone video player component",
4
- "version": "1.1.8",
5
- "main": "dist/index.js",
6
- "types": "dist/index.d.ts",
7
- "files": [
8
- "dist",
9
- "dist/styles/tailwind.css"
10
- ],
11
- "scripts": {
12
- "build:css": "npx postcss src/styles/tailwind.css -o dist/styles/tailwind.css && npx postcss src/components/Slider/style.css -o dist/components/Slider/style.css && npx postcss src/components/VideoPlayerComponent/style/style.css -o dist/components/VideoPlayerComponent/style/style.css",
13
- "build:css:watch": "npx postcss src/styles/tailwind.css -o dist/styles/tailwind.css --watch && npx postcss src/components/Slider/style.css -o dist/components/Slider/style.css --watch && npx postcss src/components/VideoPlayerComponent/style/style.css -o dist/components/VideoPlayerComponent/style/style.css --watch",
14
- "build": "tsup src/index.ts --dts --format esm,cjs --out-dir dist && copyfiles -u 1 src/components/**/* dist && npm run build:css && tsc",
15
- "build:watch": "tsc --watch",
16
- "start": "concurrently \"npm run build:css:watch\" \"npm run build:watch\"",
17
- "build:icons": "svgr src/images/icons --out-dir src/components/icons"
18
- },
19
- "keywords": [],
20
- "author": "",
21
- "license": "ISC",
22
- "peerDependencies": {
23
- "react": "^18.3.1",
24
- "react-dom": "^18.3.1",
25
- "video.js": "^8.18.0"
26
- },
27
- "dependencies": {
28
- "typescript": "^5.6.2"
29
- },
30
- "devDependencies": {
31
- "@svgr/webpack": "^8.1.0",
32
- "@types/react": "^18.3.5",
33
- "@svgr/cli": "^8.1.0",
34
- "@swc/core": "^1.7.26",
35
- "@types/react-dom": "^18.3.0",
36
- "autoprefixer": "^10.4.20",
37
- "concurrently": "^9.0.1",
38
- "postcss": "^8.4.45",
39
- "postcss-cli": "^11.0.0",
40
- "tailwindcss": "^3.4.11",
41
- "typescript": "^5.6.2",
42
- "copyfiles": "^2.4.1",
43
- "tsup": "^8.2.4"
44
- }
45
- }
1
+ {
2
+ "name": "softbuilders-react-video-player",
3
+ "description": "Standalone video player component",
4
+ "version": "1.1.10",
5
+ "main": "dist/index.js",
6
+ "types": "dist/index.d.ts",
7
+ "files": [
8
+ "dist",
9
+ "dist/styles/tailwind.css"
10
+ ],
11
+ "scripts": {
12
+ "build:css": "npx postcss src/styles/tailwind.css -o dist/styles/tailwind.css && npx postcss src/components/Slider/style.css -o dist/components/Slider/style.css && npx postcss src/components/VideoPlayerComponent/style/style.css -o dist/components/VideoPlayerComponent/style/style.css",
13
+ "build:css:watch": "npx postcss src/styles/tailwind.css -o dist/styles/tailwind.css --watch && npx postcss src/components/Slider/style.css -o dist/components/Slider/style.css --watch && npx postcss src/components/VideoPlayerComponent/style/style.css -o dist/components/VideoPlayerComponent/style/style.css --watch",
14
+ "build": "tsup src/index.ts --dts --format esm,cjs --out-dir dist && copyfiles -u 1 src/components/**/* dist && npm run build:css && tsc",
15
+ "build:watch": "tsc --watch",
16
+ "start": "concurrently \"npm run build:css:watch\" \"npm run build:watch\"",
17
+ "build:icons": "svgr src/images/icons --out-dir src/components/icons"
18
+ },
19
+ "keywords": [],
20
+ "author": "",
21
+ "license": "ISC",
22
+ "peerDependencies": {
23
+ "react": "^18.3.1",
24
+ "react-dom": "^18.3.1",
25
+ "video.js": "^8.18.0"
26
+ },
27
+ "dependencies": {
28
+ "typescript": "^5.6.2"
29
+ },
30
+ "devDependencies": {
31
+ "@svgr/cli": "^8.1.0",
32
+ "@svgr/webpack": "^8.1.0",
33
+ "@swc/core": "^1.7.26",
34
+ "@types/react": "^18.3.5",
35
+ "@types/react-dom": "^18.3.0",
36
+ "autoprefixer": "^10.4.20",
37
+ "concurrently": "^9.0.1",
38
+ "copyfiles": "^2.4.1",
39
+ "postcss": "^8.4.45",
40
+ "postcss-cli": "^11.0.0",
41
+ "tailwindcss": "^3.4.11",
42
+ "tsup": "^8.2.4",
43
+ "typescript": "^5.6.2"
44
+ }
45
+ }