Skip to content

Commit 7afa748

Browse files
szuperazszuperaz
authored
feat(angular): voice recording (#313)
### 🎯 Goal _Describe why we are making this change_ ### πŸ›  Implementation details _Provide a description of the implementation_ ### 🎨 UI Changes _Add relevant screenshots_ Make sure to test with both Angular and React (with both `MessageList` and `VirtualizedMessageList` components) SDKs
1 parent 966f44b commit 7afa748

File tree

10 files changed

+87
-16
lines changed

10 files changed

+87
-16
lines changed

β€Žsrc/assets/icons/stream-chat-icons.eotβ€Ž

456 Bytes
Binary file not shown.

β€Žsrc/assets/icons/stream-chat-icons.svgβ€Ž

Lines changed: 4 additions & 0 deletions
Loading

β€Žsrc/assets/icons/stream-chat-icons.ttfβ€Ž

456 Bytes
Binary file not shown.

β€Žsrc/assets/icons/stream-chat-icons.woffβ€Ž

320 Bytes
Binary file not shown.

β€Žsrc/assets/icons/stream-chat-icons.woff2β€Ž

228 Bytes
Binary file not shown.

β€Žsrc/v2/styles/AudioRecorder/AudioRecorder-layout.scssβ€Ž

Lines changed: 64 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
padding-inline: 1rem;
1111
}
1212

13-
.str-chat__audio_recorder {
13+
.str-chat__audio_recorder,
14+
stream-voice-recorder-wavebar {
1415
@include utils.flex-row-center;
1516
gap: 0.375rem;
1617

@@ -21,28 +22,52 @@
2122
padding: 0;
2223
}
2324

24-
.str-chat__audio_recorder__cancel-button svg {
25-
height: 28px;
25+
.str-chat__audio_recorder__cancel-button {
26+
--str-chat-icon-height: 28px;
27+
28+
svg {
29+
height: 28px;
30+
}
2631
}
2732

28-
.str-chat__audio_recorder__toggle-playback-button svg {
29-
height: 16px;
33+
.str-chat__audio_recorder__toggle-playback-button {
34+
--str-chat-icon-height: 16px;
35+
36+
svg {
37+
height: 16px;
38+
}
3039
}
3140

32-
.str-chat__audio_recorder__pause-recording-button svg {
33-
height: 12px;
41+
.str-chat__audio_recorder__pause-recording-button {
42+
--str-chat-icon-height: 12px;
43+
44+
svg {
45+
height: 12px;
46+
}
3447
}
3548

36-
.str-chat__audio_recorder__resume-recording-button svg {
37-
height: 24px;
49+
.str-chat__audio_recorder__resume-recording-button {
50+
--str-chat-icon-height: 24px;
51+
52+
svg {
53+
height: 24px;
54+
}
3855
}
3956

40-
.str-chat__audio_recorder__stop-button svg {
41-
height: 12px;
57+
.str-chat__audio_recorder__stop-button {
58+
--str-chat-icon-height: 12px;
59+
60+
svg {
61+
height: 12px;
62+
}
4263
}
4364

44-
.str-chat__audio_recorder__complete-button svg {
45-
height: 16px;
65+
.str-chat__audio_recorder__complete-button {
66+
--str-chat-icon-height: 16px;
67+
68+
svg {
69+
height: 16px;
70+
}
4671
}
4772

4873
.str-chat__recording-timer {
@@ -86,4 +111,29 @@
86111
.str-chat__audio_recorder__waveform-box {
87112
overflow-x: hidden;
88113
}
89-
}
114+
}
115+
116+
.str-chat__audio_recorder-container {
117+
.str-chat__message-attachment__voice-recording-widget {
118+
display: flex;
119+
gap: var(--str-chat__spacing-1_5);
120+
121+
.str-chat__message-attachment-voice-recording-widget--first-row {
122+
display: none;
123+
}
124+
125+
.str-chat__message-attachment__voice-recording-widget__audio-state {
126+
display: flex;
127+
gap: var(--str-chat__spacing-1_5);
128+
129+
.str-chat__message-attachment__voice-recording-widget__timer {
130+
min-width: 3rem;
131+
align-self: center;
132+
}
133+
}
134+
135+
.str-chat__message-attachment__voice-recording-widget__right-section {
136+
display: none;
137+
}
138+
}
139+
}

β€Žsrc/v2/styles/AudioRecorder/AudioRecorder-theme.scssβ€Ž

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,24 @@
1717
}
1818

1919
.str-chat__audio_recorder__cancel-button {
20+
--str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
2021
color: var(--str-chat__text-low-emphasis-color);
2122
}
2223

2324
.str-chat__audio_recorder__toggle-playback-button {
25+
--str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
2426
color: var(--str-chat__text-low-emphasis-color);
2527
}
2628

29+
.str-chat__message-attachment-audio-widget--play-button {
30+
--str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
31+
box-shadow: none;
32+
border: none;
33+
}
34+
2735
.str-chat__audio_recorder__pause-recording-button,
2836
.str-chat__audio_recorder__resume-recording-button {
37+
--str-chat-icon-color: var(--str-chat__danger-color);
2938
color: var(--str-chat__danger-color);
3039
}
3140

@@ -36,6 +45,7 @@
3645

3746
.str-chat__audio_recorder__stop-button,
3847
.str-chat__audio_recorder__complete-button {
48+
--str-chat-icon-color: var(--str-chat__on-primary-color);
3949
border-radius: var(--str-chat__border-radius-circle);
4050
color: var(--str-chat__on-primary-color);
4151
background-color: var(--str-chat__primary-color);
@@ -48,4 +58,4 @@
4858
}
4959
}
5060
}
51-
}
61+
}

β€Žsrc/v2/styles/Icon/Icon-layout.scssβ€Ž

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
content: url('data:image/svg+xml;base64,PHN2ZwogIGNsYXNzPSJyZnUtZmlsZS1hdWRpbyIKICBmaWxsPSJub25lIgogIHZpZXdCb3g9IjAgMCAzNCA0MCIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgaGVpZ2h0PSIyMCIKICB3aWR0aD0iMjAiCj4KICA8cGF0aAogICAgY2xpcC1ydWxlPSJldmVub2RkIgogICAgZD0iTTE3LjcxNjggMzMuMTcyQzE4LjIzNDggMzMuMTcyIDE4LjQyMzggMzMuNjU1IDE4LjQyMzggMzQuMThDMTguNDIzOCAzNC42NDIgMTguMjk3OCAzNS4xOTUgMTcuNzE2OCAzNS4xOTVDMTcuMTcwOCAzNS4xOTUgMTYuOTg4OCAzNC42NDIgMTYuOTg4OCAzNC4xNDVDMTYuOTg4OCAzMy42ODMgMTcuMTcwOCAzMy4xNzIgMTcuNzE2OCAzMy4xNzJaTTE5LjU3MTggMzEuMDAySDE4LjM4MThWMzIuNzU4OUgxOC4zNjc4QzE4LjEyMjggMzIuNDMgMTcuNzc5OCAzMi4yNjIgMTcuMzMxOCAzMi4yNjJDMTYuMzAyOCAzMi4yNjIgMTUuNzk4OCAzMy4xNTggMTUuNzk4OCAzNC4xMDNDMTUuNzk4OCAzNS4xMjUgMTYuMjgxOCAzNi4xMDQ5IDE3LjQyMjggMzYuMTA0OUMxNy44NDI4IDM2LjEwNDkgMTguMTkyOCAzNS45MjMgMTguNDIzOCAzNS41OEgxOC40Mzc4VjM2SDE5LjU3MThWMzEuMDAyWk0xMi43MDk1IDM0LjE4NzJDMTIuNzA5NSAzMy43MjUyIDEyLjg3NzUgMzMuMTcyMiAxMy40MzA1IDMzLjE3MjJDMTMuOTgzNSAzMy4xNzIyIDE0LjE1ODUgMzMuNzI1MiAxNC4xNTg1IDM0LjE4NzJDMTQuMTU4NSAzNC42NDkyIDEzLjk4MzUgMzUuMTk1MiAxMy40MzA1IDM1LjE5NTJDMTIuODc3NSAzNS4xOTUyIDEyLjcwOTUgMzQuNjQ5MiAxMi43MDk1IDM0LjE4NzJaTTExLjUxOTUgMzQuMTg3MkMxMS41MTk1IDM1LjI3OTIgMTIuMzAzNSAzNi4xMDUyIDEzLjQzMDUgMzYuMTA1MkMxNC41NTc1IDM2LjEwNTIgMTUuMzQ4NSAzNS4yNzkyIDE1LjM0ODUgMzQuMTg3MkMxNS4zNDg1IDMzLjA5NTIgMTQuNTU3NSAzMi4yNjIyIDEzLjQzMDUgMzIuMjYyMkMxMi4zMDM1IDMyLjI2MjIgMTEuNTE5NSAzMy4wOTUyIDExLjUxOTUgMzQuMTg3MlpNMjEuODM5IDMyLjM2NzFIMjIuNTc0VjMzLjEzNzFIMjEuODM5VjM0Ljc4OTFDMjEuODM5IDM1LjA3NjEgMjIuMDA3IDM1LjEzOTEgMjIuMjY2IDM1LjEzOTFDMjIuMzE0MiAzNS4xMzkxIDIyLjM2NCAzNS4xMzU3IDIyLjQxNDcgMzUuMTMyM0MyMi40NjcyIDM1LjEyODcgMjIuNTIwNiAzNS4xMjUxIDIyLjU3NCAzNS4xMjUxVjM2LjAwMDFDMjIuNDgxIDM2LjAwMzEgMjIuMzg4IDM2LjAwOTkgMjIuMjk1IDM2LjAxNjhDMjIuMTcxIDM2LjAyNTkgMjIuMDQ3IDM2LjAzNTEgMjEuOTIzIDM2LjAzNTFDMjAuOTA4IDM2LjAzNTEgMjAuNjQ5IDM1Ljc0MTEgMjAuNjQ5IDM0Ljc1NDFWMzMuMTM3MUgyMC4wNDdWMzIuMzY3MUgyMC42NDlWMzEuMjY4MUgyMS44MzlWMzIuMzY3MVoiCiAgICBmaWxsPSJ3aGl0ZSIKICAgIGZpbGwtcnVsZT0iZXZlbm9kZCIKICA+PC9wYXRoPgogIDxwYXRoCiAgICBkPSJNMCAyOEgzNFYzN0MzNCAzOC42NTY5IDMyLjY1NjkgNDAgMzEgNDBIM0MxLjM0MzE1IDQwIDAgMzguNjU2OSAwIDM3VjI4WiIKICAgIGZpbGw9IiMyNzI3QjAiCiAgPjwvcGF0aD4KICA8cGF0aCBkPSJNMCAzQzAgMS4zNDMxNSAxLjM0MzE1IDAgMyAwSDIzTDM0IDExVjI4SDBWM1oiIGZpbGw9IiNGNUY1RjUiPjwvcGF0aD4KICA8cGF0aAogICAgZD0iTTM0IDExTDI2IDExQzI0LjM0MzEgMTEgMjMgOS42NTY4NSAyMyA4VjBMMzQgMTFaIgogICAgZmlsbD0iI0RCREJEQiIKICA+PC9wYXRoPgogIDxwYXRoCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNOC44NzkxMiAyMS45NDFIMTIuMjk4TDE2Ljk1MjEgMjQuNzQ5M0MxNy4wMzA3IDI0LjgxMzggMTcuMTI5MyAyNC44NDkgMTcuMjMxMSAyNC44NDlDMTcuNDczOCAyNC44NDg4IDE3LjY3MDUgMjQuNjUxOSAxNy42NzAzIDI0LjQwOTJWMTIuNDM5OUMxNy42NzA0IDEyLjMzODEgMTcuNjM1MiAxMi4yMzk2IDE3LjU3MDcgMTIuMTYwOUMxNy40MTY4IDExLjk3MzIgMTcuMTM5OCAxMS45NDU3IDE2Ljk1MjEgMTIuMDk5NkwxMi4yOTggMTQuOTA4SDguODc5MTJDOC4zOTM2IDE0LjkwOCA4IDE1LjMwMTYgOCAxNS43ODcxVjIxLjA2MTlDOCAyMS41NDc0IDguMzkzNiAyMS45NDEgOC44NzkxMiAyMS45NDFaTTEyLjkyNTggMTYuNjY2NEwxNS45MTIyIDE1LjIyMjRWMjEuNjI2OEwxMi45MjU4IDIwLjE4MjlIOS43NTgzVjE2LjY2NjRIMTIuOTI1OFpNMTkuODUxMSAxNi4zNTE3QzE5LjQ3NCAxNi40MDkyIDE5LjIzOTcgMTYuNjYzNyAxOS4zMjgzIDE2LjkxOTFMMTkuMzI2MiAxNi45MkMxOS41Mjk1IDE3LjQ5OTUgMTkuNjMwNSAxOC4wOTggMTkuNjI4NCAxOC42OTUzQzE5LjYzMDUgMTkuMjk3NSAxOS41MjM3IDE5LjkwMTQgMTkuMzE5NiAyMC40OTA5QzE5LjIyOSAyMC43NDYyIDE5LjQ2ODIgMjAuOTk5NiAxOS44NDc0IDIxLjA2QzE5LjkwMDggMjEuMDY4MyAxOS45NTQyIDIxLjA3MiAyMC4wMDc2IDIxLjA3MkMyMC4zMjU5IDIxLjA3MiAyMC42MTU2IDIwLjkyMzQgMjAuNjkyMiAyMC43MDU3QzIwLjkxOTQgMjAuMDQ1MSAyMS4wMzM3IDE5LjM3IDIxLjAzNzQgMTguNjk1M0MyMS4wMzQ5IDE4LjAyNTEgMjAuOTIxMSAxNy4zNTc1IDIwLjY5NTUgMTYuNzAzNUMyMC42MDUzIDE2LjQ0NzcgMjAuMjI5IDE2LjI5MDggMTkuODUxMSAxNi4zNTE3Wk0yMi4xNjA1IDE0LjYwMjhDMjIuNTI1MiAxNC41MTYzIDIyLjkyNTkgMTQuNjQ1NCAyMy4wNTUgMTQuODkzOEMyMy42ODkxIDE2LjExNTcgMjQgMTcuNDA0MiAyNCAxOC42OTIzQzI0LjAwMDQgMTkuOTg5NSAyMy42Nzk2IDIxLjI4MzkgMjMuMDUyMSAyMi41MTUzQzIyLjk1MDMgMjIuNzEyMyAyMi42NzYzIDIyLjgzNDQgMjIuMzgyOCAyMi44MzQ0QzIyLjMwNzEgMjIuODM0NCAyMi4yMzAxIDIyLjgyNjEgMjIuMTU0MyAyMi44MDkyQzIxLjc4NjMgMjIuNzI1MSAyMS41OTE0IDIyLjQ1MzYgMjEuNzE4NSAyMi4yMDc3QzIyLjI5ODggMjEuMDc2MSAyMi41OTIyIDE5Ljg4MzYgMjIuNTkzMSAxOC42OTE5QzIyLjU5MzEgMTcuNTA1NiAyMi4zMDU0IDE2LjMyMjIgMjEuNzI3NiAxNS4yMDI1QzIxLjYwMDEgMTQuOTU2MyAyMS43OTUgMTQuNjg2IDIyLjE2MDUgMTQuNjAyOFoiCiAgICBmaWxsPSIjMjcyN0IwIgogICAgZmlsbC1ydWxlPSJldmVub2RkIgogID48L3BhdGg+Cjwvc3ZnPg==');
3131
}
3232

33-
// Copy icon mapping here
3433
.str-chat__icon--action::before {
3534
content: '\e800';
3635
} /* 'ξ €' */
@@ -85,3 +84,9 @@
8584
.str-chat__icon--attach::before {
8685
content: '\e811';
8786
} /* 'ξ ‘' */
87+
.str-chat__icon--mic::before {
88+
content: '\e812';
89+
} /* 'ξ ’' */
90+
.str-chat__icon--bin::before {
91+
content: '\e813';
92+
} /* 'ξ “' */

β€Žsrc/v2/styles/MessageInput/MessageInput-layout.scssβ€Ž

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,7 @@
149149
}
150150

151151
.str-chat__start-recording-audio-button {
152+
--str-chat-icon-height: calc(var(--str-chat__spacing-px) * 25);
152153
@include utils.flex-row-center;
153154
cursor: pointer;
154155
padding: 0;

β€Žsrc/v2/styles/MessageInput/MessageInput-theme.scssβ€Ž

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,7 @@
228228
}
229229

230230
.str-chat__start-recording-audio-button {
231+
--str-chat-icon-color: var(--str-chat__start-recording-audio-button-color);
231232
@include utils.component-layer-overrides('start-recording-audio-button');
232233

233234
&:disabled {

0 commit comments

Comments
Β (0)