pixel-priya 1.3.38 → 1.3.40
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/lib/components/AllProjectsDropdown/AllProjectsDropdown.js +24 -17
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.js.map +1 -1
- package/lib/components/AudioPlayer/AudioPlayer.d.ts +5 -0
- package/lib/components/AudioPlayer/AudioPlayer.js +129 -0
- package/lib/components/AudioPlayer/AudioPlayer.js.map +1 -0
- package/lib/components/AudioPlayer/index.d.ts +2 -0
- package/lib/components/AudioPlayer/index.js +3 -0
- package/lib/components/AudioPlayer/index.js.map +1 -0
- package/lib/components/AudioPlayer/types.d.ts +67 -0
- package/lib/components/AudioPlayer/types.js +2 -0
- package/lib/components/AudioPlayer/types.js.map +1 -0
- package/lib/components/Audioplayercontainer/Audioplayercontainer.d.ts +3 -0
- package/lib/components/Audioplayercontainer/Audioplayercontainer.js +68 -0
- package/lib/components/Audioplayercontainer/Audioplayercontainer.js.map +1 -0
- package/lib/components/CardPanel/CardPanel.d.ts +4 -0
- package/lib/components/CardPanel/CardPanel.js +9 -0
- package/lib/components/CardPanel/CardPanel.js.map +1 -0
- package/lib/components/CardPanel/index.d.ts +1 -0
- package/lib/components/CardPanel/index.js +2 -0
- package/lib/components/CardPanel/index.js.map +1 -0
- package/lib/components/CardPanel/types.d.ts +27 -0
- package/lib/components/CardPanel/types.js +2 -0
- package/lib/components/CardPanel/types.js.map +1 -0
- package/lib/components/Charts/BarChart/BarChart.js +32 -29
- package/lib/components/Charts/BarChart/BarChart.js.map +1 -1
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.js +17 -12
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.js.map +1 -1
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +1 -0
- package/lib/components/Charts/ScoreChart/ScoreGaugeChart.d.ts +5 -0
- package/lib/components/Charts/ScoreChart/ScoreGaugeChart.js +98 -0
- package/lib/components/Charts/ScoreChart/ScoreGaugeChart.js.map +1 -0
- package/lib/components/Charts/ScoreChart/index.d.ts +1 -0
- package/lib/components/Charts/ScoreChart/index.js +2 -0
- package/lib/components/Charts/ScoreChart/index.js.map +1 -0
- package/lib/components/Charts/ScoreChart/types.d.ts +42 -0
- package/lib/components/Charts/ScoreChart/types.js +2 -0
- package/lib/components/Charts/ScoreChart/types.js.map +1 -0
- package/lib/components/Charts/StackedBarChart/StackedBarChart.js +4 -3
- package/lib/components/Charts/StackedBarChart/StackedBarChart.js.map +1 -1
- package/lib/components/Chip/Chip.d.ts +1 -1
- package/lib/components/Chip/Chip.js +19 -6
- package/lib/components/Chip/Chip.js.map +1 -1
- package/lib/components/Chip/types.d.ts +1 -0
- package/lib/components/Icon/iconList.js +48 -0
- package/lib/components/Icon/iconList.js.map +1 -1
- package/lib/components/MenuOption/MenuOption.js +3 -1
- package/lib/components/MenuOption/MenuOption.js.map +1 -1
- package/lib/components/MenuOption/types.d.ts +2 -0
- package/lib/components/NLPInput/NlpInput.d.ts +1 -1
- package/lib/components/NLPInput/NlpInput.js +3 -3
- package/lib/components/NLPInput/NlpInput.js.map +1 -1
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +2 -0
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.js.map +1 -1
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.js +8 -5
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.js.map +1 -1
- package/lib/components/NLPInput/types.d.ts +2 -0
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.js +2 -2
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.js.map +1 -1
- package/lib/components/SequentialConnectingBranch/types.d.ts +1 -0
- package/lib/components/Table/Types.d.ts +6 -0
- package/lib/components/Table/components/SortableRow.js +10 -2
- package/lib/components/Table/components/SortableRow.js.map +1 -1
- package/lib/components/TableWithAccordion/TableWithAccordion.js +8 -24
- package/lib/components/TableWithAccordion/TableWithAccordion.js.map +1 -1
- package/lib/components/Tabs/Tabs.js +2 -0
- package/lib/components/Tabs/Tabs.js.map +1 -1
- package/lib/components/Toastify/Toastify.js +1 -1
- package/lib/components/Weightagetable/Weightagetable.d.ts +5 -0
- package/lib/components/Weightagetable/Weightagetable.js +128 -0
- package/lib/components/Weightagetable/Weightagetable.js.map +1 -0
- package/lib/components/Weightagetable/index.d.ts +2 -0
- package/lib/components/Weightagetable/index.js +3 -0
- package/lib/components/Weightagetable/index.js.map +1 -0
- package/lib/components/Weightagetable/types.d.ts +161 -0
- package/lib/components/Weightagetable/types.js +2 -0
- package/lib/components/Weightagetable/types.js.map +1 -0
- package/lib/index.d.ts +248 -4
- package/lib/index.js +10 -10
- package/lib/index.js.map +1 -1
- package/lib/styles.css +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
|
@@ -22,6 +22,15 @@ const AllProjectsDropdown = ({ onClick = () => { }, onMenuClick = () => { }, opt
|
|
|
22
22
|
const [focusedIndex, setFocusedIndex] = useState(null);
|
|
23
23
|
const scrollRef = useRef(null);
|
|
24
24
|
const isDropdownOpen = showOptions || showClicked;
|
|
25
|
+
const reorderedOptions = optionsList.length
|
|
26
|
+
? [
|
|
27
|
+
...optionsList.filter((option) => option.value === 'All Projects'),
|
|
28
|
+
...optionsList.filter((option) => option.value === selectedOptions.value &&
|
|
29
|
+
option.value !== 'All Projects'),
|
|
30
|
+
...optionsList.filter((option) => option.value !== 'All Projects' &&
|
|
31
|
+
option.value !== selectedOptions.value),
|
|
32
|
+
]
|
|
33
|
+
: [];
|
|
25
34
|
// ⇩⇩⇩ Updated: use actual return type of setTimeout (works in Node & DOM) ⇩⇩⇩
|
|
26
35
|
const [closeTimeout, setCloseTimeout] = useState(null);
|
|
27
36
|
// ⇧⇧⇧ Updated: use actual return type of setTimeout (works in Node & DOM) ⇧⇧⇧
|
|
@@ -114,7 +123,12 @@ const AllProjectsDropdown = ({ onClick = () => { }, onMenuClick = () => { }, opt
|
|
|
114
123
|
};
|
|
115
124
|
useClickOutside(optionsRef, () => setShowClicked(false), [containerRef]);
|
|
116
125
|
useEffect(() => {
|
|
117
|
-
if (!
|
|
126
|
+
if (!showOptions && !showClicked) {
|
|
127
|
+
setFocusedIndex(null);
|
|
128
|
+
}
|
|
129
|
+
}, [showOptions, showClicked]);
|
|
130
|
+
useEffect(() => {
|
|
131
|
+
if (!isDropdownOpen || disabled || reorderedOptions.length === 0)
|
|
118
132
|
return;
|
|
119
133
|
const handleKeyDown = (event) => {
|
|
120
134
|
if (event.key === 'ArrowDown') {
|
|
@@ -122,20 +136,20 @@ const AllProjectsDropdown = ({ onClick = () => { }, onMenuClick = () => { }, opt
|
|
|
122
136
|
setFocusedIndex((prev) => {
|
|
123
137
|
if (prev === null)
|
|
124
138
|
return 0;
|
|
125
|
-
return Math.min(prev + 1,
|
|
139
|
+
return Math.min(prev + 1, reorderedOptions.length - 1);
|
|
126
140
|
});
|
|
127
141
|
}
|
|
128
142
|
if (event.key === 'ArrowUp') {
|
|
129
143
|
event.preventDefault();
|
|
130
144
|
setFocusedIndex((prev) => {
|
|
131
145
|
if (prev === null)
|
|
132
|
-
return
|
|
146
|
+
return reorderedOptions.length - 1;
|
|
133
147
|
return Math.max(prev - 1, 0);
|
|
134
148
|
});
|
|
135
149
|
}
|
|
136
150
|
if (event.key === 'Enter' && focusedIndex !== null) {
|
|
137
151
|
event.preventDefault();
|
|
138
|
-
const focusedOption =
|
|
152
|
+
const focusedOption = reorderedOptions[focusedIndex];
|
|
139
153
|
if (focusedOption) {
|
|
140
154
|
handleSelectOption(focusedOption);
|
|
141
155
|
}
|
|
@@ -143,7 +157,7 @@ const AllProjectsDropdown = ({ onClick = () => { }, onMenuClick = () => { }, opt
|
|
|
143
157
|
};
|
|
144
158
|
window.addEventListener('keydown', handleKeyDown);
|
|
145
159
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
146
|
-
}, [isDropdownOpen, disabled,
|
|
160
|
+
}, [isDropdownOpen, disabled, reorderedOptions, focusedIndex]);
|
|
147
161
|
useEffect(() => {
|
|
148
162
|
if (focusedIndex === null)
|
|
149
163
|
return;
|
|
@@ -175,25 +189,18 @@ const AllProjectsDropdown = ({ onClick = () => { }, onMenuClick = () => { }, opt
|
|
|
175
189
|
? 'arrows_top_icon'
|
|
176
190
|
: 'arrows_down_icon', color: disabled
|
|
177
191
|
? 'var(--disabled-icon-color)'
|
|
178
|
-
: 'var(--primary-icon-color)', height: 8, width: 8, hoverEffect: false })] })] }) }), (showOptions || showClicked) && !disabled && (_jsxs("div", { className: classNames('ff-projects-dropdown'), ref: optionsRef, onMouseEnter: dropDownMouseEnter, children: [_jsx("div", { className: "ff-dropdown-search-container", onClick: (e) => e.stopPropagation(), children: _jsx(Search, { onSearch: handleSearch, value: searchValue, isExpand: true, onClose: () => { }, onExpand: () => { }, showClose: false, placeholder: placeholder, disabled: disabled, showToaster: false }) }), _jsx("div", { className: classNames('option-card'
|
|
192
|
+
: 'var(--primary-icon-color)', height: 8, width: 8, hoverEffect: false })] })] }) }), (showOptions || showClicked) && !disabled && (_jsxs("div", { className: classNames('ff-projects-dropdown'), ref: optionsRef, onMouseEnter: dropDownMouseEnter, children: [_jsx("div", { className: "ff-dropdown-search-container", onClick: (e) => e.stopPropagation(), children: _jsx(Search, { onSearch: handleSearch, value: searchValue, isExpand: true, onClose: () => { }, onExpand: () => { }, showClose: false, placeholder: placeholder, disabled: disabled, showToaster: false }) }), _jsx("div", { ref: scrollRef, className: classNames('option-card', {
|
|
193
|
+
scroll: reorderedOptions.length > 4,
|
|
194
|
+
}), children: reorderedOptions.map((option, index) => (_jsxs("div", { "data-option-index": index, onClick: (e) => {
|
|
179
195
|
e.stopPropagation();
|
|
180
196
|
handleSelectOption(option);
|
|
181
197
|
}, onMouseEnter: () => setFocusedIndex(index), className: classNames('ff-projects-options', {
|
|
182
|
-
['ff-selected-option']:
|
|
183
|
-
['ff-option-disabled']: disabled,
|
|
184
|
-
['ff-focused-option']: focusedIndex === index,
|
|
185
|
-
}), children: [_jsx("div", { className: classNames('ff-projects-icons'), children: _jsx(Icon, { name: option.iconName, height: 12, width: 12 }) }), _jsx(Typography, { as: 'div', lineHeight: '30px', className: "ff-projects-label", children: option.label }, index)] }, index))) }), _jsx("div", { children: optionsList.length === 1 && (_jsx("div", { className: "ff-no-data-found", children: "-No Projects-" })) }), _jsx("div", { ref: scrollRef, className: classNames('option-card', {
|
|
186
|
-
scroll: optionsList.length > 4,
|
|
187
|
-
}), children: optionsList.map((option, index) => index > 0 && (_jsxs("div", { "data-option-index": index, onClick: (e) => {
|
|
188
|
-
e.stopPropagation();
|
|
189
|
-
handleSelectOption(option);
|
|
190
|
-
}, className: classNames('ff-projects-options', {
|
|
191
|
-
['ff-selected-option']: selectedOption.label === option.label,
|
|
198
|
+
['ff-selected-option']: selectedOptions.label === option.label,
|
|
192
199
|
['ff-option-disabled']: disabled,
|
|
193
200
|
['ff-focused-option']: focusedIndex === index,
|
|
194
201
|
}), children: [_jsx("div", { className: classNames('ff-projects-icons'), children: _jsx(Icon, { name: option.iconName, height: 12, width: 12 }) }), _jsx(Typography, { as: 'div', lineHeight: '30px', className: "ff-projects-label", children: _jsx(Tooltip, { title: isTextTruncated(option.label, 165, 'pixel')
|
|
195
202
|
? option.label
|
|
196
|
-
: '', children: truncateText(option.label, 165, 'pixel') }) }, index)] }, index))) })] }))] }));
|
|
203
|
+
: '', children: truncateText(option.label, 165, 'pixel') }) }, index)] }, index))) }), _jsx("div", { children: optionsList.length === 1 && (_jsx("div", { className: "ff-no-data-found", children: "-No Projects-" })) })] }))] }));
|
|
197
204
|
};
|
|
198
205
|
export default AllProjectsDropdown;
|
|
199
206
|
//# sourceMappingURL=AllProjectsDropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AllProjectsDropdown.js","sourceRoot":"","sources":["../../../src/components/AllProjectsDropdown/AllProjectsDropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,EACL,eAAe,EACf,YAAY,GACb,MAAM,uCAAuC,CAAC;AAC/C,OAAO,4BAA4B,CAAC;AACpC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,eAAe,MAAM,6BAA6B,CAAC;AAC1D,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAE/D,MAAM,mBAAmB,GAAG,CAAC,EAC3B,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,WAAW,GAAG,GAAG,EAAE,GAAE,CAAC,EACtB,OAAO,EACP,cAAc,GAAG;IACf,KAAK,EAAE,cAAc;IACrB,KAAK,EAAE,cAAc;IACrB,QAAQ,EAAE,cAAc;CACzB,EACD,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,QAAQ,GAAG,KAAK,GACS,EAAE,EAAE;IAC7B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;IACvE,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAgB,OAAO,CAAC,CAAC;IACvE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,cAAc,GAAG,WAAW,IAAI,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"AllProjectsDropdown.js","sourceRoot":"","sources":["../../../src/components/AllProjectsDropdown/AllProjectsDropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useRef, useState } from 'react';
|
|
3
|
+
import Typography from '../Typography';
|
|
4
|
+
import Icon from '../Icon';
|
|
5
|
+
import MenuOption from '../MenuOption';
|
|
6
|
+
import Chip from '../Chip';
|
|
7
|
+
import './AudioPlayer.scss';
|
|
8
|
+
const defaultFormatTime = (seconds) => {
|
|
9
|
+
const safeSeconds = Number.isFinite(seconds) && seconds > 0 ? seconds : 0;
|
|
10
|
+
const mins = Math.floor(safeSeconds / 60);
|
|
11
|
+
const secs = Math.floor(safeSeconds % 60);
|
|
12
|
+
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
|
13
|
+
};
|
|
14
|
+
const SPEED_OPTIONS = [0.5, 1.0, 1.5, 2.0];
|
|
15
|
+
const AudioPlayer = ({ duration, currentTime, isPlaying = false, onPlayPause = () => { }, onSeek = () => { }, isMuted = false, onMuteToggle = () => { }, menuOptions, onMenuOptionClick = () => { }, playbackRate = 1, onPlaybackRateChange = () => { }, disabled = false, seekStep = 5, formatTime = defaultFormatTime, className = '', style = {}, }) => {
|
|
16
|
+
const progressPercent = duration > 0 ? (currentTime / duration) * 100 : 0;
|
|
17
|
+
const moreRef = useRef(null);
|
|
18
|
+
const speedRowRef = useRef(null);
|
|
19
|
+
const [isSpeedMenuOpen, setIsSpeedMenuOpen] = useState(false);
|
|
20
|
+
const [speedMenuPosition, setSpeedMenuPosition] = useState({
|
|
21
|
+
top: 0,
|
|
22
|
+
left: 0,
|
|
23
|
+
});
|
|
24
|
+
const [highlightedSpeedIndex, setHighlightedSpeedIndex] = useState(0);
|
|
25
|
+
const speedMenuRef = useRef(null);
|
|
26
|
+
const resolvedMenuOptions = menuOptions ?? [
|
|
27
|
+
{ label: 'Captions', value: 'captions', icon: 'captions' },
|
|
28
|
+
{
|
|
29
|
+
label: (_jsxs("div", { ref: speedRowRef, className: "playback-menu-option", children: ["Playback Speed ", _jsx(Chip, { label: `${playbackRate.toFixed(1)} x` })] })),
|
|
30
|
+
value: 'playback-speed',
|
|
31
|
+
icon: 'playback',
|
|
32
|
+
keepMenuOpen: true,
|
|
33
|
+
},
|
|
34
|
+
];
|
|
35
|
+
const handleSeek = (event) => {
|
|
36
|
+
onSeek(Number(event.target.value));
|
|
37
|
+
};
|
|
38
|
+
const clampTime = (time) => Math.min(Math.max(time, 0), duration || 0);
|
|
39
|
+
const handleKeyDown = (event) => {
|
|
40
|
+
if (disabled)
|
|
41
|
+
return;
|
|
42
|
+
const target = event.target;
|
|
43
|
+
if (target.tagName === 'INPUT')
|
|
44
|
+
return;
|
|
45
|
+
switch (event.key) {
|
|
46
|
+
case ' ':
|
|
47
|
+
case 'Spacebar':
|
|
48
|
+
event.preventDefault();
|
|
49
|
+
onPlayPause();
|
|
50
|
+
break;
|
|
51
|
+
case 'm':
|
|
52
|
+
case 'M':
|
|
53
|
+
event.preventDefault();
|
|
54
|
+
onMuteToggle();
|
|
55
|
+
break;
|
|
56
|
+
case 'ArrowRight':
|
|
57
|
+
event.preventDefault();
|
|
58
|
+
onSeek(clampTime(currentTime + seekStep));
|
|
59
|
+
break;
|
|
60
|
+
case 'ArrowLeft':
|
|
61
|
+
event.preventDefault();
|
|
62
|
+
onSeek(clampTime(currentTime - seekStep));
|
|
63
|
+
break;
|
|
64
|
+
default:
|
|
65
|
+
break;
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
const handleMenuOptionClick = (option) => {
|
|
69
|
+
if (option.value === 'playback-speed') {
|
|
70
|
+
const rowRect = speedRowRef.current?.getBoundingClientRect();
|
|
71
|
+
const panelEl = speedRowRef.current?.closest('.ff-option-card');
|
|
72
|
+
const panelRect = panelEl?.getBoundingClientRect();
|
|
73
|
+
if (rowRect && panelRect) {
|
|
74
|
+
setSpeedMenuPosition({
|
|
75
|
+
top: panelRect.top,
|
|
76
|
+
left: rowRect.right + 8,
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
const currentIndex = SPEED_OPTIONS.indexOf(playbackRate);
|
|
80
|
+
setHighlightedSpeedIndex(currentIndex >= 0 ? currentIndex : 0);
|
|
81
|
+
setIsSpeedMenuOpen(true);
|
|
82
|
+
requestAnimationFrame(() => speedMenuRef.current?.focus());
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
onMenuOptionClick(option);
|
|
86
|
+
};
|
|
87
|
+
const handleSpeedMenuKeyDown = (event) => {
|
|
88
|
+
switch (event.key) {
|
|
89
|
+
case 'ArrowDown':
|
|
90
|
+
event.preventDefault();
|
|
91
|
+
setHighlightedSpeedIndex((prev) => (prev + 1) % SPEED_OPTIONS.length);
|
|
92
|
+
break;
|
|
93
|
+
case 'ArrowUp':
|
|
94
|
+
event.preventDefault();
|
|
95
|
+
setHighlightedSpeedIndex((prev) => (prev - 1 + SPEED_OPTIONS.length) % SPEED_OPTIONS.length);
|
|
96
|
+
break;
|
|
97
|
+
case 'Enter':
|
|
98
|
+
event.preventDefault();
|
|
99
|
+
onPlaybackRateChange(SPEED_OPTIONS[highlightedSpeedIndex]);
|
|
100
|
+
setIsSpeedMenuOpen(false);
|
|
101
|
+
break;
|
|
102
|
+
case 'Escape':
|
|
103
|
+
event.preventDefault();
|
|
104
|
+
setIsSpeedMenuOpen(false);
|
|
105
|
+
break;
|
|
106
|
+
default:
|
|
107
|
+
break;
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
return (_jsxs("div", { className: `ff-audio-player ${className}`, style: style, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, role: "group", "aria-label": "Audio player", onKeyDown: handleKeyDown, children: [_jsx("button", { type: "button", className: "ff-audio-play-btn", onClick: onPlayPause, disabled: disabled, "aria-label": isPlaying ? 'Pause' : 'Play', children: isPlaying ? (_jsxs("span", { className: "ff-audio-pause-shape", children: [_jsx("span", { className: "ff-audio-pause-bar" }), _jsx("span", { className: "ff-audio-pause-bar" })] })) : (_jsx(Icon, { name: "play", width: 8, height: 8, cursorType: "pointer", withPadding: false, className: "ff-audio-play" })) }), _jsx(Typography, { fontSize: 8, className: "ff-audio-time", children: formatTime(currentTime) }), _jsxs("div", { className: "ff-audio-seek-wrap", children: [_jsx("div", { className: "ff-audio-seek-track" }), _jsx("div", { className: "ff-audio-seek-fill", style: { width: `${progressPercent}%` } }), _jsx("input", { type: "range", className: "ff-audio-seek", min: 0, max: duration || 0, step: 1, value: currentTime, disabled: disabled, onChange: handleSeek, "aria-label": "Seek" })] }), _jsx(Typography, { fontSize: 8, className: "ff-audio-time", children: formatTime(duration) }), _jsx(Icon, { name: "speaker", onClick: disabled ? () => { } : onMuteToggle, disabled: disabled, withPadding: false, className: `ff-audio-speaker-icon${isMuted ? ' ff-audio-speaker-muted' : ''}`, cursorType: "pointer" }), _jsx("div", { className: "ff-audio-more-wrap", ref: moreRef, children: _jsx(MenuOption, { iconName: "more", options: resolvedMenuOptions, onOptionClick: handleMenuOptionClick, dropdownPlacement: "bottomLeft", displayCard: true, disabled: disabled, iconSize: 12 }) }), isSpeedMenuOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "ff-audio-speed-overlay", onClick: () => setIsSpeedMenuOpen(false) }), _jsx("div", { className: "ff-audio-speed-menu", style: { top: speedMenuPosition.top, left: speedMenuPosition.left }, ref: speedMenuRef, tabIndex: -1, role: "listbox", "aria-label": "Playback speed", onKeyDown: handleSpeedMenuKeyDown, children: SPEED_OPTIONS.map((speed, index) => {
|
|
111
|
+
const isSelected = speed === playbackRate;
|
|
112
|
+
const isHighlighted = index === highlightedSpeedIndex;
|
|
113
|
+
return (_jsx("button", { type: "button", role: "option", "aria-selected": isSelected, className: [
|
|
114
|
+
'ff-audio-speed-option',
|
|
115
|
+
isHighlighted && 'ff-audio-speed-option-highlighted',
|
|
116
|
+
isSelected && 'ff-audio-speed-option-selected',
|
|
117
|
+
]
|
|
118
|
+
.filter(Boolean)
|
|
119
|
+
.join(' '), onMouseEnter: () => setHighlightedSpeedIndex(index), onMouseDown: (event) => {
|
|
120
|
+
event.stopPropagation();
|
|
121
|
+
}, onClick: (event) => {
|
|
122
|
+
event.stopPropagation();
|
|
123
|
+
onPlaybackRateChange(speed);
|
|
124
|
+
setIsSpeedMenuOpen(false);
|
|
125
|
+
}, children: _jsxs(Typography, { fontSize: 10, children: [speed.toFixed(1), "x"] }) }, speed));
|
|
126
|
+
}) })] }))] }));
|
|
127
|
+
};
|
|
128
|
+
export default AudioPlayer;
|
|
129
|
+
//# sourceMappingURL=AudioPlayer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AudioPlayer.js","sourceRoot":"","sources":["../../../src/components/AudioPlayer/AudioPlayer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AudioPlayer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,cAAc,SAAS,CAAC"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface AudioPlayerProps {
|
|
3
|
+
/**
|
|
4
|
+
* Total duration of the audio in seconds, e.g. 392 for 06:32
|
|
5
|
+
*/
|
|
6
|
+
duration: number;
|
|
7
|
+
/**
|
|
8
|
+
* Current playback position in seconds. Component is controlled —
|
|
9
|
+
* parent owns this value and updates it (e.g. via a timer / media element).
|
|
10
|
+
*/
|
|
11
|
+
currentTime: number;
|
|
12
|
+
/**
|
|
13
|
+
* Whether the audio is currently playing
|
|
14
|
+
*/
|
|
15
|
+
isPlaying?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Called when the play/pause button is clicked
|
|
18
|
+
*/
|
|
19
|
+
onPlayPause?: () => void;
|
|
20
|
+
/**
|
|
21
|
+
* Called when the user drags or clicks the progress bar to seek to a new time (in seconds)
|
|
22
|
+
*/
|
|
23
|
+
onSeek?: (time: number) => void;
|
|
24
|
+
/**
|
|
25
|
+
* Whether audio is muted
|
|
26
|
+
*/
|
|
27
|
+
isMuted?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Called when the speaker/mute icon is clicked
|
|
30
|
+
*/
|
|
31
|
+
onMuteToggle?: () => void;
|
|
32
|
+
/**
|
|
33
|
+
* Options shown in the 3-dot dropdown menu. Defaults to Captions and
|
|
34
|
+
* Playback Speed if not passed.
|
|
35
|
+
*/
|
|
36
|
+
menuOptions?: Array<{
|
|
37
|
+
label: string | React.ReactNode;
|
|
38
|
+
value: string;
|
|
39
|
+
icon?: string;
|
|
40
|
+
[key: string]: any;
|
|
41
|
+
}>;
|
|
42
|
+
/**
|
|
43
|
+
* Called when a dropdown menu option is clicked
|
|
44
|
+
*/
|
|
45
|
+
onMenuOptionClick?: (option: {
|
|
46
|
+
label: string | React.ReactNode;
|
|
47
|
+
value: string;
|
|
48
|
+
}) => void;
|
|
49
|
+
/**
|
|
50
|
+
* Disables all controls (play/pause, seek, mute, menu)
|
|
51
|
+
*/
|
|
52
|
+
disabled?: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Seconds to jump forward/backward when using the arrow key shortcuts. Defaults to 5.
|
|
55
|
+
*/
|
|
56
|
+
seekStep?: number;
|
|
57
|
+
/**
|
|
58
|
+
* Format function for the time labels. Defaults to mm:ss.
|
|
59
|
+
*/
|
|
60
|
+
formatTime?: (seconds: number) => string;
|
|
61
|
+
/**
|
|
62
|
+
* To add styles in AudioPlayer
|
|
63
|
+
*/
|
|
64
|
+
className?: string;
|
|
65
|
+
style?: React.CSSProperties;
|
|
66
|
+
[key: string]: any;
|
|
67
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/AudioPlayer/types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useRef, useState } from 'react';
|
|
3
|
+
import AudioPlayer from '../AudioPlayer';
|
|
4
|
+
const AudioPlayerContainer = () => {
|
|
5
|
+
const audioRef = useRef(null);
|
|
6
|
+
const playerWrapperRef = useRef(null);
|
|
7
|
+
const [fileUrl, setFileUrl] = useState(null);
|
|
8
|
+
const [fileName, setFileName] = useState('');
|
|
9
|
+
const [duration, setDuration] = useState(0);
|
|
10
|
+
const [currentTime, setCurrentTime] = useState(0);
|
|
11
|
+
const [isPlaying, setIsPlaying] = useState(false);
|
|
12
|
+
const [isMuted, setIsMuted] = useState(false);
|
|
13
|
+
const [playbackRate, setPlaybackRate] = useState(1);
|
|
14
|
+
const handleFileChange = (event) => {
|
|
15
|
+
const file = event.target.files?.[0];
|
|
16
|
+
if (!file)
|
|
17
|
+
return;
|
|
18
|
+
if (fileUrl)
|
|
19
|
+
URL.revokeObjectURL(fileUrl);
|
|
20
|
+
const url = URL.createObjectURL(file);
|
|
21
|
+
setFileUrl(url);
|
|
22
|
+
setFileName(file.name);
|
|
23
|
+
setIsPlaying(false);
|
|
24
|
+
setCurrentTime(0);
|
|
25
|
+
};
|
|
26
|
+
const handleLoadedMetadata = (e) => {
|
|
27
|
+
setDuration(e.currentTarget.duration);
|
|
28
|
+
playerWrapperRef.current
|
|
29
|
+
?.querySelector('.ff-audio-player')
|
|
30
|
+
?.focus();
|
|
31
|
+
};
|
|
32
|
+
const handlePlayPause = () => {
|
|
33
|
+
const audio = audioRef.current;
|
|
34
|
+
if (!audio)
|
|
35
|
+
return;
|
|
36
|
+
if (isPlaying) {
|
|
37
|
+
audio.pause();
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
audio.play();
|
|
41
|
+
}
|
|
42
|
+
setIsPlaying((prev) => !prev);
|
|
43
|
+
};
|
|
44
|
+
const handleSeek = (time) => {
|
|
45
|
+
const audio = audioRef.current;
|
|
46
|
+
if (audio) {
|
|
47
|
+
audio.currentTime = time;
|
|
48
|
+
}
|
|
49
|
+
setCurrentTime(time);
|
|
50
|
+
};
|
|
51
|
+
const handleMuteToggle = () => {
|
|
52
|
+
const audio = audioRef.current;
|
|
53
|
+
if (audio) {
|
|
54
|
+
audio.muted = !isMuted;
|
|
55
|
+
}
|
|
56
|
+
setIsMuted((prev) => !prev);
|
|
57
|
+
};
|
|
58
|
+
const handlePlaybackRateChange = (rate) => {
|
|
59
|
+
const audio = audioRef.current;
|
|
60
|
+
if (audio) {
|
|
61
|
+
audio.playbackRate = rate;
|
|
62
|
+
}
|
|
63
|
+
setPlaybackRate(rate);
|
|
64
|
+
};
|
|
65
|
+
return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '12px' }, children: [_jsx("input", { type: "file", accept: "audio/*", onChange: handleFileChange }), fileName && _jsxs("span", { style: { fontSize: '12px' }, children: ["Loaded: ", fileName] }), fileUrl && (_jsx("span", { style: { fontSize: '11px', color: '#888' }, children: "Click the player once, then use Space (play/pause), M (mute), \u2190/\u2192 (seek)." })), fileUrl && (_jsx("audio", { ref: audioRef, src: fileUrl, onLoadedMetadata: handleLoadedMetadata, onTimeUpdate: (e) => setCurrentTime(e.currentTarget.currentTime), onEnded: () => setIsPlaying(false) })), _jsx("div", { ref: playerWrapperRef, children: _jsx(AudioPlayer, { duration: duration, currentTime: currentTime, isPlaying: isPlaying, isMuted: isMuted, playbackRate: playbackRate, onPlayPause: handlePlayPause, onSeek: handleSeek, onMuteToggle: handleMuteToggle, onPlaybackRateChange: handlePlaybackRateChange, disabled: !fileUrl }) })] }));
|
|
66
|
+
};
|
|
67
|
+
export default AudioPlayerContainer;
|
|
68
|
+
//# sourceMappingURL=Audioplayercontainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Audioplayercontainer.js","sourceRoot":"","sources":["../../../src/components/Audioplayercontainer/Audioplayercontainer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import './CardPanel.scss';
|
|
3
|
+
import Typography from '../Typography';
|
|
4
|
+
import classNames from 'classnames';
|
|
5
|
+
const CardPanel = ({ headerLabel, children, className = '', style, contentStyle, headerActions, }) => {
|
|
6
|
+
return (_jsxs("div", { className: classNames('ff-card-panel', className), style: style, children: [_jsxs("div", { className: "ff-card-panel-header", children: [_jsx(Typography, { as: "div", fontWeight: "semi-bold", color: "var(--brand-color)", children: headerLabel }), headerActions && (_jsx("div", { className: "ff-card-panel-header-actions", children: headerActions }))] }), _jsx("div", { className: "ff-card-panel-body", style: contentStyle, children: children })] }));
|
|
7
|
+
};
|
|
8
|
+
export default CardPanel;
|
|
9
|
+
//# sourceMappingURL=CardPanel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CardPanel.js","sourceRoot":"","sources":["../../../src/components/CardPanel/CardPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,MAAM,SAAS,GAAG,CAAC,EACjB,WAAW,EACX,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,KAAK,EACL,YAAY,EACZ,aAAa,GACE,EAAE,EAAE;IACnB,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,EACjD,KAAK,EAAE,KAAK,aAEZ,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,UAAU,IACT,EAAE,EAAC,KAAK,EACR,UAAU,EAAC,WAAW,EACtB,KAAK,EAAC,oBAAoB,YAEzB,WAAW,GACD,EAEZ,aAAa,IAAI,CAChB,cAAK,SAAS,EAAC,8BAA8B,YAC1C,aAAa,GACV,CACP,IACG,EAEN,cAAK,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,YAAY,YACpD,QAAQ,GACL,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './CardPanel';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CardPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface CardPanelProps {
|
|
3
|
+
/**
|
|
4
|
+
* Header label text displayed in the panel header
|
|
5
|
+
*/
|
|
6
|
+
headerLabel: string;
|
|
7
|
+
/**
|
|
8
|
+
* Content to be rendered inside the panel body (accepts JSX)
|
|
9
|
+
*/
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Custom class name for the panel container
|
|
13
|
+
*/
|
|
14
|
+
className?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Custom styles for the panel container
|
|
17
|
+
*/
|
|
18
|
+
style?: React.CSSProperties;
|
|
19
|
+
/**
|
|
20
|
+
* Custom styles for the panel body/content area
|
|
21
|
+
*/
|
|
22
|
+
contentStyle?: React.CSSProperties;
|
|
23
|
+
/**
|
|
24
|
+
* Optional JSX to render on the right side of the header (e.g. action buttons)
|
|
25
|
+
*/
|
|
26
|
+
headerActions?: ReactNode;
|
|
27
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/CardPanel/types.ts"],"names":[],"mappings":""}
|