lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Menu bar for buttons

Browse source
This commit is contained in:
David Négrier 2022-01-17 10:04:54 +01:00 committed by Alexis Faizeau
parent 06dca9813c
commit a4b4710f87
10 changed files with 146 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
front/dist/resources/logos/cowebsite-swipe.svg vendored Normal file
View file

@ -0,0 +1 @@
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><defs><image width="12" height="14" id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOAQMAAAAhc2+vAAAAAXNSR0IB2cksfwAAAAZQTFRFAAAA////pdmf3QAAAAJ0Uk5TAP9bkSK1AAAAJUlEQVR4nGNgOMDAoMDw/wMDCDgwMDQwQIAASBgE/j8ACRswAACLjwYPIknTggAAAABJRU5ErkJggg=="/><image width="12" height="12" id="img2" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAgMAAAArG7R0AAAAAXNSR0IB2cksfwAAAAlQTFRFAAAA/////wAAzV63nAAAAAN0Uk5TAP8BHlUJOgAAACJJREFUeJxjYGAQYGBgYGEIDQ0F0xA+BwMDEi80NASqigEAOD8CVqGVgwsAAAAASUVORK5CYII="/></defs><style></style><use href="#img1" x="2" y="1" /><use href="#img2" x="2" y="2" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 717 B

1
front/src/Components/CameraControls.svelte
View file

@ -139,6 +139,7 @@
text-align: center;
align-content: center;
justify-content: flex-end;
z-index: 251;
&:hover {
div.hide {

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

@ -2,7 +2,7 @@
import { onMount } from "svelte";
import { ICON_URL } from "../../Enum/EnvironmentVariable";
import { mainCoWebsite } from "../../Stores/CoWebsiteStore";
import { coWebsitesNotAsleep, mainCoWebsite } from "../../Stores/CoWebsiteStore";
import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
import type { CoWebsite } from "../../WebRtc/CoWebsiteManager";
import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
@ -22,14 +22,22 @@
icon.alt = urlObject.hostname;
});
async function toggleHighlightEmbedScreen() {
async function onClick() {
if (vertical) {
coWebsiteManager.goToMain(coWebsite);
} else if ($mainCoWebsite) {
highlightedEmbedScreen.toggleHighlight({
type: "cowebsite",
embed: coWebsite,
});
if ($mainCoWebsite.iframe.id === coWebsite.iframe.id) {
const coWebsites = $coWebsitesNotAsleep;
const newMain = $highlightedEmbedScreen ?? coWebsites.length > 1 ? coWebsites[1] : undefined;
if (newMain) {
coWebsiteManager.goToMain(coWebsite);
}
} else {
highlightedEmbedScreen.toggleHighlight({
type: "cowebsite",
embed: coWebsite,
});
}
}
if ($state === "asleep") {
@ -42,6 +50,16 @@
function noDrag() {
return false;
}
let isHighlight: boolean = false;
let isMain: boolean = false;
$: {
isMain = $mainCoWebsite !== undefined && $mainCoWebsite.iframe === coWebsite.iframe;
isHighlight =
$highlightedEmbedScreen !== null &&
$highlightedEmbedScreen.type === "cowebsite" &&
$highlightedEmbedScreen.embed.iframe === coWebsite.iframe;
}
</script>
<div
@ -50,60 +68,61 @@
class:asleep={$state === "asleep"}
class:loading={$state === "loading"}
class:ready={$state === "ready"}
class:displayed={isMain || isHighlight}
class:vertical
on:click={toggleHighlightEmbedScreen}
on:click={onClick}
>
<img class="cowebsite-icon noselect nes-pointer" bind:this={icon} on:dragstart|preventDefault={noDrag} alt="" />
</div>
<style lang="scss">
.cowebsite-thumbnail::before {
content: "";
position: absolute;
width: 58px;
height: 58px;
left: -8px;
top: -8px;
margin: 4px;
border-style: solid;
border-width: 4px;
border-image-slice: 3;
border-image-width: 3;
border-image-repeat: stretch;
border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>');
border-image-outset: 1;
}
.cowebsite-thumbnail.vertical::before {
width: 48px;
height: 48px;
}
.cowebsite-thumbnail {
position: relative;
padding: 0;
background-color: rgba(#000000, 0.6);
margin: 1%;
margin: 12px;
margin-top: auto;
margin-bottom: auto;
.cowebsite-icon {
width: 50px;
height: 50px;
object-fit: cover;
&::before {
content: "";
position: absolute;
width: 58px;
height: 58px;
left: -8px;
top: -8px;
margin: 4px;
border-style: solid;
border-width: 4px;
border-image-slice: 3;
border-image-width: 3;
border-image-repeat: stretch;
border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>');
border-image-outset: 1;
}
&.vertical {
margin: 7px;
&::before {
width: 48px;
height: 48px;
}
.cowebsite-icon {
width: 40px;
height: 40px;
}
}
&.displayed {
&:not(.vertical) {
animation: activeThumbnail 300ms ease-in 0s forwards;
}
}
&.asleep {
filter: grayscale(100%);
--webkit-filter: grayscale(100%);
@ -113,6 +132,12 @@
animation: 2500ms ease-in-out 0s infinite alternate backgroundLoading;
}
&.ready {
&::before {
border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(38, 74, 110)" /></svg>');
}
}
@keyframes backgroundLoading {
0% {
background-color: rgba(#000000, 0.6);
@ -122,5 +147,21 @@
background-color: #25598e;
}
}
@keyframes activeThumbnail {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-15px);
}
}
.cowebsite-icon {
width: 50px;
height: 50px;
object-fit: cover;
}
}
</style>

16
front/src/Components/EmbedScreens/CoWebsitesContainer.svelte
View file

@ -1,13 +1,13 @@
<script lang="typescript">
import { coWebsiteThumbails } from "../../Stores/CoWebsiteStore";
import { coWebsites } from "../../Stores/CoWebsiteStore";
import CoWebsiteThumbnail from "./CoWebsiteThumbnailSlot.svelte";
export let vertical = false;
</script>
{#if $coWebsiteThumbails.length > 0}
{#if $coWebsites.length > 0}
<div id="cowebsite-thumbnail-container" class:vertical>
{#each [...$coWebsiteThumbails.values()] as coWebsite, index (coWebsite.iframe.id)}
{#each [...$coWebsites.values()] as coWebsite, index (coWebsite.iframe.id)}
<CoWebsiteThumbnail {index} {coWebsite} {vertical} />
{/each}
</div>
@ -16,13 +16,21 @@
<style lang="scss">
#cowebsite-thumbnail-container {
pointer-events: all;
height: 12%;
height: 100px;
width: 100%;
display: flex;
position: absolute;
bottom: 5px;
left: 2%;
overflow-x: auto;
overflow-y: hidden;
&.vertical {
height: auto !important;
width: auto !important;
bottom: auto !important;
left: auto !important;
position: relative;
overflow-x: hidden;
overflow-y: auto;
flex-direction: column;

34
front/src/Components/EmbedScreens/Layouts/PresentationLayout.svelte
View file

@ -1,7 +1,6 @@
<script lang="ts">
import { highlightedEmbedScreen } from "../../../Stores/EmbedScreensStore";
import CamerasContainer from "../CamerasContainer.svelte";
import CoWebsitesContainer from "../CoWebsitesContainer.svelte";
import MediaBox from "../../Video/MediaBox.svelte";
import { coWebsiteManager } from "../../../WebRtc/CoWebsiteManager";
import { afterUpdate, onMount } from "svelte";
@ -22,19 +21,6 @@
}
}
function minimiseCoWebsite() {
if ($highlightedEmbedScreen?.type === "cowebsite") {
highlightedEmbedScreen.removeHighlight();
coWebsiteManager.resizeAllIframes();
}
}
function expandCoWebsite() {
if ($highlightedEmbedScreen?.type === "cowebsite") {
coWebsiteManager.goToMain($highlightedEmbedScreen.embed);
}
}
afterUpdate(() => {
if ($highlightedEmbedScreen) {
coWebsiteManager.resizeAllIframes();
@ -88,14 +74,6 @@
class="highlighted-cowebsite nes-container is-rounded"
>
<div class="actions">
<button type="button" class="nes-btn is-primary expand" on:click={expandCoWebsite}
>></button
>
<button
type="button"
class="nes-btn is-secondary minimise"
on:click={minimiseCoWebsite}>=</button
>
<button type="button" class="nes-btn is-error close" on:click={closeCoWebsite}
>&times;</button
>
@ -105,10 +83,6 @@
{/if}
{/if}
</div>
{#if displayCoWebsiteContainer}
<CoWebsitesContainer />
{/if}
</div>
{#if $peerStore.size > 0}
@ -143,13 +117,13 @@
}
#main-embed-screen {
height: 82%;
height: 100%;
margin-bottom: 3%;
.highlighted-cowebsite {
height: 100% !important;
width: 96%;
/*background-color: rgba(#000000, 0.6);*/
background-color: rgba(#000000, 0.6);
margin: 0 !important;
.actions {
@ -164,10 +138,6 @@
pointer-events: all;
}
}
&.nes-container.is-rounded {
border-image-outset: 1;
}
}
}
</style>

14
front/src/Components/MainLayout.svelte
View file

@ -21,7 +21,7 @@
import ReportMenu from "./ReportMenu/ReportMenu.svelte";
import VisitCard from "./VisitCard/VisitCard.svelte";
import WarningContainer from "./WarningContainer/WarningContainer.svelte";
import { isMediaBreakpointUp } from "../Utils/BreakpointsUtils";
import { isMediaBreakpointDown, isMediaBreakpointUp } from "../Utils/BreakpointsUtils";
import CoWebsitesContainer from "./EmbedScreens/CoWebsitesContainer.svelte";
import FollowMenu from "./FollowMenu/FollowMenu.svelte";
import { followStateStore } from "../Stores/FollowStore";
@ -39,10 +39,12 @@
let mainLayout: HTMLDivElement;
let displayCoWebsiteContainer = isMediaBreakpointUp("md");
let displayCoWebsiteContainerMd = isMediaBreakpointUp("md");
let displayCoWebsiteContainerLg = isMediaBreakpointDown("lg");
const resizeObserver = new ResizeObserver(() => {
displayCoWebsiteContainer = isMediaBreakpointUp("md");
displayCoWebsiteContainerMd = isMediaBreakpointUp("md");
displayCoWebsiteContainerLg = isMediaBreakpointDown("lg");
});
onMount(() => {
@ -56,7 +58,7 @@
<MenuIcon />
{/if}
{#if $embedScreenLayout === LayoutMode.VideoChat || displayCoWebsiteContainer}
{#if $embedScreenLayout === LayoutMode.VideoChat || displayCoWebsiteContainerMd}
<CoWebsitesContainer vertical={true} />
{/if}
</aside>
@ -118,6 +120,10 @@
</section>
<section id="main-layout-baseline">
{#if displayCoWebsiteContainerLg}
<CoWebsitesContainer />
{/if}
{#if $layoutManagerActionVisibilityStore}
<LayoutActionManager />
{/if}

3
front/src/Components/MyCamera.svelte
View file

@ -65,8 +65,11 @@
max-height: 20%;
transition: transform 1000ms;
padding: 0;
background-color: rgba(#000000, 0.6);
background-clip: content-box;
overflow: hidden;
line-height: 0;
z-index: 250;
&.nes-container.is-rounded {
border-image-outset: 1;

15
front/src/Stores/CoWebsiteStore.ts
View file

@ -1,6 +1,5 @@
import { derived, get, writable } from "svelte/store";
import type { CoWebsite } from "../WebRtc/CoWebsiteManager";
import { highlightedEmbedScreen } from "./EmbedScreensStore";
function createCoWebsiteStore() {
const { subscribe, set, update } = writable(Array<CoWebsite>());
@ -50,17 +49,3 @@ export const coWebsitesNotAsleep = derived([coWebsites], ([$coWebsites]) =>
export const mainCoWebsite = derived([coWebsites], ([$coWebsites]) =>
$coWebsites.find((coWebsite) => get(coWebsite.state) !== "asleep")
);
export const coWebsiteThumbails = derived(
[coWebsites, highlightedEmbedScreen, mainCoWebsite],
([$coWebsites, highlightedEmbedScreen, $mainCoWebsite]) =>
$coWebsites.filter((coWebsite, index) => {
return (
(!$mainCoWebsite || $mainCoWebsite.iframe.id !== coWebsite.iframe.id) &&
(!highlightedEmbedScreen ||
highlightedEmbedScreen.type !== "cowebsite" ||
(highlightedEmbedScreen.type === "cowebsite" &&
highlightedEmbedScreen.embed.iframe.id !== coWebsite.iframe.id))
);
})
);

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

@ -25,6 +25,7 @@ export const cowebsiteCloseButtonId = "cowebsite-close";
const cowebsiteFullScreenButtonId = "cowebsite-fullscreen";
const cowebsiteOpenFullScreenImageId = "cowebsite-fullscreen-open";
const cowebsiteCloseFullScreenImageId = "cowebsite-fullscreen-close";
const cowebsiteSwipeButtonId = "cowebsite-swipe";
const cowebsiteSlotBaseDomId = "cowebsite-slot-";
const animationTime = 500; //time used by the css transitions, in ms.
@ -118,8 +119,8 @@ class CoWebsiteManager {
this.resizeObserver.observe(this.cowebsiteDom);
this.resizeObserver.observe(this.gameOverlayDom);
const buttonCloseCoWebsites = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId);
buttonCloseCoWebsites.addEventListener("click", () => {
const buttonCloseCoWebsite = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId);
buttonCloseCoWebsite.addEventListener("click", () => {
const coWebsite = this.getMainCoWebsite();
if (!coWebsite) {
@ -142,6 +143,24 @@ class CoWebsiteManager {
buttonFullScreenFrame.blur();
this.fullscreen();
});
const buttonSwipe = HtmlUtils.getElementByIdOrFail(cowebsiteSwipeButtonId);
highlightedEmbedScreen.subscribe((value) => {
if (!value || value.type !== "cowebsite") {
buttonSwipe.style.display = "none";
return;
}
buttonSwipe.style.display = "block";
});
buttonSwipe.addEventListener("click", () => {
const highlightedEmbed = get(highlightedEmbedScreen);
if (highlightedEmbed?.type === "cowebsite") {
this.goToMain(highlightedEmbed.embed);
}
});
}
public getCoWebsiteBuffer(): HTMLDivElement {
@ -671,6 +690,16 @@ class CoWebsiteManager {
}
this.removeCoWebsiteFromStack(coWebsite);
const mainCoWebsite = this.getMainCoWebsite();
if (mainCoWebsite) {
this.removeHighlightCoWebsite(mainCoWebsite);
this.goToMain(mainCoWebsite);
this.resizeAllIframes();
} else {
this.closeMain();
}
resolve();
})
);

8
front/style/cowebsite/_global.scss
View file

@ -42,6 +42,14 @@
margin-bottom: auto;
flex: 1;
justify-content: start;
#cowebsite-swipe {
display: none;
img {
transform: rotate(0deg) !important;
transform: scale(0.5);
}
}
}
.top-right-btn {