@convai/web-sdk 0.3.1-beta.3 → 0.3.2-beta.0
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/README.md +535 -1077
- package/dist/core/AudioManager.d.ts.map +1 -0
- package/dist/core/AudioManager.js +262 -0
- package/dist/core/AudioManager.js.map +1 -0
- package/dist/core/BlendshapeQueue.d.ts +128 -0
- package/dist/core/BlendshapeQueue.d.ts.map +1 -0
- package/dist/core/BlendshapeQueue.js +229 -0
- package/dist/core/BlendshapeQueue.js.map +1 -0
- package/dist/{types/core → core}/ConvaiClient.d.ts +19 -15
- package/dist/core/ConvaiClient.d.ts.map +1 -0
- package/dist/core/ConvaiClient.js +623 -0
- package/dist/core/ConvaiClient.js.map +1 -0
- package/dist/core/EventEmitter.d.ts.map +1 -0
- package/dist/core/EventEmitter.js +68 -0
- package/dist/core/EventEmitter.js.map +1 -0
- package/dist/{types/core → core}/MessageHandler.d.ts +7 -0
- package/dist/core/MessageHandler.d.ts.map +1 -0
- package/dist/core/MessageHandler.js +333 -0
- package/dist/core/MessageHandler.js.map +1 -0
- package/dist/core/ScreenShareManager.d.ts.map +1 -0
- package/dist/core/ScreenShareManager.js +207 -0
- package/dist/core/ScreenShareManager.js.map +1 -0
- package/dist/core/VideoManager.d.ts.map +1 -0
- package/dist/core/VideoManager.js +205 -0
- package/dist/core/VideoManager.js.map +1 -0
- package/dist/{types/core → core}/index.d.ts +2 -0
- package/dist/core/index.d.ts.map +1 -0
- package/dist/core/index.js +14 -1970
- package/dist/core/index.js.map +1 -0
- package/dist/{types/core → core}/types.d.ts +12 -21
- package/dist/core/types.d.ts.map +1 -0
- package/dist/core/types.js +2 -0
- package/dist/core/types.js.map +1 -0
- package/dist/dev.d.ts +12 -0
- package/dist/dev.d.ts.map +1 -0
- package/dist/dev.js +12 -0
- package/dist/dev.js.map +1 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +6 -0
- package/dist/index.js.map +1 -0
- package/dist/lipsync-helpers/arkitBlendshapeHelpers.d.ts.map +1 -0
- package/dist/lipsync-helpers/arkitBlendshapeHelpers.js +201 -0
- package/dist/lipsync-helpers/arkitBlendshapeHelpers.js.map +1 -0
- package/dist/lipsync-helpers/arkitOrder61.d.ts.map +1 -0
- package/dist/lipsync-helpers/arkitOrder61.js +287 -0
- package/dist/lipsync-helpers/arkitOrder61.js.map +1 -0
- package/dist/lipsync-helpers/arkitPhonemeReference.d.ts.map +1 -0
- package/dist/lipsync-helpers/arkitPhonemeReference.js +362 -0
- package/dist/lipsync-helpers/arkitPhonemeReference.js.map +1 -0
- package/dist/{types/lipsync-helpers → lipsync-helpers}/index.d.ts +1 -0
- package/dist/lipsync-helpers/index.d.ts.map +1 -0
- package/dist/lipsync-helpers/index.js +20 -1165
- package/dist/lipsync-helpers/index.js.map +1 -0
- package/dist/lipsync-helpers/metahumanOrder251.d.ts +115 -0
- package/dist/lipsync-helpers/metahumanOrder251.d.ts.map +1 -0
- package/dist/lipsync-helpers/metahumanOrder251.js +432 -0
- package/dist/lipsync-helpers/metahumanOrder251.js.map +1 -0
- package/dist/lipsync-helpers/neurosyncBlendshapeMapper.d.ts.map +1 -0
- package/dist/lipsync-helpers/neurosyncBlendshapeMapper.js +315 -0
- package/dist/lipsync-helpers/neurosyncBlendshapeMapper.js.map +1 -0
- package/dist/react/components/ConvaiWidget.d.ts +68 -0
- package/dist/react/components/ConvaiWidget.d.ts.map +1 -0
- package/dist/react/components/ConvaiWidget.js +505 -0
- package/dist/react/components/ConvaiWidget.js.map +1 -0
- package/dist/react/components/index.d.ts +2 -0
- package/dist/react/components/index.d.ts.map +1 -0
- package/dist/react/components/index.js +3 -0
- package/dist/react/components/index.js.map +1 -0
- package/dist/react/components/rtc-widget/components/AudioSettingsPanel.d.ts +10 -0
- package/dist/react/components/rtc-widget/components/AudioSettingsPanel.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/components/AudioSettingsPanel.js +316 -0
- package/dist/react/components/rtc-widget/components/AudioSettingsPanel.js.map +1 -0
- package/dist/react/components/rtc-widget/components/AudioVisualizer.d.ts +36 -0
- package/dist/react/components/rtc-widget/components/AudioVisualizer.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/components/AudioVisualizer.js +259 -0
- package/dist/react/components/rtc-widget/components/AudioVisualizer.js.map +1 -0
- package/dist/react/components/rtc-widget/components/ConviMessage.d.ts +10 -0
- package/dist/react/components/rtc-widget/components/ConviMessage.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/components/ConviMessage.js +14 -0
- package/dist/react/components/rtc-widget/components/ConviMessage.js.map +1 -0
- package/dist/react/components/rtc-widget/components/FloatingVideo.d.ts +9 -0
- package/dist/react/components/rtc-widget/components/FloatingVideo.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/components/FloatingVideo.js +122 -0
- package/dist/react/components/rtc-widget/components/FloatingVideo.js.map +1 -0
- package/dist/react/components/rtc-widget/components/MarkdownRenderer.d.ts +7 -0
- package/dist/react/components/rtc-widget/components/MarkdownRenderer.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/components/MarkdownRenderer.js +68 -0
- package/dist/react/components/rtc-widget/components/MarkdownRenderer.js.map +1 -0
- package/dist/react/components/rtc-widget/components/MessageBubble.d.ts +10 -0
- package/dist/react/components/rtc-widget/components/MessageBubble.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/components/MessageBubble.js +23 -0
- package/dist/react/components/rtc-widget/components/MessageBubble.js.map +1 -0
- package/dist/react/components/rtc-widget/components/MessageList.d.ts +11 -0
- package/dist/react/components/rtc-widget/components/MessageList.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/components/MessageList.js +89 -0
- package/dist/react/components/rtc-widget/components/MessageList.js.map +1 -0
- package/dist/react/components/rtc-widget/components/UserMessage.d.ts +9 -0
- package/dist/react/components/rtc-widget/components/UserMessage.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/components/UserMessage.js +15 -0
- package/dist/react/components/rtc-widget/components/UserMessage.js.map +1 -0
- package/dist/react/components/rtc-widget/components/conviComponents/ConviButton.d.ts +6 -0
- package/dist/react/components/rtc-widget/components/conviComponents/ConviButton.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/components/conviComponents/ConviButton.js +15 -0
- package/dist/react/components/rtc-widget/components/conviComponents/ConviButton.js.map +1 -0
- package/dist/react/components/rtc-widget/components/conviComponents/ConviFooter.d.ts +25 -0
- package/dist/react/components/rtc-widget/components/conviComponents/ConviFooter.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/components/conviComponents/ConviFooter.js +172 -0
- package/dist/react/components/rtc-widget/components/conviComponents/ConviFooter.js.map +1 -0
- package/dist/react/components/rtc-widget/components/conviComponents/ConviHeader.d.ts +17 -0
- package/dist/react/components/rtc-widget/components/conviComponents/ConviHeader.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/components/conviComponents/ConviHeader.js +66 -0
- package/dist/react/components/rtc-widget/components/conviComponents/ConviHeader.js.map +1 -0
- package/dist/react/components/rtc-widget/components/conviComponents/SettingsTray.d.ts +12 -0
- package/dist/react/components/rtc-widget/components/conviComponents/SettingsTray.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/components/conviComponents/SettingsTray.js +68 -0
- package/dist/react/components/rtc-widget/components/conviComponents/SettingsTray.js.map +1 -0
- package/dist/react/components/rtc-widget/components/conviComponents/VoiceModeOverlay.d.ts +12 -0
- package/dist/react/components/rtc-widget/components/conviComponents/VoiceModeOverlay.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/components/conviComponents/VoiceModeOverlay.js +255 -0
- package/dist/react/components/rtc-widget/components/conviComponents/VoiceModeOverlay.js.map +1 -0
- package/dist/react/components/rtc-widget/components/conviComponents/index.d.ts +6 -0
- package/dist/react/components/rtc-widget/components/conviComponents/index.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/components/conviComponents/index.js +6 -0
- package/dist/react/components/rtc-widget/components/conviComponents/index.js.map +1 -0
- package/dist/react/components/rtc-widget/components/index.d.ts +9 -0
- package/dist/react/components/rtc-widget/components/index.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/components/index.js +15 -0
- package/dist/react/components/rtc-widget/components/index.js.map +1 -0
- package/dist/react/components/rtc-widget/index.d.ts +6 -0
- package/dist/react/components/rtc-widget/index.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/index.js +9 -0
- package/dist/react/components/rtc-widget/index.js.map +1 -0
- package/dist/react/components/rtc-widget/styles/framerConfig.d.ts +116 -0
- package/dist/react/components/rtc-widget/styles/framerConfig.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/styles/framerConfig.js +73 -0
- package/dist/react/components/rtc-widget/styles/framerConfig.js.map +1 -0
- package/dist/react/components/rtc-widget/styles/icons.d.ts +28 -0
- package/dist/react/components/rtc-widget/styles/icons.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/styles/icons.js +257 -0
- package/dist/react/components/rtc-widget/styles/icons.js.map +1 -0
- package/dist/react/components/rtc-widget/styles/index.d.ts +6 -0
- package/dist/react/components/rtc-widget/styles/index.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/styles/index.js +9 -0
- package/dist/react/components/rtc-widget/styles/index.js.map +1 -0
- package/dist/react/components/rtc-widget/styles/styledComponents.d.ts +90 -0
- package/dist/react/components/rtc-widget/styles/styledComponents.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/styles/styledComponents.js +663 -0
- package/dist/react/components/rtc-widget/styles/styledComponents.js.map +1 -0
- package/dist/react/components/rtc-widget/styles/theme.d.ts +188 -0
- package/dist/react/components/rtc-widget/styles/theme.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/styles/theme.js +290 -0
- package/dist/react/components/rtc-widget/styles/theme.js.map +1 -0
- package/dist/react/components/rtc-widget/types/index.d.ts +60 -0
- package/dist/react/components/rtc-widget/types/index.d.ts.map +1 -0
- package/dist/react/components/rtc-widget/types/index.js +2 -0
- package/dist/react/components/rtc-widget/types/index.js.map +1 -0
- package/dist/react/hooks/index.d.ts +4 -0
- package/dist/react/hooks/index.d.ts.map +1 -0
- package/dist/react/hooks/index.js +6 -0
- package/dist/react/hooks/index.js.map +1 -0
- package/dist/react/hooks/useCharacterInfo.d.ts +17 -0
- package/dist/react/hooks/useCharacterInfo.d.ts.map +1 -0
- package/dist/react/hooks/useCharacterInfo.js +60 -0
- package/dist/react/hooks/useCharacterInfo.js.map +1 -0
- package/dist/react/hooks/useConvaiClient.d.ts +35 -0
- package/dist/react/hooks/useConvaiClient.d.ts.map +1 -0
- package/dist/react/hooks/useConvaiClient.js +183 -0
- package/dist/react/hooks/useConvaiClient.js.map +1 -0
- package/dist/react/hooks/useLocalCameraTrack.d.ts +22 -0
- package/dist/react/hooks/useLocalCameraTrack.d.ts.map +1 -0
- package/dist/react/hooks/useLocalCameraTrack.js +34 -0
- package/dist/react/hooks/useLocalCameraTrack.js.map +1 -0
- package/dist/react/index.d.ts +7 -0
- package/dist/react/index.d.ts.map +1 -0
- package/dist/react/index.js +13 -0
- package/dist/react/index.js.map +1 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/index.js +2 -0
- package/dist/types/index.js.map +1 -0
- package/dist/utils/LatencyMonitor.d.ts.map +1 -0
- package/dist/utils/LatencyMonitor.js +136 -0
- package/dist/utils/LatencyMonitor.js.map +1 -0
- package/dist/utils/logger.d.ts.map +1 -0
- package/dist/utils/logger.js +96 -0
- package/dist/utils/logger.js.map +1 -0
- package/dist/utils/speakerManagement.d.ts.map +1 -0
- package/dist/utils/speakerManagement.js +64 -0
- package/dist/utils/speakerManagement.js.map +1 -0
- package/dist/{types/vanilla → vanilla}/AudioRenderer.d.ts +5 -0
- package/dist/vanilla/AudioRenderer.d.ts.map +1 -0
- package/dist/vanilla/AudioRenderer.js +135 -0
- package/dist/vanilla/AudioRenderer.js.map +1 -0
- package/dist/vanilla/ConvaiWidget.d.ts.map +1 -0
- package/dist/vanilla/ConvaiWidget.js +1786 -0
- package/dist/vanilla/ConvaiWidget.js.map +1 -0
- package/dist/vanilla/icons.d.ts.map +1 -0
- package/dist/vanilla/icons.js +222 -0
- package/dist/vanilla/icons.js.map +1 -0
- package/dist/{types/vanilla → vanilla}/index.d.ts +1 -3
- package/dist/vanilla/index.d.ts.map +1 -0
- package/dist/vanilla/index.js +20 -5509
- package/dist/vanilla/index.js.map +1 -0
- package/dist/vanilla/styles.d.ts.map +1 -0
- package/dist/vanilla/styles.js +287 -0
- package/dist/vanilla/styles.js.map +1 -0
- package/dist/vanilla/types.d.ts +43 -0
- package/dist/vanilla/types.d.ts.map +1 -0
- package/dist/vanilla/types.js +2 -0
- package/dist/vanilla/types.js.map +1 -0
- package/package.json +33 -38
- package/CHANGELOG.md +0 -165
- package/dist/core/index.cjs +0 -1977
- package/dist/lipsync-helpers/index.cjs +0 -1195
- package/dist/types/core/AudioManager.d.ts.map +0 -1
- package/dist/types/core/ConvaiClient.d.ts.map +0 -1
- package/dist/types/core/EventEmitter.d.ts.map +0 -1
- package/dist/types/core/MessageHandler.d.ts.map +0 -1
- package/dist/types/core/ScreenShareManager.d.ts.map +0 -1
- package/dist/types/core/VideoManager.d.ts.map +0 -1
- package/dist/types/core/index.d.ts.map +0 -1
- package/dist/types/core/types.d.ts.map +0 -1
- package/dist/types/lipsync-helpers/arkitBlendshapeHelpers.d.ts.map +0 -1
- package/dist/types/lipsync-helpers/arkitOrder61.d.ts.map +0 -1
- package/dist/types/lipsync-helpers/arkitPhonemeReference.d.ts.map +0 -1
- package/dist/types/lipsync-helpers/index.d.ts.map +0 -1
- package/dist/types/lipsync-helpers/neurosyncBlendshapeMapper.d.ts.map +0 -1
- package/dist/types/types/index.d.ts.map +0 -1
- package/dist/types/utils/LatencyMonitor.d.ts.map +0 -1
- package/dist/types/utils/logger.d.ts.map +0 -1
- package/dist/types/utils/speakerManagement.d.ts.map +0 -1
- package/dist/types/vanilla/AudioRenderer.d.ts.map +0 -1
- package/dist/types/vanilla/ConvaiWidget.d.ts.map +0 -1
- package/dist/types/vanilla/icons.d.ts.map +0 -1
- package/dist/types/vanilla/index.d.ts.map +0 -1
- package/dist/types/vanilla/styles.d.ts.map +0 -1
- package/dist/types/vanilla/types.d.ts +0 -106
- package/dist/types/vanilla/types.d.ts.map +0 -1
- package/dist/umd/convai.umd.js +0 -1
- package/dist/vanilla/index.cjs +0 -5559
- /package/dist/{types/core → core}/AudioManager.d.ts +0 -0
- /package/dist/{types/core → core}/EventEmitter.d.ts +0 -0
- /package/dist/{types/core → core}/ScreenShareManager.d.ts +0 -0
- /package/dist/{types/core → core}/VideoManager.d.ts +0 -0
- /package/dist/{types/lipsync-helpers → lipsync-helpers}/arkitBlendshapeHelpers.d.ts +0 -0
- /package/dist/{types/lipsync-helpers → lipsync-helpers}/arkitOrder61.d.ts +0 -0
- /package/dist/{types/lipsync-helpers → lipsync-helpers}/arkitPhonemeReference.d.ts +0 -0
- /package/dist/{types/lipsync-helpers → lipsync-helpers}/neurosyncBlendshapeMapper.d.ts +0 -0
- /package/dist/types/{types/index.d.ts → index.d.ts} +0 -0
- /package/dist/{types/utils → utils}/LatencyMonitor.d.ts +0 -0
- /package/dist/{types/utils → utils}/logger.d.ts +0 -0
- /package/dist/{types/utils → utils}/speakerManagement.d.ts +0 -0
- /package/dist/{types/vanilla → vanilla}/ConvaiWidget.d.ts +0 -0
- /package/dist/{types/vanilla → vanilla}/icons.d.ts +0 -0
- /package/dist/{types/vanilla → vanilla}/styles.d.ts +0 -0
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import styled from "styled-components";
|
|
4
|
+
const Panel = styled.div `
|
|
5
|
+
position: absolute;
|
|
6
|
+
bottom: 100%;
|
|
7
|
+
right: 0;
|
|
8
|
+
margin-bottom: 12px;
|
|
9
|
+
width: 360px;
|
|
10
|
+
background: rgba(15, 23, 42, 0.98);
|
|
11
|
+
border: 1px solid rgba(148, 163, 184, 0.2);
|
|
12
|
+
border-radius: 16px;
|
|
13
|
+
padding: 24px;
|
|
14
|
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3),
|
|
15
|
+
0 10px 10px -5px rgba(0, 0, 0, 0.2);
|
|
16
|
+
backdrop-filter: blur(10px);
|
|
17
|
+
opacity: ${(props) => (props.isOpen ? 1 : 0)};
|
|
18
|
+
pointer-events: ${(props) => (props.isOpen ? "all" : "none")};
|
|
19
|
+
transform: ${(props) => props.isOpen ? "translateY(0)" : "translateY(10px)"};
|
|
20
|
+
transition: all 0.2s ease-out;
|
|
21
|
+
z-index: 1000;
|
|
22
|
+
|
|
23
|
+
@media (max-width: 640px) {
|
|
24
|
+
width: calc(100vw - 32px);
|
|
25
|
+
right: 16px;
|
|
26
|
+
}
|
|
27
|
+
`;
|
|
28
|
+
const Title = styled.div `
|
|
29
|
+
font-size: 18px;
|
|
30
|
+
font-weight: 600;
|
|
31
|
+
color: #f1f5f9;
|
|
32
|
+
margin-bottom: 8px;
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
gap: 8px;
|
|
36
|
+
`;
|
|
37
|
+
const Subtitle = styled.div `
|
|
38
|
+
font-size: 13px;
|
|
39
|
+
color: #94a3b8;
|
|
40
|
+
margin-bottom: 20px;
|
|
41
|
+
line-height: 1.5;
|
|
42
|
+
`;
|
|
43
|
+
const SettingGroup = styled.div `
|
|
44
|
+
margin-bottom: 20px;
|
|
45
|
+
|
|
46
|
+
&:last-child {
|
|
47
|
+
margin-bottom: 0;
|
|
48
|
+
}
|
|
49
|
+
`;
|
|
50
|
+
const SettingLabel = styled.label `
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
justify-content: space-between;
|
|
54
|
+
font-size: 14px;
|
|
55
|
+
color: #e2e8f0;
|
|
56
|
+
margin-bottom: 8px;
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
user-select: none;
|
|
59
|
+
padding: 10px 12px;
|
|
60
|
+
border-radius: 8px;
|
|
61
|
+
transition: background 0.15s ease;
|
|
62
|
+
|
|
63
|
+
&:hover {
|
|
64
|
+
background: rgba(148, 163, 184, 0.1);
|
|
65
|
+
}
|
|
66
|
+
`;
|
|
67
|
+
const SettingDescription = styled.div `
|
|
68
|
+
font-size: 12px;
|
|
69
|
+
color: #64748b;
|
|
70
|
+
margin-top: -4px;
|
|
71
|
+
margin-bottom: 8px;
|
|
72
|
+
padding-left: 12px;
|
|
73
|
+
line-height: 1.4;
|
|
74
|
+
`;
|
|
75
|
+
const Toggle = styled.div `
|
|
76
|
+
width: 44px;
|
|
77
|
+
height: 24px;
|
|
78
|
+
background: ${(props) => props.enabled
|
|
79
|
+
? "linear-gradient(135deg, #10b981 0%, #059669 100%)"
|
|
80
|
+
: "rgba(71, 85, 105, 0.5)"};
|
|
81
|
+
border-radius: 12px;
|
|
82
|
+
position: relative;
|
|
83
|
+
transition: all 0.2s ease;
|
|
84
|
+
box-shadow: ${(props) => props.enabled
|
|
85
|
+
? "0 0 12px rgba(16, 185, 129, 0.3)"
|
|
86
|
+
: "inset 0 2px 4px rgba(0, 0, 0, 0.2)"};
|
|
87
|
+
|
|
88
|
+
&::after {
|
|
89
|
+
content: "";
|
|
90
|
+
position: absolute;
|
|
91
|
+
top: 2px;
|
|
92
|
+
left: ${(props) => (props.enabled ? "22px" : "2px")};
|
|
93
|
+
width: 20px;
|
|
94
|
+
height: 20px;
|
|
95
|
+
background: white;
|
|
96
|
+
border-radius: 50%;
|
|
97
|
+
transition: left 0.2s ease;
|
|
98
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
99
|
+
}
|
|
100
|
+
`;
|
|
101
|
+
const SliderGroup = styled.div `
|
|
102
|
+
margin-bottom: 16px;
|
|
103
|
+
`;
|
|
104
|
+
const SliderLabel = styled.div `
|
|
105
|
+
display: flex;
|
|
106
|
+
align-items: center;
|
|
107
|
+
justify-content: space-between;
|
|
108
|
+
margin-bottom: 8px;
|
|
109
|
+
font-size: 14px;
|
|
110
|
+
color: #e2e8f0;
|
|
111
|
+
`;
|
|
112
|
+
const SliderValue = styled.span `
|
|
113
|
+
font-weight: 600;
|
|
114
|
+
color: #10b981;
|
|
115
|
+
font-size: 13px;
|
|
116
|
+
`;
|
|
117
|
+
const Slider = styled.input `
|
|
118
|
+
width: 100%;
|
|
119
|
+
height: 6px;
|
|
120
|
+
border-radius: 3px;
|
|
121
|
+
background: rgba(71, 85, 105, 0.3);
|
|
122
|
+
outline: none;
|
|
123
|
+
-webkit-appearance: none;
|
|
124
|
+
|
|
125
|
+
&::-webkit-slider-thumb {
|
|
126
|
+
-webkit-appearance: none;
|
|
127
|
+
appearance: none;
|
|
128
|
+
width: 18px;
|
|
129
|
+
height: 18px;
|
|
130
|
+
border-radius: 50%;
|
|
131
|
+
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
132
|
+
cursor: pointer;
|
|
133
|
+
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
|
|
134
|
+
transition: transform 0.15s ease;
|
|
135
|
+
|
|
136
|
+
&:hover {
|
|
137
|
+
transform: scale(1.1);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
&:active {
|
|
141
|
+
transform: scale(0.95);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
&::-moz-range-thumb {
|
|
146
|
+
width: 18px;
|
|
147
|
+
height: 18px;
|
|
148
|
+
border-radius: 50%;
|
|
149
|
+
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
150
|
+
cursor: pointer;
|
|
151
|
+
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
|
|
152
|
+
border: none;
|
|
153
|
+
transition: transform 0.15s ease;
|
|
154
|
+
|
|
155
|
+
&:hover {
|
|
156
|
+
transform: scale(1.1);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
&:active {
|
|
160
|
+
transform: scale(0.95);
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
`;
|
|
164
|
+
const PresetButtons = styled.div `
|
|
165
|
+
display: grid;
|
|
166
|
+
grid-template-columns: repeat(3, 1fr);
|
|
167
|
+
gap: 8px;
|
|
168
|
+
margin-top: 20px;
|
|
169
|
+
padding-top: 20px;
|
|
170
|
+
border-top: 1px solid rgba(148, 163, 184, 0.2);
|
|
171
|
+
`;
|
|
172
|
+
const PresetButton = styled.button `
|
|
173
|
+
padding: 10px 12px;
|
|
174
|
+
font-size: 13px;
|
|
175
|
+
font-weight: 500;
|
|
176
|
+
border-radius: 8px;
|
|
177
|
+
border: 1px solid
|
|
178
|
+
${(props) => props.active ? "rgba(16, 185, 129, 0.5)" : "rgba(148, 163, 184, 0.2)"};
|
|
179
|
+
background: ${(props) => props.active
|
|
180
|
+
? "rgba(16, 185, 129, 0.15)"
|
|
181
|
+
: "rgba(30, 41, 59, 0.5)"};
|
|
182
|
+
color: ${(props) => (props.active ? "#10b981" : "#cbd5e1")};
|
|
183
|
+
cursor: pointer;
|
|
184
|
+
transition: all 0.15s ease;
|
|
185
|
+
|
|
186
|
+
&:hover {
|
|
187
|
+
background: ${(props) => props.active
|
|
188
|
+
? "rgba(16, 185, 129, 0.25)"
|
|
189
|
+
: "rgba(148, 163, 184, 0.1)"};
|
|
190
|
+
border-color: ${(props) => props.active ? "#10b981" : "rgba(148, 163, 184, 0.3)"};
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
&:active {
|
|
194
|
+
transform: scale(0.98);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
&:disabled {
|
|
198
|
+
opacity: 0.5;
|
|
199
|
+
cursor: not-allowed;
|
|
200
|
+
}
|
|
201
|
+
`;
|
|
202
|
+
const InfoBox = styled.div `
|
|
203
|
+
background: rgba(59, 130, 246, 0.1);
|
|
204
|
+
border: 1px solid rgba(59, 130, 246, 0.2);
|
|
205
|
+
border-radius: 8px;
|
|
206
|
+
padding: 12px;
|
|
207
|
+
margin-bottom: 20px;
|
|
208
|
+
font-size: 12px;
|
|
209
|
+
color: #93c5fd;
|
|
210
|
+
line-height: 1.5;
|
|
211
|
+
`;
|
|
212
|
+
const StatusIndicator = styled.div `
|
|
213
|
+
display: inline-flex;
|
|
214
|
+
align-items: center;
|
|
215
|
+
gap: 6px;
|
|
216
|
+
padding: 4px 10px;
|
|
217
|
+
border-radius: 12px;
|
|
218
|
+
font-size: 11px;
|
|
219
|
+
font-weight: 600;
|
|
220
|
+
background: ${(props) => props.isConnected
|
|
221
|
+
? "rgba(16, 185, 129, 0.15)"
|
|
222
|
+
: "rgba(239, 68, 68, 0.15)"};
|
|
223
|
+
color: ${(props) => (props.isConnected ? "#10b981" : "#ef4444")};
|
|
224
|
+
|
|
225
|
+
&::before {
|
|
226
|
+
content: "";
|
|
227
|
+
width: 6px;
|
|
228
|
+
height: 6px;
|
|
229
|
+
border-radius: 50%;
|
|
230
|
+
background: currentColor;
|
|
231
|
+
}
|
|
232
|
+
`;
|
|
233
|
+
export const AudioSettingsPanel = ({ currentSettings, onUpdateSettings, isConnected, }) => {
|
|
234
|
+
const [localSettings, setLocalSettings] = useState(currentSettings);
|
|
235
|
+
const [isUpdating, setIsUpdating] = useState(false);
|
|
236
|
+
const handleToggle = async (key, value) => {
|
|
237
|
+
setLocalSettings((prev) => ({ ...prev, [key]: value }));
|
|
238
|
+
setIsUpdating(true);
|
|
239
|
+
try {
|
|
240
|
+
await onUpdateSettings({ [key]: value });
|
|
241
|
+
}
|
|
242
|
+
finally {
|
|
243
|
+
setIsUpdating(false);
|
|
244
|
+
}
|
|
245
|
+
};
|
|
246
|
+
const handleSliderChange = (key, value) => {
|
|
247
|
+
setLocalSettings((prev) => ({ ...prev, [key]: value }));
|
|
248
|
+
};
|
|
249
|
+
const handleSliderRelease = async (key, value) => {
|
|
250
|
+
setIsUpdating(true);
|
|
251
|
+
try {
|
|
252
|
+
await onUpdateSettings({ [key]: value });
|
|
253
|
+
}
|
|
254
|
+
finally {
|
|
255
|
+
setIsUpdating(false);
|
|
256
|
+
}
|
|
257
|
+
};
|
|
258
|
+
const applyPreset = async (preset) => {
|
|
259
|
+
setIsUpdating(true);
|
|
260
|
+
let newSettings;
|
|
261
|
+
switch (preset) {
|
|
262
|
+
case "quiet":
|
|
263
|
+
// Quiet environment - minimal processing, more sensitive to interruptions
|
|
264
|
+
newSettings = {
|
|
265
|
+
echoCancellation: false,
|
|
266
|
+
noiseSuppression: false,
|
|
267
|
+
autoGainControl: false,
|
|
268
|
+
sampleRate: 48000,
|
|
269
|
+
channelCount: 1,
|
|
270
|
+
};
|
|
271
|
+
break;
|
|
272
|
+
case "balanced":
|
|
273
|
+
// Balanced - moderate processing, good middle ground
|
|
274
|
+
newSettings = {
|
|
275
|
+
echoCancellation: true,
|
|
276
|
+
noiseSuppression: true,
|
|
277
|
+
autoGainControl: false,
|
|
278
|
+
sampleRate: 48000,
|
|
279
|
+
channelCount: 1,
|
|
280
|
+
};
|
|
281
|
+
break;
|
|
282
|
+
case "noisy":
|
|
283
|
+
// Noisy environment - aggressive processing, reduces interruptions
|
|
284
|
+
newSettings = {
|
|
285
|
+
echoCancellation: true,
|
|
286
|
+
noiseSuppression: true,
|
|
287
|
+
autoGainControl: true,
|
|
288
|
+
sampleRate: 48000,
|
|
289
|
+
channelCount: 1,
|
|
290
|
+
};
|
|
291
|
+
break;
|
|
292
|
+
}
|
|
293
|
+
setLocalSettings(newSettings);
|
|
294
|
+
try {
|
|
295
|
+
await onUpdateSettings(newSettings);
|
|
296
|
+
}
|
|
297
|
+
finally {
|
|
298
|
+
setIsUpdating(false);
|
|
299
|
+
}
|
|
300
|
+
};
|
|
301
|
+
const getCurrentPreset = () => {
|
|
302
|
+
const { echoCancellation, noiseSuppression, autoGainControl } = localSettings;
|
|
303
|
+
if (!echoCancellation && !noiseSuppression && !autoGainControl) {
|
|
304
|
+
return "quiet";
|
|
305
|
+
}
|
|
306
|
+
if (echoCancellation && noiseSuppression && !autoGainControl) {
|
|
307
|
+
return "balanced";
|
|
308
|
+
}
|
|
309
|
+
if (echoCancellation && noiseSuppression && autoGainControl) {
|
|
310
|
+
return "noisy";
|
|
311
|
+
}
|
|
312
|
+
return null;
|
|
313
|
+
};
|
|
314
|
+
return (_jsxs(Panel, { isOpen: true, children: [_jsxs(Title, { children: ["Audio Sensitivity Settings", _jsx(StatusIndicator, { isConnected: isConnected, children: isConnected ? "LIVE" : "OFFLINE" })] }), _jsx(Subtitle, { children: "Adjust these settings to reduce interruptions and find the optimal balance for your environment." }), isConnected && (_jsx(InfoBox, { children: "Warning: Changing settings will briefly restart your microphone. Changes apply immediately." })), _jsxs(SettingGroup, { children: [_jsxs(SettingLabel, { children: [_jsx("span", { children: "Echo Cancellation" }), _jsx(Toggle, { enabled: localSettings.echoCancellation || false, onClick: () => handleToggle("echoCancellation", !localSettings.echoCancellation) })] }), _jsx(SettingDescription, { children: "Prevents feedback loops from speakers. Recommended ON." })] }), _jsxs(SettingGroup, { children: [_jsxs(SettingLabel, { children: [_jsx("span", { children: "Noise Suppression" }), _jsx(Toggle, { enabled: localSettings.noiseSuppression || false, onClick: () => handleToggle("noiseSuppression", !localSettings.noiseSuppression) })] }), _jsx(SettingDescription, { children: "Filters out background noise. Turn ON to reduce false interruptions." })] }), _jsxs(SettingGroup, { children: [_jsxs(SettingLabel, { children: [_jsx("span", { children: "Auto Gain Control" }), _jsx(Toggle, { enabled: localSettings.autoGainControl || false, onClick: () => handleToggle("autoGainControl", !localSettings.autoGainControl) })] }), _jsx(SettingDescription, { children: "Automatically adjusts microphone volume. Turn ON in noisy environments to prevent unwanted interruptions." })] }), _jsxs(SliderGroup, { children: [_jsxs(SliderLabel, { children: [_jsx("span", { children: "Sample Rate" }), _jsxs(SliderValue, { children: [localSettings.sampleRate || 48000, " Hz"] })] }), _jsx(Slider, { type: "range", min: "8000", max: "48000", step: "8000", value: localSettings.sampleRate || 48000, onChange: (e) => handleSliderChange("sampleRate", parseInt(e.target.value)), onMouseUp: (e) => handleSliderRelease("sampleRate", parseInt(e.target.value)), onTouchEnd: (e) => handleSliderRelease("sampleRate", parseInt(e.target.value)) }), _jsx(SettingDescription, { children: "Higher = better quality, lower = less data. 48000 Hz recommended." })] }), _jsxs(PresetButtons, { children: [_jsx(PresetButton, { onClick: () => applyPreset("quiet"), active: getCurrentPreset() === "quiet", disabled: isUpdating, children: "\uD83D\uDD07 Quiet" }), _jsx(PresetButton, { onClick: () => applyPreset("balanced"), active: getCurrentPreset() === "balanced", disabled: isUpdating, children: "Balanced" }), _jsx(PresetButton, { onClick: () => applyPreset("noisy"), active: getCurrentPreset() === "noisy", disabled: isUpdating, children: "\uD83D\uDD0A Noisy" })] })] }));
|
|
315
|
+
};
|
|
316
|
+
//# sourceMappingURL=AudioSettingsPanel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AudioSettingsPanel.js","sourceRoot":"","sources":["../../../../../src/react/components/rtc-widget/components/AudioSettingsPanel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { Room } from 'livekit-client';
|
|
2
|
+
interface AudioVisualizerProps {
|
|
3
|
+
/** LiveKit room instance containing the remote participant's audio track */
|
|
4
|
+
room: Room | null;
|
|
5
|
+
/** Canvas size in pixels (width and height) */
|
|
6
|
+
size?: number;
|
|
7
|
+
/** CSS color value for the bars */
|
|
8
|
+
color?: string;
|
|
9
|
+
/** Base opacity of the bars (0-1), actual opacity varies with audio intensity */
|
|
10
|
+
opacity?: number;
|
|
11
|
+
/** Radius of the circular visualization area in pixels */
|
|
12
|
+
avatarRadius?: number;
|
|
13
|
+
/** Number of radial bars to display around the circle */
|
|
14
|
+
barCount?: number;
|
|
15
|
+
/** Callback function called when speaking state changes */
|
|
16
|
+
onSpeakingChange?: (isSpeaking: boolean) => void;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Circular Audio Visualizer Component
|
|
20
|
+
*
|
|
21
|
+
* A real-time circular audio visualization component that displays radial bars arranged
|
|
22
|
+
* in a circle around an avatar. The visualization reacts to the remote participant's
|
|
23
|
+
* (bot) audio output from a LiveKit room, using logarithmic frequency bands and a
|
|
24
|
+
* traveling wave animation effect.
|
|
25
|
+
*
|
|
26
|
+
* Features:
|
|
27
|
+
* - Circular radial bar visualization with configurable bar count
|
|
28
|
+
* - Logarithmic frequency band distribution (low frequencies distributed around the ring)
|
|
29
|
+
* - Traveling wave animation that propagates around the circle
|
|
30
|
+
* - Speaking detection with callback support
|
|
31
|
+
* - Automatic track detection and reconnection
|
|
32
|
+
* - Canvas-based rendering for smooth animations
|
|
33
|
+
*/
|
|
34
|
+
export declare const AudioVisualizer: React.FC<AudioVisualizerProps>;
|
|
35
|
+
export {};
|
|
36
|
+
//# sourceMappingURL=AudioVisualizer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AudioVisualizer.d.ts","sourceRoot":"","sources":["../../../../../src/react/components/rtc-widget/components/AudioVisualizer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAkBtC,UAAU,oBAAoB;IAC5B,4EAA4E;IAC5E,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA4R1D,CAAC"}
|
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef } from 'react';
|
|
3
|
+
import styled from 'styled-components';
|
|
4
|
+
const VisualizerContainer = styled.div `
|
|
5
|
+
position: absolute;
|
|
6
|
+
width: 100%;
|
|
7
|
+
height: 100%;
|
|
8
|
+
z-index: 1;
|
|
9
|
+
pointer-events: none;
|
|
10
|
+
border-radius: 50%;
|
|
11
|
+
overflow: visible;
|
|
12
|
+
`;
|
|
13
|
+
const Canvas = styled.canvas `
|
|
14
|
+
display: block;
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
`;
|
|
18
|
+
/**
|
|
19
|
+
* Circular Audio Visualizer Component
|
|
20
|
+
*
|
|
21
|
+
* A real-time circular audio visualization component that displays radial bars arranged
|
|
22
|
+
* in a circle around an avatar. The visualization reacts to the remote participant's
|
|
23
|
+
* (bot) audio output from a LiveKit room, using logarithmic frequency bands and a
|
|
24
|
+
* traveling wave animation effect.
|
|
25
|
+
*
|
|
26
|
+
* Features:
|
|
27
|
+
* - Circular radial bar visualization with configurable bar count
|
|
28
|
+
* - Logarithmic frequency band distribution (low frequencies distributed around the ring)
|
|
29
|
+
* - Traveling wave animation that propagates around the circle
|
|
30
|
+
* - Speaking detection with callback support
|
|
31
|
+
* - Automatic track detection and reconnection
|
|
32
|
+
* - Canvas-based rendering for smooth animations
|
|
33
|
+
*/
|
|
34
|
+
export const AudioVisualizer = ({ room, size = 350, color = '#10b981', opacity = 0.4, avatarRadius = 80, barCount = 64, onSpeakingChange, }) => {
|
|
35
|
+
// Refs for canvas and Web Audio API nodes
|
|
36
|
+
const canvasRef = useRef(null);
|
|
37
|
+
const animationFrameRef = useRef(null);
|
|
38
|
+
const audioContextRef = useRef(null);
|
|
39
|
+
const analyserRef = useRef(null);
|
|
40
|
+
const sourceNodeRef = useRef(null);
|
|
41
|
+
const isActiveRef = useRef(false);
|
|
42
|
+
// Refs for animation and state management
|
|
43
|
+
const timeRef = useRef(0);
|
|
44
|
+
const previousSpeakingStateRef = useRef(false);
|
|
45
|
+
const bandEdgesRef = useRef(null);
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
if (!room)
|
|
48
|
+
return;
|
|
49
|
+
const canvas = canvasRef.current;
|
|
50
|
+
if (!canvas)
|
|
51
|
+
return;
|
|
52
|
+
const ctx = canvas.getContext('2d');
|
|
53
|
+
if (!ctx)
|
|
54
|
+
return;
|
|
55
|
+
canvas.width = size;
|
|
56
|
+
canvas.height = size;
|
|
57
|
+
// Initialize Web Audio API context and analyser
|
|
58
|
+
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
|
59
|
+
const analyser = audioContext.createAnalyser();
|
|
60
|
+
analyser.fftSize = 512;
|
|
61
|
+
analyser.smoothingTimeConstant = 0.6;
|
|
62
|
+
audioContextRef.current = audioContext;
|
|
63
|
+
analyserRef.current = analyser;
|
|
64
|
+
/**
|
|
65
|
+
* Builds logarithmically-spaced frequency band edges.
|
|
66
|
+
* This distributes low-frequency energy (which has more power) evenly around
|
|
67
|
+
* the circular visualization, rather than clustering it at the start.
|
|
68
|
+
*/
|
|
69
|
+
const buildLogBands = () => {
|
|
70
|
+
const nyquist = audioContext.sampleRate / 2;
|
|
71
|
+
const bufferLength = analyser.frequencyBinCount;
|
|
72
|
+
const minHz = 60;
|
|
73
|
+
const maxHz = Math.min(8000, nyquist);
|
|
74
|
+
const edges = Array.from({ length: barCount + 1 }, (_, k) => {
|
|
75
|
+
const hz = minHz * Math.pow(maxHz / minHz, k / barCount);
|
|
76
|
+
const bin = Math.max(0, Math.min(bufferLength - 1, Math.floor((hz / nyquist) * bufferLength)));
|
|
77
|
+
return bin;
|
|
78
|
+
});
|
|
79
|
+
// Ensure strictly increasing edges (no zero-width bands)
|
|
80
|
+
for (let i = 1; i < edges.length; i++) {
|
|
81
|
+
if (edges[i] <= edges[i - 1])
|
|
82
|
+
edges[i] = Math.min(edges[i - 1] + 1, bufferLength - 1);
|
|
83
|
+
}
|
|
84
|
+
bandEdgesRef.current = edges;
|
|
85
|
+
};
|
|
86
|
+
/**
|
|
87
|
+
* Finds the bot participant from remote participants.
|
|
88
|
+
*/
|
|
89
|
+
const findBotParticipant = (remoteParticipants, localParticipant) => {
|
|
90
|
+
const participants = Array.from(remoteParticipants.values()).filter((p) => p !== localParticipant && p !== room.localParticipant);
|
|
91
|
+
if (participants.length === 0) {
|
|
92
|
+
return null;
|
|
93
|
+
}
|
|
94
|
+
// Prefer participants with audio tracks (bot typically has audio)
|
|
95
|
+
const participantsWithAudio = participants.filter((participant) => {
|
|
96
|
+
if (!participant.trackPublications)
|
|
97
|
+
return false;
|
|
98
|
+
const audioTracks = Array.from(participant.trackPublications.values()).filter((p) => p.kind === 'audio' && p.track);
|
|
99
|
+
return audioTracks.length > 0;
|
|
100
|
+
});
|
|
101
|
+
return participantsWithAudio.length > 0 ? participantsWithAudio[0] : participants[0];
|
|
102
|
+
};
|
|
103
|
+
/**
|
|
104
|
+
* Sets up the audio source by connecting the remote participant's (bot) audio track
|
|
105
|
+
* to the Web Audio API analyser.
|
|
106
|
+
*/
|
|
107
|
+
const setupAudioSource = async () => {
|
|
108
|
+
try {
|
|
109
|
+
if (audioContext.state === 'suspended')
|
|
110
|
+
await audioContext.resume();
|
|
111
|
+
const remoteParticipants = room.remoteParticipants;
|
|
112
|
+
if (remoteParticipants.size === 0) {
|
|
113
|
+
isActiveRef.current = false;
|
|
114
|
+
return;
|
|
115
|
+
}
|
|
116
|
+
const botParticipant = findBotParticipant(remoteParticipants, room.localParticipant);
|
|
117
|
+
if (!botParticipant) {
|
|
118
|
+
isActiveRef.current = false;
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
const audioTracks = Array.from(botParticipant.trackPublications.values()).filter((p) => p.kind === 'audio' && p.track);
|
|
122
|
+
if (audioTracks.length === 0) {
|
|
123
|
+
isActiveRef.current = false;
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
const liveKitTrack = audioTracks[0].track;
|
|
127
|
+
const mediaStreamTrack = liveKitTrack.mediaStreamTrack;
|
|
128
|
+
if (!mediaStreamTrack) {
|
|
129
|
+
isActiveRef.current = false;
|
|
130
|
+
return;
|
|
131
|
+
}
|
|
132
|
+
const mediaStream = new MediaStream([mediaStreamTrack]);
|
|
133
|
+
if (sourceNodeRef.current)
|
|
134
|
+
sourceNodeRef.current.disconnect();
|
|
135
|
+
const source = audioContext.createMediaStreamSource(mediaStream);
|
|
136
|
+
source.connect(analyser);
|
|
137
|
+
sourceNodeRef.current = source;
|
|
138
|
+
// Build bands after context is ready
|
|
139
|
+
buildLogBands();
|
|
140
|
+
isActiveRef.current = true;
|
|
141
|
+
}
|
|
142
|
+
catch {
|
|
143
|
+
isActiveRef.current = false;
|
|
144
|
+
}
|
|
145
|
+
};
|
|
146
|
+
setupAudioSource();
|
|
147
|
+
const setupTimeout = setTimeout(setupAudioSource, 500);
|
|
148
|
+
const handleTrackSubscribed = (track, publication, participant) => {
|
|
149
|
+
if (track && track.kind === 'audio' && participant !== room.localParticipant) {
|
|
150
|
+
setTimeout(setupAudioSource, 200);
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
const handleParticipantConnected = (participant) => {
|
|
154
|
+
if (participant !== room.localParticipant)
|
|
155
|
+
setTimeout(setupAudioSource, 200);
|
|
156
|
+
};
|
|
157
|
+
room.on('trackSubscribed', handleTrackSubscribed);
|
|
158
|
+
room.on('participantConnected', handleParticipantConnected);
|
|
159
|
+
/**
|
|
160
|
+
* Main rendering function that draws the circular audio visualization.
|
|
161
|
+
*/
|
|
162
|
+
const bufferLength = analyser.frequencyBinCount;
|
|
163
|
+
const dataArray = new Uint8Array(bufferLength);
|
|
164
|
+
const draw = () => {
|
|
165
|
+
timeRef.current += 0.08;
|
|
166
|
+
analyser.getByteFrequencyData(dataArray);
|
|
167
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
168
|
+
const centerX = canvas.width / 2;
|
|
169
|
+
const centerY = canvas.height / 2;
|
|
170
|
+
// The bars should surround the character, not be clipped inside
|
|
171
|
+
// Character is 120px (radius 60px), visualizer canvas is 220px (radius 110px)
|
|
172
|
+
const characterRadius = 60; // Half of 120px character image
|
|
173
|
+
const innerRadius = characterRadius; // Start bars at edge of character
|
|
174
|
+
const outerRadius = avatarRadius; // Extend to edge of visualizer canvas
|
|
175
|
+
const maxBarLength = outerRadius - innerRadius;
|
|
176
|
+
ctx.save();
|
|
177
|
+
// No clipping - let bars render freely around the circle
|
|
178
|
+
const angleStep = (Math.PI * 2) / barCount;
|
|
179
|
+
// Calculate overall audio level for speaking detection
|
|
180
|
+
let total = 0;
|
|
181
|
+
for (let i = 0; i < bufferLength; i++)
|
|
182
|
+
total += isActiveRef.current ? (dataArray[i] || 0) : 0;
|
|
183
|
+
const overallLevel = total / (bufferLength * 255);
|
|
184
|
+
// Speaking detection
|
|
185
|
+
const speakingThreshold = 0.1;
|
|
186
|
+
const isSpeaking = isActiveRef.current && overallLevel > speakingThreshold;
|
|
187
|
+
if (onSpeakingChange && isSpeaking !== previousSpeakingStateRef.current) {
|
|
188
|
+
previousSpeakingStateRef.current = isSpeaking;
|
|
189
|
+
onSpeakingChange(isSpeaking);
|
|
190
|
+
}
|
|
191
|
+
// Precompute band edges if not ready yet
|
|
192
|
+
if (!bandEdgesRef.current) {
|
|
193
|
+
bandEdgesRef.current = Array.from({ length: barCount + 1 }, (_, k) => Math.floor((k / barCount) * bufferLength));
|
|
194
|
+
}
|
|
195
|
+
const edges = bandEdgesRef.current;
|
|
196
|
+
// Traveling wave parameters
|
|
197
|
+
const waveRevolutions = 2;
|
|
198
|
+
const phasePerBar = (Math.PI * 2 * waveRevolutions) / barCount;
|
|
199
|
+
const baseWaveAmp = 0.35;
|
|
200
|
+
const waveAmp = baseWaveAmp * (0.3 + 0.7 * overallLevel);
|
|
201
|
+
for (let i = 0; i < barCount; i++) {
|
|
202
|
+
const angle = i * angleStep - Math.PI / 2;
|
|
203
|
+
// Calculate average energy for this bar's frequency band
|
|
204
|
+
const startFreq = edges[i];
|
|
205
|
+
const endFreq = edges[i + 1];
|
|
206
|
+
let sum = 0;
|
|
207
|
+
let count = 0;
|
|
208
|
+
for (let f = startFreq; f < endFreq && f < bufferLength; f++) {
|
|
209
|
+
sum += isActiveRef.current ? (dataArray[f] || 0) : 0;
|
|
210
|
+
count++;
|
|
211
|
+
}
|
|
212
|
+
const bandAvg = count > 0 ? sum / (count * 255) : 0;
|
|
213
|
+
// Mix band-specific energy with overall level
|
|
214
|
+
const energy = 0.4 * bandAvg + 0.6 * overallLevel;
|
|
215
|
+
// Apply traveling wave modulation
|
|
216
|
+
const wavePhase = i * phasePerBar;
|
|
217
|
+
const wave = 1 + waveAmp * Math.sin(timeRef.current + wavePhase);
|
|
218
|
+
// Final intensity
|
|
219
|
+
const intensity = Math.min(1, energy * wave);
|
|
220
|
+
// Convert to bar length
|
|
221
|
+
const length = Math.max(maxBarLength * 0.03, intensity * maxBarLength * 0.95);
|
|
222
|
+
// Coordinates
|
|
223
|
+
const startX = centerX + Math.cos(angle) * innerRadius;
|
|
224
|
+
const startY = centerY + Math.sin(angle) * innerRadius;
|
|
225
|
+
const endX = centerX + Math.cos(angle) * (innerRadius + length);
|
|
226
|
+
const endY = centerY + Math.sin(angle) * (innerRadius + length);
|
|
227
|
+
// Draw
|
|
228
|
+
ctx.strokeStyle = color;
|
|
229
|
+
ctx.lineWidth = 5;
|
|
230
|
+
ctx.lineCap = 'round';
|
|
231
|
+
ctx.globalAlpha = opacity * (0.5 + 0.5 * intensity);
|
|
232
|
+
ctx.beginPath();
|
|
233
|
+
ctx.moveTo(startX, startY);
|
|
234
|
+
ctx.lineTo(endX, endY);
|
|
235
|
+
ctx.stroke();
|
|
236
|
+
}
|
|
237
|
+
ctx.globalAlpha = 1;
|
|
238
|
+
ctx.restore();
|
|
239
|
+
animationFrameRef.current = requestAnimationFrame(draw);
|
|
240
|
+
};
|
|
241
|
+
draw();
|
|
242
|
+
return () => {
|
|
243
|
+
clearTimeout(setupTimeout);
|
|
244
|
+
if (animationFrameRef.current)
|
|
245
|
+
cancelAnimationFrame(animationFrameRef.current);
|
|
246
|
+
if (sourceNodeRef.current)
|
|
247
|
+
sourceNodeRef.current.disconnect();
|
|
248
|
+
if (analyserRef.current)
|
|
249
|
+
analyserRef.current.disconnect();
|
|
250
|
+
if (audioContextRef.current && audioContextRef.current.state !== 'closed') {
|
|
251
|
+
audioContextRef.current.close();
|
|
252
|
+
}
|
|
253
|
+
room.off('trackSubscribed', handleTrackSubscribed);
|
|
254
|
+
room.off('participantConnected', handleParticipantConnected);
|
|
255
|
+
};
|
|
256
|
+
}, [room, size, color, opacity, avatarRadius, barCount, onSpeakingChange]);
|
|
257
|
+
return (_jsx(VisualizerContainer, { style: { width: size, height: size }, children: _jsx(Canvas, { ref: canvasRef }) }));
|
|
258
|
+
};
|
|
259
|
+
//# sourceMappingURL=AudioVisualizer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AudioVisualizer.js","sourceRoot":"","sources":["../../../../../src/react/components/rtc-widget/components/AudioVisualizer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
interface ConviMessageProps {
|
|
2
|
+
message: string;
|
|
3
|
+
timestamp?: string;
|
|
4
|
+
className?: string;
|
|
5
|
+
showLogo?: boolean;
|
|
6
|
+
sender?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const ConviMessage: ({ message, timestamp, className, showLogo, sender, }: ConviMessageProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=ConviMessage.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ConviMessage.d.ts","sourceRoot":"","sources":["../../../../../src/react/components/rtc-widget/components/ConviMessage.tsx"],"names":[],"mappings":"AAYA,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,GAAI,sDAM1B,iBAAiB,4CAkCnB,CAAC"}
|