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

Add main cowebsite minimize indicator

Browse source
This commit is contained in:
Alexis Faizeau 2022-02-10 19:26:46 +01:00
parent b0c0d22f25
commit a5e0c2a9cf
2 changed files with 31 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

29
front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
View file

@ -2,7 +2,7 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
import { ICON_URL } from "../../Enum/EnvironmentVariable"; import { ICON_URL } from "../../Enum/EnvironmentVariable";
import { coWebsitesNotAsleep, mainCoWebsite } from "../../Stores/CoWebsiteStore"; import { mainCoWebsite } from "../../Stores/CoWebsiteStore";
import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore"; import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
import type { CoWebsite } from "../../WebRtc/CoWebsite/CoWesbite"; import type { CoWebsite } from "../../WebRtc/CoWebsite/CoWesbite";
import { JitsiCoWebsite } from "../../WebRtc/CoWebsite/JitsiCoWebsite"; import { JitsiCoWebsite } from "../../WebRtc/CoWebsite/JitsiCoWebsite";
@ -17,6 +17,7 @@
let iconLoaded = false; let iconLoaded = false;
let state = coWebsite.getStateSubscriber(); let state = coWebsite.getStateSubscriber();
let isJitsi: boolean = coWebsite instanceof JitsiCoWebsite; let isJitsi: boolean = coWebsite instanceof JitsiCoWebsite;
const mainState = coWebsiteManager.getMainStateSubscriber();
onMount(() => { onMount(() => {
icon.src = isJitsi icon.src = isJitsi
@ -33,20 +34,23 @@
coWebsiteManager.goToMain(coWebsite); coWebsiteManager.goToMain(coWebsite);
} else if ($mainCoWebsite) { } else if ($mainCoWebsite) {
if ($mainCoWebsite.getId() === coWebsite.getId()) { if ($mainCoWebsite.getId() === coWebsite.getId()) {
const coWebsites = $coWebsitesNotAsleep; if (coWebsiteManager.getMainState() === iframeStates.closed) {
const newMain = $highlightedEmbedScreen ?? coWebsites.length > 1 ? coWebsites[1] : undefined;
if (newMain && newMain.getId() !== $mainCoWebsite.getId()) {
coWebsiteManager.goToMain(newMain);
} else if (coWebsiteManager.getMainState() === iframeStates.closed) {
coWebsiteManager.displayMain(); coWebsiteManager.displayMain();
} else if ($highlightedEmbedScreen?.type === "cowebsite") {
coWebsiteManager.goToMain($highlightedEmbedScreen.embed);
} else { } else {
coWebsiteManager.hideMain(); coWebsiteManager.hideMain();
} }
} else { } else {
highlightedEmbedScreen.toggleHighlight({ if (coWebsiteManager.getMainState() === iframeStates.closed) {
type: "cowebsite", coWebsiteManager.goToMain(coWebsite);
embed: coWebsite, coWebsiteManager.displayMain();
}); } else {
highlightedEmbedScreen.toggleHighlight({
type: "cowebsite",
embed: coWebsite,
});
}
} }
} }
@ -64,7 +68,10 @@
let isHighlight: boolean = false; let isHighlight: boolean = false;
let isMain: boolean = false; let isMain: boolean = false;
$: { $: {
isMain = $mainCoWebsite !== undefined && $mainCoWebsite.getId() === coWebsite.getId(); isMain =
$mainState === iframeStates.opened &&
$mainCoWebsite !== undefined &&
$mainCoWebsite.getId() === coWebsite.getId();
isHighlight = isHighlight =
$highlightedEmbedScreen !== null && $highlightedEmbedScreen !== null &&
$highlightedEmbedScreen.type === "cowebsite" && $highlightedEmbedScreen.type === "cowebsite" &&

25
front/src/WebRtc/CoWebsiteManager.ts
View file

@ -2,7 +2,7 @@ import { HtmlUtils } from "./HtmlUtils";
import { Subject } from "rxjs"; import { Subject } from "rxjs";
import { waScaleManager } from "../Phaser/Services/WaScaleManager"; import { waScaleManager } from "../Phaser/Services/WaScaleManager";
import { coWebsites, coWebsitesNotAsleep, mainCoWebsite } from "../Stores/CoWebsiteStore"; import { coWebsites, coWebsitesNotAsleep, mainCoWebsite } from "../Stores/CoWebsiteStore";
import { get } from "svelte/store"; import { get, Readable, Writable, writable } from "svelte/store";
import { embedScreenLayout, highlightedEmbedScreen } from "../Stores/EmbedScreensStore"; import { embedScreenLayout, highlightedEmbedScreen } from "../Stores/EmbedScreensStore";
import { isMediaBreakpointDown } from "../Utils/BreakpointsUtils"; import { isMediaBreakpointDown } from "../Utils/BreakpointsUtils";
import { LayoutMode } from "./LayoutManager"; import { LayoutMode } from "./LayoutManager";
@ -34,7 +34,7 @@ interface TouchMoveCoordinates {
} }
class CoWebsiteManager { class CoWebsiteManager {
private openedMain: iframeStates = iframeStates.closed; private openedMain: Writable<iframeStates> = writable(iframeStates.closed);
private _onResize: Subject<void> = new Subject(); private _onResize: Subject<void> = new Subject();
public onResize = this._onResize.asObservable(); public onResize = this._onResize.asObservable();
@ -57,6 +57,10 @@ class CoWebsiteManager {
}); });
public getMainState() { public getMainState() {
return get(this.openedMain);
}
public getMainStateSubscriber(): Readable<iframeStates> {
return this.openedMain; return this.openedMain;
} }
@ -324,7 +328,7 @@ class CoWebsiteManager {
} }
this.cowebsiteDom.classList.add("closing"); this.cowebsiteDom.classList.add("closing");
this.cowebsiteDom.classList.remove("opened"); this.cowebsiteDom.classList.remove("opened");
this.openedMain = iframeStates.closed; this.openedMain.set(iframeStates.closed);
this.fire(); this.fire();
} }
@ -332,7 +336,7 @@ class CoWebsiteManager {
this.toggleFullScreenIcon(true); this.toggleFullScreenIcon(true);
this.cowebsiteDom.classList.add("closing"); this.cowebsiteDom.classList.add("closing");
this.cowebsiteDom.classList.remove("opened"); this.cowebsiteDom.classList.remove("opened");
this.openedMain = iframeStates.closed; this.openedMain.set(iframeStates.closed);
this.resetStyleMain(); this.resetStyleMain();
this.fire(); this.fire();
} }
@ -386,14 +390,14 @@ class CoWebsiteManager {
} }
this.cowebsiteDom.classList.add("opened"); this.cowebsiteDom.classList.add("opened");
this.openedMain = iframeStates.loading; this.openedMain.set(iframeStates.loading);
} }
private openMain(): void { private openMain(): void {
this.cowebsiteDom.addEventListener("transitionend", () => { this.cowebsiteDom.addEventListener("transitionend", () => {
this.resizeAllIframes(); this.resizeAllIframes();
}); });
this.openedMain = iframeStates.opened; this.openedMain.set(iframeStates.opened);
} }
public resetStyleMain() { public resetStyleMain() {
@ -556,10 +560,7 @@ class CoWebsiteManager {
mainCoWebsite.getId() !== coWebsite.getId() && mainCoWebsite.getId() !== coWebsite.getId() &&
mainCoWebsite.getState() !== "asleep" mainCoWebsite.getState() !== "asleep"
) { ) {
highlightedEmbedScreen.toggleHighlight({ highlightedEmbedScreen.removeHighlight();
type: "cowebsite",
embed: mainCoWebsite,
});
} }
this.resizeAllIframes(); this.resizeAllIframes();
@ -587,7 +588,7 @@ class CoWebsiteManager {
} }
// Check if the main is hide // Check if the main is hide
if (this.getMainCoWebsite() && this.openedMain === iframeStates.closed) { if (this.getMainCoWebsite() && this.getMainState() === iframeStates.closed) {
this.displayMain(); this.displayMain();
} }
@ -661,7 +662,7 @@ class CoWebsiteManager {
} }
public getGameSize(): { width: number; height: number } { public getGameSize(): { width: number; height: number } {
if (this.openedMain === iframeStates.closed) { if (this.getMainState() === iframeStates.closed) {
return { return {
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, height: window.innerHeight,