frst-components 0.20.66 → 0.20.68

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.
package/dist/index.js CHANGED
@@ -6,8 +6,8 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var React = require('react');
7
7
  var styled = require('styled-components');
8
8
  var useSound = require('use-sound');
9
- var reactI18next = require('react-i18next');
10
9
  var material = require('@mui/material');
10
+ var reactI18next = require('react-i18next');
11
11
  var Button$7 = require('@mui/material/Button');
12
12
  var Menu$1 = require('@mui/material/Menu');
13
13
  var MenuItem = require('@mui/material/MenuItem');
@@ -822,11 +822,14 @@ styled.keyframes `
822
822
  0% { background-position: -468px 0;}
823
823
  100% { background-position: 468px 0;}
824
824
  `;
825
- const loadingContent$1 = styled__default["default"].div `
826
- background: linear-gradient(90deg, rgba(123, 129, 136, 0) 6.43%, rgba(123, 129, 136, 0.2) 22.38%), #d9d9d9;
825
+ styled__default["default"].div `
826
+ /* background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #c4c4c4 40%, #c4c4c4 100%); */
827
+ /* background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #c4c4c4 40%, #c4c4c4 100%);
828
+ background-repeat: no-repeat; */
829
+ /* background-size: 100% 100%; */
827
830
  color: transparent;
828
831
  border-radius: 16px;
829
- width: 100%;
832
+ /* width: 100%; */
830
833
  /* height: 0.45em; */
831
834
  position: absolute;
832
835
  z-index: 9;
@@ -840,13 +843,7 @@ const loadingContent$1 = styled__default["default"].div `
840
843
  -webkit-animation-name: placeholderShimmer;
841
844
  -webkit-animation-timing-function: linear;
842
845
 
843
- &:first-child {
844
- width: 50%;
845
- margin-bottom: 8px;
846
- }
847
- &:last-child {
848
- width: 30%;
849
- }
846
+
850
847
  `;
851
848
  const containerMask = styled__default["default"].div `
852
849
  width: 100%;
@@ -871,6 +868,14 @@ const thumb = styled__default["default"].div `
871
868
  background-position: center;
872
869
  background-size: cover;
873
870
  `;
871
+ const thumbLoading = styled__default["default"].div `
872
+ border-radius: 8px;
873
+ width: 194px;
874
+ max-width: 194px;
875
+ height: 194px;
876
+ z-index: 2;
877
+ background-color: red;
878
+ `;
874
879
  const content = styled__default["default"].div `
875
880
  display: flex;
876
881
  flex-direction: column;
@@ -1220,26 +1225,31 @@ function AudioPlayer(props) {
1220
1225
  let result = (val - min) * 100 / (max - min);
1221
1226
  return result;
1222
1227
  };
1223
- return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [Loading &&
1224
- jsxRuntime.jsx(loadingContent$1, {}), jsxRuntime.jsxs(container$1, { style: { ...props.style, backgroundImage: props.coverImage ? `url(${props.coverImage})` : '' }, children: [jsxRuntime.jsx(containerMask, {}), 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, " "] }), jsxRuntime.jsxs(controls, { children: [jsxRuntime.jsx(navigationButton, { onClick: () => {
1225
- sound.seek([seconds ? seconds - 15 : 0]);
1226
- }, children: jsxRuntime.jsx(Back15, { fill: 'currentColor' }) }), !isPlaying ?
1227
- jsxRuntime.jsx(playButton, { onClick: playingButton, children: jsxRuntime.jsx(PlayIcon, { customColor_1: 'currentColor' }) })
1228
- :
1229
- jsxRuntime.jsx(playButton, { onClick: playingButton, children: jsxRuntime.jsx(PauseIcon, { customColor_1: 'currentColor' }) }), jsxRuntime.jsx(navigationButton, { onClick: () => {
1230
- sound.seek([seconds ? seconds + 15 : 15]);
1231
- }, children: jsxRuntime.jsx(Foward15, { fill: 'currentColor' }) }), jsxRuntime.jsx(volumeControl, { children: audioVolume === 0 ?
1232
- jsxRuntime.jsx(volume, { onClick: () => {
1233
- setAudioVolume(0.1);
1234
- }, children: jsxRuntime.jsx(MuteIcon, {}) })
1235
- :
1236
- jsxRuntime.jsxs(volume, { children: [jsxRuntime.jsx("div", { onClick: () => {
1237
- setAudioVolume(0);
1238
- }, children: jsxRuntime.jsx(VolumeIcon, {}) }), jsxRuntime.jsx(volumeBar, { type: 'range', min: '0', max: '1', value: audioVolume, className: 'volumeBar', step: '0.1', onChange: (e) => {
1239
- setAudioVolume(Number(e.target.value));
1240
- }, 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) => {
1241
- sound.seek([e.target.value]);
1242
- }, currentInputValue: percentagePlaytime }), jsxRuntime.jsxs(timeText, { children: [time.min.toString().padStart(2, '0'), ":", time.sec.toString().padStart(2, '0')] })] })] })] })] }) }));
1228
+ 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 ?
1229
+ jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(thumbLoading, { style: { ...props.style, backgroundImage: props.coverImage ? `url(${props.coverImage})` : `url(${defaultThumb})` } }) })
1230
+ :
1231
+ 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 ?
1232
+ 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 })] }) })
1233
+ :
1234
+ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(controls, { children: [jsxRuntime.jsx(navigationButton, { onClick: () => {
1235
+ sound.seek([seconds ? seconds - 15 : 0]);
1236
+ }, children: jsxRuntime.jsx(Back15, { fill: 'currentColor' }) }), !isPlaying ?
1237
+ jsxRuntime.jsx(playButton, { onClick: playingButton, children: jsxRuntime.jsx(PlayIcon, { customColor_1: 'currentColor' }) })
1238
+ :
1239
+ jsxRuntime.jsx(playButton, { onClick: playingButton, children: jsxRuntime.jsx(PauseIcon, { customColor_1: 'currentColor' }) }), jsxRuntime.jsx(navigationButton, { onClick: () => {
1240
+ sound.seek([seconds ? seconds + 15 : 15]);
1241
+ }, children: jsxRuntime.jsx(Foward15, { fill: 'currentColor' }) }), jsxRuntime.jsx(volumeControl, { children: audioVolume === 0 ?
1242
+ jsxRuntime.jsx(volume, { onClick: () => {
1243
+ setAudioVolume(0.1);
1244
+ }, children: jsxRuntime.jsx(MuteIcon, {}) })
1245
+ :
1246
+ jsxRuntime.jsxs(volume, { children: [jsxRuntime.jsx("div", { onClick: () => {
1247
+ setAudioVolume(0);
1248
+ }, children: jsxRuntime.jsx(VolumeIcon, {}) }), jsxRuntime.jsx(volumeBar, { type: 'range', min: '0', max: '1', value: audioVolume, className: 'volumeBar', step: '0.1', onChange: (e) => {
1249
+ setAudioVolume(Number(e.target.value));
1250
+ }, 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) => {
1251
+ sound.seek([e.target.value]);
1252
+ }, currentInputValue: percentagePlaytime }), jsxRuntime.jsxs(timeText, { children: [time.min.toString().padStart(2, '0'), ":", time.sec.toString().padStart(2, '0')] })] })] })] })] }) }) }));
1243
1253
  }
1244
1254
 
1245
1255
  const ContainerDesafios = styled__default["default"].div `
@@ -2,6 +2,7 @@ export declare const container: import("styled-components").StyledComponent<"div
2
2
  export declare const loadingContent: import("styled-components").StyledComponent<"div", any, {}, never>;
3
3
  export declare const containerMask: import("styled-components").StyledComponent<"div", any, {}, never>;
4
4
  export declare const thumb: import("styled-components").StyledComponent<"div", any, {}, never>;
5
+ export declare const thumbLoading: import("styled-components").StyledComponent<"div", any, {}, never>;
5
6
  export declare const content: import("styled-components").StyledComponent<"div", any, {}, never>;
6
7
  export declare const title: import("styled-components").StyledComponent<"p", any, {}, never>;
7
8
  export declare const description: import("styled-components").StyledComponent<"p", any, {}, never>;
@@ -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,oEAyB1B,CAAA;AAED,eAAO,MAAM,aAAa,oEAUzB,CAAA;AAED,eAAO,MAAM,KAAK,oEAWjB,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":"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"}
@@ -10,6 +10,7 @@ interface IAudioPlayer {
10
10
  title?: string;
11
11
  description?: string;
12
12
  date?: string;
13
+ longLoading?: boolean;
13
14
  /**
14
15
  * @prop {number} volume: valor do volume (minimo 0 - máximo 1)
15
16
  */
@@ -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;;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,eAmMzD"}
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"}
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.20.66",
4
+ "version": "0.20.68",
5
5
  "private": false,
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",