Merge branch 'develop' of github.com:thecodingmachine/workadventure into develop

This commit is contained in:
Lurkars 2021-08-11 19:54:36 +02:00
commit 5b979fa151
18 changed files with 97 additions and 9 deletions

30
front/dist/service-worker-dev.js vendored Normal file
View File

@ -0,0 +1,30 @@
let CACHE_NAME = 'workavdenture-cache-dev';
let urlsToCache = [
'/'
];
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', (event) => {
//never cache data will be stored in dev mode
});
self.addEventListener('wait', function(event) {
//TODO wait
});
self.addEventListener('update', function(event) {
//TODO update
});
self.addEventListener('beforeinstallprompt', (e) => {
//TODO change prompt
});

View File

@ -1,4 +1,4 @@
let CACHE_NAME = 'workavdenture-cache-v1';
let CACHE_NAME = 'workavdenture-cache-v1.4.14';
let urlsToCache = [
'/'
];

Binary file not shown.

Before

(image error) Size: 1.7 KiB

After

(image error) Size: 1.6 KiB

Binary file not shown.

Before

(image error) Size: 2.2 KiB

After

(image error) Size: 1.9 KiB

Binary file not shown.

Before

(image error) Size: 880 B

After

(image error) Size: 754 B

Binary file not shown.

Before

(image error) Size: 933 B

After

(image error) Size: 922 B

Binary file not shown.

Before

(image error) Size: 1.1 KiB

After

(image error) Size: 1.1 KiB

Binary file not shown.

Before

(image error) Size: 1.3 KiB

After

(image error) Size: 1.3 KiB

View File

@ -7,6 +7,8 @@
import {videoFocusStore} from "../../Stores/VideoFocusStore";
import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
import {getColorByString, srcObject} from "./utils";
import {obtainedMediaConstraintIsMobileStore} from "../../Stores/MediaStore";
import {onDestroy} from "svelte";
export let peer: VideoPeer;
let streamStore = peer.streamStore;
@ -18,6 +20,12 @@
showReportScreenStore.set({ userId:peer.userId, userName: peer.userName });
}
let isMobile : boolean|null;
const unsubscribe = obtainedMediaConstraintIsMobileStore.subscribe(value => {
isMobile = value;
});
onDestroy(unsubscribe);
</script>
<div class="video-container">
@ -31,13 +39,13 @@
<i style="background-color: {getColorByString(name)};">{name}</i>
{/if}
{#if $constraintStore && $constraintStore.audio === false}
<img src={microphoneCloseImg} alt="Muted">
<img src={microphoneCloseImg} class="active" alt="Muted">
{/if}
<button class="report" on:click={() => openReport(peer)}>
<img alt="Report this user" src={reportImg}>
<span>Report/Block</span>
</button>
<video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
<video class:mobile="{isMobile === true}" use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
<img src={blockSignImg} class="block-logo" alt="Block" />
{#if $constraintStore && $constraintStore.audio !== false}
<SoundMeterWidget stream={$streamStore}></SoundMeterWidget>

View File

@ -17,6 +17,7 @@ const MAX_EXTRAPOLATION_TIME = 100; // Extrapolate a maximum of 250ms if no new
export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || "") || 8;
export const MAX_PER_GROUP = parseInt(process.env.MAX_PER_GROUP || "4");
export const DISPLAY_TERMS_OF_USE = process.env.DISPLAY_TERMS_OF_USE == "true";
export const NODE_ENV = process.env.NODE_ENV || "development";
export const isMobile = (): boolean => window.innerWidth <= 800 || window.innerHeight <= 600;

View File

@ -1,3 +1,5 @@
import { NODE_ENV } from "../Enum/EnvironmentVariable";
export class _ServiceWorker {
constructor() {
if ("serviceWorker" in navigator) {
@ -6,8 +8,20 @@ export class _ServiceWorker {
}
init() {
//Check node env and if is development, use service worker dev file
if (NODE_ENV === "development") {
navigator.serviceWorker
.register("/service-worker-dev.js")
.then((serviceWorker) => {
console.info("Service Worker registered: ", serviceWorker);
})
.catch((error) => {
console.error("Error registering the Service Worker: ", error);
});
return;
}
navigator.serviceWorker
.register("/service-worker.js")
.register("/service-worker-prod.js")
.then((serviceWorker) => {
console.info("Service Worker registered: ", serviceWorker);
})

View File

@ -576,3 +576,8 @@ localStreamStore.subscribe((streamResult) => {
}
}
});
/**
* A store containing the real active media is mobile
*/
export const obtainedMediaConstraintIsMobileStore = writable(false);

View File

@ -5,6 +5,7 @@ import type { UserSimplePeerInterface } from "./SimplePeer";
import { Readable, readable } from "svelte/store";
import { videoFocusStore } from "../Stores/VideoFocusStore";
import { getIceServersConfig } from "../Components/Video/utils";
import { isMobile } from "../Enum/EnvironmentVariable";
const Peer: SimplePeerNamespace.SimplePeer = require("simple-peer");
@ -175,6 +176,8 @@ export class ScreenSharingPeer extends Peer {
public stopPushingScreenSharingToRemoteUser(stream: MediaStream) {
this.removeStream(stream);
this.write(new Buffer(JSON.stringify({ type: MESSAGE_TYPE_CONSTRAINT, streamEnded: true })));
this.write(
new Buffer(JSON.stringify({ type: MESSAGE_TYPE_CONSTRAINT, streamEnded: true, isMobile: isMobile() }))
);
}
}

View File

@ -13,6 +13,7 @@ import { screenSharingLocalStreamStore } from "../Stores/ScreenSharingStore";
import { discussionManager } from "./DiscussionManager";
import { playersStore } from "../Stores/PlayersStore";
import { newChatMessageStore } from "../Stores/ChatStore";
import { isMobile } from "../Enum/EnvironmentVariable";
export interface UserSimplePeerInterface {
userId: number;
@ -391,7 +392,13 @@ export class SimplePeer {
}
PeerConnection.write(
new Buffer(JSON.stringify({ type: MESSAGE_TYPE_CONSTRAINT, ...streamResult.constraints }))
new Buffer(
JSON.stringify({
type: MESSAGE_TYPE_CONSTRAINT,
...streamResult.constraints,
isMobile: isMobile(),
})
)
);
if (streamResult.type === "error") {

View File

@ -5,10 +5,11 @@ import { blackListManager } from "./BlackListManager";
import type { Subscription } from "rxjs";
import type { UserSimplePeerInterface } from "./SimplePeer";
import { get, readable, Readable, Unsubscriber } from "svelte/store";
import { obtainedMediaConstraintStore } from "../Stores/MediaStore";
import { obtainedMediaConstraintIsMobileStore, obtainedMediaConstraintStore } from "../Stores/MediaStore";
import { playersStore } from "../Stores/PlayersStore";
import { chatMessagesStore, chatVisibilityStore, newChatMessageStore } from "../Stores/ChatStore";
import { getIceServersConfig } from "../Components/Video/utils";
import { isMobile } from "../Enum/EnvironmentVariable";
const Peer: SimplePeerNamespace.SimplePeer = require("simple-peer");
@ -167,6 +168,9 @@ export class VideoPeer extends Peer {
} else {
mediaManager.disabledVideoByUserId(this.userId);
}
if (message.isMobile != undefined) {
obtainedMediaConstraintIsMobileStore.set(message.isMobile);
}
} else if (message.type === MESSAGE_TYPE_MESSAGE) {
if (!blackListManager.isBlackListed(this.userUuid)) {
chatMessagesStore.addExternalMessage(this.userId, message.message);
@ -281,7 +285,13 @@ export class VideoPeer extends Peer {
private pushVideoToRemoteUser(localStream: MediaStream | null) {
try {
this.write(
new Buffer(JSON.stringify({ type: MESSAGE_TYPE_CONSTRAINT, ...get(obtainedMediaConstraintStore) }))
new Buffer(
JSON.stringify({
type: MESSAGE_TYPE_CONSTRAINT,
...get(obtainedMediaConstraintStore),
isMobile: isMobile(),
})
)
);
if (!localStream) {

View File

@ -28,8 +28,8 @@
height: 80%;
&> div {
max-height: 120px;
min-width: 200px;
max-height: 21vh;
}
.video-container{

View File

@ -47,6 +47,11 @@ body .message-info.warning{
height: 100%;
max-height: 90vh;
cursor: url('./images/cursor_pointer.png'), pointer;
&.mobile{
width: 100%;
height: 21vh;
}
}
i {
@ -73,6 +78,10 @@ body .message-info.warning{
bottom: 5px;
padding: 10px;
z-index: 2;
&.active {
display: block !important;
}
}
img.block-logo {

View File

@ -201,6 +201,7 @@ module.exports = {
MAX_USERNAME_LENGTH: 8,
MAX_PER_GROUP: 4,
DISPLAY_TERMS_OF_USE: false,
NODE_ENV: mode,
}),
],
} as Configuration & WebpackDevServer.Configuration;