42f8247c2e
* Module API experiments * Move ResizerNotifier into SDKContext so we don't have to pass it into RoomView * Add the MultiRoomViewStore * Make RoomViewStore able to take a roomId prop * Different interface to add space panel items A bit less flexible but probably simpler and will help keep things actually consistent rather than just allowing modules to stick any JSX into the space panel (which means they also have to worry about styling if they *do* want it to be consistent). * Allow space panel items to be updated and manage which one is selected, allowing module "spaces" to be considered spaces * Remove fetchRoomFn from SpaceNotificationStore which didn't really seem to have any point as it was only called from one place * Switch to using module api via .instance * Fairly awful workaround to actually break the dependency nightmare * Add test for multiroomviewstore * add test * Make room names deterministic So the tests don't fail if you add other tests or run them individually * Add test for builtinsapi * Update module api * RVS is not needed as prop anymore Since it's passed through context * Add roomId to prop * Remove RoomViewStore from state This is now accessed through class field * Fix test * No need to pass RVS from LoggedInView * Add RoomContextType * Implement new builtins api * Add tests * Fix import * Fix circular dependency issue * Fix import * Add more tests * Improve comment * room-id is optional * Update license * Add implementation for AccountDataApi * Add implementation for Room * Add implementation for ClientApi * Create ClientApi in Api.ts * Write tests * Use nullish coalescing assignment * Implement openRoom in NavigationApi * Write tests * Add implementation for StoresApi * Write tests * Fix circular dependency * Add comments in lieu of type and fix else block * Change to class field --------- Co-authored-by: R Midhun Suresh <hi@midhun.dev>
1806 lines
62 KiB
Plaintext
1806 lines
62 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="_flex_4dswl_9 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); --mx-flex-wrap: nowrap;"
|
||
>
|
||
<span
|
||
aria-label="Open room settings"
|
||
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: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
u
|
||
</span>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_RoomHeader_info _box-flex_1odfs_9"
|
||
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>
|
||
</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="_flex_4dswl_9 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); --mx-flex-wrap: nowrap;"
|
||
>
|
||
<span
|
||
aria-label="Open room settings"
|
||
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: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
u
|
||
</span>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_RoomHeader_info _box-flex_1odfs_9"
|
||
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>
|
||
</header>
|
||
<main
|
||
aria-label="Room content"
|
||
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="_flex_4dswl_9 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); --mx-flex-wrap: nowrap;"
|
||
>
|
||
<span
|
||
aria-label="Open room settings"
|
||
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: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
u
|
||
</span>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_RoomHeader_info _box-flex_1odfs_9"
|
||
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>
|
||
</header>
|
||
<main
|
||
aria-label="Room content"
|
||
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 mx_MessageComposer_e2eStatus"
|
||
role="region"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_wrapper"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_row"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_e2eIconWrapper"
|
||
>
|
||
<svg
|
||
aria-label="Messages in this room are not end-to-end encrypted"
|
||
aria-labelledby="_r_bj_"
|
||
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
|
||
color="var(--cpd-color-icon-info-primary)"
|
||
fill="currentColor"
|
||
height="12"
|
||
viewBox="0 0 24 24"
|
||
width="12"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
|
||
/>
|
||
</svg>
|
||
</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 unencrypted 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\\ unencrypted\\ 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="_flex_4dswl_9 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); --mx-flex-wrap: nowrap;"
|
||
>
|
||
<span
|
||
aria-label="Open room settings"
|
||
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: 40px;"
|
||
tabindex="-1"
|
||
>
|
||
u
|
||
</span>
|
||
<button
|
||
aria-label="Room info"
|
||
class="mx_RoomHeader_infoWrapper"
|
||
tabindex="0"
|
||
>
|
||
<div
|
||
class="mx_RoomHeader_info _box-flex_1odfs_9"
|
||
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>
|
||
</header>
|
||
<main
|
||
aria-label="Room content"
|
||
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 invites renders an invite room 1`] = `
|
||
<DocumentFragment>
|
||
<div
|
||
class="mx_RoomView"
|
||
>
|
||
<div
|
||
class="mx_RoomPreviewBar mx_RoomPreviewBar_Invite mx_RoomPreviewBar_dialog"
|
||
role="complementary"
|
||
>
|
||
<div
|
||
class="mx_RoomPreviewBar_message"
|
||
>
|
||
<h3>
|
||
Do you want to join !roomviewinvitesrendersaninviteroom:example.org?
|
||
</h3>
|
||
<p>
|
||
<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: 36px;"
|
||
>
|
||
!
|
||
</span>
|
||
</p>
|
||
<p>
|
||
<span>
|
||
Invited by
|
||
<span
|
||
class="mx_RoomPreviewBar_inviter"
|
||
>
|
||
@bob:example.org
|
||
</span>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="mx_RoomPreviewBar_actions"
|
||
>
|
||
<div
|
||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
Accept
|
||
</div>
|
||
<div
|
||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
Decline
|
||
</div>
|
||
<button
|
||
class="_button_vczzf_8 _destructive_vczzf_107"
|
||
data-kind="tertiary"
|
||
data-size="lg"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
Decline and block
|
||
</button>
|
||
</div>
|
||
<div
|
||
class="mx_RoomPreviewBar_footer"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</DocumentFragment>
|
||
`;
|
||
|
||
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="_flex_4dswl_9 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); --mx-flex-wrap: nowrap;"
|
||
>
|
||
<button
|
||
aria-label="Open room settings"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="1"
|
||
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_RoomHeader_info _box-flex_1odfs_9"
|
||
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"
|
||
>
|
||
!roomviewshouldnotdisplaythetimelinewhentheroomencryptionisloading:example.org
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Video call"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
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="_r_2j_"
|
||
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="_r_2o_"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
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="_r_2t_"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
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="_r_32_"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
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="_r_37_"
|
||
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="_flex_4dswl_9 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); --mx-flex-wrap: nowrap;"
|
||
>
|
||
<button
|
||
aria-label="Open room settings"
|
||
aria-live="off"
|
||
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
|
||
data-color="1"
|
||
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_RoomHeader_info _box-flex_1odfs_9"
|
||
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"
|
||
>
|
||
!roomviewshouldnotdisplaythetimelinewhentheroomencryptionisloading:example.org
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-disabled="false"
|
||
aria-label="Video call"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
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="_r_2j_"
|
||
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="_r_2o_"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
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="_r_2t_"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
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="_r_32_"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
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="_r_37_"
|
||
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="_r_3m_"
|
||
class="mx_E2EIcon mx_E2EIcon_verified mx_MessageComposer_e2eIcon"
|
||
data-testid="e2e-icon"
|
||
>
|
||
<div
|
||
class="mx_E2EIcon_normal"
|
||
/>
|
||
</div>
|
||
</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 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>
|
||
</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="_flex_4dswl_9 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); --mx-flex-wrap: nowrap;"
|
||
>
|
||
<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_RoomHeader_info _box-flex_1odfs_9"
|
||
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"
|
||
>
|
||
!roomviewvideoroomsshouldrenderjoinedvideoroomview:example.org
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
aria-label="Chat"
|
||
aria-labelledby="_r_7l_"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
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="_r_7q_"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
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="_r_7v_"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="primary"
|
||
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="_r_84_"
|
||
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"
|
||
data-testid="right-panel"
|
||
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="_r_8d_"
|
||
class="_icon-button_1pz9o_8"
|
||
data-kind="secondary"
|
||
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 mx_MessageComposer_e2eStatus"
|
||
role="region"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_wrapper"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_row"
|
||
>
|
||
<div
|
||
class="mx_MessageComposer_e2eIconWrapper"
|
||
>
|
||
<svg
|
||
aria-label="Messages in this room are not end-to-end encrypted"
|
||
aria-labelledby="_r_8m_"
|
||
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
|
||
color="var(--cpd-color-icon-info-primary)"
|
||
fill="currentColor"
|
||
height="12"
|
||
viewBox="0 0 24 24"
|
||
width="12"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
|
||
/>
|
||
</svg>
|
||
</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 unencrypted 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\\ unencrypted\\ 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>
|
||
`;
|