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

Implement small broadcast PiP (#9755)

Browse source
This commit is contained in:
Michael Weimann 2022-12-15 12:43:01 +01:00 • committed by GitHub
parent 9f795a4c5f
commit ab560bba40
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 938 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,9 +18,13 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 0/not-live broadcast should
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_VoiceBroadcastHeader_room"
class="mx_VoiceBroadcastHeader_room_wrapper"
>
My room
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
<div
aria-label="Change input device"
@ -125,9 +129,13 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 1/live broadcast should ren
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_VoiceBroadcastHeader_room"
class="mx_VoiceBroadcastHeader_room_wrapper"
>
My room
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
<div
aria-label="Change input device"
@ -240,9 +248,13 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_VoiceBroadcastHeader_room"
class="mx_VoiceBroadcastHeader_room_wrapper"
>
My room
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
<div
aria-label="Change input device"
@ -374,9 +386,13 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
tabindex="0"
>
<div
class="mx_VoiceBroadcastHeader_room"
class="mx_VoiceBroadcastHeader_room_wrapper"
>
My room
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
</div>
<div
@ -482,9 +498,13 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_VoiceBroadcastHeader_room"
class="mx_VoiceBroadcastHeader_room_wrapper"
>
My room
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
<div
aria-label="Change input device"
@ -589,9 +609,13 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_VoiceBroadcastHeader_room"
class="mx_VoiceBroadcastHeader_room_wrapper"
>
My room
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
<div
aria-label="Change input device"

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

@ -29,9 +29,13 @@ exports[`VoiceBroadcastPreRecordingPip when rendered should match the snapshot 1
tabindex="0"
>
<div
class="mx_VoiceBroadcastHeader_room"
class="mx_VoiceBroadcastHeader_room_wrapper"
>
!room@example.com
<div
class="mx_VoiceBroadcastHeader_room"
>
!room@example.com
</div>
</div>
</div>
<div

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

@ -18,9 +18,13 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_VoiceBroadcastHeader_room"
class="mx_VoiceBroadcastHeader_room_wrapper"
>
My room
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
<div
aria-label="Change input device"
@ -67,9 +71,13 @@ exports[`VoiceBroadcastRecordingBody when rendering a paused broadcast should re
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_VoiceBroadcastHeader_room"
class="mx_VoiceBroadcastHeader_room_wrapper"
>
My room
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
<div
aria-label="Change input device"

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

@ -29,9 +29,13 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
tabindex="0"
>
<div
class="mx_VoiceBroadcastHeader_room"
class="mx_VoiceBroadcastHeader_room_wrapper"
>
My room
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
</div>
<div
@ -126,9 +130,13 @@ exports[`VoiceBroadcastRecordingPip when rendering a started recording should re
tabindex="0"
>
<div
class="mx_VoiceBroadcastHeader_room"
class="mx_VoiceBroadcastHeader_room_wrapper"
>
My room
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
</div>
<div

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

@ -0,0 +1,408 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 0, liveness: 'not-live' }/%s broadcast should render as expected 1`] = `
<div>
<div
class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip mx_VoiceBroadcastBody--small"
>
<div
class="mx_VoiceBroadcastHeader"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
data-testid="room-avatar"
>
room avatar:
My room
</div>
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
class="mx_VoiceBroadcastHeader_room_wrapper"
>
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
</div>
<div
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
/>
<span>
@user:example.com
</span>
</div>
</div>
</div>
<div
aria-label="resume voice broadcast"
class="mx_AccessibleButton mx_VoiceBroadcastControl mx_VoiceBroadcastControl-play"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
/>
</div>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
/>
</div>
</div>
</div>
`;
exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 1, liveness: 'live' }/%s broadcast should render as expected 1`] = `
<div>
<div
class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip mx_VoiceBroadcastBody--small"
>
<div
class="mx_VoiceBroadcastHeader"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
data-testid="room-avatar"
>
room avatar:
My room
</div>
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
class="mx_VoiceBroadcastHeader_room_wrapper"
>
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
</div>
<div
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
/>
<span>
@user:example.com
</span>
</div>
<div
class="mx_LiveBadge"
>
<div
class="mx_Icon mx_Icon_16"
/>
Live
</div>
</div>
</div>
<div
aria-label="pause voice broadcast"
class="mx_AccessibleButton mx_VoiceBroadcastControl"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
/>
</div>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
/>
</div>
</div>
</div>
`;
exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a buffering broadcast should render as expected 1`] = `
<div>
<div
class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip mx_VoiceBroadcastBody--small"
>
<div
class="mx_VoiceBroadcastHeader"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
data-testid="room-avatar"
>
room avatar:
My room
</div>
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
class="mx_VoiceBroadcastHeader_room_wrapper"
>
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
<div
class="mx_Spinner"
>
<div
aria-label="Loading..."
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 12px; height: 12px;"
/>
</div>
</div>
</div>
<div
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
/>
<span>
@user:example.com
</span>
</div>
<div
class="mx_LiveBadge"
>
<div
class="mx_Icon mx_Icon_16"
/>
Live
</div>
</div>
</div>
<div
aria-label="pause voice broadcast"
class="mx_AccessibleButton mx_VoiceBroadcastControl"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
/>
</div>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
/>
</div>
</div>
</div>
`;
exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a playing broadcast should render as expected 1`] = `
<div>
<div
class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip mx_VoiceBroadcastBody--small"
>
<div
class="mx_VoiceBroadcastHeader"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
data-testid="room-avatar"
>
room avatar:
My room
</div>
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
class="mx_VoiceBroadcastHeader_room_wrapper"
>
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
</div>
<div
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
/>
<span>
@user:example.com
</span>
</div>
</div>
</div>
<div
aria-label="pause voice broadcast"
class="mx_AccessibleButton mx_VoiceBroadcastControl"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
/>
</div>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
/>
</div>
</div>
</div>
`;
exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a stopped broadcast should render as expected 1`] = `
<div>
<div
class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip mx_VoiceBroadcastBody--small"
>
<div
class="mx_VoiceBroadcastHeader"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
data-testid="room-avatar"
>
room avatar:
My room
</div>
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
class="mx_VoiceBroadcastHeader_room_wrapper"
>
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
</div>
</div>
<div
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
/>
<span>
@user:example.com
</span>
</div>
</div>
</div>
<div
aria-label="play voice broadcast"
class="mx_AccessibleButton mx_VoiceBroadcastControl mx_VoiceBroadcastControl-play"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
/>
</div>
<div
class="mx_AccessibleButton"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
/>
</div>
</div>
</div>
`;