Merge branch 'develop' of github.com:thecodingmachine/workadventure
This commit is contained in:
_Bastler
@@ -0,0 +1,268 @@
|
||||
<script lang="typescript">
|
||||
import { onMount } from "svelte";
|
||||
|
||||
import { ICON_URL } from "../../Enum/EnvironmentVariable";
|
||||
import { coWebsitesNotAsleep, mainCoWebsite } from "../../Stores/CoWebsiteStore";
|
||||
import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
|
||||
import type { CoWebsite } from "../../WebRtc/CoWebsiteManager";
|
||||
import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
|
||||
|
||||
export let index: number;
|
||||
export let coWebsite: CoWebsite;
|
||||
export let vertical: boolean;
|
||||
|
||||
let icon: HTMLImageElement;
|
||||
let iconLoaded = false;
|
||||
let state = coWebsite.state;
|
||||
|
||||
const coWebsiteUrl = coWebsite.iframe.src;
|
||||
const urlObject = new URL(coWebsiteUrl);
|
||||
|
||||
onMount(() => {
|
||||
iconLoaded = true;
|
||||
});
|
||||
|
||||
async function onClick() {
|
||||
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);
|
||||
}
|
||||
} else {
|
||||
highlightedEmbedScreen.toggleHighlight({
|
||||
type: "cowebsite",
|
||||
embed: coWebsite,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if ($state === "asleep") {
|
||||
await coWebsiteManager.loadCoWebsite(coWebsite);
|
||||
}
|
||||
|
||||
coWebsiteManager.resizeAllIframes();
|
||||
}
|
||||
|
||||
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
|
||||
id={"cowebsite-thumbnail-" + index}
|
||||
class="cowebsite-thumbnail nes-pointer"
|
||||
class:asleep={$state === "asleep"}
|
||||
class:loading={$state === "loading"}
|
||||
class:ready={$state === "ready"}
|
||||
class:displayed={isMain || isHighlight}
|
||||
class:vertical
|
||||
on:click={onClick}
|
||||
>
|
||||
<img
|
||||
class="cowebsite-icon noselect nes-pointer"
|
||||
class:hide={!iconLoaded}
|
||||
bind:this={icon}
|
||||
on:dragstart|preventDefault={noDrag}
|
||||
alt=""
|
||||
/>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
class="cowebsite-icon"
|
||||
class:hide={iconLoaded}
|
||||
style="margin: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; shape-rendering: auto;"
|
||||
viewBox="0 0 100 100"
|
||||
preserveAspectRatio="xMidYMid"
|
||||
>
|
||||
<rect x="19" y="19" width="20" height="20" fill="#14304c">
|
||||
<animate
|
||||
attributeName="fill"
|
||||
values="#365dff;#14304c;#14304c"
|
||||
keyTimes="0;0.125;1"
|
||||
dur="1s"
|
||||
repeatCount="indefinite"
|
||||
begin="0s"
|
||||
calcMode="discrete"
|
||||
/>
|
||||
</rect><rect x="40" y="19" width="20" height="20" fill="#14304c">
|
||||
<animate
|
||||
attributeName="fill"
|
||||
values="#365dff;#14304c;#14304c"
|
||||
keyTimes="0;0.125;1"
|
||||
dur="1s"
|
||||
repeatCount="indefinite"
|
||||
begin="0.125s"
|
||||
calcMode="discrete"
|
||||
/>
|
||||
</rect><rect x="61" y="19" width="20" height="20" fill="#14304c">
|
||||
<animate
|
||||
attributeName="fill"
|
||||
values="#365dff;#14304c;#14304c"
|
||||
keyTimes="0;0.125;1"
|
||||
dur="1s"
|
||||
repeatCount="indefinite"
|
||||
begin="0.25s"
|
||||
calcMode="discrete"
|
||||
/>
|
||||
</rect><rect x="19" y="40" width="20" height="20" fill="#14304c">
|
||||
<animate
|
||||
attributeName="fill"
|
||||
values="#365dff;#14304c;#14304c"
|
||||
keyTimes="0;0.125;1"
|
||||
dur="1s"
|
||||
repeatCount="indefinite"
|
||||
begin="0.875s"
|
||||
calcMode="discrete"
|
||||
/>
|
||||
</rect><rect x="61" y="40" width="20" height="20" fill="#14304c">
|
||||
<animate
|
||||
attributeName="fill"
|
||||
values="#365dff;#14304c;#14304c"
|
||||
keyTimes="0;0.125;1"
|
||||
dur="1s"
|
||||
repeatCount="indefinite"
|
||||
begin="0.375s"
|
||||
calcMode="discrete"
|
||||
/>
|
||||
</rect><rect x="19" y="61" width="20" height="20" fill="#14304c">
|
||||
<animate
|
||||
attributeName="fill"
|
||||
values="#365dff;#14304c;#14304c"
|
||||
keyTimes="0;0.125;1"
|
||||
dur="1s"
|
||||
repeatCount="indefinite"
|
||||
begin="0.75s"
|
||||
calcMode="discrete"
|
||||
/>
|
||||
</rect><rect x="40" y="61" width="20" height="20" fill="#14304c">
|
||||
<animate
|
||||
attributeName="fill"
|
||||
values="#365dff;#14304c;#14304c"
|
||||
keyTimes="0;0.125;1"
|
||||
dur="1s"
|
||||
repeatCount="indefinite"
|
||||
begin="0.625s"
|
||||
calcMode="discrete"
|
||||
/>
|
||||
</rect><rect x="61" y="61" width="20" height="20" fill="#14304c">
|
||||
<animate
|
||||
attributeName="fill"
|
||||
values="#365dff;#14304c;#14304c"
|
||||
keyTimes="0;0.125;1"
|
||||
dur="1s"
|
||||
repeatCount="indefinite"
|
||||
begin="0.5s"
|
||||
calcMode="discrete"
|
||||
/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.cowebsite-thumbnail {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
background-color: rgba(#000000, 0.6);
|
||||
margin: 12px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
|
||||
&::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%);
|
||||
}
|
||||
|
||||
&.loading {
|
||||
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);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: #25598e;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes activeThumbnail {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.cowebsite-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user