softbuilders-react-video-player 1.1.8 → 1.1.10

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 (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
+ }