aa996010b4
* Avoid destroying calls until they are hidden from the UI We often want calls to exist even when no more participants are left in the MatrixRTC session. So, we should avoid destroying calls as long as they're being presented in the UI; this means that the user has an intent to either join the call or continue looking at an error screen, and we shouldn't interrupt that interaction. The RoomViewStore is now what takes care of creating and destroying calls, rather than the CallView. In general it seems kinda impossible to safely create and destroy model objects from React lifecycle hooks, so moving this responsibility to a store seemed appropriate and resolves existing issues with calls in React strict mode. * Wait for a close action before closing a call This creates a distinction between the user hanging up and the widget being ready to close, which is useful for allowing Element Call to show error screens when disconnected from the call, for example. * Don't expect a 'close' action in video rooms These use the returnToLobby option and are expected to remain visible when the user leaves the call.
2242 lines
78 KiB
Plaintext
2242 lines
78 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||
|
||
exports[`RoomView for a local room in state CREATING should match the snapshot 1`] = `
|
||
<div>
|
||
<div
|
||
class="mx_RoomView mx_RoomView--local"
|
||
>
|
||
<header
|
||
class="mx_Flex mx_RoomHeader light-panel"
|
||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
|
||
>
|
||
<button
|
||
aria-label="Open room settings"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
u
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_Box mx_RoomHeader_info mx_Box--flex"
|
||
style="--mx-box-flex: 1;"
|
||
>
|
||
<div
|
||
aria-level="1"
|
||
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
|
||
dir="auto"
|
||
role="heading"
|
||
>
|
||
<span
|
||
class="mx_RoomHeader_truncated mx_lineClamp"
|
||
>
|
||
@user:example.com
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Video call"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
aria-labelledby=":rg4:"
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Voice call"
|
||
aria-labelledby=":rg9:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Threads"
|
||
aria-labelledby=":rge:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
aria-labelledby=":rgj:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<div
|
||
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
|
||
>
|
||
<div
|
||
aria-label="2 members"
|
||
aria-labelledby=":rgo:"
|
||
class="mx_AccessibleButton mx_FacePile"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_stacked-avatars_1qbcf_102"
|
||
>
|
||
<span
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="2"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="presentation"
|
||
style="--cpd-avatar-size: 20px;"
|
||
>
|
||
u
|
||
</span>
|
||
<span
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="presentation"
|
||
style="--cpd-avatar-size: 20px;"
|
||
>
|
||
u
|
||
</span>
|
||
</div>
|
||
2
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div
|
||
class="mx_RoomView_body"
|
||
>
|
||
<div
|
||
class="mx_LargeLoader"
|
||
>
|
||
<div
|
||
class="mx_Spinner"
|
||
>
|
||
<div
|
||
aria-label="Loading…"
|
||
class="mx_Spinner_icon"
|
||
data-testid="spinner"
|
||
role="progressbar"
|
||
style="width: 45px; height: 45px;"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="mx_LargeLoader_text"
|
||
>
|
||
We're creating a room with @user:example.com
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
exports[`RoomView for a local room in state ERROR should match the snapshot 1`] = `
|
||
<div>
|
||
<div
|
||
class="mx_RoomView mx_RoomView--local"
|
||
>
|
||
<header
|
||
class="mx_Flex mx_RoomHeader light-panel"
|
||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
|
||
>
|
||
<button
|
||
aria-label="Open room settings"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
u
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_Box mx_RoomHeader_info mx_Box--flex"
|
||
style="--mx-box-flex: 1;"
|
||
>
|
||
<div
|
||
aria-level="1"
|
||
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
|
||
dir="auto"
|
||
role="heading"
|
||
>
|
||
<span
|
||
class="mx_RoomHeader_truncated mx_lineClamp"
|
||
>
|
||
@user:example.com
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Video call"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
aria-labelledby=":rh2:"
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Voice call"
|
||
aria-labelledby=":rh7:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Threads"
|
||
aria-labelledby=":rhc:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
aria-labelledby=":rhh:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<div
|
||
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
|
||
>
|
||
<div
|
||
aria-label="2 members"
|
||
aria-labelledby=":rhm:"
|
||
class="mx_AccessibleButton mx_FacePile"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_stacked-avatars_1qbcf_102"
|
||
>
|
||
<span
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="2"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="presentation"
|
||
style="--cpd-avatar-size: 20px;"
|
||
>
|
||
u
|
||
</span>
|
||
<span
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="presentation"
|
||
style="--cpd-avatar-size: 20px;"
|
||
>
|
||
u
|
||
</span>
|
||
</div>
|
||
2
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main
|
||
class="mx_RoomView_body"
|
||
>
|
||
<div
|
||
class="mx_RoomView_timeline"
|
||
>
|
||
<div
|
||
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
|
||
tabindex="-1"
|
||
>
|
||
<div
|
||
class="mx_RoomView_messageListWrapper"
|
||
>
|
||
<ol
|
||
aria-live="polite"
|
||
class="mx_RoomView_MessageList"
|
||
style="height: 400px;"
|
||
>
|
||
<li
|
||
class="mx_NewRoomIntro"
|
||
>
|
||
<div
|
||
class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon_warning"
|
||
>
|
||
<div
|
||
class="mx_EventTileBubble_title"
|
||
>
|
||
End-to-end encryption isn't enabled
|
||
</div>
|
||
<div
|
||
class="mx_EventTileBubble_subtitle"
|
||
>
|
||
<span>
|
||
|
||
Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites.
|
||
|
||
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<button
|
||
aria-label="Avatar"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 52px;"
|
||
>
|
||
u
|
||
</button>
|
||
<h2>
|
||
@user:example.com
|
||
</h2>
|
||
<p>
|
||
<span>
|
||
Send your first message to invite
|
||
<strong>
|
||
@user:example.com
|
||
</strong>
|
||
to chat
|
||
</span>
|
||
</p>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mx_RoomStatusBar mx_RoomStatusBar_unsentMessages"
|
||
>
|
||
<div
|
||
role="alert"
|
||
>
|
||
<div
|
||
class="mx_RoomStatusBar_unsentBadge"
|
||
>
|
||
<div
|
||
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char cpd-theme-light"
|
||
>
|
||
<span
|
||
class="mx_NotificationBadge_count"
|
||
>
|
||
!
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div
|
||
class="mx_RoomStatusBar_unsentTitle"
|
||
>
|
||
Some of your messages have not been sent
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mx_RoomStatusBar_unsentButtonBar"
|
||
>
|
||
<div
|
||
class="mx_AccessibleButton mx_RoomStatusBar_unsentRetry"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
Retry
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
exports[`RoomView for a local room in state NEW should match the snapshot 1`] = `
|
||
<div>
|
||
<div
|
||
class="mx_RoomView mx_RoomView--local"
|
||
>
|
||
<header
|
||
class="mx_Flex mx_RoomHeader light-panel"
|
||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
|
||
>
|
||
<button
|
||
aria-label="Open room settings"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
u
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_Box mx_RoomHeader_info mx_Box--flex"
|
||
style="--mx-box-flex: 1;"
|
||
>
|
||
<div
|
||
aria-level="1"
|
||
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
|
||
dir="auto"
|
||
role="heading"
|
||
>
|
||
<span
|
||
class="mx_RoomHeader_truncated mx_lineClamp"
|
||
>
|
||
@user:example.com
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Video call"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
aria-labelledby=":rbo:"
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Voice call"
|
||
aria-labelledby=":rbt:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Threads"
|
||
aria-labelledby=":rc2:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
aria-labelledby=":rc7:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<div
|
||
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
|
||
>
|
||
<div
|
||
aria-label="2 members"
|
||
aria-labelledby=":rcc:"
|
||
class="mx_AccessibleButton mx_FacePile"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_stacked-avatars_1qbcf_102"
|
||
>
|
||
<span
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="2"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="presentation"
|
||
style="--cpd-avatar-size: 20px;"
|
||
>
|
||
u
|
||
</span>
|
||
<span
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="presentation"
|
||
style="--cpd-avatar-size: 20px;"
|
||
>
|
||
u
|
||
</span>
|
||
</div>
|
||
2
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main
|
||
class="mx_RoomView_body"
|
||
>
|
||
<div
|
||
class="mx_RoomView_timeline"
|
||
>
|
||
<div
|
||
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
|
||
tabindex="-1"
|
||
>
|
||
<div
|
||
class="mx_RoomView_messageListWrapper"
|
||
>
|
||
<ol
|
||
aria-live="polite"
|
||
class="mx_RoomView_MessageList"
|
||
style="height: 400px;"
|
||
>
|
||
<li
|
||
class="mx_NewRoomIntro"
|
||
>
|
||
<div
|
||
class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon_warning"
|
||
>
|
||
<div
|
||
class="mx_EventTileBubble_title"
|
||
>
|
||
End-to-end encryption isn't enabled
|
||
</div>
|
||
<div
|
||
class="mx_EventTileBubble_subtitle"
|
||
>
|
||
<span>
|
||
|
||
Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites.
|
||
|
||
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<button
|
||
aria-label="Avatar"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 52px;"
|
||
>
|
||
u
|
||
</button>
|
||
<h2>
|
||
@user:example.com
|
||
</h2>
|
||
<p>
|
||
<span>
|
||
Send your first message to invite
|
||
<strong>
|
||
@user:example.com
|
||
</strong>
|
||
to chat
|
||
</span>
|
||
</p>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
aria-label="Message composer"
|
||
class="mx_MessageComposer"
|
||
role="region"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_wrapper"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_row"
|
||
>
|
||
<div
|
||
class="mx_SendMessageComposer"
|
||
>
|
||
<div
|
||
class="mx_BasicMessageComposer"
|
||
>
|
||
<div
|
||
aria-label="Formatting"
|
||
class="mx_MessageComposerFormatBar"
|
||
role="toolbar"
|
||
>
|
||
<button
|
||
aria-label="Bold"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
|
||
role="button"
|
||
tabindex="0"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Italics"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Strikethrough"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Code block"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Quote"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Insert link"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
</div>
|
||
<div
|
||
aria-autocomplete="list"
|
||
aria-disabled="false"
|
||
aria-haspopup="listbox"
|
||
aria-label="Send a message…"
|
||
aria-multiline="true"
|
||
class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
|
||
contenteditable="true"
|
||
data-testid="basicmessagecomposer"
|
||
dir="auto"
|
||
role="textbox"
|
||
style="--placeholder: 'Send\\ a\\ message…';"
|
||
tabindex="0"
|
||
translate="no"
|
||
>
|
||
<div>
|
||
<br />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mx_MessageComposer_actions"
|
||
>
|
||
<div
|
||
aria-label="Emoji"
|
||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<div
|
||
aria-label="Attachment"
|
||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<div
|
||
aria-label="More options"
|
||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<input
|
||
multiple=""
|
||
style="display: none;"
|
||
type="file"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
exports[`RoomView for a local room in state NEW that is encrypted should match the snapshot 1`] = `
|
||
<div>
|
||
<div
|
||
class="mx_RoomView mx_RoomView--local"
|
||
>
|
||
<header
|
||
class="mx_Flex mx_RoomHeader light-panel"
|
||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
|
||
>
|
||
<button
|
||
aria-label="Open room settings"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
u
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_Box mx_RoomHeader_info mx_Box--flex"
|
||
style="--mx-box-flex: 1;"
|
||
>
|
||
<div
|
||
aria-level="1"
|
||
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
|
||
dir="auto"
|
||
role="heading"
|
||
>
|
||
<span
|
||
class="mx_RoomHeader_truncated mx_lineClamp"
|
||
>
|
||
@user:example.com
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Video call"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
aria-labelledby=":rdu:"
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Voice call"
|
||
aria-labelledby=":re3:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Threads"
|
||
aria-labelledby=":re8:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
aria-labelledby=":red:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<div
|
||
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
|
||
>
|
||
<div
|
||
aria-label="2 members"
|
||
aria-labelledby=":rei:"
|
||
class="mx_AccessibleButton mx_FacePile"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_stacked-avatars_1qbcf_102"
|
||
>
|
||
<span
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="2"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="presentation"
|
||
style="--cpd-avatar-size: 20px;"
|
||
>
|
||
u
|
||
</span>
|
||
<span
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="presentation"
|
||
style="--cpd-avatar-size: 20px;"
|
||
>
|
||
u
|
||
</span>
|
||
</div>
|
||
2
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main
|
||
class="mx_RoomView_body"
|
||
>
|
||
<div
|
||
class="mx_RoomView_timeline"
|
||
>
|
||
<div
|
||
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
|
||
tabindex="-1"
|
||
>
|
||
<div
|
||
class="mx_RoomView_messageListWrapper"
|
||
>
|
||
<ol
|
||
aria-live="polite"
|
||
class="mx_RoomView_MessageList"
|
||
style="height: 400px;"
|
||
>
|
||
<div
|
||
class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon"
|
||
>
|
||
<div
|
||
class="mx_EventTileBubble_title"
|
||
>
|
||
Encryption enabled
|
||
</div>
|
||
<div
|
||
class="mx_EventTileBubble_subtitle"
|
||
>
|
||
Messages in this chat will be end-to-end encrypted.
|
||
</div>
|
||
</div>
|
||
<li
|
||
class="mx_NewRoomIntro"
|
||
>
|
||
<button
|
||
aria-label="Avatar"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="3"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 52px;"
|
||
>
|
||
u
|
||
</button>
|
||
<h2>
|
||
@user:example.com
|
||
</h2>
|
||
<p>
|
||
<span>
|
||
Send your first message to invite
|
||
<strong>
|
||
@user:example.com
|
||
</strong>
|
||
to chat
|
||
</span>
|
||
</p>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
aria-label="Message composer"
|
||
class="mx_MessageComposer"
|
||
role="region"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_wrapper"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_row"
|
||
>
|
||
<div
|
||
class="mx_SendMessageComposer"
|
||
>
|
||
<div
|
||
class="mx_BasicMessageComposer"
|
||
>
|
||
<div
|
||
aria-label="Formatting"
|
||
class="mx_MessageComposerFormatBar"
|
||
role="toolbar"
|
||
>
|
||
<button
|
||
aria-label="Bold"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
|
||
role="button"
|
||
tabindex="0"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Italics"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Strikethrough"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Code block"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Quote"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Insert link"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
</div>
|
||
<div
|
||
aria-autocomplete="list"
|
||
aria-disabled="false"
|
||
aria-haspopup="listbox"
|
||
aria-label="Send a message…"
|
||
aria-multiline="true"
|
||
class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
|
||
contenteditable="true"
|
||
data-testid="basicmessagecomposer"
|
||
dir="auto"
|
||
role="textbox"
|
||
style="--placeholder: 'Send\\ a\\ message…';"
|
||
tabindex="0"
|
||
translate="no"
|
||
>
|
||
<div>
|
||
<br />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mx_MessageComposer_actions"
|
||
>
|
||
<div
|
||
aria-label="Emoji"
|
||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<div
|
||
aria-label="Attachment"
|
||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<div
|
||
aria-label="More options"
|
||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<input
|
||
multiple=""
|
||
style="display: none;"
|
||
type="file"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
exports[`RoomView should not display the timeline when the room encryption is loading 1`] = `
|
||
<DocumentFragment>
|
||
<div
|
||
class="mx_RoomView"
|
||
>
|
||
<canvas
|
||
aria-hidden="true"
|
||
height="768"
|
||
style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
|
||
width="0"
|
||
/>
|
||
<div
|
||
class="mx_MainSplit"
|
||
>
|
||
<div
|
||
class="mx_RoomView_body mx_MainSplit_timeline"
|
||
data-layout="group"
|
||
>
|
||
<header
|
||
class="mx_Flex mx_RoomHeader light-panel"
|
||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
|
||
>
|
||
<button
|
||
aria-label="Open room settings"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="2"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
!
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_Box mx_RoomHeader_info mx_Box--flex"
|
||
style="--mx-box-flex: 1;"
|
||
>
|
||
<div
|
||
aria-level="1"
|
||
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
|
||
dir="auto"
|
||
role="heading"
|
||
>
|
||
<span
|
||
class="mx_RoomHeader_truncated mx_lineClamp"
|
||
>
|
||
!6:example.org
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="true"
|
||
aria-label="There's no one here to call"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
|
||
>
|
||
<svg
|
||
aria-labelledby=":r2c:"
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="true"
|
||
aria-label="There's no one here to call"
|
||
aria-labelledby=":r2h:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
|
||
>
|
||
<svg
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Threads"
|
||
aria-labelledby=":r2m:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
aria-labelledby=":r2r:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<div
|
||
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
|
||
>
|
||
<div
|
||
aria-label="0 members"
|
||
aria-labelledby=":r30:"
|
||
class="mx_AccessibleButton mx_FacePile"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_stacked-avatars_1qbcf_102"
|
||
/>
|
||
0
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div
|
||
class="mx_AutoHideScrollbar mx_AuxPanel"
|
||
role="region"
|
||
tabindex="-1"
|
||
>
|
||
<div />
|
||
</div>
|
||
<main
|
||
class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
|
||
/>
|
||
<div
|
||
aria-label="Room status bar"
|
||
class="mx_RoomView_statusArea"
|
||
role="region"
|
||
>
|
||
<div
|
||
class="mx_RoomView_statusAreaBox"
|
||
>
|
||
<div
|
||
class="mx_RoomView_statusAreaBox_line"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DocumentFragment>
|
||
`;
|
||
|
||
exports[`RoomView should not display the timeline when the room encryption is loading 2`] = `
|
||
<DocumentFragment>
|
||
<div
|
||
class="mx_RoomView"
|
||
>
|
||
<canvas
|
||
aria-hidden="true"
|
||
height="768"
|
||
style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
|
||
width="0"
|
||
/>
|
||
<div
|
||
class="mx_MainSplit"
|
||
>
|
||
<div
|
||
class="mx_RoomView_body mx_MainSplit_timeline"
|
||
data-layout="group"
|
||
>
|
||
<header
|
||
class="mx_Flex mx_RoomHeader light-panel"
|
||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
|
||
>
|
||
<button
|
||
aria-label="Open room settings"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="2"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
!
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_Box mx_RoomHeader_info mx_Box--flex"
|
||
style="--mx-box-flex: 1;"
|
||
>
|
||
<div
|
||
aria-level="1"
|
||
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
|
||
dir="auto"
|
||
role="heading"
|
||
>
|
||
<span
|
||
class="mx_RoomHeader_truncated mx_lineClamp"
|
||
>
|
||
!6:example.org
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="true"
|
||
aria-label="There's no one here to call"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
|
||
>
|
||
<svg
|
||
aria-labelledby=":r2c:"
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="true"
|
||
aria-label="There's no one here to call"
|
||
aria-labelledby=":r2h:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
|
||
>
|
||
<svg
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Threads"
|
||
aria-labelledby=":r2m:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
aria-labelledby=":r2r:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<div
|
||
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
|
||
>
|
||
<div
|
||
aria-label="0 members"
|
||
aria-labelledby=":r30:"
|
||
class="mx_AccessibleButton mx_FacePile"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_stacked-avatars_1qbcf_102"
|
||
/>
|
||
0
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div
|
||
class="mx_AutoHideScrollbar mx_AuxPanel"
|
||
role="region"
|
||
tabindex="-1"
|
||
>
|
||
<div />
|
||
</div>
|
||
<main
|
||
class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
|
||
>
|
||
<div
|
||
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
|
||
tabindex="-1"
|
||
>
|
||
<div
|
||
class="mx_RoomView_messageListWrapper"
|
||
>
|
||
<ol
|
||
aria-live="polite"
|
||
class="mx_RoomView_MessageList"
|
||
style="height: 400px;"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<div
|
||
aria-label="Room status bar"
|
||
class="mx_RoomView_statusArea"
|
||
role="region"
|
||
>
|
||
<div
|
||
class="mx_RoomView_statusAreaBox"
|
||
>
|
||
<div
|
||
class="mx_RoomView_statusAreaBox_line"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div
|
||
aria-label="Message composer"
|
||
class="mx_MessageComposer mx_MessageComposer_e2eStatus"
|
||
role="region"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_wrapper"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_row"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_e2eIconWrapper"
|
||
>
|
||
<span
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
aria-labelledby=":r3e:"
|
||
class="mx_E2EIcon mx_E2EIcon_verified mx_MessageComposer_e2eIcon"
|
||
/>
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="mx_SendMessageComposer"
|
||
>
|
||
<div
|
||
class="mx_BasicMessageComposer"
|
||
>
|
||
<div
|
||
aria-label="Formatting"
|
||
class="mx_MessageComposerFormatBar"
|
||
role="toolbar"
|
||
>
|
||
<button
|
||
aria-label="Bold"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
|
||
role="button"
|
||
tabindex="0"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Italics"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Strikethrough"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Code block"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Quote"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Insert link"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
</div>
|
||
<div
|
||
aria-autocomplete="list"
|
||
aria-disabled="false"
|
||
aria-haspopup="listbox"
|
||
aria-label="Send an encrypted message…"
|
||
aria-multiline="true"
|
||
class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
|
||
contenteditable="true"
|
||
data-testid="basicmessagecomposer"
|
||
dir="auto"
|
||
role="textbox"
|
||
style="--placeholder: 'Send\\ an\\ encrypted\\ message…';"
|
||
tabindex="0"
|
||
translate="no"
|
||
>
|
||
<div>
|
||
<br />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mx_MessageComposer_actions"
|
||
>
|
||
<div
|
||
aria-label="Emoji"
|
||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<div
|
||
aria-label="Attachment"
|
||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<div
|
||
aria-label="More options"
|
||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<input
|
||
multiple=""
|
||
style="display: none;"
|
||
type="file"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DocumentFragment>
|
||
`;
|
||
|
||
exports[`RoomView should show error view if failed to look up room alias 1`] = `
|
||
<DocumentFragment>
|
||
<div
|
||
class="mx_RoomView"
|
||
>
|
||
<div
|
||
class="mx_RoomPreviewBar mx_RoomPreviewBar_RoomNotFound mx_RoomPreviewBar_dialog"
|
||
role="complementary"
|
||
>
|
||
<div
|
||
class="mx_RoomPreviewBar_message"
|
||
>
|
||
<h3>
|
||
#addy:server does not exist.
|
||
</h3>
|
||
<p>
|
||
Are you sure you're at the right place?
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="mx_RoomPreviewBar_actions"
|
||
/>
|
||
<div
|
||
class="mx_RoomPreviewBar_footer"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</DocumentFragment>
|
||
`;
|
||
|
||
exports[`RoomView video rooms should render joined video room view 1`] = `
|
||
<DocumentFragment>
|
||
<div
|
||
class="mx_RoomView mx_RoomView_immersive"
|
||
>
|
||
<canvas
|
||
aria-hidden="true"
|
||
height="768"
|
||
style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
|
||
width="0"
|
||
/>
|
||
<div
|
||
class="mx_MainSplit"
|
||
>
|
||
<div
|
||
class="mx_RoomView_body mx_MainSplit_call"
|
||
data-layout="group"
|
||
>
|
||
<header
|
||
class="mx_Flex mx_RoomHeader light-panel"
|
||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
|
||
>
|
||
<button
|
||
aria-label="Open room settings"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="6"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
role="button"
|
||
style="--cpd-avatar-size: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
!
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_Box mx_RoomHeader_info mx_Box--flex"
|
||
style="--mx-box-flex: 1;"
|
||
>
|
||
<div
|
||
aria-level="1"
|
||
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
|
||
dir="auto"
|
||
role="heading"
|
||
>
|
||
<span
|
||
class="mx_RoomHeader_truncated mx_lineClamp"
|
||
>
|
||
!13:example.org
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Chat"
|
||
aria-labelledby=":r7c:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class="mx_RoomHeader_toggled"
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M2.95 16.3 1.5 21.25a.94.94 0 0 0 .25 1 .94.94 0 0 0 1 .25l4.95-1.45a10.2 10.2 0 0 0 2.1.712Q10.875 22 12 22a9.7 9.7 0 0 0 3.9-.788 10.1 10.1 0 0 0 3.175-2.137q1.35-1.35 2.137-3.175A9.7 9.7 0 0 0 22 12a9.7 9.7 0 0 0-.788-3.9 10.1 10.1 0 0 0-2.137-3.175q-1.35-1.35-3.175-2.137A9.7 9.7 0 0 0 12 2a9.7 9.7 0 0 0-3.9.788 10.1 10.1 0 0 0-3.175 2.137Q3.575 6.275 2.788 8.1A9.7 9.7 0 0 0 2 12q0 1.125.238 2.2.237 1.076.712 2.1"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Threads"
|
||
aria-labelledby=":r7h:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Room info"
|
||
aria-labelledby=":r7m:"
|
||
class="_icon-button_m2erp_8"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 32px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
class=""
|
||
fill="currentColor"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
width="1em"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<div
|
||
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
|
||
>
|
||
<div
|
||
aria-label="0 members"
|
||
aria-labelledby=":r7r:"
|
||
class="mx_AccessibleButton mx_FacePile"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_stacked-avatars_1qbcf_102"
|
||
/>
|
||
0
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div
|
||
class="mx_CallView"
|
||
role="main"
|
||
>
|
||
<div
|
||
class="mx_AppTile"
|
||
id="vY7Q4uEh9K38QgU2PomxwKpa"
|
||
>
|
||
<div
|
||
class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading mx_AppTileBody--call"
|
||
>
|
||
<div
|
||
class="mx_AppTileBody_fadeInSpinner"
|
||
>
|
||
<div
|
||
class="mx_Spinner"
|
||
>
|
||
<div
|
||
class="mx_Spinner_Msg"
|
||
>
|
||
Loading…
|
||
</div>
|
||
|
||
<div
|
||
aria-label="Loading…"
|
||
class="mx_Spinner_icon"
|
||
data-testid="spinner"
|
||
role="progressbar"
|
||
style="width: 32px; height: 32px;"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mx_RightPanel_ResizeWrapper"
|
||
style="position: relative; user-select: auto; width: 420px; height: 100%; max-width: 50%; min-width: 320px; box-sizing: border-box; flex-shrink: 0;"
|
||
>
|
||
<aside
|
||
class="mx_RightPanel"
|
||
id="mx_RightPanel"
|
||
>
|
||
<div
|
||
class="mx_BaseCard mx_ThreadPanel mx_TimelineCard"
|
||
>
|
||
<div
|
||
class="mx_BaseCard_header"
|
||
>
|
||
<div
|
||
class="mx_BaseCard_header_title"
|
||
>
|
||
<p
|
||
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
|
||
role="heading"
|
||
>
|
||
Chat
|
||
</p>
|
||
</div>
|
||
<button
|
||
aria-labelledby=":r84:"
|
||
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
|
||
data-testid="base-card-close-button"
|
||
role="button"
|
||
style="--cpd-icon-button-size: 28px;"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="_indicator-icon_zr2a0_17"
|
||
style="--cpd-icon-button-size: 100%;"
|
||
>
|
||
<svg
|
||
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.414"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
<div
|
||
class="mx_TimelineCard_timeline"
|
||
>
|
||
<div
|
||
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
|
||
tabindex="-1"
|
||
>
|
||
<div
|
||
class="mx_RoomView_messageListWrapper"
|
||
>
|
||
<ol
|
||
aria-live="polite"
|
||
class="mx_RoomView_MessageList"
|
||
style="height: 400px;"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
aria-label="Message composer"
|
||
class="mx_MessageComposer mx_MessageComposer--compact"
|
||
role="region"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_wrapper"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_row"
|
||
>
|
||
<div
|
||
class="mx_SendMessageComposer"
|
||
>
|
||
<div
|
||
class="mx_BasicMessageComposer"
|
||
>
|
||
<div
|
||
aria-label="Formatting"
|
||
class="mx_MessageComposerFormatBar"
|
||
role="toolbar"
|
||
>
|
||
<button
|
||
aria-label="Bold"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
|
||
role="button"
|
||
tabindex="0"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Italics"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Strikethrough"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Code block"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Quote"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
<button
|
||
aria-label="Insert link"
|
||
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
|
||
role="button"
|
||
tabindex="-1"
|
||
type="button"
|
||
/>
|
||
</div>
|
||
<div
|
||
aria-autocomplete="list"
|
||
aria-disabled="false"
|
||
aria-haspopup="listbox"
|
||
aria-label="Send a message…"
|
||
aria-multiline="true"
|
||
class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
|
||
contenteditable="true"
|
||
data-testid="basicmessagecomposer"
|
||
dir="auto"
|
||
role="textbox"
|
||
style="--placeholder: 'Send\\ a\\ message…';"
|
||
tabindex="0"
|
||
translate="no"
|
||
>
|
||
<div>
|
||
<br />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mx_MessageComposer_actions"
|
||
>
|
||
<div
|
||
aria-label="Emoji"
|
||
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<div
|
||
aria-label="Attachment"
|
||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<div
|
||
aria-label="More options"
|
||
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
|
||
role="button"
|
||
tabindex="0"
|
||
/>
|
||
<input
|
||
multiple=""
|
||
style="display: none;"
|
||
type="file"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
<div>
|
||
<div
|
||
class="mx_ResizeHandle--horizontal"
|
||
style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DocumentFragment>
|
||
`;
|