You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Audio attachments recorded directly from the chat UI are called voice recordings. The SDK provides a default implementation called <GHComponentLinktext='VoiceRecording'path='/Attachment/VoiceRecording.tsx'/>. The default component renders or <GHComponentLinktext='VoiceRecordingPlayer component'path='/Attachment/VoiceRecording.tsx'/> or <GHComponentLinktext='QuotedVoiceRecording'path='/Attachment/VoiceRecording.tsx'/>.
22
22
23
23
The `VoiceRecordingPlayer` component is displayed in the message attachment list and is used to reproduce the audio.
|**asset_url**| the URL where the voice recording is downloaded from |
69
69
|**duration**| the audio duration in seconds |
70
70
|**file_size**| the file size in bytes (displayed as fallback to duration if duration is not available) |
@@ -80,29 +80,29 @@ These properties serve the following purpose:
80
80
By clicking in the space of waveform or by dragging the progress indicator a user can navigate to a specific place in the audio track. The progress indicator is placed at the point of the click or drag end and the preceding amplitude bars are highlighted to manifest the progress.
alt: 'Image of the VoiceRecordingPlayer stopped in the middle of the reproduction',
89
+
},
90
+
]}
91
91
/>
92
92
93
93
### Playback speed change
94
94
95
-
The playback speed can be changed by clicking the <GHComponentLinktext='PlaybackRateButton'path='/Attachment/components/PlaybackRateButton.tsx'/>. The button is visible only during the audio reproduction. The rate is changed by repeatedly clicking the <GHComponentLinktext='PlaybackRateButton'path='/Attachment/components/PlaybackRateButton.tsx'/>. Once the highest rate speed is achieved, the next click resets the speed to the initial value.
95
+
The playback speed can be changed by clicking the <GHComponentLinktext='PlaybackRateButton'path='/Attachment/components/PlaybackRateButton.tsx'/>. The button is visible only during the audio reproduction. The rate is changed by repeatedly clicking the <GHComponentLinktext='PlaybackRateButton'path='/Attachment/components/PlaybackRateButton.tsx'/>. Once the highest rate speed is achieved, the next click resets the speed to the initial value.
96
96
97
97
<ImageShowcase
98
-
border
99
-
items={[
100
-
{
101
-
image: VoiceRecordingPlayerInProgress,
102
-
caption: <span>VoiceRecordingPlayer playing the audio</span>,
103
-
alt: 'Image of the VoiceRecordingPlayer playing the audio',
104
-
},
105
-
]}
98
+
border
99
+
items={[
100
+
{
101
+
image: VoiceRecordingPlayerInProgress,
102
+
caption: <span>VoiceRecordingPlayer playing the audio</span>,
103
+
alt: 'Image of the VoiceRecordingPlayer playing the audio',
104
+
},
105
+
]}
106
106
/>
107
107
108
108
## UI Fallbacks
@@ -112,55 +112,54 @@ The playback speed can be changed by clicking the <GHComponentLink text='Playba
112
112
If the duration is not available in the [attachment object payload](./#attachment-payload), `VoiceRecordingPlayer` as well as `QuotedVoiceRecording` component will display the attachment size instead.
113
113
114
114
<ImageShowcase
115
-
border
116
-
items={[
117
-
{
118
-
image: VoiceRecordingPlayerFileSizeFallback,
119
-
caption: <span>VoiceRecordingPlayer displaying file size instead of audio duration</span>,
120
-
alt: 'Image of the VoiceRecordingPlayer displaying file size instead of audio duration',
121
-
},
122
-
{
123
-
image: QuotedVoiceRecordingFileSizeFallback,
124
-
caption: <span>QuotedVoiceRecording displaying file size instead of audio duration</span>,
125
-
alt: 'Image of the QuotedVoiceRecording displaying file size instead of audio duration',
126
-
},
127
-
]}
115
+
border
116
+
items={[
117
+
{
118
+
image: VoiceRecordingPlayerFileSizeFallback,
119
+
caption: <span>VoiceRecordingPlayer displaying file size instead of audio duration</span>,
120
+
alt: 'Image of the VoiceRecordingPlayer displaying file size instead of audio duration',
121
+
},
122
+
{
123
+
image: QuotedVoiceRecordingFileSizeFallback,
124
+
caption: <span>QuotedVoiceRecording displaying file size instead of audio duration</span>,
125
+
alt: 'Image of the QuotedVoiceRecording displaying file size instead of audio duration',
126
+
},
127
+
]}
128
128
/>
129
129
130
-
131
130
### Missing title
132
131
133
132
If the voice recording does not come with title, a fallback title is provided.
134
133
135
134
<ImageShowcase
136
-
border
137
-
items={[
138
-
{
139
-
image: VoiceRecordingPlayerFallbackTitle,
140
-
caption: <span>VoiceRecordingPlayer displaying the fallback title</span>,
141
-
alt: 'Image of the VoiceRecordingPlayer displaying the fallback title',
142
-
},
143
-
{
144
-
image: QuotedVoiceRecordingFallbackTitle,
145
-
caption: <span>QuotedVoiceRecording displaying the fallback title</span>,
146
-
alt: 'Image of the QuotedVoiceRecording displaying the fallback title',
147
-
},
148
-
]}
135
+
border
136
+
items={[
137
+
{
138
+
image: VoiceRecordingPlayerFallbackTitle,
139
+
caption: <span>VoiceRecordingPlayer displaying the fallback title</span>,
140
+
alt: 'Image of the VoiceRecordingPlayer displaying the fallback title',
141
+
},
142
+
{
143
+
image: QuotedVoiceRecordingFallbackTitle,
144
+
caption: <span>QuotedVoiceRecording displaying the fallback title</span>,
145
+
alt: 'Image of the QuotedVoiceRecording displaying the fallback title',
146
+
},
147
+
]}
149
148
/>
150
149
151
150
### Missing `waveform_data`
152
151
153
152
If the `waveform_data` is an empty array, then no progress bar is rendered.
154
153
155
154
<ImageShowcase
156
-
border
157
-
items={[
158
-
{
159
-
image: VoiceRecordingPlayerMissingWaveformData,
160
-
caption: <span>VoiceRecordingPlayer without progress bar</span>,
161
-
alt: 'Image of the VoiceRecordingPlayer missing progress bar',
162
-
},
163
-
]}
155
+
border
156
+
items={[
157
+
{
158
+
image: VoiceRecordingPlayerMissingWaveformData,
159
+
caption: <span>VoiceRecordingPlayer without progress bar</span>,
160
+
alt: 'Image of the VoiceRecordingPlayer missing progress bar',
0 commit comments