1e5e4a04ad
* Update dependency @vector-im/compound-web to v8.2.3 * Update snapshot, tabIndex is now overridden as intended. Original commit + comment -> https://github.com/element-hq/element-web/commit/8086262e040ec352070dfe0905f427ee8de692b7#diff-1e0f987f11006689ab011e33003e54e364d2089d66fc6c8f613753a2891fb529R118-R120 --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: David Langley <davidl@element.io>
370 lines
10 KiB
Plaintext
370 lines
10 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`AudioPlayerView renders the audio player in default state 1`] = `
|
|
<div>
|
|
<div
|
|
aria-label="Audio player"
|
|
class="mx_MediaBody mediaBody audioPlayer"
|
|
role="region"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="flex"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
|
|
>
|
|
<button
|
|
aria-disabled="false"
|
|
aria-label="Play"
|
|
aria-labelledby="«r0»"
|
|
class="_icon-button_1pz9o_8 button"
|
|
data-kind="primary"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="-1"
|
|
>
|
|
<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="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</button>
|
|
<div
|
|
class="flex mediaInfo"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
|
|
>
|
|
<span
|
|
class="mediaName"
|
|
data-testid="audio-player-name"
|
|
>
|
|
Sample Audio
|
|
</span>
|
|
<div
|
|
class="flex byline"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
|
|
>
|
|
<time
|
|
class="mx_Clock"
|
|
datetime="PT5M"
|
|
>
|
|
05:00
|
|
</time>
|
|
(3.42 KB)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex"
|
|
data-testid="audio-player-seek"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
|
|
>
|
|
<input
|
|
aria-label="Audio seek bar"
|
|
class="seekBar"
|
|
max="100"
|
|
min="0"
|
|
step="1"
|
|
style="--fillTo: 0.3;"
|
|
tabindex="-1"
|
|
type="range"
|
|
value="30"
|
|
/>
|
|
<time
|
|
class="mx_Clock clock"
|
|
datetime="PT2M"
|
|
role="timer"
|
|
>
|
|
02:00
|
|
</time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`AudioPlayerView renders the audio player in error state 1`] = `
|
|
<div>
|
|
<div
|
|
aria-label="Audio player"
|
|
class="mx_MediaBody mediaBody audioPlayer"
|
|
role="region"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="flex"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
|
|
>
|
|
<button
|
|
aria-disabled="false"
|
|
aria-label="Play"
|
|
aria-labelledby="«ri»"
|
|
class="_icon-button_1pz9o_8 button"
|
|
data-kind="primary"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="-1"
|
|
>
|
|
<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="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</button>
|
|
<div
|
|
class="flex mediaInfo"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
|
|
>
|
|
<span
|
|
class="mediaName"
|
|
data-testid="audio-player-name"
|
|
>
|
|
Sample Audio
|
|
</span>
|
|
<div
|
|
class="flex byline"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
|
|
>
|
|
<time
|
|
class="mx_Clock"
|
|
datetime="PT5M"
|
|
>
|
|
05:00
|
|
</time>
|
|
(3.42 KB)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex"
|
|
data-testid="audio-player-seek"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
|
|
>
|
|
<input
|
|
aria-label="Audio seek bar"
|
|
class="seekBar"
|
|
max="100"
|
|
min="0"
|
|
step="1"
|
|
style="--fillTo: 0.3;"
|
|
tabindex="-1"
|
|
type="range"
|
|
value="30"
|
|
/>
|
|
<time
|
|
class="mx_Clock clock"
|
|
datetime="PT2M"
|
|
role="timer"
|
|
>
|
|
02:00
|
|
</time>
|
|
</div>
|
|
</div>
|
|
<span
|
|
class="error"
|
|
>
|
|
Error downloading audio
|
|
</span>
|
|
</div>
|
|
`;
|
|
|
|
exports[`AudioPlayerView renders the audio player without media name 1`] = `
|
|
<div>
|
|
<div
|
|
aria-label="Audio player"
|
|
class="mx_MediaBody mediaBody audioPlayer"
|
|
role="region"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="flex"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
|
|
>
|
|
<button
|
|
aria-disabled="false"
|
|
aria-label="Play"
|
|
aria-labelledby="«r6»"
|
|
class="_icon-button_1pz9o_8 button"
|
|
data-kind="primary"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="-1"
|
|
>
|
|
<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="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</button>
|
|
<div
|
|
class="flex mediaInfo"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
|
|
>
|
|
<span
|
|
class="mediaName"
|
|
data-testid="audio-player-name"
|
|
>
|
|
Unnamed audio
|
|
</span>
|
|
<div
|
|
class="flex byline"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
|
|
>
|
|
<time
|
|
class="mx_Clock"
|
|
datetime="PT5M"
|
|
>
|
|
05:00
|
|
</time>
|
|
(3.42 KB)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex"
|
|
data-testid="audio-player-seek"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
|
|
>
|
|
<input
|
|
aria-label="Audio seek bar"
|
|
class="seekBar"
|
|
max="100"
|
|
min="0"
|
|
step="1"
|
|
style="--fillTo: 0.3;"
|
|
tabindex="-1"
|
|
type="range"
|
|
value="30"
|
|
/>
|
|
<time
|
|
class="mx_Clock clock"
|
|
datetime="PT2M"
|
|
role="timer"
|
|
>
|
|
02:00
|
|
</time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`AudioPlayerView renders the audio player without size 1`] = `
|
|
<div>
|
|
<div
|
|
aria-label="Audio player"
|
|
class="mx_MediaBody mediaBody audioPlayer"
|
|
role="region"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="flex"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
|
|
>
|
|
<button
|
|
aria-disabled="false"
|
|
aria-label="Play"
|
|
aria-labelledby="«rc»"
|
|
class="_icon-button_1pz9o_8 button"
|
|
data-kind="primary"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="-1"
|
|
>
|
|
<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="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</button>
|
|
<div
|
|
class="flex mediaInfo"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
|
|
>
|
|
<span
|
|
class="mediaName"
|
|
data-testid="audio-player-name"
|
|
>
|
|
Sample Audio
|
|
</span>
|
|
<div
|
|
class="flex byline"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
|
|
>
|
|
<time
|
|
class="mx_Clock"
|
|
datetime="PT5M"
|
|
>
|
|
05:00
|
|
</time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex"
|
|
data-testid="audio-player-seek"
|
|
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
|
|
>
|
|
<input
|
|
aria-label="Audio seek bar"
|
|
class="seekBar"
|
|
max="100"
|
|
min="0"
|
|
step="1"
|
|
style="--fillTo: 0.3;"
|
|
tabindex="-1"
|
|
type="range"
|
|
value="30"
|
|
/>
|
|
<time
|
|
class="mx_Clock clock"
|
|
datetime="PT2M"
|
|
role="timer"
|
|
>
|
|
02:00
|
|
</time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|