Merge branch 'develop' into vite
This commit is contained in:
Lukas Hass
@@ -2,9 +2,11 @@
|
||||
import { onMount } from "svelte";
|
||||
|
||||
import { ICON_URL } from "../../Enum/EnvironmentVariable";
|
||||
import { coWebsitesNotAsleep, mainCoWebsite } from "../../Stores/CoWebsiteStore";
|
||||
import { mainCoWebsite } from "../../Stores/CoWebsiteStore";
|
||||
import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
|
||||
import type { CoWebsite } from "../../WebRtc/CoWebsiteManager";
|
||||
import type { CoWebsite } from "../../WebRtc/CoWebsite/CoWesbite";
|
||||
import { JitsiCoWebsite } from "../../WebRtc/CoWebsite/JitsiCoWebsite";
|
||||
import { iframeStates } from "../../WebRtc/CoWebsiteManager";
|
||||
import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
|
||||
|
||||
export let index: number;
|
||||
@@ -13,14 +15,15 @@
|
||||
|
||||
let icon: HTMLImageElement;
|
||||
let iconLoaded = false;
|
||||
let state = coWebsite.state;
|
||||
|
||||
const coWebsiteUrl = coWebsite.iframe.src;
|
||||
const urlObject = new URL(coWebsiteUrl);
|
||||
let state = coWebsite.getStateSubscriber();
|
||||
let isJitsi: boolean = coWebsite instanceof JitsiCoWebsite;
|
||||
const mainState = coWebsiteManager.getMainStateSubscriber();
|
||||
|
||||
onMount(() => {
|
||||
icon.src = `${ICON_URL}/icon?url=${urlObject.hostname}&size=64..96..256&fallback_icon_color=14304c`;
|
||||
icon.alt = coWebsite.altMessage ?? urlObject.hostname;
|
||||
icon.src = isJitsi
|
||||
? "/resources/logos/meet.svg"
|
||||
: `${ICON_URL}/icon?url=${coWebsite.getUrl().hostname}&size=64..96..256&fallback_icon_color=14304c`;
|
||||
icon.alt = coWebsite.getUrl().hostname;
|
||||
icon.onload = () => {
|
||||
iconLoaded = true;
|
||||
};
|
||||
@@ -30,17 +33,24 @@
|
||||
if (vertical) {
|
||||
coWebsiteManager.goToMain(coWebsite);
|
||||
} else if ($mainCoWebsite) {
|
||||
if ($mainCoWebsite.iframe.id === coWebsite.iframe.id) {
|
||||
const coWebsites = $coWebsitesNotAsleep;
|
||||
const newMain = $highlightedEmbedScreen ?? coWebsites.length > 1 ? coWebsites[1] : undefined;
|
||||
if (newMain) {
|
||||
coWebsiteManager.goToMain(coWebsite);
|
||||
if ($mainCoWebsite.getId() === coWebsite.getId()) {
|
||||
if (coWebsiteManager.getMainState() === iframeStates.closed) {
|
||||
coWebsiteManager.displayMain();
|
||||
} else if ($highlightedEmbedScreen?.type === "cowebsite") {
|
||||
coWebsiteManager.goToMain($highlightedEmbedScreen.embed);
|
||||
} else {
|
||||
coWebsiteManager.hideMain();
|
||||
}
|
||||
} else {
|
||||
highlightedEmbedScreen.toggleHighlight({
|
||||
type: "cowebsite",
|
||||
embed: coWebsite,
|
||||
});
|
||||
if (coWebsiteManager.getMainState() === iframeStates.closed) {
|
||||
coWebsiteManager.goToMain(coWebsite);
|
||||
coWebsiteManager.displayMain();
|
||||
} else {
|
||||
highlightedEmbedScreen.toggleHighlight({
|
||||
type: "cowebsite",
|
||||
embed: coWebsite,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -58,11 +68,14 @@
|
||||
let isHighlight: boolean = false;
|
||||
let isMain: boolean = false;
|
||||
$: {
|
||||
isMain = $mainCoWebsite !== undefined && $mainCoWebsite.iframe === coWebsite.iframe;
|
||||
isMain =
|
||||
$mainState === iframeStates.opened &&
|
||||
$mainCoWebsite !== undefined &&
|
||||
$mainCoWebsite.getId() === coWebsite.getId();
|
||||
isHighlight =
|
||||
$highlightedEmbedScreen !== null &&
|
||||
$highlightedEmbedScreen.type === "cowebsite" &&
|
||||
$highlightedEmbedScreen.embed.iframe === coWebsite.iframe;
|
||||
$highlightedEmbedScreen.embed.getId() === coWebsite.getId();
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -79,6 +92,7 @@
|
||||
<img
|
||||
class="cowebsite-icon noselect nes-pointer"
|
||||
class:hide={!iconLoaded}
|
||||
class:jitsi={isJitsi}
|
||||
bind:this={icon}
|
||||
on:dragstart|preventDefault={noDrag}
|
||||
alt=""
|
||||
@@ -205,7 +219,8 @@
|
||||
}
|
||||
|
||||
&:not(.vertical) {
|
||||
animation: bounce 0.35s ease 6 alternate;
|
||||
transition: all 300ms;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
@@ -226,7 +241,7 @@
|
||||
|
||||
&.displayed {
|
||||
&:not(.vertical) {
|
||||
animation: activeThumbnail 300ms ease-in 0s forwards;
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -255,16 +270,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes activeThumbnail {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
@@ -308,6 +313,12 @@
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.jitsi {
|
||||
filter: invert(100%);
|
||||
-webkit-filter: invert(100%);
|
||||
padding: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
{#if $coWebsites.length > 0}
|
||||
<div id="cowebsite-thumbnail-container" class:vertical>
|
||||
{#each [...$coWebsites.values()] as coWebsite, index (coWebsite.iframe.id)}
|
||||
{#each [...$coWebsites.values()] as coWebsite, index (coWebsite.getId())}
|
||||
<CoWebsiteThumbnail {index} {coWebsite} {vertical} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -23,8 +23,9 @@
|
||||
{#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
|
||||
<MediaBox
|
||||
streamable={peer}
|
||||
mozaicSolo={$streamableCollectionStore.size === 1}
|
||||
mozaicFullWidth={$streamableCollectionStore.size === 1 || $streamableCollectionStore.size === 2}
|
||||
mozaicQuarter={$streamableCollectionStore.size === 3 || $streamableCollectionStore.size === 4}
|
||||
mozaicQuarter={$streamableCollectionStore.size === 3 || $streamableCollectionStore.size >= 4}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -9,13 +9,11 @@
|
||||
|
||||
function closeCoWebsite() {
|
||||
if ($highlightedEmbedScreen?.type === "cowebsite") {
|
||||
if ($highlightedEmbedScreen.embed.closable) {
|
||||
coWebsiteManager.closeCoWebsite($highlightedEmbedScreen.embed).catch(() => {
|
||||
console.error("Error during co-website highlighted closing");
|
||||
});
|
||||
if ($highlightedEmbedScreen.embed.isClosable()) {
|
||||
coWebsiteManager.closeCoWebsite($highlightedEmbedScreen.embed);
|
||||
} else {
|
||||
coWebsiteManager.unloadCoWebsite($highlightedEmbedScreen.embed).catch(() => {
|
||||
console.error("Error during co-website highlighted unloading");
|
||||
coWebsiteManager.unloadCoWebsite($highlightedEmbedScreen.embed).catch((err) => {
|
||||
console.error("Cannot unload co-website", err);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -68,9 +66,9 @@
|
||||
/>
|
||||
{/key}
|
||||
{:else if $highlightedEmbedScreen.type === "cowebsite"}
|
||||
{#key $highlightedEmbedScreen.embed.iframe.id}
|
||||
{#key $highlightedEmbedScreen.embed.getId()}
|
||||
<div
|
||||
id={"cowebsite-slot-" + $highlightedEmbedScreen.embed.iframe.id}
|
||||
id={"cowebsite-slot-" + $highlightedEmbedScreen.embed.getId()}
|
||||
class="highlighted-cowebsite nes-container is-rounded"
|
||||
>
|
||||
<div class="actions">
|
||||
|
||||
Reference in New Issue
Block a user