Better logging of to device events / usernames

scripts/dockerbuild.sh

@@ -24,6 +24,9 @@ yarn link
 cd ..
 
 cd matrix-video-chat
+
+export VITE_APP_VERSION=$(git describe --tags --abbrev=0)
+
 yarn link matrix-js-sdk
 yarn link matrix-react-sdk
 yarn install

src/main.jsx

@@ -27,6 +27,8 @@ import { InspectorContextProvider } from "./room/GroupCallInspector";
 
 rageshake.init();
 
+console.info(`matrix-video-chat ${import.meta.env.VITE_APP_VERSION || "dev"}`);
+
 if (import.meta.env.VITE_CUSTOM_THEME) {
   const style = document.documentElement.style;
   style.setProperty("--primaryColor", import.meta.env.VITE_PRIMARY_COLOR);

src/matrix-utils.js

@@ -120,12 +120,12 @@ export function getRoomUrl(roomId) {
     const [localPart, host] = roomId.replace("#", "").split(":");
 
     if (host !== defaultHomeserverHost) {
-      return `${window.location.host}/room/${roomId}`;
+      return `${window.location.protocol}//${window.location.host}/room/${roomId}`;
     } else {
-      return `${window.location.host}/${localPart}`;
+      return `${window.location.protocol}//${window.location.host}/${localPart}`;
     }
   } else {
-    return `${window.location.host}/room/${roomId}`;
+    return `${window.location.protocol}//${window.location.host}/room/${roomId}`;
   }
 }
 

src/room/GroupCallInspector.jsx

@@ -59,8 +59,8 @@ function getUserName(userId) {
   const match = userId.match(/@([^\:]+):/);
 
   return match && match.length > 0
-    ? match[1].replace("-", " ").replace("W", "")
-    : userId.replace("W", "");
+    ? match[1].replace("-", " ").replace(/\W/g, "")
+    : userId.replace(/\W/g, "");
 }
 
 function formatContent(type, content) {
@@ -231,7 +231,7 @@ function reducer(state, action) {
         ),
       };
     }
-    case "receive_to_device_event": {
+    case "received_voip_event": {
       const event = action.event;
       const eventsByUserId = { ...state.eventsByUserId };
       const fromId = event.getSender();
@@ -338,8 +338,8 @@ function useGroupCallState(client, groupCall, pollCallStats) {
     //   dispatch({ type: "call_hangup", call });
     // }
 
-    function onToDeviceEvent(event) {
-      dispatch({ type: "receive_to_device_event", event });
+    function onReceivedVoipEvent(event) {
+      dispatch({ type: "received_voip_event", event });
     }
 
     function onSendVoipEvent(event) {
@@ -351,7 +351,7 @@ function useGroupCallState(client, groupCall, pollCallStats) {
     groupCall.on("send_voip_event", onSendVoipEvent);
     //client.on("state", onCallsChanged);
     //client.on("hangup", onCallHangup);
-    client.on("toDeviceEvent", onToDeviceEvent);
+    client.on("received_voip_event", onReceivedVoipEvent);
 
     onUpdateRoomState();
 
@@ -361,7 +361,7 @@ function useGroupCallState(client, groupCall, pollCallStats) {
       groupCall.removeListener("send_voip_event", onSendVoipEvent);
       //client.removeListener("state", onCallsChanged);
       //client.removeListener("hangup", onCallHangup);
-      client.removeListener("toDeviceEvent", onToDeviceEvent);
+      client.removeListener("received_voip_event", onReceivedVoipEvent);
     };
   }, [client, groupCall]);
 

src/room/InCallView.jsx

@@ -21,6 +21,7 @@ import { Avatar } from "../Avatar";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { useRageshakeRequestModal } from "../settings/rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
+import { usePreventScroll } from "@react-aria/overlays";
 
 const canScreenshare = "getDisplayMedia" in navigator.mediaDevices;
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -47,6 +48,7 @@ export function InCallView({
   showInspector,
   roomId,
 }) {
+  usePreventScroll();
   const [layout, setLayout] = useVideoGridLayout(screenshareFeeds.length > 0);
 
   const items = useMemo(() => {

src/settings/SettingsModal.jsx

@@ -11,6 +11,7 @@ import { useMediaHandler } from "./useMediaHandler";
 import { FieldRow, InputField } from "../input/Input";
 import { Button } from "../button";
 import { useDownloadDebugLog } from "./rageshake";
+import { Body } from "../typography/Typography";
 
 export function SettingsModal({
   client,
@@ -82,6 +83,11 @@ export function SettingsModal({
             </>
           }
         >
+          <FieldRow>
+            <Body className={styles.fieldRowText}>
+              Version: {import.meta.env.VITE_APP_VERSION || "dev"}
+            </Body>
+          </FieldRow>
           <FieldRow>
             <InputField
               id="showInspector"

src/settings/SettingsModal.module.css

@@ -6,3 +6,7 @@
 .tabContainer {
   margin: 27px 16px;
 }
+
+.fieldRowText {
+  margin-bottom: 0;
+}

src/settings/rageshake.js

@@ -41,7 +41,7 @@ export function useSubmitRageshake() {
           opts.description || "User did not supply any additional text."
         );
         body.append("app", "matrix-video-chat");
-        body.append("version", "dev");
+        body.append("version", import.meta.env.VITE_APP_VERSION || "dev");
         body.append("user_agent", userAgent);
         body.append("installed_pwa", false);
         body.append("touch_input", touchInput);