diff --git a/front/dist/resources/logos/meet.svg b/front/dist/resources/logos/meet.svg new file mode 100644 index 00000000..787134e1 --- /dev/null +++ b/front/dist/resources/logos/meet.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte index e5c3c22e..809d1985 100644 --- a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte +++ b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte @@ -19,7 +19,9 @@ const urlObject = new URL(coWebsiteUrl); onMount(() => { - icon.src = `${ICON_URL}/icon?url=${urlObject.hostname}&size=64..96..256&fallback_icon_color=14304c`; + icon.src = coWebsite.jitsi + ? "/resources/logos/meet.svg" + : `${ICON_URL}/icon?url=${urlObject.hostname}&size=64..96..256&fallback_icon_color=14304c`; icon.alt = coWebsite.altMessage ?? urlObject.hostname; icon.onload = () => { iconLoaded = true; @@ -34,7 +36,7 @@ const coWebsites = $coWebsitesNotAsleep; const newMain = $highlightedEmbedScreen ?? coWebsites.length > 1 ? coWebsites[1] : undefined; if (newMain) { - coWebsiteManager.goToMain(coWebsite); + coWebsiteManager.goToMain(newMain); } } else { highlightedEmbedScreen.toggleHighlight({ @@ -79,6 +81,7 @@ diff --git a/front/src/Components/EmbedScreens/Layouts/MozaicLayout.svelte b/front/src/Components/EmbedScreens/Layouts/MozaicLayout.svelte index 25ff16c8..846a0432 100644 --- a/front/src/Components/EmbedScreens/Layouts/MozaicLayout.svelte +++ b/front/src/Components/EmbedScreens/Layouts/MozaicLayout.svelte @@ -23,8 +23,9 @@ {#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)} = 4} /> {/each} diff --git a/front/src/Components/Video/MediaBox.svelte b/front/src/Components/Video/MediaBox.svelte index ff3c81f5..0a098cd1 100644 --- a/front/src/Components/Video/MediaBox.svelte +++ b/front/src/Components/Video/MediaBox.svelte @@ -9,6 +9,7 @@ export let streamable: Streamable; export let isHightlighted = false; export let isClickable = false; + export let mozaicSolo = false; export let mozaicFullWidth = false; export let mozaicQuarter = false; @@ -16,6 +17,7 @@
@@ -66,6 +68,11 @@ } } + &.mozaic-solo { + max-height: inherit !important; + width: 90% !important; + } + &.mozaic-full-width { width: 95%; max-width: 95%; @@ -73,6 +80,7 @@ margin-right: 3%; margin-top: auto; margin-bottom: auto; + max-height: 95%; &:hover { margin-top: auto; @@ -85,6 +93,7 @@ max-width: 95%; margin-top: auto; margin-bottom: auto; + max-height: 95%; &:hover { margin-top: auto; diff --git a/front/src/Components/WarningContainer/WarningContainer.svelte b/front/src/Components/WarningContainer/WarningContainer.svelte index dd740eb5..d72e7497 100644 --- a/front/src/Components/WarningContainer/WarningContainer.svelte +++ b/front/src/Components/WarningContainer/WarningContainer.svelte @@ -38,7 +38,6 @@ right: 0; margin-left: auto; margin-right: auto; - transform: translate(-50%, 0); font-family: Lato; min-width: 300px; opacity: 0.9; diff --git a/front/src/Phaser/Companion/Companion.ts b/front/src/Phaser/Companion/Companion.ts index 6157ebaa..1a69c879 100644 --- a/front/src/Phaser/Companion/Companion.ts +++ b/front/src/Phaser/Companion/Companion.ts @@ -4,6 +4,7 @@ import { PlayerAnimationDirections, PlayerAnimationTypes } from "../Player/Anima import { TexturesHelper } from "../Helpers/TexturesHelper"; import { Writable, writable } from "svelte/store"; import type { PictureStore } from "../../Stores/PictureStore"; +import type CancelablePromise from "cancelable-promise"; export interface CompanionStatus { x: number; @@ -25,8 +26,9 @@ export class Companion extends Container { private direction: PlayerAnimationDirections; private animationType: PlayerAnimationTypes; private readonly _pictureStore: Writable; + private texturePromise: CancelablePromise | undefined; - constructor(scene: Phaser.Scene, x: number, y: number, name: string, texturePromise: Promise) { + constructor(scene: Phaser.Scene, x: number, y: number, name: string, texturePromise: CancelablePromise) { super(scene, x + 14, y + 4); this.sprites = new Map(); @@ -41,7 +43,7 @@ export class Companion extends Container { this.companionName = name; this._pictureStore = writable(undefined); - texturePromise + this.texturePromise = texturePromise .then((resource) => { this.addResource(resource); this.invisible = false; @@ -234,6 +236,7 @@ export class Companion extends Container { } public destroy(): void { + this.texturePromise?.cancel(); for (const sprite of this.sprites.values()) { if (this.scene) { this.scene.sys.updateList.remove(sprite); diff --git a/front/src/Phaser/Companion/CompanionTexturesLoadingManager.ts b/front/src/Phaser/Companion/CompanionTexturesLoadingManager.ts index 98cceafa..fee51ca3 100644 --- a/front/src/Phaser/Companion/CompanionTexturesLoadingManager.ts +++ b/front/src/Phaser/Companion/CompanionTexturesLoadingManager.ts @@ -1,5 +1,6 @@ import LoaderPlugin = Phaser.Loader.LoaderPlugin; import { COMPANION_RESOURCES, CompanionResourceDescriptionInterface } from "./CompanionTextures"; +import CancelablePromise from "cancelable-promise"; export const getAllCompanionResources = (loader: LoaderPlugin): CompanionResourceDescriptionInterface[] => { COMPANION_RESOURCES.forEach((resource: CompanionResourceDescriptionInterface) => { @@ -9,8 +10,12 @@ export const getAllCompanionResources = (loader: LoaderPlugin): CompanionResourc return COMPANION_RESOURCES; }; -export const lazyLoadCompanionResource = (loader: LoaderPlugin, name: string): Promise => { - return new Promise((resolve, reject) => { +export const lazyLoadCompanionResource = (loader: LoaderPlugin, name: string): CancelablePromise => { + return new CancelablePromise((resolve, reject, cancel) => { + cancel(() => { + return; + }); + const resource = COMPANION_RESOURCES.find((item) => item.name === name); if (typeof resource === "undefined") { diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts index 4465a6b6..5ec031bd 100644 --- a/front/src/Phaser/Entity/Character.ts +++ b/front/src/Phaser/Entity/Character.ts @@ -59,7 +59,7 @@ export abstract class Character extends Container implements OutlineableInterfac frame: string | number, isClickable: boolean, companion: string | null, - companionTexturePromise?: Promise + companionTexturePromise?: CancelablePromise ) { super(scene, x, y /*, texture, frame*/); this.scene = scene; @@ -142,7 +142,7 @@ export abstract class Character extends Container implements OutlineableInterfac this.clickable = clickable; if (clickable) { this.setInteractive({ - hitArea: new Phaser.Geom.Circle(0, 0, interactiveRadius), + hitArea: new Phaser.Geom.Circle(8, 8, interactiveRadius), hitAreaCallback: Phaser.Geom.Circle.Contains, //eslint-disable-line @typescript-eslint/unbound-method useHandCursor: true, }); @@ -179,7 +179,7 @@ export abstract class Character extends Container implements OutlineableInterfac }); } - public addCompanion(name: string, texturePromise?: Promise): void { + public addCompanion(name: string, texturePromise?: CancelablePromise): void { if (typeof texturePromise !== "undefined") { this.companion = new Companion(this.scene, this.x, this.y, name, texturePromise); } diff --git a/front/src/Phaser/Entity/RemotePlayer.ts b/front/src/Phaser/Entity/RemotePlayer.ts index df496896..7af6da2e 100644 --- a/front/src/Phaser/Entity/RemotePlayer.ts +++ b/front/src/Phaser/Entity/RemotePlayer.ts @@ -31,18 +31,18 @@ export class RemotePlayer extends Character implements ActivatableInterface { moving: boolean, visitCardUrl: string | null, companion: string | null, - companionTexturePromise?: Promise, + companionTexturePromise?: CancelablePromise, activationRadius?: number ) { super(Scene, x, y, texturesPromise, name, direction, moving, 1, true, companion, companionTexturePromise); //set data this.userId = userId; + this.visitCardUrl = visitCardUrl; this.registeredActions = []; this.registerDefaultActionsMenuActions(); this.setClickable(this.registeredActions.length > 0); this.activationRadius = activationRadius ?? 96; - this.visitCardUrl = visitCardUrl; this.actionsMenuStoreUnsubscriber = actionsMenuStore.subscribe((value: ActionsMenuData | undefined) => { this.isActionsMenuInitialized = value ? true : false; }); @@ -118,7 +118,7 @@ export class RemotePlayer extends Character implements ActivatableInterface { private bindEventHandlers(): void { this.on(Phaser.Input.Events.POINTER_DOWN, (event: Phaser.Input.Pointer) => { - if (event.downElement.nodeName === "CANVAS") { + if (event.downElement.nodeName === "CANVAS" && event.leftButtonDown()) { this.toggleActionsMenu(); } }); diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts index a6fe29a1..514aa7d5 100644 --- a/front/src/Phaser/Player/Player.ts +++ b/front/src/Phaser/Player/Player.ts @@ -25,7 +25,7 @@ export class Player extends Character { direction: PlayerAnimationDirections, moving: boolean, companion: string | null, - companionTexturePromise?: Promise + companionTexturePromise?: CancelablePromise ) { super(Scene, x, y, texturesPromise, name, direction, moving, 1, true, companion, companionTexturePromise);