softbuilders-react-video-player 1.1.16 → 1.1.18

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,16 +1,16 @@
1
- import React from "react";
2
-
3
- type Props = {
4
- open: boolean;
5
- children: React.ReactNode;
6
- };
7
- const Tooltip = ({ open, children }: Props) => {
8
- if (!open) return null;
9
- return (
10
- <div className="sb-absolute sb-bottom-full sb-mb-2 sb-left-1/2 sb-transform sb--translate-x-1/2 sb-z-10 sb-whitespace-nowrap">
11
- {children}
12
- </div>
13
- );
14
- };
15
-
16
- export default Tooltip;
1
+ import React from "react";
2
+
3
+ type Props = {
4
+ open: boolean;
5
+ children: React.ReactNode;
6
+ };
7
+ const Tooltip = ({ open, children }: Props) => {
8
+ if (!open) return null;
9
+ return (
10
+ <div className="sb-absolute sb-bottom-full sb-mb-2 sb-left-1/2 sb-transform sb--translate-x-1/2 sb-z-10 sb-whitespace-nowrap">
11
+ {children}
12
+ </div>
13
+ );
14
+ };
15
+
16
+ export default Tooltip;
@@ -1,82 +1,82 @@
1
- import React, {
2
- createContext,
3
- useContext,
4
- useState,
5
- ReactNode,
6
- useEffect,
7
- } from "react";
8
- import Player from "video.js/dist/types/player";
9
-
10
- interface SoftBuildersVideoPlayerContextType {
11
- player: Player | undefined;
12
- setPlayer: React.Dispatch<React.SetStateAction<Player | undefined>>;
13
-
14
- currentTime: number;
15
- setCurrentTime: (value: number) => void;
16
-
17
- duration: number;
18
- setDuration: React.Dispatch<React.SetStateAction<number>>;
19
-
20
- // isPaused: boolean;
21
- // setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
22
-
23
- downloadedBufferPercentage: number;
24
- downloadedBufferTime: number;
25
- setDownloadedBufferTimeufferTime: React.Dispatch<
26
- React.SetStateAction<number>
27
- >;
28
- }
29
-
30
- const SoftBuildersVideoPlayerContext = createContext<
31
- SoftBuildersVideoPlayerContextType | undefined
32
- >(undefined);
33
-
34
- // Create a provider component
35
- export const SoftBuildersVideoPlayerProvider = ({
36
- children,
37
- }: {
38
- children: ReactNode;
39
- }) => {
40
- const [player, setPlayer] = useState<Player | undefined>(undefined);
41
- const [currentTime, setCurrentTime] = useState<number>(0);
42
- const [duration, setDuration] = useState<number>(1);
43
- // const [isPaused, setIsPaused] = useState(false);
44
- const [downloadedBufferTime, setDownloadedBufferTimeufferTime] = useState(0);
45
- const [downloadedBufferPercentage, setDownloadedBufferPercentage] =
46
- useState(0);
47
-
48
- useEffect(() => {
49
- setDownloadedBufferPercentage((downloadedBufferTime * 100) / duration);
50
- }, [downloadedBufferTime]);
51
-
52
- return (
53
- <SoftBuildersVideoPlayerContext.Provider
54
- value={{
55
- player,
56
- setPlayer,
57
- duration,
58
- setDuration,
59
- currentTime,
60
- setCurrentTime: (value) => setCurrentTime(Math.floor(value)),
61
- // isPaused,
62
- // setIsPaused,
63
- downloadedBufferTime,
64
- setDownloadedBufferTimeufferTime,
65
- downloadedBufferPercentage,
66
- }}
67
- >
68
- {children}
69
- </SoftBuildersVideoPlayerContext.Provider>
70
- );
71
- };
72
-
73
- // Custom hook to use the context
74
- export const useSoftBuildersVideoPlayerContext = () => {
75
- const context = useContext(SoftBuildersVideoPlayerContext);
76
- if (!context) {
77
- throw new Error(
78
- "useSoftBuildersVideoPlayerContext must be used within an SoftBuildersVideoPlayerProvider"
79
- );
80
- }
81
- return context;
82
- };
1
+ import React, {
2
+ createContext,
3
+ useContext,
4
+ useState,
5
+ ReactNode,
6
+ useEffect,
7
+ } from "react";
8
+ import Player from "video.js/dist/types/player";
9
+
10
+ interface SoftBuildersVideoPlayerContextType {
11
+ player: Player | undefined;
12
+ setPlayer: React.Dispatch<React.SetStateAction<Player | undefined>>;
13
+
14
+ currentTime: number;
15
+ setCurrentTime: (value: number) => void;
16
+
17
+ duration: number;
18
+ setDuration: React.Dispatch<React.SetStateAction<number>>;
19
+
20
+ // isPaused: boolean;
21
+ // setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
22
+
23
+ downloadedBufferPercentage: number;
24
+ downloadedBufferTime: number;
25
+ setDownloadedBufferTimeufferTime: React.Dispatch<
26
+ React.SetStateAction<number>
27
+ >;
28
+ }
29
+
30
+ const SoftBuildersVideoPlayerContext = createContext<
31
+ SoftBuildersVideoPlayerContextType | undefined
32
+ >(undefined);
33
+
34
+ // Create a provider component
35
+ export const SoftBuildersVideoPlayerProvider = ({
36
+ children,
37
+ }: {
38
+ children: ReactNode;
39
+ }) => {
40
+ const [player, setPlayer] = useState<Player | undefined>(undefined);
41
+ const [currentTime, setCurrentTime] = useState<number>(0);
42
+ const [duration, setDuration] = useState<number>(1);
43
+ // const [isPaused, setIsPaused] = useState(false);
44
+ const [downloadedBufferTime, setDownloadedBufferTimeufferTime] = useState(0);
45
+ const [downloadedBufferPercentage, setDownloadedBufferPercentage] =
46
+ useState(0);
47
+
48
+ useEffect(() => {
49
+ setDownloadedBufferPercentage((downloadedBufferTime * 100) / duration);
50
+ }, [downloadedBufferTime]);
51
+
52
+ return (
53
+ <SoftBuildersVideoPlayerContext.Provider
54
+ value={{
55
+ player,
56
+ setPlayer,
57
+ duration,
58
+ setDuration,
59
+ currentTime,
60
+ setCurrentTime: (value) => setCurrentTime(Math.floor(value)),
61
+ // isPaused,
62
+ // setIsPaused,
63
+ downloadedBufferTime,
64
+ setDownloadedBufferTimeufferTime,
65
+ downloadedBufferPercentage,
66
+ }}
67
+ >
68
+ {children}
69
+ </SoftBuildersVideoPlayerContext.Provider>
70
+ );
71
+ };
72
+
73
+ // Custom hook to use the context
74
+ export const useSoftBuildersVideoPlayerContext = () => {
75
+ const context = useContext(SoftBuildersVideoPlayerContext);
76
+ if (!context) {
77
+ throw new Error(
78
+ "useSoftBuildersVideoPlayerContext must be used within an SoftBuildersVideoPlayerProvider"
79
+ );
80
+ }
81
+ return context;
82
+ };
@@ -1,36 +1,36 @@
1
- .video-js .vjs-control-bar {
2
- background-color: transparent;
3
- display: none;
4
- }
5
-
6
- .video-js .vjs-big-play-button {
7
- background-color: transparent;
8
- display: block;
9
- border: none;
10
- padding: 0px;
11
- opacity: 0;
12
- transition: opacity 0.5s ease-in-out;
13
- }
14
-
15
- .video-js:hover .vjs-big-play-button {
16
- background-color: transparent;
17
- border: none;
18
- padding: 0px;
19
- opacity: 1;
20
- transition: opacity 0.5s ease-in-out;
21
- }
22
-
23
- .vjs-poster {
24
- display: inline-block;
25
- vertical-align: middle;
26
- cursor: pointer;
27
- margin: 0;
28
- padding: 0;
29
- position: absolute;
30
- top: 0;
31
- right: 0;
32
- bottom: 0;
33
- left: 0;
34
- height: 100%;
35
- background-color: black;
36
- }
1
+ .video-js .vjs-control-bar {
2
+ background-color: transparent;
3
+ display: none;
4
+ }
5
+
6
+ .video-js .vjs-big-play-button {
7
+ background-color: transparent;
8
+ display: block;
9
+ border: none;
10
+ padding: 0px;
11
+ opacity: 0;
12
+ transition: opacity 0.5s ease-in-out;
13
+ }
14
+
15
+ .video-js:hover .vjs-big-play-button {
16
+ background-color: transparent;
17
+ border: none;
18
+ padding: 0px;
19
+ opacity: 1;
20
+ transition: opacity 0.5s ease-in-out;
21
+ }
22
+
23
+ .vjs-poster {
24
+ display: inline-block;
25
+ vertical-align: middle;
26
+ cursor: pointer;
27
+ margin: 0;
28
+ padding: 0;
29
+ position: absolute;
30
+ top: 0;
31
+ right: 0;
32
+ bottom: 0;
33
+ left: 0;
34
+ height: 100%;
35
+ background-color: black;
36
+ }
@@ -498,334 +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
502
  .sb-static {
503
503
  position: static;
504
- }
504
+ }
505
505
  .sb-absolute {
506
506
  position: absolute;
507
- }
507
+ }
508
508
  .sb-relative {
509
509
  position: relative;
510
- }
510
+ }
511
511
  .sb-bottom-10 {
512
512
  bottom: 2.5rem;
513
- }
513
+ }
514
514
  .sb-bottom-full {
515
515
  bottom: 100%;
516
- }
516
+ }
517
517
  .sb-left-0 {
518
518
  left: 0px;
519
- }
519
+ }
520
520
  .sb-left-1\/2 {
521
521
  left: 50%;
522
- }
522
+ }
523
523
  .sb-right-0 {
524
524
  right: 0px;
525
- }
525
+ }
526
526
  .sb-top-0 {
527
527
  top: 0px;
528
- }
528
+ }
529
529
  .sb-top-1 {
530
530
  top: 0.25rem;
531
- }
531
+ }
532
532
  .sb-top-2 {
533
533
  top: 0.5rem;
534
- }
534
+ }
535
535
  .sb-top-\[27\%\] {
536
536
  top: 27%;
537
- }
537
+ }
538
538
  .sb-z-10 {
539
539
  z-index: 10;
540
- }
540
+ }
541
541
  .sb-z-20 {
542
542
  z-index: 20;
543
- }
543
+ }
544
544
  .sb-z-30 {
545
545
  z-index: 30;
546
- }
546
+ }
547
547
  .sb-col-span-3 {
548
548
  grid-column: span 3 / span 3;
549
- }
549
+ }
550
550
  .sb-col-span-9 {
551
551
  grid-column: span 9 / span 9;
552
- }
552
+ }
553
553
  .sb-mb-2 {
554
554
  margin-bottom: 0.5rem;
555
- }
555
+ }
556
556
  .sb-flex {
557
557
  display: flex;
558
- }
558
+ }
559
559
  .sb-grid {
560
560
  display: grid;
561
- }
561
+ }
562
562
  .sb-hidden {
563
563
  display: none;
564
- }
564
+ }
565
565
  .sb-h-1 {
566
566
  height: 0.25rem;
567
- }
567
+ }
568
568
  .sb-h-16 {
569
569
  height: 4rem;
570
- }
570
+ }
571
571
  .sb-h-2 {
572
572
  height: 0.5rem;
573
- }
573
+ }
574
574
  .sb-h-3 {
575
575
  height: 0.75rem;
576
- }
576
+ }
577
577
  .sb-h-4 {
578
578
  height: 1rem;
579
- }
579
+ }
580
580
  .sb-h-5 {
581
581
  height: 1.25rem;
582
- }
582
+ }
583
583
  .sb-h-\[\.1px\] {
584
584
  height: .1px;
585
- }
585
+ }
586
586
  .sb-h-full {
587
587
  height: 100%;
588
- }
588
+ }
589
589
  .\!sb-w-16 {
590
590
  width: 4rem !important;
591
- }
591
+ }
592
592
  .sb-w-1 {
593
593
  width: 0.25rem;
594
- }
594
+ }
595
595
  .sb-w-16 {
596
596
  width: 4rem;
597
- }
597
+ }
598
598
  .sb-w-3 {
599
599
  width: 0.75rem;
600
- }
600
+ }
601
601
  .sb-w-4 {
602
602
  width: 1rem;
603
- }
603
+ }
604
604
  .sb-w-5 {
605
605
  width: 1.25rem;
606
- }
606
+ }
607
607
  .sb-w-\[150px\] {
608
608
  width: 150px;
609
- }
609
+ }
610
610
  .sb-w-\[220px\] {
611
611
  width: 220px;
612
- }
612
+ }
613
613
  .sb-w-\[22px\] {
614
614
  width: 22px;
615
- }
615
+ }
616
616
  .sb-w-\[30\%\] {
617
617
  width: 30%;
618
- }
618
+ }
619
619
  .sb-w-full {
620
620
  width: 100%;
621
- }
621
+ }
622
622
  .-sb-translate-y-2 {
623
623
  --tw-translate-y: -0.5rem;
624
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
- }
625
+ }
626
626
  .sb--translate-x-1\/2 {
627
627
  --tw-translate-x: -50%;
628
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));
629
- }
629
+ }
630
630
  .sb-translate-y-0 {
631
631
  --tw-translate-y: 0px;
632
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
- }
633
+ }
634
634
  .-sb-rotate-90 {
635
635
  --tw-rotate: -90deg;
636
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
- }
637
+ }
638
638
  .sb-rotate-0 {
639
639
  --tw-rotate: 0deg;
640
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
- }
641
+ }
642
642
  .sb-transform {
643
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));
644
- }
644
+ }
645
645
  .sb-cursor-pointer {
646
646
  cursor: pointer;
647
- }
647
+ }
648
648
  .sb-appearance-none {
649
649
  -webkit-appearance: none;
650
650
  -moz-appearance: none;
651
651
  appearance: none;
652
- }
652
+ }
653
653
  .sb-grid-cols-12 {
654
654
  grid-template-columns: repeat(12, minmax(0, 1fr));
655
- }
655
+ }
656
656
  .\!sb-flex-row {
657
657
  flex-direction: row !important;
658
- }
658
+ }
659
659
  .sb-flex-row {
660
660
  flex-direction: row;
661
- }
661
+ }
662
662
  .sb-flex-col {
663
663
  flex-direction: column;
664
- }
664
+ }
665
665
  .sb-flex-col-reverse {
666
666
  flex-direction: column-reverse;
667
- }
667
+ }
668
668
  .sb-items-start {
669
669
  align-items: flex-start;
670
- }
670
+ }
671
671
  .\!sb-items-end {
672
672
  align-items: flex-end !important;
673
- }
673
+ }
674
674
  .sb-items-end {
675
675
  align-items: flex-end;
676
- }
676
+ }
677
677
  .sb-items-center {
678
678
  align-items: center;
679
- }
679
+ }
680
680
  .sb-justify-start {
681
681
  justify-content: flex-start;
682
- }
682
+ }
683
683
  .sb-justify-center {
684
684
  justify-content: center;
685
- }
685
+ }
686
686
  .sb-justify-between {
687
687
  justify-content: space-between;
688
- }
688
+ }
689
689
  .sb-gap-2 {
690
690
  gap: 0.5rem;
691
- }
691
+ }
692
692
  .sb-gap-3 {
693
693
  gap: 0.75rem;
694
- }
694
+ }
695
695
  .sb-gap-4 {
696
696
  gap: 1rem;
697
- }
697
+ }
698
698
  .sb-overflow-hidden {
699
699
  overflow: hidden;
700
- }
700
+ }
701
701
  .sb-whitespace-nowrap {
702
702
  white-space: nowrap;
703
- }
703
+ }
704
704
  .sb-rounded-full {
705
705
  border-radius: 9999px;
706
- }
706
+ }
707
707
  .sb-rounded-lg {
708
708
  border-radius: 0.5rem;
709
- }
709
+ }
710
710
  .sb-rounded-md {
711
711
  border-radius: 0.375rem;
712
- }
712
+ }
713
713
  .sb-border {
714
714
  border-width: 1px;
715
- }
715
+ }
716
716
  .sb-border-\[\#AAAAAA\] {
717
717
  --tw-border-opacity: 1;
718
718
  border-color: rgb(170 170 170 / var(--tw-border-opacity));
719
- }
719
+ }
720
720
  .sb-bg-\[\#303030\] {
721
721
  --tw-bg-opacity: 1;
722
722
  background-color: rgb(48 48 48 / var(--tw-bg-opacity));
723
- }
723
+ }
724
724
  .sb-bg-\[\#AAAAAA\] {
725
725
  --tw-bg-opacity: 1;
726
726
  background-color: rgb(170 170 170 / var(--tw-bg-opacity));
727
- }
727
+ }
728
728
  .sb-bg-orange-500 {
729
729
  --tw-bg-opacity: 1;
730
730
  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
731
- }
731
+ }
732
732
  .sb-bg-slate-400 {
733
733
  --tw-bg-opacity: 1;
734
734
  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
735
- }
735
+ }
736
736
  .sb-bg-transparent {
737
737
  background-color: transparent;
738
- }
738
+ }
739
739
  .sb-bg-white {
740
740
  --tw-bg-opacity: 1;
741
741
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
742
- }
742
+ }
743
743
  .sb-bg-white\/30 {
744
744
  background-color: rgb(255 255 255 / 0.3);
745
- }
745
+ }
746
746
  .sb-bg-opacity-50 {
747
747
  --tw-bg-opacity: 0.5;
748
- }
748
+ }
749
749
  .sb-bg-opacity-70 {
750
750
  --tw-bg-opacity: 0.7;
751
- }
751
+ }
752
752
  .sb-p-2 {
753
753
  padding: 0.5rem;
754
- }
754
+ }
755
755
  .sb-px-2 {
756
756
  padding-left: 0.5rem;
757
757
  padding-right: 0.5rem;
758
- }
758
+ }
759
759
  .sb-px-4 {
760
760
  padding-left: 1rem;
761
761
  padding-right: 1rem;
762
- }
762
+ }
763
763
  .sb-px-5 {
764
764
  padding-left: 1.25rem;
765
765
  padding-right: 1.25rem;
766
- }
766
+ }
767
767
  .sb-py-3 {
768
768
  padding-top: 0.75rem;
769
769
  padding-bottom: 0.75rem;
770
- }
770
+ }
771
771
  .sb-py-5 {
772
772
  padding-top: 1.25rem;
773
773
  padding-bottom: 1.25rem;
774
- }
774
+ }
775
775
  .sb-text-left {
776
776
  text-align: left;
777
- }
777
+ }
778
778
  .sb-text-center {
779
779
  text-align: center;
780
- }
780
+ }
781
781
  .sb-font-bold {
782
782
  font-weight: 700;
783
- }
783
+ }
784
784
  .sb-text-white {
785
785
  --tw-text-opacity: 1;
786
786
  color: rgb(255 255 255 / var(--tw-text-opacity));
787
- }
787
+ }
788
788
  .sb-shadow-lg {
789
789
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
790
790
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
791
791
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
792
- }
792
+ }
793
793
  .sb-backdrop-blur-lg {
794
794
  --tw-backdrop-blur: blur(16px);
795
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);
796
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);
797
- }
797
+ }
798
798
  .sb-transition-all {
799
799
  transition-property: all;
800
800
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
801
801
  transition-duration: 150ms;
802
- }
802
+ }
803
803
  .sb-duration-500 {
804
804
  transition-duration: 500ms;
805
- }
805
+ }
806
806
  .sb-ease-in-out {
807
807
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
808
- }
808
+ }
809
809
  .placeholder\:sb-text-white::-moz-placeholder {
810
810
  --tw-text-opacity: 1;
811
811
  color: rgb(255 255 255 / var(--tw-text-opacity));
812
- }
812
+ }
813
813
  .placeholder\:sb-text-white::placeholder {
814
814
  --tw-text-opacity: 1;
815
815
  color: rgb(255 255 255 / var(--tw-text-opacity));
816
- }
816
+ }
817
817
  .hover\:sb-w-\[45\%\]:hover {
818
818
  width: 45%;
819
- }
819
+ }
820
820
  .hover\:sb-scale-150:hover {
821
821
  --tw-scale-x: 1.5;
822
822
  --tw-scale-y: 1.5;
823
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));
824
- }
824
+ }
825
825
  .hover\:sb-cursor-pointer:hover {
826
826
  cursor: pointer;
827
- }
827
+ }
828
828
  .hover\:sb-text-orange-500:hover {
829
829
  --tw-text-opacity: 1;
830
830
  color: rgb(249 115 22 / var(--tw-text-opacity));
831
- }
831
+ }