The Unstaged Update

.env.example

@@ -15,19 +15,9 @@ API_BASE_URL=http://localhost:4000
 # The URL that @cryb/web is being hosted on. Locally, this would be 'http://localhost:3000'
 WEB_BASE_URL=http://localhost:3000
 
-######################################
-#               JSMPEG               #
-######################################
-# (Note: Rates are in kb/s and should match with portal's)
-#VIDEO_BITRATE=1200
-#AUDIO_BITRATE=128
-
 ######################################
 #               Janus                #
 ######################################
-# ENABLE_JANUS controls which JS libraries the end user receives.
-ENABLE_JANUS=true
-
 # Controls the URL @cryb/web will go try to connect to for WebRTC negotiation
 # ToDo: Move this to be negotiated with API/portals.
 JANUS_URL=http://localhost:8088
@@ -51,15 +41,12 @@ TURN_PASSWORD=
 # The domain used while setting cookies. Locally, this would be 'localhost'. In production, this would be '.example.com'
 COOKIE_DOMAIN=localhost
 # Nuxt.js Defaults
-NUXT_HOST=0.0.0.0
-NUXT_PORT=3000
+HOST=0.0.0.0
+PORT=3000
 # Optional: Show player's devtools - useful for debugging
 # SHOW_PLAYER_DEVTOOLS=true
 # Optional: link to local Borealis repository for @cryb/borealis development.
 # BOREALIS_REPOSITORY=
 
 # Dist files public path - useful if you want to use a CDN
 # PUBLIC_PATH=/_cryb/
-
-# Rendering mode - This should be set to 'ssr' for SSR, otherwise it'll use 'spa'.
-# RENDER_MODE=spa

.gitignore

@@ -74,6 +74,7 @@ typings/
 
 # nuxt.js build output
 .nuxt
+.output
 dist
 
 # vuepress build output

README.md

@@ -58,10 +58,7 @@ git clone https://github.com/crybapp/web.git
 The following services need to be installed for `@cryb/web` to function:
 
 * `@cryb/api`
-
-We recommend that you run the following services alongside `@cryb/web`, but it's not required.
-
-* `@cryb/aperture` or Janus WebRTC Server
+* Janus WebRTC Server (used for VM streams)
 
 You also need to install the required dependencies by running `yarn`.
 
@@ -75,7 +72,7 @@ In this file, you'll need some values. Documentation is available in the `.env.e
 
 Make sure that you have installed `@cryb/api`.
 
-If you're developing a feature that requires the VM infrastructure, then make sure either `@cryb/aperture` or Janus WebRTC server is running.
+If you're developing a feature that requires the VM infrastructure, then make sure Janus WebRTC server is running.
 
 #### Starting @cryb/web
 

components/Chat/GroupedChatMessage.vue

@@ -1,6 +1,12 @@
 <template>
     <div v-if=author class="grouped-chat-messages" @mouseover="hover = true" @mouseleave="hover = false">
-        <img v-if=userIcon :src=userIcon class="chat-messages-author-avatar" :class="{ 'has-control': hasControl, 'owner': isOwnerOfRoom }">
+        <img
+            v-if=userIcon
+            class="chat-messages-author-avatar"
+            :class="{ 'has-control': hasControl, 'owner': isOwnerOfRoom }"
+            decoding="async"
+            :src=userIcon
+        >
         <div class="chat-messages">
             <div class="grouped-chat-messages-meta">
                 <p class="chat-messages-author-name">

components/Chat/InputBar.vue

@@ -9,7 +9,7 @@
 <script>
     import { mapGetters } from 'vuex'
 
-    import emoji from 'node-emoji'
+    import * as emoji from 'node-emoji'
     import { stripHtml } from 'string-strip-html'
 
     export default {

components/Chat/Message.vue

@@ -10,7 +10,7 @@
 <script>
     import { mapGetters } from 'vuex'
     import { stripHtml } from 'string-strip-html'
-    import twemoji from 'twemoji'
+    import twemoji from '@twemoji/api'
 
     export default {
         props: [

components/Header/index.vue

@@ -11,7 +11,7 @@
             <RoomMenu ref="roomMenu" />
         </div>
         <div v-if=user class="right">
-            <img v-if=userIcon :src=userIcon class="profile-image" @click=toggleUserMenu()>
+            <img v-if=userIcon decoding="async" class="profile-image" :src=userIcon @click=toggleUserMenu()>
             <UserMenu ref="userMenu" />
         </div>
         <div v-else-if=token class="right">

components/Player/Footer.vue

@@ -52,12 +52,9 @@
             }
         },
         computed: {
-            ...mapGetters(['apertureWs', 'apertureToken', 'controllerId', 'controlLocked', 'fullscreen', 'janusId',
-                 'pip', 'portalStatus', 'room', 'users', 'userId', 'onlineUsers', 'viewerMuted']),
+            ...mapGetters(['controllerId', 'controlLocked', 'fullscreen', 'janusId', 'pip', 'portalStatus',
+                'room', 'users', 'userId', 'onlineUsers', 'viewerMuted']),
 
-            isJanusEnabled() {
-                return process.env.ENABLE_JANUS
-            },
             hasControl() {
                 return this.controllerId === this.userId
             },

components/Player/UserIcon.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-if=member class="user-icon" :class="{ 'passable': canPassControl, 'offline': !isUserOnline, 'has-control': hasControl, 'owner': isOwnerOfRoom }" @click=didClickUserIcon() @mouseover="hover = true" @mouseleave="hover = false">
-        <img v-if=userIcon :src=userIcon class="user-icon-avatar" :title="userHoverTitle" />
+        <img v-if=userIcon class="user-icon-avatar" :title="userHoverTitle" decoding="async" :src=userIcon />
         <div class="user-name-wrapper">
             <p class="user-name">
                 {{ member.name }}
@@ -47,7 +47,7 @@
                 if (this.canPassControl) return `Give the controller to ${this.member.name}`
                 if (this.hasControl) return `${this.member.name} has the controller`
 
-                return `${this.member.name}${this.isUserSelf ? ' (you)' : ''}`
+                return 'How are you here?'
             },
 
             interactable() {