Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix mozaic layout

Browse source
This commit is contained in:
Alexis Faizeau 2022-02-02 12:15:13 +01:00
parent 4a9cc57d60
commit 7e9343f1b7
2 changed files with 11 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

3
front/src/Components/EmbedScreens/Layouts/MozaicLayout.svelte
View file

@ -23,8 +23,9 @@
{#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)} {#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
<MediaBox <MediaBox
streamable={peer} streamable={peer}
mozaicSolo={$streamableCollectionStore.size === 1}
mozaicFullWidth={$streamableCollectionStore.size === 1 || $streamableCollectionStore.size === 2} mozaicFullWidth={$streamableCollectionStore.size === 1 || $streamableCollectionStore.size === 2}
mozaicQuarter={$streamableCollectionStore.size === 3 || $streamableCollectionStore.size === 4} mozaicQuarter={$streamableCollectionStore.size === 3 || $streamableCollectionStore.size >= 4}
/> />
{/each} {/each}
</div> </div>

9
front/src/Components/Video/MediaBox.svelte
View file

@ -9,6 +9,7 @@
export let streamable: Streamable; export let streamable: Streamable;
export let isHightlighted = false; export let isHightlighted = false;
export let isClickable = false; export let isClickable = false;
export let mozaicSolo = false;
export let mozaicFullWidth = false; export let mozaicFullWidth = false;
export let mozaicQuarter = false; export let mozaicQuarter = false;
</script> </script>
@ -16,6 +17,7 @@
<div <div
class="media-container nes-container is-rounded {isHightlighted ? 'hightlighted' : ''}" class="media-container nes-container is-rounded {isHightlighted ? 'hightlighted' : ''}"
class:clickable={isClickable} class:clickable={isClickable}
class:mozaic-solo={mozaicSolo}
class:mozaic-full-width={mozaicFullWidth} class:mozaic-full-width={mozaicFullWidth}
class:mozaic-quarter={mozaicQuarter} class:mozaic-quarter={mozaicQuarter}
> >
@ -66,6 +68,11 @@
} }
} }
&.mozaic-solo {
max-height: inherit !important;
width: 90% !important;
}
&.mozaic-full-width { &.mozaic-full-width {
width: 95%; width: 95%;
max-width: 95%; max-width: 95%;
@ -73,6 +80,7 @@
margin-right: 3%; margin-right: 3%;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
max-height: 95%;
&:hover { &:hover {
margin-top: auto; margin-top: auto;
@ -85,6 +93,7 @@
max-width: 95%; max-width: 95%;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
max-height: 95%;
&:hover { &:hover {
margin-top: auto; margin-top: auto;