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

back/Dockerfile

@@ -1,16 +1,18 @@
 # protobuf build
-FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as messages
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder
 WORKDIR /usr/src
+COPY messages/yarn.lock messages/package.json ./
+RUN yarn install
 COPY messages .
-RUN yarn install && yarn proto
+RUN yarn proto
 
 # typescript build
-FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder2
 WORKDIR /usr/src
 COPY back/yarn.lock back/package.json ./
 RUN yarn install
 COPY back .
-COPY --from=messages /usr/src/generated src/Messages/generated
+COPY --from=builder /usr/src/generated src/Messages/generated
 ENV NODE_ENV=production
 RUN yarn run tsc
 
@@ -18,9 +20,9 @@ RUN yarn run tsc
 FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d
 WORKDIR /usr/src
 COPY back/yarn.lock back/package.json ./
-COPY --from=builder /usr/src/dist /usr/src/dist
 ENV NODE_ENV=production
 RUN yarn install --production
+COPY --from=builder2 /usr/src/dist /usr/src/dist
 
 USER node
 CMD ["yarn", "run", "runprod"]

docker-compose.e2e.yml

@@ -9,10 +9,7 @@ services:
     build:
       context: ./
       dockerfile: front/Dockerfile
-    environment:
+    command: /bin/sh -c "/templater.sh && envsubst < /usr/share/nginx/html/env-config.template.js > /usr/share/nginx/html/env-config.js && exec nginx -g 'daemon off;'"
-      STARTUP_COMMAND_1: 'envsubst < dist/env-config.template.js > dist/env-config.js'
-      STARTUP_COMMAND_2: ''
-    command: apache2-foreground
     volumes: []
     labels:
       - "traefik.enable=true"
@@ -29,9 +26,6 @@ services:
     build:
       context: ./
       dockerfile: pusher/Dockerfile
-    environment:
-      STARTUP_COMMAND_1: ''
-      STARTUP_COMMAND_2: ''
     command: yarn run runprod
     volumes: []
 
@@ -40,8 +34,5 @@ services:
     build:
       context: ./
       dockerfile: back/Dockerfile
-    environment:
-      STARTUP_COMMAND_1: ''
-      STARTUP_COMMAND_2: ''
     command: yarn run runprod
     volumes: []

front/Dockerfile

@@ -1,72 +1,28 @@
 # protobuf build
-FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as messages
-WORKDIR /usr/src
-COPY messages .
-RUN yarn install && yarn ts-proto
-
-
-# webpack build
 FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder
 WORKDIR /usr/src
+COPY messages/yarn.lock messages/package.json ./
+RUN yarn install
+COPY messages .
+RUN yarn ts-proto
+
+# typescript build
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder2
+WORKDIR /usr/src
 COPY front/yarn.lock front/package.json ./
-RUN yarn install --ignore-engines
+RUN yarn install
-
-
 COPY front .
-COPY --from=messages /usr/src/ts-proto-generated/protos src/Messages/ts-proto-generated
+COPY --from=builder /usr/src/ts-proto-generated/protos src/Messages/ts-proto-generated
 RUN sed -i 's/import { Observable } from "rxjs";/import type { Observable } from "rxjs";/g' src/Messages/ts-proto-generated/messages.ts
-COPY --from=messages /usr/src/JsonMessages src/Messages/JsonMessages
+COPY --from=builder /usr/src/JsonMessages src/Messages/JsonMessages
-
+RUN yarn run typesafe-i18n && yarn run build-iframe-api && yarn build
-RUN DEBIAN_FRONTEND=noninteractive apt-get update \
-    && apt-get install -y \
-    gettext-base
-
-RUN rm dist/iframe.html
-RUN yarn run typesafe-i18n
-RUN yarn run build
-RUN ./templater.sh
-
-# passing arguments as environment
-ARG DEBUG_MODE
-ARG JITSI_URL
-ARG JITSI_PRIVATE_MODE
-ARG PUSHER_URL
-ARG ICON_URL
-ARG ADMIN_URL
-ARG STUN_SERVER
-ARG TURN_SERVER
-ARG TURN_USER
-ARG TURN_PASSWORD
-ARG MAX_PER_GROUP
-ARG MAX_USERNAME_LENGTH
-ARG PROFILE_URL
-ARG START_ROOM_URL
-ARG DISABLE_NOTIFICATIONS
-ARG SKIP_RENDER_OPTIMIZATIONS
-ARG OPID_LOGIN_SCREEN_PROVIDER
-
-ENV DEBUG_MODE=$DEBUG_MODE
-ENV JITSI_URL=$JITSI_URL
-ENV JITSI_PRIVATE_MODE=$JITSI_PRIVATE_MODE
-ENV PUSHER_URL=$PUSHER_URL
-ENV ICON_URL=$ICON_URL
-ENV ADMIN_URL=$ADMIN_URL
-ENV STUN_SERVER=$STUN_SERVER
-ENV TURN_SERVER=$TURN_SERVER
-ENV TURN_USER=$TURN_USER
-ENV TURN_PASSWORD=$TURN_PASSWORD
-ENV MAX_PER_GROUP=$MAX_PER_GROUP
-ENV MAX_USERNAME_LENGTH=$MAX_USERNAME_LENGTH
-ENV PROFILE_URL=$PROFILE_URL
-ENV START_ROOM_URL=$START_ROOM_URL
-ENV DISABLE_NOTIFICATIONS=$DISABLE_NOTIFICATIONS
-ENV SKIP_RENDER_OPTIMIZATIONS=$SKIP_RENDER_OPTIMIZATIONS
-ENV OPID_LOGIN_SCREEN_PROVIDER=$OPID_LOGIN_SCREEN_PROVIDER
-
-RUN envsubst < dist/env-config.template.js > dist/env-config.js
 
 # final production image
-FROM nginx:mainline-alpine
+FROM nginx:1.21.6-alpine
-COPY front/nginx-vhost.conf /etc/nginx/conf.d/default.conf
+
-COPY --from=builder /usr/src/dist /usr/share/nginx/html
+COPY front/nginx.conf /etc/nginx/conf.d/default.conf
-RUN cat /usr/share/nginx/html/env-config.js
+COPY front/templater.sh /
+COPY --from=builder2 /usr/src/dist /usr/share/nginx/html
+
+EXPOSE 80
+CMD ["/bin/sh", "-c", "/templater.sh && envsubst < /usr/share/nginx/html/env-config.template.js > /usr/share/nginx/html/env-config.js && exec nginx -g 'daemon off;'"]

front/nginx-vhost.conf

@@ -1,13 +0,0 @@
-server {
-  listen       80;
-  listen  [::]:80;
-  server_name  localhost;
-
-  access_log off;
-
-  location / {
-    root   /usr/share/nginx/html;
-    index  index.html index.htm;
-    try_files $uri $uri/ /index.html;
-  }
-}

front/nginx.conf

@@ -0,0 +1,48 @@
+server {
+    listen       80;
+    listen  [::]:80;
+    server_name  localhost;
+    access_log  off;
+
+    gzip on;
+    gzip_comp_level 6;
+    gzip_min_length 1000;
+    gzip_proxied any;
+    gzip_disable "msie6";
+    gzip_types
+        application/atom+xml
+        application/geo+json
+        application/javascript
+        application/x-javascript
+        application/json
+        application/ld+json
+        application/manifest+json
+        application/rdf+xml
+        application/rss+xml
+        application/xhtml+xml
+        application/xml
+        font/eot
+        font/otf
+        font/ttf
+        image/svg+xml
+        text/css
+        text/javascript
+        text/plain
+        text/xml;
+
+    # serve static assets (that have a cache busting hash) with an efficient cache policy
+    location /assets {
+        root   /usr/share/nginx/html;
+        expires 1y;
+        add_header Cache-Control "public";
+    }
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html;
+    }
+
+    location ~ ^/[@_]/ {
+        try_files $uri $uri/ /index.html;
+    }
+}

front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte

@@ -22,9 +22,10 @@
     const mainState = coWebsiteManager.getMainStateSubscriber();
 
     onMount(() => {
+        const fallback = location.protocol + "%2F%2F" + location.host + "%2Fresources%2Ficons%2Fwebsite.png";
         icon.src = isJitsi
             ? "/resources/logos/jitsi.png"
-            : `${ICON_URL}/icon?url=${coWebsite.getUrl().hostname}&size=64..96..256&fallback_icon_color=14304c`;
+            : `${ICON_URL}/icon?url=${coWebsite.getUrl().hostname}&size=64..96..256&fallback_icon_color=14304c&fallback_icon_url=${fallback}`;
         icon.alt = coWebsite.getUrl().hostname;
         icon.onload = () => {
             iconLoaded = true;
@@ -102,107 +103,18 @@
     class:vertical
     on:click={onClick}
 >
-    <img
+    <div class="cowebsite-thumnail-container">
-        class="cowebsite-icon noselect nes-pointer"
+        <img
-        class:hide={!iconLoaded}
+            class="cowebsite-icon noselect nes-pointer"
-        class:jitsi={isJitsi}
+            class:hide={!iconLoaded}
-        bind:this={icon}
+            class:jitsi={isJitsi}
-        on:dragstart|preventDefault={noDrag}
+            bind:this={icon}
-        alt=""
+            on:dragstart|preventDefault={noDrag}
-    />
+            alt=""
-    <svg
+        />
-        xmlns="http://www.w3.org/2000/svg"
+    </div>
-        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>
 
-    {#if coWebsite.getHint() && !isMain && !isHighlight }
+    {#if coWebsite.getHint() && $state === "asleep" }
     <div class="cowebsite-thumbnail-hint nes-balloon from-left">
         <p>{@html sanitize(i18n(coWebsite.getHint()))}</p>
     </div>
@@ -236,6 +148,7 @@
             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;
+            z-index: 1;
         }
 
         &:not(.vertical) {
@@ -266,8 +179,10 @@
         }
 
         &.asleep {
-            filter: grayscale(100%);
+            .cowebsite-icon {
-            --webkit-filter: grayscale(100%);
+                filter: grayscale(100%);
+                --webkit-filter: grayscale(100%);
+            }
         }
 
         &.loading {

front/templater.sh

@@ -1,7 +1,7 @@
-#!/usr/bin/env bash
+#!/usr/bin/env sh
 set -x
 set -o nounset errexit
-index_file=dist/index.html
+index_file=/usr/share/nginx/html/index.html
 tmp_trackcodefile=/tmp/trackcode
 
 # To inject tracking code, you have two choices:
@@ -10,12 +10,12 @@ tmp_trackcodefile=/tmp/trackcode
 # The ANALYTICS_CODE_PATH is the location of a file inside the container
 ANALYTICS_CODE_PATH="${ANALYTICS_CODE_PATH:-dist/ga.html.tmpl}"
 
-if [[ "${INSERT_ANALYTICS:-NO}" == "NO" ]]; then
+if [ "${INSERT_ANALYTICS:-NO}" = "NO" ]; then
     echo "" > "${tmp_trackcodefile}"
 fi
 
 # Automatically insert analytics if GA_TRACKING_ID is set
-if [[ "${GA_TRACKING_ID:-}" != ""  || "${INSERT_ANALYTICS:-NO}" != "NO" ]]; then
+if [ "${GA_TRACKING_ID:-}" != "" ] || [ "${INSERT_ANALYTICS:-NO}" != "NO" ]; then
     echo "Templating code from ${ANALYTICS_CODE_PATH}"
     sed "s#<!-- TRACKING NUMBER -->#${GA_TRACKING_ID:-}#g" "${ANALYTICS_CODE_PATH}" > "$tmp_trackcodefile"
 fi

pusher/Dockerfile

@@ -1,18 +1,19 @@
 # protobuf build
-FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as messages
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder
 WORKDIR /usr/src
+COPY messages/yarn.lock messages/package.json ./
+RUN yarn install
 COPY messages .
-RUN yarn install && yarn proto
+RUN yarn proto
 
 # typescript build
-FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder2
 WORKDIR /usr/src
 COPY pusher/yarn.lock pusher/package.json ./
 RUN yarn install
 COPY pusher .
-COPY --from=messages /usr/src/generated src/Messages/generated
+COPY --from=builder /usr/src/generated src/Messages/generated
-COPY --from=messages /usr/src/JsonMessages src/Messages/JsonMessages
+COPY --from=builder /usr/src/JsonMessages src/Messages/JsonMessages
-
 ENV NODE_ENV=production
 RUN yarn run tsc
 
@@ -20,9 +21,9 @@ RUN yarn run tsc
 FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d
 WORKDIR /usr/src
 COPY pusher/yarn.lock pusher/package.json ./
-COPY --from=builder /usr/src/dist /usr/src/dist
 ENV NODE_ENV=production
 RUN yarn install --production
+COPY --from=builder2 /usr/src/dist /usr/src/dist
 
 USER node
 CMD ["yarn", "run", "runprod"]

uploader/Dockerfile

@@ -11,9 +11,9 @@ RUN yarn run tsc
 FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76
 WORKDIR /usr/src
 COPY uploader/yarn.lock uploader/package.json ./
-COPY --from=builder2 /usr/src/dist /usr/src/dist
 ENV NODE_ENV=production
 RUN yarn install --production
+COPY --from=builder2 /usr/src/dist /usr/src/dist
 
 USER node
 CMD ["yarn", "run", "runprod"]