diff --git a/front/dist/service-worker-dev.js b/front/dist/service-worker-dev.js new file mode 100644 index 00000000..62963006 --- /dev/null +++ b/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 +}); \ No newline at end of file diff --git a/front/dist/service-worker.js b/front/dist/service-worker-prod.js similarity index 97% rename from front/dist/service-worker.js rename to front/dist/service-worker-prod.js index 2cda9379..919b0b91 100644 --- a/front/dist/service-worker.js +++ b/front/dist/service-worker-prod.js @@ -1,4 +1,4 @@ -let CACHE_NAME = 'workavdenture-cache-v1'; +let CACHE_NAME = 'workavdenture-cache-v1.4.14'; let urlsToCache = [ '/' ]; diff --git a/front/dist/static/images/favicons/android-icon-144x144.png b/front/dist/static/images/favicons/android-icon-144x144.png index 59a7c4ce..037f624c 100644 Binary files a/front/dist/static/images/favicons/android-icon-144x144.png and b/front/dist/static/images/favicons/android-icon-144x144.png differ diff --git a/front/dist/static/images/favicons/android-icon-192x192.png b/front/dist/static/images/favicons/android-icon-192x192.png index e1a4b3ed..0968b1bd 100644 Binary files a/front/dist/static/images/favicons/android-icon-192x192.png and b/front/dist/static/images/favicons/android-icon-192x192.png differ diff --git a/front/dist/static/images/favicons/android-icon-36x36.png b/front/dist/static/images/favicons/android-icon-36x36.png index f9d822e9..fabc0fa4 100644 Binary files a/front/dist/static/images/favicons/android-icon-36x36.png and b/front/dist/static/images/favicons/android-icon-36x36.png differ diff --git a/front/dist/static/images/favicons/android-icon-48x48.png b/front/dist/static/images/favicons/android-icon-48x48.png index 35b1f177..ed206753 100644 Binary files a/front/dist/static/images/favicons/android-icon-48x48.png and b/front/dist/static/images/favicons/android-icon-48x48.png differ diff --git a/front/dist/static/images/favicons/android-icon-72x72.png b/front/dist/static/images/favicons/android-icon-72x72.png index b04f1b25..f92ffa32 100644 Binary files a/front/dist/static/images/favicons/android-icon-72x72.png and b/front/dist/static/images/favicons/android-icon-72x72.png differ diff --git a/front/dist/static/images/favicons/android-icon-96x96.png b/front/dist/static/images/favicons/android-icon-96x96.png index 380de08a..fda1933e 100644 Binary files a/front/dist/static/images/favicons/android-icon-96x96.png and b/front/dist/static/images/favicons/android-icon-96x96.png differ diff --git a/front/src/Components/Video/VideoMediaBox.svelte b/front/src/Components/Video/VideoMediaBox.svelte index d46f3ca7..924bb13a 100644 --- a/front/src/Components/Video/VideoMediaBox.svelte +++ b/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,12 @@ showReportScreenStore.set({ userId:peer.userId, userName: peer.userName }); } + let isMobile : boolean|null; + const unsubscribe = obtainedMediaConstraintIsMobileStore.subscribe(value => { + isMobile = value; + }); + onDestroy(unsubscribe); +
@@ -31,13 +39,13 @@ {name} {/if} {#if $constraintStore && $constraintStore.audio === false} - Muted + Muted {/if} - + {#if $constraintStore && $constraintStore.audio !== false} diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts index 163489bb..b63f4f07 100644 --- a/front/src/Enum/EnvironmentVariable.ts +++ b/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; diff --git a/front/src/Network/ServiceWorker.ts b/front/src/Network/ServiceWorker.ts index 59f913e2..bb61c9e9 100644 --- a/front/src/Network/ServiceWorker.ts +++ b/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); }) diff --git a/front/src/Stores/MediaStore.ts b/front/src/Stores/MediaStore.ts index 10e4523d..8e70a1af 100644 --- a/front/src/Stores/MediaStore.ts +++ b/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); diff --git a/front/src/WebRtc/ScreenSharingPeer.ts b/front/src/WebRtc/ScreenSharingPeer.ts index 18810182..1bb8cdcc 100644 --- a/front/src/WebRtc/ScreenSharingPeer.ts +++ b/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() })) + ); } } diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts index 510918a2..04075df2 100644 --- a/front/src/WebRtc/SimplePeer.ts +++ b/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") { diff --git a/front/src/WebRtc/VideoPeer.ts b/front/src/WebRtc/VideoPeer.ts index aee3f735..bdf8ec16 100644 --- a/front/src/WebRtc/VideoPeer.ts +++ b/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) { diff --git a/front/style/mobile-style.scss b/front/style/mobile-style.scss index 1b37053a..7f1e770f 100644 --- a/front/style/mobile-style.scss +++ b/front/style/mobile-style.scss @@ -28,8 +28,8 @@ height: 80%; &> div { - max-height: 120px; min-width: 200px; + max-height: 21vh; } .video-container{ diff --git a/front/style/style.scss b/front/style/style.scss index 1ed115d2..9b37e122 100644 --- a/front/style/style.scss +++ b/front/style/style.scss @@ -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 { diff --git a/front/webpack.config.ts b/front/webpack.config.ts index 4762582f..a6794ec7 100644 --- a/front/webpack.config.ts +++ b/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;