@irontec/ivoz-ui 1.7.19 → 1.8.0

package/components/shared/ConfirmDialog.styles.d.ts

@@ -10,8 +10,8 @@ export declare const StyledDialogContentText: import("@emotion/styled").StyledCo
     noWrap?: boolean | undefined;
     paragraph?: boolean | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", string>> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "variant" | "align" | ("color" | "p" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "noWrap" | "gutterBottom" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "variant" | "align" | ("color" | "p" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@irontec/ivoz-ui",
-  "version": "1.7.19",
+  "version": "1.8.0",
   "description": "UI library used in ivozprovider",
   "license": "GPL-3.0",
   "main": "index.js",
@@ -57,7 +57,6 @@
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-sprintf-postprocessor": "^0.2.2",
     "query-string": "^7.0.0",
-    "react-audio-player": "^0.17.0",
     "react-color": "^2.19.3",
     "react-i18next": "^13.0.0",
     "sync-request": "^6.1.0",

package/services/form/Field/FileUploader/Variant/AudioFileUploader.js

@@ -11,14 +11,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import DownloadRoundedIcon from '@mui/icons-material/DownloadRounded';
 import UploadFileRoundedIcon from '@mui/icons-material/UploadFileRounded';
 import { useEffect, useState } from 'react';
-import ReactAudioPlayerSrc from 'react-audio-player';
 import { useStoreActions } from 'store';
 import { StyledFileNameContainer, StyledFileUploaderContainer, StyledUploadButtonLabel, } from '../FileUploader.styles';
 import { Box } from '@mui/material';
-// see https://github.com/justinmc/react-audio-player/issues/164
-const ReactAudioPlayer = process.env.NODE_ENV === 'production'
-    ? ReactAudioPlayerSrc.default
-    : ReactAudioPlayerSrc;
+import AudioPlayer from './AudioPlayer';
 export const AudioFileUploader = (props) => {
     var _a, _b;
     const { _columnName, accept, values, disabled, downloadPath, handleDownload, changeHandler, onBlur, } = props;
@@ -63,5 +59,5 @@ export const AudioFileUploader = (props) => {
                             display: 'flex',
                             justifyContent: 'space-between',
                             marginBottom: 'var(--spacing-sm)',
-                        } }, { children: [fileName && (_jsxs(StyledFileNameContainer, Object.assign({ className: disabled ? 'disabled' : '' }, { children: [values.id && _jsx(DownloadRoundedIcon, { onClick: handleDownload }), fileName, " (", fileSizeMb, "MB)"] }))), !disabled && (_jsx(StyledUploadButtonLabel, Object.assign({ htmlFor: id, className: 'upload-icon' }, { children: _jsx(UploadFileRoundedIcon, {}) })))] })), _jsx(ReactAudioPlayer, { src: audioSrc, controls: true })] }), _jsx("div", Object.assign({ className: 'uploader-backdrop' }, { children: "Audio" }))] }));
+                        } }, { children: [fileName && (_jsxs(StyledFileNameContainer, Object.assign({ className: disabled ? 'disabled' : '' }, { children: [values.id && _jsx(DownloadRoundedIcon, { onClick: handleDownload }), fileName, " (", fileSizeMb, "MB)"] }))), !disabled && (_jsx(StyledUploadButtonLabel, Object.assign({ htmlFor: id, className: 'upload-icon' }, { children: _jsx(UploadFileRoundedIcon, {}) })))] })), _jsx(AudioPlayer, { src: audioSrc })] }), _jsx("div", Object.assign({ className: 'uploader-backdrop' }, { children: "Audio" }))] }));
 };

package/services/form/Field/FileUploader/Variant/AudioPlayer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface AudioPlayerProps {
+    src: string;
+}
+export default function AudioPlayer({ src }: AudioPlayerProps): JSX.Element;
+export {};

package/services/form/Field/FileUploader/Variant/AudioPlayer.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
+import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
+import VolumeUpRoundedIcon from '@mui/icons-material/VolumeUpRounded';
+import VolumeOffRoundedIcon from '@mui/icons-material/VolumeOffRounded';
+import { Box, IconButton, Slider, Typography } from '@mui/material';
+import { useRef, useState, useEffect, useCallback } from 'react';
+function formatTime(seconds) {
+    const m = Math.floor(seconds / 60);
+    const s = Math.floor(seconds % 60);
+    return `${m}:${s.toString().padStart(2, '0')}`;
+}
+export default function AudioPlayer({ src }) {
+    const audioRef = useRef(null);
+    const [playing, setPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [volume, setVolume] = useState(1);
+    const [muted, setMuted] = useState(false);
+    const [showVolume, setShowVolume] = useState(false);
+    const toggle = useCallback(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        if (playing) {
+            audio.pause();
+        }
+        else {
+            audio.play();
+        }
+        setPlaying(!playing);
+    }, [playing]);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const onTime = () => setCurrentTime(audio.currentTime);
+        const onMeta = () => setDuration(audio.duration);
+        const onEnded = () => setPlaying(false);
+        audio.addEventListener('timeupdate', onTime);
+        audio.addEventListener('loadedmetadata', onMeta);
+        audio.addEventListener('ended', onEnded);
+        return () => {
+            audio.removeEventListener('timeupdate', onTime);
+            audio.removeEventListener('loadedmetadata', onMeta);
+            audio.removeEventListener('ended', onEnded);
+        };
+    }, []);
+    const seek = (_, value) => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const t = value;
+        audio.currentTime = t;
+        setCurrentTime(t);
+    };
+    return (_jsxs(Box, Object.assign({ sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            bgcolor: 'grey.100',
+            borderRadius: '24px',
+            px: 1,
+            py: 0.5,
+        } }, { children: [_jsx("audio", { ref: audioRef, src: src, preload: 'metadata' }), _jsx(IconButton, Object.assign({ size: 'small', onClick: toggle }, { children: playing ? (_jsx(PauseRoundedIcon, { fontSize: 'small' })) : (_jsx(PlayArrowRoundedIcon, { fontSize: 'small' })) })), _jsxs(Typography, Object.assign({ variant: 'caption', sx: { whiteSpace: 'nowrap', minWidth: 70 } }, { children: [formatTime(currentTime), " / ", formatTime(duration || 0)] })), _jsx(Slider, { size: 'small', min: 0, max: duration || 1, value: currentTime, onChange: seek, sx: { mx: 1, flex: 1, minWidth: 60 } }), _jsxs(Box, Object.assign({ sx: { position: 'relative', display: 'flex', alignItems: 'center' }, onMouseEnter: () => setShowVolume(true), onMouseLeave: () => setShowVolume(false) }, { children: [_jsx(IconButton, Object.assign({ size: 'small', onClick: () => {
+                            const next = !muted;
+                            if (audioRef.current) {
+                                audioRef.current.muted = next;
+                            }
+                            setMuted(next);
+                        } }, { children: muted || volume === 0 ? (_jsx(VolumeOffRoundedIcon, { fontSize: 'small' })) : (_jsx(VolumeUpRoundedIcon, { fontSize: 'small' })) })), showVolume && (_jsx(Box, Object.assign({ sx: {
+                            position: 'absolute',
+                            left: '100%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            bgcolor: 'grey.100',
+                            borderRadius: '12px',
+                            px: 1,
+                            width: 80,
+                        } }, { children: _jsx(Slider, { size: 'small', min: 0, max: 1, step: 0.01, value: muted ? 0 : volume, onChange: (_, v) => {
+                                const val = v;
+                                setVolume(val);
+                                setMuted(val === 0);
+                                if (audioRef.current) {
+                                    audioRef.current.volume = val;
+                                    audioRef.current.muted = val === 0;
+                                }
+                            } }) })))] }))] })));
+}