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 = [ let urlsToCache = [
'/' '/'
]; ];

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 880 B

After

Width:  |  Height:  |  Size: 754 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 933 B

After

Width:  |  Height:  |  Size: 922 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -7,6 +7,8 @@
import {videoFocusStore} from "../../Stores/VideoFocusStore"; import {videoFocusStore} from "../../Stores/VideoFocusStore";
import {showReportScreenStore} from "../../Stores/ShowReportScreenStore"; import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
import {getColorByString, srcObject} from "./utils"; import {getColorByString, srcObject} from "./utils";
import {obtainedMediaConstraintIsMobileStore} from "../../Stores/MediaStore";
import {onDestroy} from "svelte";
export let peer: VideoPeer; export let peer: VideoPeer;
let streamStore = peer.streamStore; let streamStore = peer.streamStore;
@ -18,6 +20,12 @@
showReportScreenStore.set({ userId:peer.userId, userName: peer.userName }); showReportScreenStore.set({ userId:peer.userId, userName: peer.userName });
} }
let isMobile : boolean|null;
const unsubscribe = obtainedMediaConstraintIsMobileStore.subscribe(value => {
isMobile = value;
});
onDestroy(unsubscribe);
</script> </script>
<div class="video-container"> <div class="video-container">
@ -31,13 +39,13 @@
<i style="background-color: {getColorByString(name)};">{name}</i> <i style="background-color: {getColorByString(name)};">{name}</i>
{/if} {/if}
{#if $constraintStore && $constraintStore.audio === false} {#if $constraintStore && $constraintStore.audio === false}
<img src={microphoneCloseImg} alt="Muted"> <img src={microphoneCloseImg} class="active" alt="Muted">
{/if} {/if}
<button class="report" on:click={() => openReport(peer)}> <button class="report" on:click={() => openReport(peer)}>
<img alt="Report this user" src={reportImg}> <img alt="Report this user" src={reportImg}>
<span>Report/Block</span> <span>Report/Block</span>
</button> </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" /> <img src={blockSignImg} class="block-logo" alt="Block" />
{#if $constraintStore && $constraintStore.audio !== false} {#if $constraintStore && $constraintStore.audio !== false}
<SoundMeterWidget stream={$streamStore}></SoundMeterWidget> <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_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || "") || 8;
export const MAX_PER_GROUP = parseInt(process.env.MAX_PER_GROUP || "4"); 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 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; 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 { export class _ServiceWorker {
constructor() { constructor() {
if ("serviceWorker" in navigator) { if ("serviceWorker" in navigator) {
@ -6,8 +8,20 @@ export class _ServiceWorker {
} }
init() { init() {
//Check node env and if is development, use service worker dev file
if (NODE_ENV === "development") {
navigator.serviceWorker navigator.serviceWorker
.register("/service-worker.js") .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-prod.js")
.then((serviceWorker) => { .then((serviceWorker) => {
console.info("Service Worker registered: ", 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 { Readable, readable } from "svelte/store";
import { videoFocusStore } from "../Stores/VideoFocusStore"; import { videoFocusStore } from "../Stores/VideoFocusStore";
import { getIceServersConfig } from "../Components/Video/utils"; import { getIceServersConfig } from "../Components/Video/utils";
import { isMobile } from "../Enum/EnvironmentVariable";
const Peer: SimplePeerNamespace.SimplePeer = require("simple-peer"); const Peer: SimplePeerNamespace.SimplePeer = require("simple-peer");
@ -175,6 +176,8 @@ export class ScreenSharingPeer extends Peer {
public stopPushingScreenSharingToRemoteUser(stream: MediaStream) { public stopPushingScreenSharingToRemoteUser(stream: MediaStream) {
this.removeStream(stream); 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 { discussionManager } from "./DiscussionManager";
import { playersStore } from "../Stores/PlayersStore"; import { playersStore } from "../Stores/PlayersStore";
import { newChatMessageStore } from "../Stores/ChatStore"; import { newChatMessageStore } from "../Stores/ChatStore";
import { isMobile } from "../Enum/EnvironmentVariable";
export interface UserSimplePeerInterface { export interface UserSimplePeerInterface {
userId: number; userId: number;
@ -391,7 +392,13 @@ export class SimplePeer {
} }
PeerConnection.write( 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") { if (streamResult.type === "error") {

View File

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

View File

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

View File

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

View File

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