frst-components 0.21.18 → 0.21.20

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 (9) hide show
  1. package/dist/index.js +326 -359
  2. package/dist/src/components/IJ/learningCycleCard/components/menu/index.d.ts.map +1 -1
  3. package/dist/src/components/IJ/learningCycleCard/components/menu/menuStyle.d.ts.map +1 -1
  4. package/dist/src/components/audio-player/audioPlayerStyles.d.ts.map +1 -1
  5. package/dist/src/components/audio-player/index.d.ts +2 -9
  6. package/dist/src/components/audio-player/index.d.ts.map +1 -1
  7. package/dist/src/components/audio-player/old_index.d.ts +25 -0
  8. package/dist/src/components/audio-player/old_index.d.ts.map +1 -0
  9. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var React = require('react');
7
7
  var styled = require('styled-components');
8
- var useSound = require('use-sound');
8
+ var ReactPlayer = require('react-player');
9
9
  var material = require('@mui/material');
10
10
  var reactI18next = require('react-i18next');
11
11
  var Button$7 = require('@mui/material/Button');
@@ -45,7 +45,6 @@ var Tooltip$3 = require('@mui/material/Tooltip');
45
45
  var Switch = require('react-switch');
46
46
  var core = require('@material-ui/core');
47
47
  var moment = require('moment');
48
- var ReactPlayer = require('react-player');
49
48
  var _ = require('@mui/material/');
50
49
  var Slider = require('@mui/material/Slider');
51
50
  var styles$1 = require('@material-ui/styles');
@@ -90,7 +89,7 @@ function _interopNamespace(e) {
90
89
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
91
90
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
92
91
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
93
- var useSound__default = /*#__PURE__*/_interopDefaultLegacy(useSound);
92
+ var ReactPlayer__default = /*#__PURE__*/_interopDefaultLegacy(ReactPlayer);
94
93
  var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button$7);
95
94
  var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu$1);
96
95
  var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
@@ -115,7 +114,6 @@ var isHotkey__default = /*#__PURE__*/_interopDefaultLegacy(isHotkey);
115
114
  var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip$3);
116
115
  var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
117
116
  var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
118
- var ReactPlayer__default = /*#__PURE__*/_interopDefaultLegacy(ReactPlayer);
119
117
  var Slider__default = /*#__PURE__*/_interopDefaultLegacy(Slider);
120
118
  var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
121
119
  var MoreVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreVertIcon);
@@ -810,26 +808,26 @@ const FRSTTheme = {
810
808
  };
811
809
 
812
810
  const container$1 = styled__default["default"].div `
813
- display: flex;
814
- position: relative;
815
- gap: 20px;
816
- height: 234px;
817
- padding: 20px;
818
- border-radius: 16px;
819
- border: 1px solid ${({ theme }) => theme.colors.borderPrimary};
820
- background-color: #E2E8F0;
821
- z-index: 1;
811
+ display: flex;
812
+ position: relative;
813
+ gap: 20px;
814
+ height: 234px;
815
+ padding: 20px;
816
+ border-radius: 16px;
817
+ border: 1px solid ${({ theme }) => theme.colors.borderPrimary};
818
+ background-color: #e2e8f0;
819
+ z-index: 1;
822
820
 
823
- background-position: center;
824
- background-size: cover;
825
- background-repeat: no-repeat;
821
+ background-position: center;
822
+ background-size: cover;
823
+ background-repeat: no-repeat;
826
824
  `;
827
825
  styled.keyframes `
828
826
  0% { background-position: -468px 0;}
829
827
  100% { background-position: 468px 0;}
830
828
  `;
831
829
  styled__default["default"].div `
832
- /* background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #c4c4c4 40%, #c4c4c4 100%); */
830
+ /* background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #c4c4c4 40%, #c4c4c4 100%); */
833
831
  /* background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #c4c4c4 40%, #c4c4c4 100%);
834
832
  background-repeat: no-repeat; */
835
833
  /* background-size: 100% 100%; */
@@ -848,414 +846,383 @@ styled__default["default"].div `
848
846
  -webkit-animation-iteration-count: infinite;
849
847
  -webkit-animation-name: placeholderShimmer;
850
848
  -webkit-animation-timing-function: linear;
851
-
852
-
853
849
  `;
854
850
  const containerMask = styled__default["default"].div `
855
- width: 100%;
856
- height: 100%;
857
- background: rgba(255, 255, 255, 0.5);
858
- backdrop-filter: blur(8px);
859
- position: absolute;
860
- top: 0;
861
- left: 0;
862
- border-radius: 16px;
863
- z-index: 1;
851
+ width: 100%;
852
+ height: 100%;
853
+ background: rgba(255, 255, 255, 0.5);
854
+ backdrop-filter: blur(8px);
855
+ position: absolute;
856
+ top: 0;
857
+ left: 0;
858
+ border-radius: 16px;
859
+ z-index: 1;
864
860
  `;
865
861
  const thumb = styled__default["default"].div `
866
- border-radius: 8px;
867
- width: 194px;
868
- max-width: 194px;
869
- height: 194px;
870
- z-index: 2;
871
- /* background-color: red; */
862
+ border-radius: 8px;
863
+ width: 194px;
864
+ max-width: 194px;
872
865
 
873
- background-repeat: no-repeat;
874
- background-position: center;
875
- background-size: cover;
866
+ z-index: 2;
867
+ /* background-color: red; */
868
+
869
+ background-repeat: no-repeat;
870
+ background-position: center;
871
+ background-size: cover;
876
872
  `;
877
873
  const thumbLoading = styled__default["default"].div `
878
- border-radius: 8px;
879
- width: 194px;
880
- max-width: 194px;
881
- height: 194px;
882
- z-index: 2;
883
- background-color: red;
874
+ border-radius: 8px;
875
+ width: 194px;
876
+ max-width: 194px;
877
+ height: 194px;
878
+ z-index: 2;
884
879
  `;
885
880
  const content = styled__default["default"].div `
886
- display: flex;
887
- flex-direction: column;
888
- gap: 8px;
889
- z-index: 2;
881
+ display: flex;
882
+ flex-direction: column;
883
+ gap: 8px;
884
+ z-index: 2;
890
885
  `;
891
886
  const title = styled__default["default"].p `
892
- font-family: 'Work Sans';
893
- font-size: 18px;
894
- font-weight: 700;
895
- line-height: 21px;
896
- color: #222222;
887
+ font-family: 'Work Sans';
888
+ font-size: 18px;
889
+ font-weight: 700;
890
+ line-height: 21px;
891
+ color: #222222;
897
892
 
898
- margin-top: 12px;
893
+ margin-top: 12px;
899
894
  `;
900
895
  const description = styled__default["default"].p `
901
- font-family: 'PT Sans';
902
- font-size: 14px;
903
- font-weight: 400;
904
- line-height: 18px;
905
- color: #222222;
896
+ font-family: 'PT Sans';
897
+ font-size: 14px;
898
+ font-weight: 400;
899
+ line-height: 18px;
900
+ color: #222222;
906
901
  `;
907
902
  const date = styled__default["default"].p `
908
- font-family: 'PT Sans';
909
- font-size: 12px;
910
- font-weight: 400;
911
- line-height: 16px;
912
- color: #222222;
903
+ font-family: 'PT Sans';
904
+ font-size: 12px;
905
+ font-weight: 400;
906
+ line-height: 16px;
907
+ color: #222222;
913
908
  `;
914
909
  const controls = styled__default["default"].div `
915
- display: flex;
916
- flex-direction: row;
917
- align-items: center;
918
- justify-content: center;
919
- position: relative;
920
- gap: 24px;
921
- width: 100%;
922
- margin-top: 24px;
910
+ display: flex;
911
+ flex-direction: row;
912
+ align-items: center;
913
+ justify-content: center;
914
+ position: relative;
915
+ gap: 24px;
916
+ width: 100%;
917
+ // margin-top: 24px;
923
918
  `;
924
919
  const navigationButton = styled__default["default"].button `
925
- border: none;
926
- background: none;
927
- color: ${({ theme }) => theme.colors.neutralsGrey1};
920
+ border: none;
921
+ background: none;
922
+ color: ${({ theme }) => theme.colors.neutralsGrey1};
928
923
 
929
- &:hover{
930
- color: ${({ theme }) => theme.colors.primary1};
931
- }
924
+ &:hover {
925
+ color: ${({ theme }) => theme.colors.primary1};
926
+ }
932
927
 
933
- &:active{
934
- color: ${({ theme }) => theme.colors.primary3};
935
- }
928
+ &:active {
929
+ color: ${({ theme }) => theme.colors.primary3};
930
+ }
936
931
  `;
937
932
  const playButton = styled__default["default"].button `
938
- border: none;
939
- background: none;
940
- color: ${({ theme }) => theme.colors.primary2};
941
- &:hover{
942
- color: ${({ theme }) => theme.colors.primary1};
943
- }
933
+ border: none;
934
+ background: none;
935
+ color: ${({ theme }) => theme.colors.primary2};
936
+ &:hover {
937
+ color: ${({ theme }) => theme.colors.primary1};
938
+ }
944
939
 
945
- &:active{
946
- color: ${({ theme }) => theme.colors.primary3};
947
- }
940
+ &:active {
941
+ color: ${({ theme }) => theme.colors.primary3};
942
+ }
948
943
  `;
949
944
  const volumeControl = styled__default["default"].div `
950
- position: absolute;
951
- right: 0;
945
+ position: absolute;
946
+ right: 0;
952
947
  `;
953
948
  const volume = styled__default["default"].div `
954
- display: flex;
955
- flex-direction: row;
956
- align-items: center;
957
- justify-content: center;
958
- gap: 4px;
949
+ display: flex;
950
+ flex-direction: row;
951
+ align-items: center;
952
+ justify-content: center;
953
+ gap: 4px;
959
954
  `;
960
955
  const volumeBar = styled__default["default"].input `
961
- appearance: none;
962
- -webkit-appearance: none;
963
- display: block;
964
- border-radius: 1px;
965
- box-sizing: border-box;
966
- width: 32px;
967
- height: 2px;
968
- margin: 0px;
969
- background: ${({ theme }) => theme.colors.neutralsGrey1};
970
- background-image: linear-gradient(#ee4c15, #ee4c15);
971
- background-size: ${({ currentInputValue }) => currentInputValue}% 100%;
972
- background-repeat: no-repeat;
973
-
974
- &::-webkit-slider-thumb{
975
- -webkit-appearance: none;
976
- appearance: none;
977
- }
956
+ appearance: none;
957
+ -webkit-appearance: none;
958
+ display: block;
959
+ border-radius: 1px;
960
+ box-sizing: border-box;
961
+ width: 32px;
962
+ height: 2px;
963
+ margin: 0px;
964
+ background: ${({ theme }) => theme.colors.neutralsGrey1};
965
+ background-image: linear-gradient(#ee4c15, #ee4c15);
966
+ background-size: ${({ currentInputValue }) => currentInputValue}% 100%;
967
+ background-repeat: no-repeat;
978
968
 
979
- &::-ms-thumb{
980
- -webkit-appearance: none;
981
- appearance: none;
982
- }
969
+ &::-webkit-slider-thumb {
970
+ -webkit-appearance: none;
971
+ appearance: none;
972
+ }
983
973
 
984
- &::-moz-range-thumb{
985
- -webkit-appearance: none;
986
- appearance: none;
987
- }
974
+ &::-ms-thumb {
975
+ -webkit-appearance: none;
976
+ appearance: none;
977
+ }
988
978
 
989
- &:hover::-webkit-slider-thumb{
990
- -webkit-appearance: none;
991
- appearance: none;
992
- width: 5px;
993
- height: 5px;
994
- border: none;
995
- border-radius: 50%;
996
- background: ${({ theme }) => theme.colors.primary2};
997
- }
979
+ &::-moz-range-thumb {
980
+ -webkit-appearance: none;
981
+ appearance: none;
982
+ }
998
983
 
999
- &:hover::-moz-range-thumb{
1000
- -webkit-appearance: none;
1001
- appearance: none;
1002
- width: 5px;
1003
- height: 5px;
1004
- border: none;
1005
- border-radius: 50%;
1006
- background: ${({ theme }) => theme.colors.primary2};
1007
- }
984
+ &:hover::-webkit-slider-thumb {
985
+ -webkit-appearance: none;
986
+ appearance: none;
987
+ width: 5px;
988
+ height: 5px;
989
+ border: none;
990
+ border-radius: 50%;
991
+ background: ${({ theme }) => theme.colors.primary2};
992
+ }
1008
993
 
1009
- &:hover::-ms-thumb{
1010
- -webkit-appearance: none;
1011
- appearance: none;
1012
- width: 5px;
1013
- height: 5px;
1014
- border: none;
1015
- border-radius: 50%;
1016
- background: ${({ theme }) => theme.colors.primary2};
1017
- }
994
+ &:hover::-moz-range-thumb {
995
+ -webkit-appearance: none;
996
+ appearance: none;
997
+ width: 5px;
998
+ height: 5px;
999
+ border: none;
1000
+ border-radius: 50%;
1001
+ background: ${({ theme }) => theme.colors.primary2};
1002
+ }
1018
1003
 
1019
- &::-webkit-slider-runnable-track{
1020
- -webkit-appearance: none;
1021
- appearance: none;
1022
- border: none;
1023
- box-shadow: none;
1024
- background: transparent;
1025
- }
1004
+ &:hover::-ms-thumb {
1005
+ -webkit-appearance: none;
1006
+ appearance: none;
1007
+ width: 5px;
1008
+ height: 5px;
1009
+ border: none;
1010
+ border-radius: 50%;
1011
+ background: ${({ theme }) => theme.colors.primary2};
1012
+ }
1026
1013
 
1027
- &::-moz-range-track{
1028
- -webkit-appearance: none;
1029
- appearance: none;
1030
- border: none;
1031
- box-shadow: none;
1032
- background: transparent;
1033
- }
1014
+ &::-webkit-slider-runnable-track {
1015
+ -webkit-appearance: none;
1016
+ appearance: none;
1017
+ border: none;
1018
+ box-shadow: none;
1019
+ background: transparent;
1020
+ }
1034
1021
 
1035
- &::-ms-track{
1036
- -webkit-appearance: none;
1037
- appearance: none;
1038
- border: none;
1039
- box-shadow: none;
1040
- background: transparent;
1041
- }
1022
+ &::-moz-range-track {
1023
+ -webkit-appearance: none;
1024
+ appearance: none;
1025
+ border: none;
1026
+ box-shadow: none;
1027
+ background: transparent;
1028
+ }
1042
1029
 
1030
+ &::-ms-track {
1031
+ -webkit-appearance: none;
1032
+ appearance: none;
1033
+ border: none;
1034
+ box-shadow: none;
1035
+ background: transparent;
1036
+ }
1043
1037
  `;
1044
1038
  const audioTimeline = styled__default["default"].div `
1045
- display: flex;
1046
- flex-direction: row;
1047
- align-items: center;
1048
- gap: 8px;
1049
- width: 100%;
1039
+ display: flex;
1040
+ flex-direction: row;
1041
+ align-items: center;
1042
+ gap: 8px;
1043
+ width: 100%;
1050
1044
  `;
1051
1045
  const timeText = styled__default["default"].p `
1052
- font-family: 'PT Sans';
1053
- font-size: 10px;
1054
- font-weight: 700;
1055
- line-height: 13px;
1056
- color: #222222;
1057
-
1046
+ font-family: 'PT Sans';
1047
+ font-size: 10px;
1048
+ font-weight: 700;
1049
+ line-height: 13px;
1050
+ color: #222222;
1058
1051
  `;
1059
1052
  const timeline = styled__default["default"].input `
1060
- appearance: none;
1061
- -webkit-appearance: none;
1062
- display: block;
1063
- border-radius: 2px;
1064
- box-sizing: border-box;
1065
- width: 100%;
1066
- height: 4px;
1067
- margin: 0px;
1068
- background: ${({ theme }) => theme.colors.neutralsGrey1};
1069
- background-image: linear-gradient(#ee4c15, #ee4c15);
1070
- background-size: ${({ currentInputValue }) => currentInputValue}% 100%;
1071
- background-repeat: no-repeat;
1072
-
1073
- &::-webkit-slider-thumb{
1074
- -webkit-appearance: none;
1075
- appearance: none;
1076
- }
1053
+ appearance: none;
1054
+ -webkit-appearance: none;
1055
+ display: block;
1056
+ border-radius: 2px;
1057
+ box-sizing: border-box;
1058
+ width: 100%;
1059
+ height: 4px;
1060
+ margin: 0px;
1061
+ background: ${({ theme }) => theme.colors.neutralsGrey1};
1062
+ background-image: linear-gradient(#ee4c15, #ee4c15);
1063
+ background-size: ${({ currentInputValue }) => currentInputValue}% 100%;
1064
+ background-repeat: no-repeat;
1077
1065
 
1078
- &::-ms-thumb{
1079
- -webkit-appearance: none;
1080
- appearance: none;
1081
- }
1066
+ &::-webkit-slider-thumb {
1067
+ -webkit-appearance: none;
1068
+ appearance: none;
1069
+ }
1082
1070
 
1083
- &::-moz-range-thumb{
1084
- -webkit-appearance: none;
1085
- appearance: none;
1086
- }
1071
+ &::-ms-thumb {
1072
+ -webkit-appearance: none;
1073
+ appearance: none;
1074
+ }
1087
1075
 
1088
- &:hover::-webkit-slider-thumb{
1089
- -webkit-appearance: none;
1090
- appearance: none;
1091
- width: 10px;
1092
- height: 10px;
1093
- border: none;
1094
- border-radius: 50%;
1095
- background: ${({ theme }) => theme.colors.primary2};
1096
- }
1076
+ &::-moz-range-thumb {
1077
+ -webkit-appearance: none;
1078
+ appearance: none;
1079
+ }
1097
1080
 
1098
- &:hover::-moz-range-thumb{
1099
- -webkit-appearance: none;
1100
- appearance: none;
1101
- width: 10px;
1102
- height: 10px;
1103
- border: none;
1104
- border-radius: 50%;
1105
- background: ${({ theme }) => theme.colors.primary2};
1106
- }
1081
+ &:hover::-webkit-slider-thumb {
1082
+ -webkit-appearance: none;
1083
+ appearance: none;
1084
+ width: 10px;
1085
+ height: 10px;
1086
+ border: none;
1087
+ border-radius: 50%;
1088
+ background: ${({ theme }) => theme.colors.primary2};
1089
+ }
1107
1090
 
1108
- &:hover::-ms-thumb{
1109
- -webkit-appearance: none;
1110
- appearance: none;
1111
- width: 10px;
1112
- height: 10px;
1113
- border: none;
1114
- border-radius: 50%;
1115
- background: ${({ theme }) => theme.colors.primary2};
1116
- }
1091
+ &:hover::-moz-range-thumb {
1092
+ -webkit-appearance: none;
1093
+ appearance: none;
1094
+ width: 10px;
1095
+ height: 10px;
1096
+ border: none;
1097
+ border-radius: 50%;
1098
+ background: ${({ theme }) => theme.colors.primary2};
1099
+ }
1117
1100
 
1118
- &::-webkit-slider-runnable-track{
1119
- -webkit-appearance: none;
1120
- appearance: none;
1121
- border: none;
1122
- box-shadow: none;
1123
- background: transparent;
1124
- }
1101
+ &:hover::-ms-thumb {
1102
+ -webkit-appearance: none;
1103
+ appearance: none;
1104
+ width: 10px;
1105
+ height: 10px;
1106
+ border: none;
1107
+ border-radius: 50%;
1108
+ background: ${({ theme }) => theme.colors.primary2};
1109
+ }
1125
1110
 
1126
- &::-moz-range-track{
1127
- -webkit-appearance: none;
1128
- appearance: none;
1129
- border: none;
1130
- box-shadow: none;
1131
- background: transparent;
1132
- }
1111
+ &::-webkit-slider-runnable-track {
1112
+ -webkit-appearance: none;
1113
+ appearance: none;
1114
+ border: none;
1115
+ box-shadow: none;
1116
+ background: transparent;
1117
+ }
1133
1118
 
1134
- &::-ms-track{
1135
- -webkit-appearance: none;
1136
- appearance: none;
1137
- border: none;
1138
- box-shadow: none;
1139
- background: transparent;
1140
- }
1119
+ &::-moz-range-track {
1120
+ -webkit-appearance: none;
1121
+ appearance: none;
1122
+ border: none;
1123
+ box-shadow: none;
1124
+ background: transparent;
1125
+ }
1141
1126
 
1127
+ &::-ms-track {
1128
+ -webkit-appearance: none;
1129
+ appearance: none;
1130
+ border: none;
1131
+ box-shadow: none;
1132
+ background: transparent;
1133
+ }
1142
1134
  `;
1143
1135
 
1144
- function AudioPlayer(props) {
1136
+ function PlayerPodcast(props) {
1145
1137
  const [isPlaying, setIsPlaying] = React.useState(false);
1146
- React.useState();
1147
- const [time, setTime] = React.useState({
1148
- min: 0,
1149
- sec: 0
1150
- });
1151
- const [currTime, setCurrTime] = React.useState({
1152
- min: 0,
1153
- sec: 0
1154
- });
1155
- const [seconds, setSeconds] = React.useState(0);
1156
- const [audioVolume, setAudioVolume] = React.useState(props.volume ? props.volume : 0.5);
1157
- const [play, { pause, duration, sound }] = useSound__default["default"](props.audio, { volume: audioVolume,
1158
- onend: () => {
1159
- setIsPlaying(false);
1160
- props.onEnded();
1161
- } });
1162
- const [Loading, setLoading] = React.useState(true);
1163
- //porcentagem percorrida da musica
1164
- const [percentagePlaytime, setPercentagePlaytime] = React.useState(0);
1138
+ const [playedSeconds, setPlayedSeconds] = React.useState(0);
1139
+ const [duration, setDuration] = React.useState(0); // Added duration state
1140
+ const playerRef = React.useRef(null);
1141
+ const [loading, setLoading] = React.useState(true);
1142
+ const [audioVolume, setAudioVolume] = React.useState(props?.volume ?? 0.5);
1165
1143
  const defaultThumb = 'https://i.gyazo.com/f201e5ef302347108c31a2129104adc1.png';
1166
1144
  React.useEffect(() => {
1167
- setAudioVolume(props.volume);
1168
- }, [props.volume]);
1169
- React.useEffect(() => {
1170
- setIsPlaying(false);
1171
- pause();
1172
- }, [props.exitSound]);
1173
- React.useEffect(() => {
1174
- setTimeout(() => {
1175
- setLoading(false);
1176
- }, 8000);
1177
- }, []);
1178
- React.useEffect(() => {
1179
- if (props.onProgress) {
1180
- if (isPlaying) {
1181
- props.onProgress({
1182
- loadedSeconds: duration / 1000,
1183
- playedSeconds: sound.seek([])
1184
- });
1145
+ if (props.exitSound) {
1146
+ setIsPlaying(false);
1147
+ if (playerRef.current) {
1148
+ playerRef.current.seekTo(0);
1185
1149
  }
1186
1150
  }
1187
- }, [seconds]);
1188
- React.useEffect(() => {
1189
- if (duration) {
1190
- const sec = duration / 1000;
1191
- const min = Math.floor(sec / 60);
1192
- const secRemain = Math.floor(sec % 60);
1193
- setTime({
1194
- min: min,
1195
- sec: secRemain
1196
- });
1151
+ }, [props.exitSound]);
1152
+ const onProgress = (data) => {
1153
+ if (props.onProgress && isPlaying) {
1154
+ props.onProgress(data);
1197
1155
  }
1198
- const interval = setInterval(() => {
1199
- if (sound) {
1200
- if (!isPlaying && props.startAt && sound.seek([]) === 0) {
1201
- setSeconds(props.startAt);
1202
- sound.seek([props.startAt]);
1203
- }
1204
- setSeconds(sound.seek([]));
1205
- const min = Math.floor(sound.seek([]) / 60);
1206
- const sec = Math.floor(sound.seek([]) % 60);
1207
- setCurrTime({
1208
- min,
1209
- sec
1210
- });
1211
- setPercentagePlaytime(calcCurrentInputPercentage(0, duration / 1000, sound.seek([])));
1156
+ setPlayedSeconds(data.playedSeconds); // Update the playedSeconds state
1157
+ };
1158
+ const onVolumeChange = (newVolume) => {
1159
+ setAudioVolume(newVolume); // Atualize o estado interno
1160
+ if (playerRef.current) {
1161
+ const internalPlayer = playerRef.current.getInternalPlayer();
1162
+ if (internalPlayer) {
1163
+ internalPlayer.volume = newVolume; // Atualize o volume diretamente no player interno
1212
1164
  }
1213
- }, 1000);
1214
- return () => clearInterval(interval);
1215
- }, [sound]);
1216
- const playingButton = () => {
1217
- if (isPlaying) {
1218
- setIsPlaying(false);
1219
- pause();
1220
- }
1221
- else {
1222
- setIsPlaying(true);
1223
- play();
1224
1165
  }
1225
1166
  };
1226
- // função para calcular a porcentagem que foi percorrida a musica, para fazer o acompanhamento da barra
1227
- const calcCurrentInputPercentage = (valorMin, valorMax, valorAtual) => {
1228
- const min = valorMin;
1229
- const max = valorMax;
1230
- const val = valorAtual;
1231
- let result = (val - min) * 100 / (max - min);
1232
- return result;
1167
+ const onDuration = (duration) => {
1168
+ setDuration(duration); // Store the duration when it's available
1233
1169
  };
1234
- return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(container$1, { style: { ...props.style, backgroundImage: props.coverImage ? `url(${props.coverImage})` : '' }, children: [jsxRuntime.jsx(containerMask, {}), Loading ?
1235
- jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(thumbLoading, { style: { ...props.style, backgroundImage: props.coverImage ? `url(${props.coverImage})` : `url(${defaultThumb})` } }) })
1236
- :
1237
- jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(thumb, { style: { ...props.style, backgroundImage: props.coverImage ? `url(${props.coverImage})` : `url(${defaultThumb})` } }) }), jsxRuntime.jsxs(content, { style: { width: '100%' }, children: [jsxRuntime.jsxs(title, { children: [" ", props.title, " "] }), jsxRuntime.jsxs(description, { children: [" ", props.description, " "] }), jsxRuntime.jsxs(date, { children: [" ", props.date, " "] }), props.longLoading && Loading ?
1238
- jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(material.Box, { justifyContent: 'center', alignItems: 'center', width: '100%', children: [jsxRuntime.jsx(material.Skeleton, { height: 48, width: 150, sx: { marginLeft: 24 } }), jsxRuntime.jsx(material.Skeleton, { height: 24 })] }) })
1239
- :
1240
- jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(controls, { children: [jsxRuntime.jsx(navigationButton, { onClick: () => {
1241
- sound.seek([seconds ? seconds - 15 : 0]);
1242
- }, children: jsxRuntime.jsx(Back15, { fill: 'currentColor' }) }), !isPlaying ?
1243
- jsxRuntime.jsx(playButton, { onClick: playingButton, children: jsxRuntime.jsx(PlayIcon, { customColor_1: 'currentColor' }) })
1244
- :
1245
- jsxRuntime.jsx(playButton, { onClick: playingButton, children: jsxRuntime.jsx(PauseIcon, { customColor_1: 'currentColor' }) }), jsxRuntime.jsx(navigationButton, { onClick: () => {
1246
- sound.seek([seconds ? seconds + 15 : 15]);
1247
- }, children: jsxRuntime.jsx(Foward15, { fill: 'currentColor' }) }), jsxRuntime.jsx(volumeControl, { children: audioVolume === 0 ?
1248
- jsxRuntime.jsx(volume, { onClick: () => {
1249
- setAudioVolume(0.1);
1250
- }, children: jsxRuntime.jsx(MuteIcon, {}) })
1251
- :
1252
- jsxRuntime.jsxs(volume, { children: [jsxRuntime.jsx("div", { onClick: () => {
1253
- setAudioVolume(0);
1254
- }, children: jsxRuntime.jsx(VolumeIcon, {}) }), jsxRuntime.jsx(volumeBar, { type: 'range', min: '0', max: '1', value: audioVolume, className: 'volumeBar', step: '0.1', onChange: (e) => {
1255
- setAudioVolume(Number(e.target.value));
1256
- }, currentInputValue: calcCurrentInputPercentage(0, 1, audioVolume) })] }) })] }), jsxRuntime.jsxs(audioTimeline, { children: [jsxRuntime.jsxs(timeText, { children: [currTime.min.toString().padStart(2, '0'), ":", currTime.sec.toString().padStart(2, '0')] }), jsxRuntime.jsx(timeline, { type: "range", min: "0", max: duration / 1000, value: seconds, className: "timeline", onChange: (e) => {
1257
- sound.seek([e.target.value]);
1258
- }, currentInputValue: percentagePlaytime }), jsxRuntime.jsxs(timeText, { children: [time.min.toString().padStart(2, '0'), ":", time.sec.toString().padStart(2, '0')] })] })] })] })] }) }) }));
1170
+ const onEnded = () => {
1171
+ setIsPlaying(false);
1172
+ if (props.onEnded) {
1173
+ props.onEnded();
1174
+ }
1175
+ };
1176
+ React.useEffect(() => {
1177
+ if (props.audio)
1178
+ setLoading(false);
1179
+ }, [props.audio]);
1180
+ function formatTime(seconds) {
1181
+ const mins = Math.floor(seconds / 60);
1182
+ const secs = Math.floor(seconds % 60);
1183
+ return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
1184
+ }
1185
+ return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(container$1, { style: {
1186
+ ...props.style,
1187
+ backgroundImage: props.coverImage ? `url(${props.coverImage})` : ''
1188
+ }, children: [jsxRuntime.jsx(containerMask, {}), loading ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(thumbLoading, { style: {
1189
+ ...props.style,
1190
+ backgroundImage: props.coverImage ? `url(${props.coverImage})` : `url(${defaultThumb})`
1191
+ } }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(thumb, { style: {
1192
+ ...props.style,
1193
+ backgroundImage: props.coverImage ? `url(${props.coverImage})` : `url(${defaultThumb})`
1194
+ } }) })), jsxRuntime.jsxs(content, { style: { width: '100%' }, children: [jsxRuntime.jsxs(title, { children: [" ", props.title, " "] }), jsxRuntime.jsxs(description, { children: [" ", props.description, " "] }), jsxRuntime.jsxs(date, { children: [" ", props.date, " "] }), props.longLoading && loading ? (jsxRuntime.jsxs(material.Box, { justifyContent: 'center', alignItems: 'center', width: '100%', children: [jsxRuntime.jsx(material.Skeleton, { height: 48, width: 150, sx: { marginLeft: 24 } }), jsxRuntime.jsx(material.Skeleton, { height: 24 })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(controls, { children: [jsxRuntime.jsx(navigationButton, { onClick: () => {
1195
+ const newTime = playedSeconds - 15;
1196
+ setPlayedSeconds(newTime >= 0 ? newTime : 0);
1197
+ if (playerRef.current) {
1198
+ playerRef.current.seekTo(newTime >= 0 ? newTime : 0);
1199
+ }
1200
+ }, children: jsxRuntime.jsx(Back15, { fill: "currentColor" }) }), !isPlaying ? (jsxRuntime.jsx(playButton, { onClick: () => setIsPlaying(true), children: jsxRuntime.jsx(PlayIcon, { customColor_1: "currentColor" }) })) : (jsxRuntime.jsx(playButton, { onClick: () => setIsPlaying(false), children: jsxRuntime.jsx(PauseIcon, { customColor_1: "currentColor" }) })), jsxRuntime.jsx(navigationButton, { onClick: () => {
1201
+ const newTime = playedSeconds + 15;
1202
+ setPlayedSeconds(newTime <= duration ? newTime : duration);
1203
+ if (playerRef.current) {
1204
+ playerRef.current.seekTo(newTime <= duration ? newTime : duration);
1205
+ }
1206
+ }, children: jsxRuntime.jsx(Foward15, { fill: "currentColor" }) }), jsxRuntime.jsx(volumeControl, { children: audioVolume === 0 ? (jsxRuntime.jsx(volume, { onClick: () => onVolumeChange(0.1), children: jsxRuntime.jsx(MuteIcon, {}) })) : (jsxRuntime.jsxs(volume, { children: [jsxRuntime.jsx("div", { onClick: () => onVolumeChange(0), children: jsxRuntime.jsx(VolumeIcon, {}) }), jsxRuntime.jsx(volumeBar, { type: "range", min: "0", max: "1", value: audioVolume, className: "volumeBar", step: "0.1", onChange: (e) => onVolumeChange(Number(e.target.value)), currentInputValue: (audioVolume / 1) * 100 })] })) })] }), jsxRuntime.jsx(thumb, { style: {
1207
+ ...props.style,
1208
+ backgroundImage: `url(${props.coverImage})` ?? `url(${defaultThumb})`
1209
+ } }), jsxRuntime.jsxs(audioTimeline, { children: [jsxRuntime.jsx(timeText, { children: formatTime(playedSeconds) }), jsxRuntime.jsx(timeline, { type: "range", min: "0", max: duration, value: playedSeconds, className: "timeline", onChange: (e) => {
1210
+ setPlayedSeconds(Number(e.target.value));
1211
+ }, onMouseUp: (e) => {
1212
+ const newPlayedSeconds = Number(e.target.value);
1213
+ setPlayedSeconds(newPlayedSeconds);
1214
+ const seekTime = (newPlayedSeconds / duration) * duration;
1215
+ if (playerRef.current) {
1216
+ playerRef.current.seekTo(seekTime);
1217
+ }
1218
+ }, onTouchEnd: (e) => {
1219
+ const newPlayedSeconds = Number(e.target.value);
1220
+ setPlayedSeconds(newPlayedSeconds);
1221
+ const seekTime = (newPlayedSeconds / duration) * duration;
1222
+ if (playerRef.current) {
1223
+ playerRef.current.seekTo(seekTime);
1224
+ }
1225
+ }, currentInputValue: (playedSeconds / duration) * 100 }), jsxRuntime.jsx(timeText, { children: formatTime(duration) })] }), jsxRuntime.jsx(ReactPlayer__default["default"], { ref: playerRef, url: props.audio, playing: isPlaying, onProgress: onProgress, onDuration: onDuration, onEnded: onEnded, volume: audioVolume, hidden: true })] }))] })] }) }) }));
1259
1226
  }
1260
1227
 
1261
1228
  const ContainerDesafios = styled__default["default"].div `
@@ -18731,7 +18698,7 @@ exports.AccordionTrackList = AccordionTrackList;
18731
18698
  exports.AddIcon = AddIcon;
18732
18699
  exports.AdmButton = AdmButton;
18733
18700
  exports.AlertCicle = AlertCicle;
18734
- exports.AudioPlayer = AudioPlayer;
18701
+ exports.AudioPlayer = PlayerPodcast;
18735
18702
  exports.Avatar = Avatar;
18736
18703
  exports.AvatarAssociatedChannel = AvatarAssociatedChannel;
18737
18704
  exports.AvatarChannel = AvatarChannel$1;
package/dist/src/components/IJ/learningCycleCard/components/menu/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/IJ/learningCycleCard/components/menu/index.tsx"],"names":[],"mappings":";AAUA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE;;;CAAA,eAiFnD"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/IJ/learningCycleCard/components/menu/index.tsx"],"names":[],"mappings":";AAUA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE;;;CAAA,eAiFnD"}
package/dist/src/components/IJ/learningCycleCard/components/menu/menuStyle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menuStyle.d.ts","sourceRoot":"","sources":["../../../../../../src/components/IJ/learningCycleCard/components/menu/menuStyle.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,oEAuBxB,CAAA"}
1
+ {"version":3,"file":"menuStyle.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/IJ/learningCycleCard/components/menu/menuStyle.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,oEAuBxB,CAAA"}
package/dist/src/components/audio-player/audioPlayerStyles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"audioPlayerStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/audio-player/audioPlayerStyles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,oEAcrB,CAAA;AAOD,eAAO,MAAM,cAAc,oEAsB1B,CAAA;AAED,eAAO,MAAM,aAAa,oEAUzB,CAAA;AAED,eAAO,MAAM,KAAK,oEAWjB,CAAA;AACD,eAAO,MAAM,YAAY,oEAOxB,CAAA;AAED,eAAO,MAAM,OAAO,oEAKnB,CAAA;AAED,eAAO,MAAM,KAAK,kEAQjB,CAAA;AAED,eAAO,MAAM,WAAW,kEAMvB,CAAA;AAED,eAAO,MAAM,IAAI,kEAMhB,CAAA;AAED,eAAO,MAAM,QAAQ,oEASpB,CAAA;AAED,eAAO,MAAM,gBAAgB,uEAY5B,CAAA;AAED,eAAO,MAAM,UAAU,uEAWtB,CAAA;AAED,eAAO,MAAM,aAAa,oEAGzB,CAAA;AAED,eAAO,MAAM,MAAM,oEAMlB,CAAA;AAED,eAAO,MAAM,SAAS;uBAAoC,MAAM;SAmF/D,CAAA;AAED,eAAO,MAAM,aAAa,oEAMzB,CAAA;AAED,eAAO,MAAM,QAAQ,kEAOpB,CAAA;AAED,eAAO,MAAM,QAAQ;uBAAoC,MAAM;SAmF9D,CAAA"}
1
+ {"version":3,"file":"audioPlayerStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/audio-player/audioPlayerStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,oEAcrB,CAAA;AAOD,eAAO,MAAM,cAAc,oEAoB1B,CAAA;AAED,eAAO,MAAM,aAAa,oEAUzB,CAAA;AAED,eAAO,MAAM,KAAK,oEAWjB,CAAA;AACD,eAAO,MAAM,YAAY,oEAMxB,CAAA;AAED,eAAO,MAAM,OAAO,oEAKnB,CAAA;AAED,eAAO,MAAM,KAAK,kEAQjB,CAAA;AAED,eAAO,MAAM,WAAW,kEAMvB,CAAA;AAED,eAAO,MAAM,IAAI,kEAMhB,CAAA;AAED,eAAO,MAAM,QAAQ,oEASpB,CAAA;AAED,eAAO,MAAM,gBAAgB,uEAY5B,CAAA;AAED,eAAO,MAAM,UAAU,uEAWtB,CAAA;AAED,eAAO,MAAM,aAAa,oEAGzB,CAAA;AAED,eAAO,MAAM,MAAM,oEAMlB,CAAA;AAED,eAAO,MAAM,SAAS;uBAAqC,MAAM;SAkFhE,CAAA;AAED,eAAO,MAAM,aAAa,oEAMzB,CAAA;AAED,eAAO,MAAM,QAAQ,kEAMpB,CAAA;AAED,eAAO,MAAM,QAAQ;uBAAqC,MAAM;SAkF/D,CAAA"}
package/dist/src/components/audio-player/index.d.ts CHANGED
@@ -1,25 +1,18 @@
1
1
  /// <reference types="react" />
2
- import '../../shared/global.css';
3
2
  interface IAudioPlayer {
4
- audio: any;
5
- /**
6
- * @prop {number} startAt: o tempo em que o audio deve começar (em segundos)
7
- */
3
+ audio: string;
8
4
  startAt?: number;
9
5
  coverImage?: string;
10
6
  title?: string;
11
7
  description?: string;
12
8
  date?: string;
13
9
  longLoading?: boolean;
14
- /**
15
- * @prop {number} volume: valor do volume (minimo 0 - máximo 1)
16
- */
17
10
  volume?: number;
18
11
  onProgress?: (data: any) => void;
19
12
  onEnded?: () => void;
20
13
  exitSound?: number;
21
14
  style?: React.CSSProperties;
22
15
  }
23
- export default function AudioPlayer(props: IAudioPlayer): JSX.Element;
16
+ export default function PlayerPodcast(props: IAudioPlayer): JSX.Element;
24
17
  export {};
25
18
  //# sourceMappingURL=index.d.ts.map
package/dist/src/components/audio-player/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/audio-player/index.tsx"],"names":[],"mappings":";AAAA,OAAO,yBAAyB,CAAA;AAShC,UAAU,YAAY;IAClB,KAAK,EAAE,GAAG,CAAA;IACV;;MAEE;IACF,OAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAG,OAAO,CAAA;IACtB;;MAEE;IACF,MAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAW,CAAC,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAA;IAC5B,OAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAG,MAAM,CAAA;IACnB,KAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC/B;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAG,KAAK,EAAG,YAAY,eAoNzD"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/audio-player/index.tsx"],"names":[],"mappings":";AAQA,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAA;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,YAAY,eAmNxD"}
package/dist/src/components/audio-player/old_index.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ /// <reference types="react" />
2
+ import '../../shared/global.css';
3
+ interface IAudioPlayer {
4
+ audio: any;
5
+ /**
6
+ * @prop {number} startAt: o tempo em que o audio deve começar (em segundos)
7
+ */
8
+ startAt?: number;
9
+ coverImage?: string;
10
+ title?: string;
11
+ description?: string;
12
+ date?: string;
13
+ longLoading?: boolean;
14
+ /**
15
+ * @prop {number} volume: valor do volume (minimo 0 - máximo 1)
16
+ */
17
+ volume?: number;
18
+ onProgress?: (data: any) => void;
19
+ onEnded?: () => void;
20
+ exitSound?: number;
21
+ style?: React.CSSProperties;
22
+ }
23
+ export default function AudioPlayer(props: IAudioPlayer): JSX.Element;
24
+ export {};
25
+ //# sourceMappingURL=old_index.d.ts.map
package/dist/src/components/audio-player/old_index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"old_index.d.ts","sourceRoot":"","sources":["../../../../src/components/audio-player/old_index.tsx"],"names":[],"mappings":";AAAA,OAAO,yBAAyB,CAAA;AAShC,UAAU,YAAY;IAClB,KAAK,EAAE,GAAG,CAAA;IACV;;MAEE;IACF,OAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAG,OAAO,CAAA;IACtB;;MAEE;IACF,MAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAW,CAAC,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAA;IAC5B,OAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAG,MAAM,CAAA;IACnB,KAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC/B;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAG,KAAK,EAAG,YAAY,eAoNzD"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "frst-components",
3
3
  "homepage": "http://FRST-Falconi.github.io/storybook.frstfalconi.com",
4
- "version": "0.21.18",
4
+ "version": "0.21.20",
5
5
  "private": false,
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
@@ -95,4 +95,4 @@
95
95
  "bugs": {
96
96
  "url": "https://github.com/FRST-Falconi/storybook.frstfalconi.com/issues"
97
97
  }
98
- }
98
+ }