Merge pull request #14 from skyway/feat/update-validation-of-room-name

expand room name limits

src/conference/effects/bootstrap.ts

@@ -1,9 +1,10 @@
 import { toJS, reaction, observe } from "mobx";
 import debug from "debug";
 import {
-  isValidRoomId,
   isValidRoomType,
-  roomIdRe,
+  errorMessageForInvalidRoomType,
+  isValidRoomName,
+  errorMessageForInvalidRoomName,
 } from "../../shared/validate";
 import { getUserDevices, getUserAudioTrack } from "../utils/webrtc";
 import {
@@ -20,20 +21,14 @@ const log = debug("effect:bootstrap");
 
 export const checkRoomSetting = ({ ui, room, notification }: RootStore) => {
   log("checkRoomSetting()");
-  const [, roomType, roomId] = location.hash.split("/");
+  const [, roomType, roomName] = location.hash.split("/");
   const params = new URLSearchParams(location.search);
 
   if (!isValidRoomType(roomType)) {
-    throw ui.showError(
-      new Error("Invalid room type! it should be `SFU` or `P2P`."),
-    );
+    throw ui.showError(new Error(errorMessageForInvalidRoomType));
   }
-  if (!isValidRoomId(roomId)) {
-    throw ui.showError(
-      new Error(
-        `Invalid room name! it should be match \`${roomIdRe.toString()}\`.`,
-      ),
-    );
+  if (!isValidRoomName(roomName)) {
+    throw ui.showError(new Error(errorMessageForInvalidRoomName));
   }
 
   const handleGetTokenError = (err: Error) => {
@@ -60,12 +55,12 @@ export const checkRoomSetting = ({ ui, room, notification }: RootStore) => {
   };
 
   (async () => {
-    const roomName = `${roomType}_${roomId}`;
+    const rtcRoomName = `${roomType}_${roomName}`;
     const memberName = generateMemberNameInRtcRoom();
 
     const rtcContext = await initRtcContext(
       roomType,
-      roomName,
+      rtcRoomName,
       memberName,
       getToken,
       handleGetTokenError,
@@ -75,7 +70,7 @@ export const checkRoomSetting = ({ ui, room, notification }: RootStore) => {
     });
     if (rtcContext === null) return;
 
-    const rtcRoom = await initRtcRoom(rtcContext, roomType, roomName).catch(
+    const rtcRoom = await initRtcRoom(rtcContext, roomType, rtcRoomName).catch(
       (err) => {
         throw ui.showError(err);
       },
@@ -86,14 +81,14 @@ export const checkRoomSetting = ({ ui, room, notification }: RootStore) => {
     room.load(
       {
         mode: roomType as RoomInit["mode"],
-        id: roomId,
+        id: rtcRoomName,
         useH264: params.has("h264"),
       },
       rtcRoom,
       memberName,
     );
 
-    log(`room: ${roomType}/${roomId}`);
+    log(`room: ${roomType}/${rtcRoomName}`);
   })();
 };
 

src/index/components/room-create.tsx

@@ -2,44 +2,45 @@ import { useState } from "react";
 import { css } from "@emotion/react";
 import { globalColors } from "../../shared/global-style";
 import {
-  maxRoomIdLength,
-  roomIdRe,
-  isValidRoomId,
+  isValidRoomName,
+  roomNameRegex,
+  maxRoomNameLength,
+  messageForValidRoomName,
 } from "../../shared/validate";
 import { RoomInit } from "../utils/types";
 
 interface Props {
   onSubmit: (init: RoomInit) => void;
 }
 function RoomCreate(props: Props) {
-  const [roomId, setRoomId] = useState("");
   const [roomType, setRoomType] = useState("SFU");
-  const [isRoomIdValid, setRoomIdValid] = useState(true);
+  const [roomName, setRoomName] = useState("");
+  const [isRoomNameValid, setRoomNameValid] = useState(true);
 
   return (
     <form
       css={wrapperStyle}
       onSubmit={(ev) => {
         ev.preventDefault();
-        props.onSubmit({ mode: roomType as RoomInit["mode"], id: roomId });
+        props.onSubmit({ mode: roomType as RoomInit["mode"], id: roomName });
       }}
     >
       <div css={itemStyle}>
-        <div>ROOM ID</div>
+        <div>ROOM NAME</div>
         <input
           type="text"
-          value={roomId}
+          value={roomName}
           placeholder="room-name"
-          onChange={(ev) => setRoomId(ev.target.value)}
-          onBlur={() => setRoomIdValid(isValidRoomId(roomId))}
+          onChange={(ev) => setRoomName(ev.target.value)}
+          onBlur={() => setRoomNameValid(isValidRoomName(roomName))}
           required
-          maxLength={maxRoomIdLength}
-          pattern={roomIdRe}
-          css={roomIdStyle}
+          maxLength={maxRoomNameLength}
+          pattern={roomNameRegex}
+          css={roomNameStyle}
         />
       </div>
       <span css={tipStyle}>
-        {isRoomIdValid ? "" : "half width, 4~16 characters are required!"}
+        {isRoomNameValid ? "" : messageForValidRoomName}
       </span>
 
       <div css={itemStyle}>
@@ -64,7 +65,7 @@ function RoomCreate(props: Props) {
         <button
           css={createButtonStyle}
           type="submit"
-          disabled={!isValidRoomId(roomId)}
+          disabled={!isValidRoomName(roomName)}
         >
           CREATE ROOM
         </button>
@@ -85,12 +86,13 @@ const wrapperStyle = css({
 const itemStyle = css({
   display: "grid",
   alignItems: "center",
-  gridTemplateColumns: "88px 1fr",
+  gridTemplateColumns: "100px 1fr",
   height: 40,
   marginBottom: 4,
+  textAlign: "left",
 });
 
-const roomIdStyle = css({
+const roomNameStyle = css({
   width: "100%",
   boxSizing: "border-box",
   appearance: "none",

src/shared/validate.ts

@@ -1,12 +1,23 @@
+export const errorMessageForInvalidRoomType = `Invalid room type! it should be 'SFU' or 'P2P'.`;
 export const isValidRoomType = (type: string): boolean => {
   if (type === "SFU" || type === "P2P") {
     return true;
   }
   return false;
 };
 
-export const maxRoomIdLength = 16;
-export const roomIdRe = "^[0-9a-z_-]{4,16}$";
-export const isValidRoomId = (name: string): boolean => {
-  return new RegExp(roomIdRe).test(name);
+// Channel、Memberのnameとして使用可能な文字種
+// from https://skyway.ntt.com/en/docs/user-guide/commons/quotas-and-limits/
+// > Allowed characters: Only characters composed of a-z, A-Z, 0-9, -, ., _, %, *
+// - * is allowed but not used
+// > Number of characters: 1~128 characters (0 characters are not allowed)
+// - 4 characters or more to reduce the possibility of unexpected users using the same Room Id
+// - 120 characters or less to be added prefix 'P2P_' or 'SFU_'
+const minRoomNameLength = 4;
+export const maxRoomNameLength = 120;
+export const messageForValidRoomName = `${minRoomNameLength}~${maxRoomNameLength} characters of half-width alphanumeric, '-', '.', '_', '%'.`;
+export const errorMessageForInvalidRoomName = `Invalid room name! it should be ${messageForValidRoomName}`;
+export const roomNameRegex = `^[a-zA-Z0-9-._%]{${minRoomNameLength},${maxRoomNameLength}}$`;
+export const isValidRoomName = (name: string): boolean => {
+  return new RegExp(roomNameRegex).test(name);
 };