element-web/test/unit-tests/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlayback...

559 lines
15 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'pause', liveness: 'not-live' }/%s broadcast should render as expected 1`] = `
<div>
<div
class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip mx_VoiceBroadcastBody--small"
>
<div
class="mx_VoiceBroadcastHeader"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
data-testid="room-avatar"
>
room avatar:
My room
</div>
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
class="mx_VoiceBroadcastHeader_room_wrapper"
>
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
</div>
<div
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<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>
</div>
</div>
</div>
<div
aria-label="resume voice broadcast"
class="mx_AccessibleButton mx_VoiceBroadcastControl mx_VoiceBroadcastControl-play"
role="button"
tabindex="0"
>
<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"
role="button"
tabindex="0"
>
<svg
class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</div>
</div>
`;
exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'playing', liveness: 'live' }/%s broadcast should render as expected 1`] = `
<div>
<div
class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip mx_VoiceBroadcastBody--small"
>
<div
class="mx_VoiceBroadcastHeader"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
data-testid="room-avatar"
>
room avatar:
My room
</div>
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
class="mx_VoiceBroadcastHeader_room_wrapper"
>
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
</div>
<div
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<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>
</div>
<div
class="mx_LiveBadge"
>
<div
class="mx_Icon mx_Icon_16"
/>
Live
</div>
</div>
</div>
<div
aria-label="pause voice broadcast"
class="mx_AccessibleButton mx_VoiceBroadcastControl"
role="button"
tabindex="0"
>
<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"
role="button"
tabindex="0"
>
<svg
class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</div>
</div>
`;
exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a buffering broadcast should render as expected 1`] = `
<div>
<div
class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip mx_VoiceBroadcastBody--small"
>
<div
class="mx_VoiceBroadcastHeader"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
data-testid="room-avatar"
>
room avatar:
My room
</div>
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
class="mx_VoiceBroadcastHeader_room_wrapper"
>
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
<div
class="mx_Spinner"
>
<div
aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 12px; height: 12px;"
/>
</div>
</div>
</div>
<div
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<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>
</div>
<div
class="mx_LiveBadge"
>
<div
class="mx_Icon mx_Icon_16"
/>
Live
</div>
</div>
</div>
<div
aria-label="pause voice broadcast"
class="mx_AccessibleButton mx_VoiceBroadcastControl"
role="button"
tabindex="0"
>
<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"
role="button"
tabindex="0"
>
<svg
class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</div>
</div>
`;
exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a playing broadcast should render as expected 1`] = `
<div>
<div
class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip mx_VoiceBroadcastBody--small"
>
<div
class="mx_VoiceBroadcastHeader"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
data-testid="room-avatar"
>
room avatar:
My room
</div>
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
class="mx_VoiceBroadcastHeader_room_wrapper"
>
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
</div>
<div
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<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>
</div>
</div>
</div>
<div
aria-label="pause voice broadcast"
class="mx_AccessibleButton mx_VoiceBroadcastControl"
role="button"
tabindex="0"
>
<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"
role="button"
tabindex="0"
>
<svg
class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</div>
</div>
`;
exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a stopped broadcast should render as expected 1`] = `
<div>
<div
class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip mx_VoiceBroadcastBody--small"
>
<div
class="mx_VoiceBroadcastHeader"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
data-testid="room-avatar"
>
room avatar:
My room
</div>
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
class="mx_VoiceBroadcastHeader_room_wrapper"
>
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
</div>
<div
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<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>
</div>
</div>
</div>
<div
aria-label="play voice broadcast"
class="mx_AccessibleButton mx_VoiceBroadcastControl mx_VoiceBroadcastControl-play"
role="button"
tabindex="0"
>
<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"
role="button"
tabindex="0"
>
<svg
class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</div>
</div>
`;