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

front/dist/service-worker-dev.js

@@ -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
+});

front/dist/service-worker-prod.js

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

front/src/Components/Video/VideoMediaBox.svelte

@@ -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,13 @@
         showReportScreenStore.set({ userId:peer.userId, userName: peer.userName });
     }
 
+    let isMobile : boolean|null;
+    const unsubscribe = obtainedMediaConstraintIsMobileStore.subscribe(value => {
+        console.log('unsubscribe => obtainedMediaConstraintIsMobileStore', value);
+        isMobile = value;
+    });
+    onDestroy(unsubscribe);
+
 </script>
 
 <div class="video-container nes-container is-rounded is-dark">
@@ -31,13 +40,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 nes-button is-dark" 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>

front/src/Enum/EnvironmentVariable.ts

@@ -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;
 

front/src/Network/ServiceWorker.ts

@@ -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);
             })

front/src/Stores/MediaStore.ts

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

front/src/WebRtc/ScreenSharingPeer.ts

@@ -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() }))
+        );
     }
 }

front/src/WebRtc/SimplePeer.ts

@@ -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") {

front/src/WebRtc/VideoPeer.ts

@@ -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) {

front/style/mobile-style.scss

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

front/style/style.scss

@@ -45,6 +45,11 @@ body .message-info.warning {
         width: 100%;
         height: 100%;
         max-height: 90vh;
+
+        &.mobile{
+            width: 100%;
+            height: 21vh;
+        }
     }
 
     i {
@@ -69,6 +74,10 @@ body .message-info.warning {
         bottom: 5px;
         padding: 10px;
         z-index: 2;
+
+        &.active {
+            display: block !important;
+        }
     }
 
     img.block-logo {

front/webpack.config.ts

@@ -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;