imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Deduplicate media & voip icons using Compound Design Tokens (#129)

Browse source 
* Deduplicate media & voip icons using Compound Design Tokens

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-10-08 13:00:37 +01:00 • committed by GitHub
parent 197168b3ba
commit df4a223eb6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
49 changed files with 497 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

64
test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap
View file

@ -29,9 +29,21 @@ exports[`VoiceBroadcastHeader when rendering a buffering live broadcast header w
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
test user
</span>
@ -86,9 +98,21 @@ exports[`VoiceBroadcastHeader when rendering a live (grey) broadcast header with
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
test user
</span>
@ -143,9 +167,21 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
test user
</span>
@ -216,9 +252,21 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
test user
</span>

52
test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastPlaybackControl-test.tsx.snap
View file

@ -8,9 +8,18 @@ exports[`<VoiceBroadcastPlaybackControl /> should render state buffering as expe
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_12"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
/>
</svg>
</div>
</div>
`;
@ -23,9 +32,18 @@ exports[`<VoiceBroadcastPlaybackControl /> should render state pause as expected
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
/>
</svg>
</div>
</div>
`;
@ -38,9 +56,18 @@ exports[`<VoiceBroadcastPlaybackControl /> should render state playing as expect
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_12"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
/>
</svg>
</div>
</div>
`;
@ -53,9 +80,18 @@ exports[`<VoiceBroadcastPlaybackControl /> should render state stopped as expect
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
/>
</svg>
</div>
</div>
`;

190
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
View file

@ -32,9 +32,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
@user:example.com
</span>
@ -84,9 +96,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_12"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
/>
</svg>
</div>
<div
aria-label="30s forward"
@ -162,9 +183,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast sh
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
@user:example.com
</span>
@ -198,9 +231,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast sh
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
/>
</svg>
</div>
<div
aria-label="30s forward"
@ -288,9 +330,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
@user:example.com
</span>
@ -324,9 +378,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_12"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
/>
</svg>
</div>
<div
aria-label="30s forward"
@ -402,9 +465,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
@user:example.com
</span>
@ -438,9 +513,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_12"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
/>
</svg>
</div>
<div
aria-label="30s forward"
@ -516,9 +600,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
@user:example.com
</span>
@ -560,9 +656,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_12"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
/>
</svg>
</div>
<div
aria-label="30s forward"
@ -638,9 +743,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
@user:example.com
</span>
@ -664,9 +781,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
/>
</svg>
</div>
</div>
<input
@ -732,9 +858,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering an error broadcast should ren
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
@user:example.com
</span>

16
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap
View file

@ -44,9 +44,21 @@ exports[`VoiceBroadcastPreRecordingPip when rendered should match the snapshot 1
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
Default Device
</span>

32
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap
View file

@ -32,9 +32,21 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
@user:example.com
</span>
@ -85,9 +97,21 @@ exports[`VoiceBroadcastRecordingBody when rendering a paused broadcast should re
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
@user:example.com
</span>

45
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap
View file

@ -83,9 +83,21 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16 mx_Icon_alert"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
</div>
<div
aria-label="Stop Recording"
@ -175,9 +187,18 @@ exports[`VoiceBroadcastRecordingPip when rendering a started recording should re
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_12"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
/>
</svg>
</div>
<div
aria-label="Change input device"
@ -185,9 +206,21 @@ exports[`VoiceBroadcastRecordingPip when rendering a started recording should re
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16 mx_Icon_alert"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
</div>
<div
aria-label="Stop Recording"

145
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap
View file

@ -44,9 +44,21 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'pause',
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
@user:example.com
</span>
@ -59,9 +71,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'pause',
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
/>
</svg>
</div>
<div
class="mx_AccessibleButton"
@ -129,9 +150,21 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'playing'
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
@user:example.com
</span>
@ -152,9 +185,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'playing'
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_12"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
/>
</svg>
</div>
<div
class="mx_AccessibleButton"
@ -233,9 +275,21 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a buffering broadcas
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
@user:example.com
</span>
@ -256,9 +310,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a buffering broadcas
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_12"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
/>
</svg>
</div>
<div
class="mx_AccessibleButton"
@ -326,9 +389,21 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a playing broadcast
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
@user:example.com
</span>
@ -341,9 +416,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a playing broadcast
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_12"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
/>
</svg>
</div>
<div
class="mx_AccessibleButton"
@ -411,9 +495,21 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a stopped broadcast
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
/>
<path
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
/>
</svg>
<span>
@user:example.com
</span>
@ -426,9 +522,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a stopped broadcast
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_16"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
/>
</svg>
</div>
<div
class="mx_AccessibleButton"