{error}
}
- {pageUrl && (
-
-
-
- {error}
}
+ {pageUrl && (
+
+
+
+
-
-
-
- );
- },
+ ({
+ className,
+ isOpen,
+ onClose,
+ children,
+ onMouseMove,
+ onMouseLeave,
+ overlayClassName,
+ onFullScreen,
+ onExitFullScreen,
+ overlayColor = "black",
+ isHiddenTransition = false,
+ isOutsideCloseButton = false,
+ useFullScreen = false,
+ }: Props) => {
+ return (
+ {children}
-
+
+
+
+ );
+ },
);
ModalWrapper.displayName = "ModalWrapper";
diff --git a/AdditionalToolbarButton/src/components/AdditionalToolbarButton/OverlayModal.tsx b/AdditionalToolbarButton/src/components/AdditionalToolbarButton/OverlayModal.tsx
index 0088215b..bc4b1bf8 100644
--- a/AdditionalToolbarButton/src/components/AdditionalToolbarButton/OverlayModal.tsx
+++ b/AdditionalToolbarButton/src/components/AdditionalToolbarButton/OverlayModal.tsx
@@ -1,5 +1,6 @@
import classNames from "classnames";
-import React, { useEffect, useRef, useState, useCallback } from "react";
+import type React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { CloseButton } from "./CloseButton";
@@ -9,166 +10,164 @@ import { ExpandButton } from "./ExpandButton";
import styles from "./Modal.module.scss";
export type ModalProps = {
- isOpen: boolean;
- onClose: () => void;
- children: React.ReactNode;
- // @ts-ignore
- centerDirection?: any;
- className?: string;
- overlayClassName?: string;
- overlayColor?: "black" | "white" | "transparent";
- overlayDisabled?: boolean;
- isHiddenTransition?: boolean;
- isOutsideCloseButton?: boolean;
- useFullScreen?: boolean;
- onFullScreen?: () => void;
- onExitFullScreen?: () => void;
+ isOpen: boolean;
+ onClose: () => void;
+ children: React.ReactNode;
+ centerDirection?: any;
+ className?: string;
+ overlayClassName?: string;
+ overlayColor?: "black" | "white" | "transparent";
+ overlayDisabled?: boolean;
+ isHiddenTransition?: boolean;
+ isOutsideCloseButton?: boolean;
+ useFullScreen?: boolean;
+ onFullScreen?: () => void;
+ onExitFullScreen?: () => void;
};
// TODO ファイル名を変更
export const OverlayModal: React.FC{children}
+
- {useFullScreen &&
- (isFullscreen ? (
-
,
+ modalRoot,
+ );
};
diff --git a/AdditionalToolbarButton/src/components/AdditionalToolbarButton/ToolbarButton.jsx b/AdditionalToolbarButton/src/components/AdditionalToolbarButton/ToolbarButton.jsx
index a5ccbbdb..1bdfe5ad 100644
--- a/AdditionalToolbarButton/src/components/AdditionalToolbarButton/ToolbarButton.jsx
+++ b/AdditionalToolbarButton/src/components/AdditionalToolbarButton/ToolbarButton.jsx
@@ -4,18 +4,18 @@ import React, { forwardRef } from "react";
import styles from "./ToolbarButton.module.scss";
export const presets = [
- "basic",
- "transparent",
- "accept",
- "cancel",
- "accent1",
- "accent2",
- "accent3",
- "accent4",
- "accent5",
- "urth-staff-red",
- "urth-staff-green-onclick",
- "urth-staff-blue-onclick",
+ "basic",
+ "transparent",
+ "accept",
+ "cancel",
+ "accent1",
+ "accent2",
+ "accent3",
+ "accent4",
+ "accent5",
+ "urth-staff-red",
+ "urth-staff-green-onclick",
+ "urth-staff-blue-onclick",
];
export const types = ["none", "left", "middle", "right"];
@@ -42,68 +42,69 @@ export const statusColors = ["recording", "unread", "enabled", "disabled"];
*/
export const ToolbarButton = forwardRef(
- /**
- * @param {ToolbarButtonProps} props
- * @param {React.Ref
+ {useFullScreen &&
+ (isFullscreen ? (
+
,
- modalRoot,
- );
+ {!overlayDisabled && (
+
+ )}
+
- {!isOutsideCloseButton && (
-
- {!overlayDisabled && (
-
- )}
-
+ {!isOutsideCloseButton && (
+
+ {children}
+
- {}} />
-
- );
+ const dummyProps = {
+ toggleDefaultModal: () => {
+ console.log("Toggle Default Modal Clicked");
+ },
+ canSpawnMessages: true,
+ onUploadFiles: (event: React.ChangeEvent- CustomChatButton Component -
-
+
+ );
};
export default App;
diff --git a/CustomChatButton/src/components/CustomChatButton/CustomChatButton.tsx b/CustomChatButton/src/components/CustomChatButton/CustomChatButton.tsx
index a717a4a7..d73fed22 100644
--- a/CustomChatButton/src/components/CustomChatButton/CustomChatButton.tsx
+++ b/CustomChatButton/src/components/CustomChatButton/CustomChatButton.tsx
@@ -1,83 +1,85 @@
-import React, { useState } from "react";
+import type React from "react";
+import { useState } from "react";
import { CustomChatModal } from "../CustomChatModal";
-import { SampleIcon } from "./SampleIcon";
import styles from "./CustomChatButton.module.scss";
+import { SampleIcon } from "./SampleIcon";
type MessageGroup = {
- id: number;
- type:
- | "chat"
- | "join"
- | "entered"
- | "leave"
- | "display_name_changed"
- | "hub_name_changed";
- timestamp: number;
- sender?: string;
- senderSessionId?: string;
- messages?: {
- id: number;
- body: string;
- timestamp: number;
- }[];
- name?: string;
- presence?: string;
- hubName?: string;
- oldName?: string;
- newName?: string;
+ id: number;
+ type:
+ | "chat"
+ | "join"
+ | "entered"
+ | "leave"
+ | "display_name_changed"
+ | "hub_name_changed";
+ timestamp: number;
+ sender?: string;
+ senderSessionId?: string;
+ messages?: {
+ id: number;
+ body: string;
+ timestamp: number;
+ }[];
+ name?: string;
+ presence?: string;
+ hubName?: string;
+ oldName?: string;
+ newName?: string;
};
interface CustomChatButtonProps {
- toggleDefaultModal: () => void;
- canSpawnMessages: boolean;
- onUploadFiles: (event: React.ChangeEventCustomChatButton Component
+
-
+ return (
+ Example Modal
-
+
- Example Modal
+
-
- {messageGroups?.map((message, id) => (
- This is a example Modal for demo
-
-
- ))}
- setMessage(e.target.value)}
- />
-
-
-
- {message.type}
- {message?.messages?.map((_message, id) => (
-
-
- ))}
- {_message?.body}
- {_message?.timestamp}
-
+
+ {messageGroups?.map((message, id) => (
+ This is a example Modal for demo
+
+
+ ))}
+ setMessage(e.target.value)}
+ />
+
+
+
+ {message.type}
+ {message?.messages?.map((_message, id) => (
+
+
+ ))}
+ {_message?.body}
+ {_message?.timestamp}
+ 
- ),
- rightImage: (
-
- ),
- leftMessage: "Left Message",
- rightMessage: "Right Message",
- termsOfServiceUrl: "https://www.google.com",
- privacyPolicyUrl: "https://www.google.com",
- };
+ const dummyProps = {
+ roomName: "Room Name",
+ logoUrl:
+ "https://r2.u-rth.win/room-entrance-files/893e4f7d-43b2-4efd-be29-6bd695841a3c.jpeg",
+ showJoinRoom: true,
+ isRoomFull: false,
+ onJoinRoom: () => {
+ console.log("Join Room Clicked");
+ },
+ showEnterOnDevice: true,
+ onEnterOnDevice: () => {
+ console.log("Enter On Device Clicked");
+ },
+ showSpectate: true,
+ onSpectate: () => {
+ console.log("Spectate Clicked");
+ },
+ showOptions: true,
+ onOptions: () => {
+ console.log("Options Clicked");
+ },
+ leftImage: (
+
+ ),
+ rightImage: (
+
+ ),
+ leftMessage: "Left Message",
+ rightMessage: "Right Message",
+ termsOfServiceUrl: "https://www.google.com",
+ privacyPolicyUrl: "https://www.google.com",
+ };
- return (
-
-
- );
+ return (
+ CustomEntryPanel Component
-
+
+ );
};
export default App;
diff --git a/CustomEntryPanel/src/components/CustomEntryPanel/CustomEntryPanel.tsx b/CustomEntryPanel/src/components/CustomEntryPanel/CustomEntryPanel.tsx
index 81c169ec..0405c1bc 100644
--- a/CustomEntryPanel/src/components/CustomEntryPanel/CustomEntryPanel.tsx
+++ b/CustomEntryPanel/src/components/CustomEntryPanel/CustomEntryPanel.tsx
@@ -1,186 +1,224 @@
-import React, { useCallback, useState } from "react";
-import { useCssBreakpoints } from "react-use-css-breakpoints"
+import type React from "react";
+import { useCallback, useState } from "react";
+import { useCssBreakpoints } from "react-use-css-breakpoints";
import styles from "./CustomEntryPanel.module.scss";
interface CustomEntryPanelProps {
- roomName: string | undefined;
- logoUrl: string | undefined;
- showJoinRoom: boolean;
- isRoomFull: boolean;
- onJoinRoom: () => void;
- showEnterOnDevice: boolean;
- onEnterOnDevice: () => void;
- showSpectate: boolean;
- onSpectate: () => void;
- showOptions: boolean;
- onOptions: () => void;
- leftImage: React.ReactNode;
- rightImage: React.ReactNode;
- leftMessage: string;
- rightMessage: string;
- termsOfServiceUrl: string | undefined;
- privacyPolicyUrl: string | undefined;
+ roomName: string | undefined;
+ logoUrl: string | undefined;
+ showJoinRoom: boolean;
+ isRoomFull: boolean;
+ onJoinRoom: () => void;
+ showEnterOnDevice: boolean;
+ onEnterOnDevice: () => void;
+ showSpectate: boolean;
+ onSpectate: () => void;
+ showOptions: boolean;
+ onOptions: () => void;
+ leftImage: React.ReactNode;
+ rightImage: React.ReactNode;
+ leftMessage: string;
+ rightMessage: string;
+ termsOfServiceUrl: string | undefined;
+ privacyPolicyUrl: string | undefined;
}
export const CustomEntryPanel: React.FCCustomEntryPanel Component
+
- {/* TODO: Implement your custom entry panel here */}
-
- );
+ const breakpoint = useCssBreakpoints();
+
+ const [agreeToTerms, setAgreeToTerms] = useState(false);
+ const [agreeToPrivacy, setAgreeToPrivacy] = useState(false);
+
+ const handleAgreeToTerms = () => {
+ setAgreeToTerms(!agreeToTerms);
+ };
+ const handleAgreeToPrivacy = () => setAgreeToPrivacy(!agreeToPrivacy);
+
+ const isButtonDisabled = () => {
+ if (termsOfServiceUrl && !agreeToTerms) return true;
+ if (privacyPolicyUrl && !agreeToPrivacy) return true;
+ return false;
+ };
+
+ return (
+
-
-
-
-
-
-
-
-
- - {leftMessage ? ( - leftMessage - ) : ( -
デフォルトメッセージ
- )}
-
- {leftImage}
-
-
-
-
-
- {rightImage}
-
-
- - {rightMessage ? ( - rightMessage - ) : ( -
デフォルトメッセージ
- )}
-
-
- {breakpoint !== "sm" && breakpoint !== "md" && (
-
-
- 
-
- )}
-
-
-
-
- {roomName}
-
- {(termsOfServiceUrl || privacyPolicyUrl) && (
-
- - - )} -
-
- {termsOfServiceUrl && (
-
- )}
-
- {showJoinRoom && (
-
- )}
-
- {showEnterOnDevice && (
-
- )}
-
- {showSpectate && (
-
- )}
-
- {isRoomFull && (
-
-
-
- )}
-
- {privacyPolicyUrl && (
-
-
-
- )}
-
-
- )}
-
- {showOptions && breakpoint !== "sm" && (
- <>
- 只今満員のため、他の方が退室されるまでお待ちください。
-入室可能になりましたらボタンが表示されますので入室ください。
-- - - )} -
+ {/* TODO: Implement your custom entry panel here */}
+
+ );
};
diff --git a/CustomEntryPanel/src/main.tsx b/CustomEntryPanel/src/main.tsx
index 04eb326c..07bfa7af 100644
--- a/CustomEntryPanel/src/main.tsx
+++ b/CustomEntryPanel/src/main.tsx
@@ -5,11 +5,11 @@ import App from "./App";
const rootElement = document.getElementById("ui-root");
if (!rootElement) {
- throw new Error("Root element not found");
+ throw new Error("Root element not found");
}
createRoot(rootElement).render(
-
+
+
+
+
+
+
+
+
+ + {leftMessage ? leftMessage :
デフォルトメッセージ
}
+
+ {leftImage}
+
+
+
+
+
+ {rightImage}
+
+
+ + {rightMessage ? rightMessage :
デフォルトメッセージ
}
+
+
+ {breakpoint !== "sm" && breakpoint !== "md" && (
+
+
+
+
+ )}
+
+
+
+
+ {roomName}
+
+ {(termsOfServiceUrl || privacyPolicyUrl) && (
+
+ + + )} +
+
+ {termsOfServiceUrl && (
+
+ )}
+
+ {showJoinRoom && (
+
+ )}
+
+ {showEnterOnDevice && (
+
+ )}
+
+ {showSpectate && (
+
+ )}
+
+ {isRoomFull && (
+
+
+
+ )}
+
+ {privacyPolicyUrl && (
+
+
+
+ )}
+
+
+ )}
+
+ {showOptions && breakpoint !== "sm" && (
+ <>
+ 只今満員のため、他の方が退室されるまでお待ちください。
++ 入室可能になりましたらボタンが表示されますので入室ください。 +
++ + + )} +
- {}} destinationUrl="" />
-
- );
+ return (
+ - CustomLeaveButton Component -
-
+ {}} destinationUrl="" />
+
+ );
};
export default App;
diff --git a/CustomLeaveButton/src/components/CustomLeaveButton/CustomLeaveButton.test.tsx b/CustomLeaveButton/src/components/CustomLeaveButton/CustomLeaveButton.test.tsx
index 7e3cc99f..96a1541e 100644
--- a/CustomLeaveButton/src/components/CustomLeaveButton/CustomLeaveButton.test.tsx
+++ b/CustomLeaveButton/src/components/CustomLeaveButton/CustomLeaveButton.test.tsx
@@ -1,64 +1,64 @@
+import { fireEvent, render, screen } from "@testing-library/react";
import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
import { CustomLeaveButton } from "./CustomLeaveButton";
vi.mock("../CustomLeaveModal", () => ({
- CustomLeaveModal: ({
- modalIsOpen,
- closeModal,
- }: {
- modalIsOpen: boolean;
- closeModal: () => void;
- }) => (
- + CustomLeaveButton Component +
+
-
-
- ),
+ CustomLeaveModal: ({
+ modalIsOpen,
+ closeModal,
+ }: {
+ modalIsOpen: boolean;
+ closeModal: () => void;
+ }) => (
+
+
+
+ ),
}));
vi.mock("./SampleIcon", () => ({
- SampleIcon: () => Sample Icon
,
+ SampleIcon: () => Sample Icon
,
}));
vi.mock("./CustomLeaveButton.module.scss", () => ({
- default: {
- customLeaveButtonContainer: "customLeaveButtonContainer",
- sampleIconContainer: "sampleIconContainer",
- customLeaveButtonLabel: "customLeaveButtonLabel",
- },
+ default: {
+ customLeaveButtonContainer: "customLeaveButtonContainer",
+ sampleIconContainer: "sampleIconContainer",
+ customLeaveButtonLabel: "customLeaveButtonLabel",
+ },
}));
describe("CustomLeaveButton", () => {
- it("should render the CustomLeaveButton component", () => {
- render(
-
-
+ return (
+ Example Modal
-
+
- Example Modal
+
-
- This is a example Modal for demo
-
+
+ This is a example Modal for demo
+
-
+ );
};
export default App;
diff --git a/CustomMegaphoneButton/src/components/CustomMegaphoneButton/CustomMegaphoneButton.tsx b/CustomMegaphoneButton/src/components/CustomMegaphoneButton/CustomMegaphoneButton.tsx
index 36dc1d03..f4c28548 100644
--- a/CustomMegaphoneButton/src/components/CustomMegaphoneButton/CustomMegaphoneButton.tsx
+++ b/CustomMegaphoneButton/src/components/CustomMegaphoneButton/CustomMegaphoneButton.tsx
@@ -1,5 +1,6 @@
-import React, { useCallback, useState } from "react";
import classNames from "classnames";
+import type React from "react";
+import { useCallback, useState } from "react";
import { Tooltip } from "react-tooltip";
import { MegaphoneIcon } from "../MegaphoneIcon";
@@ -9,121 +10,124 @@ import styles from "./CustomMegaphoneButton.module.scss";
import { useMegaphoneMessage } from "./useMegaphoneMessage";
type Props = {
- canMegaphone: boolean;
- isActiveMegaphone: boolean;
- muteMegaphone: () => Promise
+
- );
+ CustomMegaphoneButton Demo
-
-
-
-
-
-
- CustomMegaphoneButton Demo
+
+
+
+
+
+
+
-
- 権限がないためメガホン機能を使用することができません。
-下記の申請ボタンからメガホン権限を申請することができます。
- -
+
+ 権限がないためメガホン機能を使用することができません。
+下記の申請ボタンからメガホン権限を申請することができます。
+ +
-
- );
+ return (
+ {name} さんがメガホン権限を申請しています。
-
-
-
-
-
+
+ );
};
diff --git a/CustomMegaphoneButton/src/components/OffMegaphoneIcon.tsx b/CustomMegaphoneButton/src/components/OffMegaphoneIcon.tsx
index cb3a7f5b..5a83acac 100644
--- a/CustomMegaphoneButton/src/components/OffMegaphoneIcon.tsx
+++ b/CustomMegaphoneButton/src/components/OffMegaphoneIcon.tsx
@@ -1,22 +1,22 @@
-import React from "react";
+import type React from "react";
export const OffMegaphoneIcon: React.FC = () => {
- return (
-
- );
+ return (
+
+ );
};
diff --git a/CustomMegaphoneButton/src/main.tsx b/CustomMegaphoneButton/src/main.tsx
index 04eb326c..07bfa7af 100644
--- a/CustomMegaphoneButton/src/main.tsx
+++ b/CustomMegaphoneButton/src/main.tsx
@@ -5,11 +5,11 @@ import App from "./App";
const rootElement = document.getElementById("ui-root");
if (!rootElement) {
- throw new Error("Root element not found");
+ throw new Error("Root element not found");
}
createRoot(rootElement).render(
- {name} さんがメガホン権限を申請しています。
+
+
+
+
+
-
- );
+ return (
+ - CustomNearestUserProfile Component -
-
+
+ );
};
export default App;
diff --git a/CustomNearestUserProfile/src/components/CustomMinimizedNearestUserProfileIcon/CustomMinimizedNearestUserProfileIcon.tsx b/CustomNearestUserProfile/src/components/CustomMinimizedNearestUserProfileIcon/CustomMinimizedNearestUserProfileIcon.tsx
index 9e60ac1a..b9082df2 100644
--- a/CustomNearestUserProfile/src/components/CustomMinimizedNearestUserProfileIcon/CustomMinimizedNearestUserProfileIcon.tsx
+++ b/CustomNearestUserProfile/src/components/CustomMinimizedNearestUserProfileIcon/CustomMinimizedNearestUserProfileIcon.tsx
@@ -1,28 +1,27 @@
-import React from "react";
import classNames from "classnames";
-
-import { SpeakerIcon } from "./SpeakerIcon";
-
+import type React from "react";
import styles from "./CustomMinimizedNearestUserProfileIcon.module.scss";
+import { SpeakerIcon } from "./SpeakerIcon";
type Props = {
- onClick: () => void;
- showSpeakerIcon: boolean;
+ onClick: () => void;
+ showSpeakerIcon: boolean;
};
export const CustomMinimizedNearestUserProfileIcon: React.FC+ CustomNearestUserProfile Component +
+
-
- );
+ return (
+
-
-
- {user.displayName}
-
- 
-
- {user.biography}
-
+
+ );
};
diff --git a/CustomNearestUserProfile/src/components/CustomNearestUserProfile/MinusSolid.tsx b/CustomNearestUserProfile/src/components/CustomNearestUserProfile/MinusSolid.tsx
index 53cd7be2..d5fc11e0 100644
--- a/CustomNearestUserProfile/src/components/CustomNearestUserProfile/MinusSolid.tsx
+++ b/CustomNearestUserProfile/src/components/CustomNearestUserProfile/MinusSolid.tsx
@@ -1,16 +1,16 @@
-import React from "react";
+import type React from "react";
export const MinusIcon: React.FC = () => (
-
+
);
diff --git a/CustomNearestUserProfile/src/components/CustomNearestUserProfile/useCustomNearestUserProfile.ts b/CustomNearestUserProfile/src/components/CustomNearestUserProfile/useCustomNearestUserProfile.ts
index cf69dc66..f96fb451 100644
--- a/CustomNearestUserProfile/src/components/CustomNearestUserProfile/useCustomNearestUserProfile.ts
+++ b/CustomNearestUserProfile/src/components/CustomNearestUserProfile/useCustomNearestUserProfile.ts
@@ -1,19 +1,19 @@
import React, { useCallback } from "react";
export const useCustomNearestUserProfile = () => {
- const [minimized, setMinimized] = React.useState(false);
+ const [minimized, setMinimized] = React.useState(false);
- const minimizeModal = useCallback(() => {
- setMinimized(true);
- }, []);
+ const minimizeModal = useCallback(() => {
+ setMinimized(true);
+ }, []);
- const openModal = useCallback(() => {
- setMinimized(false);
- }, []);
+ const openModal = useCallback(() => {
+ setMinimized(false);
+ }, []);
- return {
- minimized,
- minimizeModal,
- openModal,
- };
+ return {
+ minimized,
+ minimizeModal,
+ openModal,
+ };
};
diff --git a/CustomNearestUserProfile/src/main.tsx b/CustomNearestUserProfile/src/main.tsx
index f5e3c527..8051ffea 100644
--- a/CustomNearestUserProfile/src/main.tsx
+++ b/CustomNearestUserProfile/src/main.tsx
@@ -6,11 +6,11 @@ import "./styles/global.module.scss";
const rootElement = document.getElementById("root");
if (!rootElement) {
- throw new Error("Root element not found");
+ throw new Error("Root element not found");
}
createRoot(rootElement).render(
-
+
+
+ {user.displayName}
+
+
+
+ {user.biography}
+
-
- );
+ return (
+ CustomOverlay Component
-
+
+ );
};
export default App;
diff --git a/CustomOverlay/src/components/CustomOverlay/CustomOverlay.test.tsx b/CustomOverlay/src/components/CustomOverlay/CustomOverlay.test.tsx
index 1d4208c0..955d92d4 100644
--- a/CustomOverlay/src/components/CustomOverlay/CustomOverlay.test.tsx
+++ b/CustomOverlay/src/components/CustomOverlay/CustomOverlay.test.tsx
@@ -1,41 +1,41 @@
-import React from "react";
import { render } from "@testing-library/react";
+import React from "react";
import { CustomOverlay } from "./CustomOverlay";
import styles from "./CustomOverlay.module.scss";
vi.mock("./CustomOverlay.module.scss", () => ({
- default: {
- customOverlayContainer: "customOverlayContainer",
- sampleOverlay1: "sampleOverlay1",
- overlayWrapper: "overlayWrapper",
- sampleOverlay2: "sampleOverlay2",
- sampleOverlay3: "sampleOverlay3",
- },
+ default: {
+ customOverlayContainer: "customOverlayContainer",
+ sampleOverlay1: "sampleOverlay1",
+ overlayWrapper: "overlayWrapper",
+ sampleOverlay2: "sampleOverlay2",
+ sampleOverlay3: "sampleOverlay3",
+ },
}));
describe("CustomOverlay", () => {
- test("renders the CustomOverlay component correctly", () => {
- const { getByText, container } = render(CustomOverlay Component
+
-
- );
+ return (
+
-
- Sample Overlay1
-
-
-
-
- Sample Overlay2
-
-
- Sample Overlay3
-
+
+ );
};
diff --git a/CustomOverlay/src/main.tsx b/CustomOverlay/src/main.tsx
index 4f4d0c23..c737824a 100644
--- a/CustomOverlay/src/main.tsx
+++ b/CustomOverlay/src/main.tsx
@@ -5,11 +5,11 @@ import App from "./App";
const rootElement = document.getElementById("root");
if (!rootElement) {
- throw new Error("Root element not found");
+ throw new Error("Root element not found");
}
createRoot(rootElement).render(
-
+
+ Sample Overlay1
+
+
+
+
+ Sample Overlay2
+
+
+ Sample Overlay3
+
-
- );
+ return (
+ CustomEntryPanel Component
- -
+
+ );
};
export default App;
diff --git a/CustomProfileModal/src/components/CustomProfileModal/CustomProfileModal.tsx b/CustomProfileModal/src/components/CustomProfileModal/CustomProfileModal.tsx
index 8f9a18fb..941bb41c 100644
--- a/CustomProfileModal/src/components/CustomProfileModal/CustomProfileModal.tsx
+++ b/CustomProfileModal/src/components/CustomProfileModal/CustomProfileModal.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import type React from "react";
+import { useState } from "react";
import Modal from "react-modal";
import styles from "./CustomProfileModal.module.scss";
@@ -6,114 +7,168 @@ import styles from "./CustomProfileModal.module.scss";
Modal.setAppElement("#ui-root");
interface CustomProfileModalProps {
- isOpen: boolean;
- onClose: () => void;
- displayName: string;
- bio: string;
- avatarId: string | undefined;
- avatarThumbnailUrl: string | undefined;
- selectedAvatarId: string | undefined;
- selectedAvatarThumbnailUrl: string | undefined;
- openAvatarSelectModal: () => void;
- saveProfile: ({
- displayName,
- bio,
- avatarId,
- }: {
- displayName?: string;
- bio?: string;
- avatarId?: string;
- }) => void;
+ isOpen: boolean;
+ onClose: () => void;
+ displayName: string;
+ bio: string;
+ avatarId: string | undefined;
+ avatarThumbnailUrl: string | undefined;
+ selectedAvatarId: string | undefined;
+ selectedAvatarThumbnailUrl: string | undefined;
+ openAvatarSelectModal: () => void;
+ saveProfile: ({
+ displayName,
+ bio,
+ avatarId,
+ }: {
+ displayName?: string;
+ bio?: string;
+ avatarId?: string;
+ }) => void;
}
export const CustomProfileModal: React.FCCustomEntryPanel Component
+ +
-
+
+
-
+ return (
+
-
-
- アバター設定
-
+
+
+
-
+
+
+ アバター設定
+
-
-
- );
+
+
+
+
+ {avatarThumbnailUrl === undefined ? (
+ 
+ )}
+
+
+
+
+
+ ) : (
+ Loading...
+
-
- );
+ return (
+ CustomTutorial Demo
-
- ReactionIcon
-
-
-
-
- Microphone
-
-
- Reaction
-
-
- Chat
-
-
-
-
-
+
+ );
};
export default App;
diff --git a/CustomTutorial/src/components/CustomTutorial/ChatContainer.tsx b/CustomTutorial/src/components/CustomTutorial/ChatContainer.tsx
index 71dddc20..16088da3 100644
--- a/CustomTutorial/src/components/CustomTutorial/ChatContainer.tsx
+++ b/CustomTutorial/src/components/CustomTutorial/ChatContainer.tsx
@@ -1,56 +1,58 @@
-import React from "react";
-
-import { ChatIcon } from "./icons/ChatIcon";
-
+import type React from "react";
import styles from "./ChatContainer.module.scss";
import commonStyles from "./common.module.scss";
+import { ChatIcon } from "./icons/ChatIcon";
import { useChatTutorial } from "./useChatTutorial";
type Props = {
- index: number;
- numberOfSteps: number;
- skipTutorial: () => void;
- stepIndex: number;
- run: boolean;
- setRun: React.DispatchCustomTutorial Demo
+
+ ReactionIcon
+
+
+
+
+ Microphone
+
+
+ Reaction
+
+
+ Chat
+
+
+
+
+
-
- );
+ return (
+
-
- Chat
-
- チャットで空間内の人に挨拶をしてみよう
-
- {`${(index + 1).toString()}/${numberOfSteps.toString()}`}
-
-
+
+ );
};
diff --git a/CustomTutorial/src/components/CustomTutorial/CongratulationsContainer.tsx b/CustomTutorial/src/components/CustomTutorial/CongratulationsContainer.tsx
index f7b46959..44aca1a2 100644
--- a/CustomTutorial/src/components/CustomTutorial/CongratulationsContainer.tsx
+++ b/CustomTutorial/src/components/CustomTutorial/CongratulationsContainer.tsx
@@ -1,42 +1,46 @@
-import React from "react";
+import type React from "react";
import commonStyles from "./common.module.scss";
import { useCongratulations } from "./useCongratulations";
type Props = {
- index: number;
- doneTutorial: () => void;
- stepIndex: number;
- run: boolean;
- setShowEffect: React.Dispatch
+
+ Chat
+
+ チャットで空間内の人に挨拶をしてみよう
+
+ {`${(index + 1).toString()}/${numberOfSteps.toString()}`}
+
+
-
- );
+ return (
+
-
-
- おめでとうございます🎉
- すべてのチュートリアルが完了しました。
-
+
+ );
};
diff --git a/CustomTutorial/src/components/CustomTutorial/CustomTutorial.tsx b/CustomTutorial/src/components/CustomTutorial/CustomTutorial.tsx
index d2bb6383..78ec15bf 100644
--- a/CustomTutorial/src/components/CustomTutorial/CustomTutorial.tsx
+++ b/CustomTutorial/src/components/CustomTutorial/CustomTutorial.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from "react";
+import type React from "react";
+import { useEffect, useState } from "react";
import Joyride from "react-joyride";
import { ChatContainer } from "./ChatContainer";
@@ -9,113 +10,113 @@ import { ReactionContainer } from "./ReactionContainer";
import { ReactionContainer2 } from "./ReactionContainer2";
type Props = {
- showMicrophone: boolean;
- showMegaphone: boolean;
- showVideo: boolean;
- showShare: boolean;
- showPlace: boolean;
- showReaction: boolean;
- showChat: boolean;
+ showMicrophone: boolean;
+ showMegaphone: boolean;
+ showVideo: boolean;
+ showShare: boolean;
+ showPlace: boolean;
+ showReaction: boolean;
+ showChat: boolean;
};
export const CustomTutorial: React.FC
+
+
+ おめでとうございます🎉
+ すべてのチュートリアルが完了しました。
+
- 0}
- hideCloseButton
- floaterProps={{ hideArrow: true }}
- styles={{
- options: {
- backgroundColor: "#121212",
- arrowColor: "#FFF",
- textColor: "white",
- },
- buttonNext: {
- display: "none",
- },
- }}
- steps={steps}
- stepIndex={stepIndex}
- continuous={true}
- disableOverlay={true}
- disableCloseOnEsc={true}
- disableOverlayClose={true}
- hideBackButton={true}
- />
-
- );
+ return (
+
+ 0}
+ hideCloseButton
+ floaterProps={{ hideArrow: true }}
+ styles={{
+ options: {
+ backgroundColor: "#121212",
+ arrowColor: "#FFF",
+ textColor: "white",
+ },
+ buttonNext: {
+ display: "none",
+ },
+ }}
+ steps={steps}
+ stepIndex={stepIndex}
+ continuous={true}
+ disableOverlay={true}
+ disableCloseOnEsc={true}
+ disableOverlayClose={true}
+ hideBackButton={true}
+ />
+
+ );
};
diff --git a/CustomTutorial/src/components/CustomTutorial/MicrophoneContainer.tsx b/CustomTutorial/src/components/CustomTutorial/MicrophoneContainer.tsx
index 9c7d6b04..6255b08a 100644
--- a/CustomTutorial/src/components/CustomTutorial/MicrophoneContainer.tsx
+++ b/CustomTutorial/src/components/CustomTutorial/MicrophoneContainer.tsx
@@ -1,57 +1,59 @@
-import React from "react";
-
+import type React from "react";
+import commonStyles from "./common.module.scss";
import { MicrophoneIcon } from "./icons/MicrophoneIcon";
import { MicrophoneMutedIcon } from "./icons/MicrophoneMutedIcon";
-
import styles from "./MicrophoneContainer.module.scss";
-import commonStyles from "./common.module.scss";
import { useMicrophoneTutorial } from "./useMicrophoneTutorial";
type Props = {
- index: number;
- numberOfSteps: number;
- skipTutorial: () => void;
- stepIndex: number;
- run: boolean;
- setRun: React.Dispatch
-
- );
+ useMicrophoneTutorial({
+ index,
+ run,
+ setRun,
+ stepIndex,
+ setStepIndex,
+ setShowEffect,
+ });
+ return (
+
-
-
- マイクをオンにして近くの人に話しかけてみよう
-
- {`${(index + 1).toString()}/${numberOfSteps}`}
-
-
+
+ );
};
diff --git a/CustomTutorial/src/components/CustomTutorial/ParticleEffect.tsx b/CustomTutorial/src/components/CustomTutorial/ParticleEffect.tsx
index 92103b88..0ee850b1 100644
--- a/CustomTutorial/src/components/CustomTutorial/ParticleEffect.tsx
+++ b/CustomTutorial/src/components/CustomTutorial/ParticleEffect.tsx
@@ -1,136 +1,137 @@
import { loadConfettiPreset } from "@tsparticles/preset-confetti";
import Particles, { initParticlesEngine } from "@tsparticles/react";
-import React, { useEffect, useState } from "react";
+import type React from "react";
+import { useEffect, useState } from "react";
type Props = {
- show: boolean;
- option: "single" | "flow";
+ show: boolean;
+ option: "single" | "flow";
};
type ParticlesOptions = React.ComponentProps
+
+
+ マイクをオンにして近くの人に話しかけてみよう
+
+ {`${(index + 1).toString()}/${numberOfSteps}`}
+
+
-
- );
+ return (
+
-
-
-
- React
-
- リアクションボタンを押してみよう
-
- {`${(stepIndex + 1).toString()}/${numberOfSteps.toString()}`}
-
-
+
+ );
};
diff --git a/CustomTutorial/src/components/CustomTutorial/ReactionContainer2.tsx b/CustomTutorial/src/components/CustomTutorial/ReactionContainer2.tsx
index b6889740..97e2568b 100644
--- a/CustomTutorial/src/components/CustomTutorial/ReactionContainer2.tsx
+++ b/CustomTutorial/src/components/CustomTutorial/ReactionContainer2.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
import emoji0 from "../../images/emoji0.png";
@@ -6,49 +6,53 @@ import commonStyles from "./common.module.scss";
import { useReactionTutorial2 } from "./useReactionTutorial2";
type Props = {
- index: number;
- numberOfSteps: number;
- skipTutorial: () => void;
- run: boolean;
- setRun: React.Dispatch
+
+
+
+ React
+
+ リアクションボタンを押してみよう
+
+ {`${(stepIndex + 1).toString()}/${numberOfSteps.toString()}`}
+
+
-
- );
+ return (
+
- 
-
-
- リアクションアイコンを押してみよう
-
- {`${(index + 1).toString()}/${numberOfSteps.toString()}`}
-
-
+
+ );
};
diff --git a/CustomTutorial/src/components/CustomTutorial/icons/ChatIcon.tsx b/CustomTutorial/src/components/CustomTutorial/icons/ChatIcon.tsx
index 74cc564a..b7329ef4 100644
--- a/CustomTutorial/src/components/CustomTutorial/icons/ChatIcon.tsx
+++ b/CustomTutorial/src/components/CustomTutorial/icons/ChatIcon.tsx
@@ -1,18 +1,18 @@
-import React from "react";
+import type React from "react";
export const ChatIcon: React.FC = () => {
- return (
-
- );
+ return (
+
+ );
};
diff --git a/CustomTutorial/src/components/CustomTutorial/icons/MicrophoneIcon.tsx b/CustomTutorial/src/components/CustomTutorial/icons/MicrophoneIcon.tsx
index 4068572a..657594df 100644
--- a/CustomTutorial/src/components/CustomTutorial/icons/MicrophoneIcon.tsx
+++ b/CustomTutorial/src/components/CustomTutorial/icons/MicrophoneIcon.tsx
@@ -1,18 +1,18 @@
-import React from "react";
+import type React from "react";
export const MicrophoneIcon: React.FC = () => {
- return (
-
- );
+ return (
+
+ );
};
diff --git a/CustomTutorial/src/components/CustomTutorial/icons/MicrophoneMutedIcon.tsx b/CustomTutorial/src/components/CustomTutorial/icons/MicrophoneMutedIcon.tsx
index 25e5abd1..e9a0568c 100644
--- a/CustomTutorial/src/components/CustomTutorial/icons/MicrophoneMutedIcon.tsx
+++ b/CustomTutorial/src/components/CustomTutorial/icons/MicrophoneMutedIcon.tsx
@@ -1,18 +1,18 @@
-import React from "react";
+import type React from "react";
export const MicrophoneMutedIcon: React.FC = () => {
- return (
-
- );
+ return (
+
+ );
};
diff --git a/CustomTutorial/src/components/CustomTutorial/icons/ReactionIcon.tsx b/CustomTutorial/src/components/CustomTutorial/icons/ReactionIcon.tsx
index 5ea42e14..8b5187e2 100644
--- a/CustomTutorial/src/components/CustomTutorial/icons/ReactionIcon.tsx
+++ b/CustomTutorial/src/components/CustomTutorial/icons/ReactionIcon.tsx
@@ -1,18 +1,18 @@
-import React from "react";
+import type React from "react";
export const ReactionIcon: React.FC = () => {
- return (
-
- );
+ return (
+
+ );
};
diff --git a/CustomTutorial/src/components/CustomTutorial/useChatTutorial.ts b/CustomTutorial/src/components/CustomTutorial/useChatTutorial.ts
index 79fdaca4..34237437 100644
--- a/CustomTutorial/src/components/CustomTutorial/useChatTutorial.ts
+++ b/CustomTutorial/src/components/CustomTutorial/useChatTutorial.ts
@@ -1,55 +1,55 @@
-import { useEffect, useRef, useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
export const useChatTutorial = ({
- index,
- run,
- setRun,
- stepIndex,
- setStepIndex,
- setShowEffect,
+ index,
+ run,
+ setRun,
+ stepIndex,
+ setStepIndex,
+ setShowEffect,
}: {
- index: number;
- run: boolean;
- setRun: React.Dispatch
+
+
+
+ リアクションアイコンを押してみよう
+
+ {`${(index + 1).toString()}/${numberOfSteps.toString()}`}
+
+
-
- );
+ return (
+ - CustomWebCameraButton Component -
-
+
+ );
};
export default App;
diff --git a/CustomWebCameraButton/src/components/CustomWebCameraButton/AvatarCameraIcon.tsx b/CustomWebCameraButton/src/components/CustomWebCameraButton/AvatarCameraIcon.tsx
index c744cf0c..74fd0bfb 100644
--- a/CustomWebCameraButton/src/components/CustomWebCameraButton/AvatarCameraIcon.tsx
+++ b/CustomWebCameraButton/src/components/CustomWebCameraButton/AvatarCameraIcon.tsx
@@ -1,23 +1,23 @@
-import React from "react";
+import type React from "react";
export const AvatarCameraIcon: React.FC = () => {
- return (
-
- );
+ return (
+
+ );
};
diff --git a/CustomWebCameraButton/src/components/CustomWebCameraButton/CameraIcon.tsx b/CustomWebCameraButton/src/components/CustomWebCameraButton/CameraIcon.tsx
index 84a5e9ba..73585914 100644
--- a/CustomWebCameraButton/src/components/CustomWebCameraButton/CameraIcon.tsx
+++ b/CustomWebCameraButton/src/components/CustomWebCameraButton/CameraIcon.tsx
@@ -1,20 +1,20 @@
-import React from "react";
+import type React from "react";
export const CameraIcon: React.FC = () => {
- return (
-
- );
+ return (
+
+ );
};
diff --git a/CustomWebCameraButton/src/components/CustomWebCameraButton/CustomWebCameraButton.tsx b/CustomWebCameraButton/src/components/CustomWebCameraButton/CustomWebCameraButton.tsx
index 3d8be77a..2e1d82f9 100644
--- a/CustomWebCameraButton/src/components/CustomWebCameraButton/CustomWebCameraButton.tsx
+++ b/CustomWebCameraButton/src/components/CustomWebCameraButton/CustomWebCameraButton.tsx
@@ -1,139 +1,142 @@
-import React, { useState, useEffect, useRef } from "react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
import { Tooltip } from "react-tooltip";
-
-import { VideoDisabledIcon } from "./VideoDisabledIcon";
-import { VideoEnabledIcon } from "./VideoEnabledIcon";
import { AvatarCameraIcon } from "./AvatarCameraIcon";
import { CameraIcon } from "./CameraIcon";
import styles from "./CustomWebCameraButton.module.scss";
+import { VideoDisabledIcon } from "./VideoDisabledIcon";
+import { VideoEnabledIcon } from "./VideoEnabledIcon";
interface CustomWebCameraButtonProps {
- isSharingCamera: boolean;
- canShareCamera: boolean;
- canShareCameraToAvatar: boolean;
- stopSharingCamera: () => void;
- startSharingCamera: () => void;
- startSharingCameraToAvatar: () => void;
+ isSharingCamera: boolean;
+ canShareCamera: boolean;
+ canShareCameraToAvatar: boolean;
+ stopSharingCamera: () => void;
+ startSharingCamera: () => void;
+ startSharingCameraToAvatar: () => void;
}
export const CustomWebCameraButton: React.FC+ CustomWebCameraButton Component +
+
-
- );
+ const content = (
+ Webカメラ
-
- {canShareCamera && (
-
- )}
- {canShareCameraToAvatar && (
-
- )}
-
-
+
+ );
- return (
- <>
-
- Webカメラ
+
+ {canShareCamera && (
+
+ )}
+ {canShareCameraToAvatar && (
+
+ )}
+
+
-
- {content}
-
-
-
- );
+ return (
+ <>
+
+
+
+ {content}
+
+
+
+ );
};
diff --git a/CustomWebCameraButton/src/components/CustomWebCameraButton/VideoDisabledIcon.tsx b/CustomWebCameraButton/src/components/CustomWebCameraButton/VideoDisabledIcon.tsx
index 61e13877..fdb09da7 100644
--- a/CustomWebCameraButton/src/components/CustomWebCameraButton/VideoDisabledIcon.tsx
+++ b/CustomWebCameraButton/src/components/CustomWebCameraButton/VideoDisabledIcon.tsx
@@ -1,18 +1,18 @@
-import React from "react";
+import type React from "react";
export const VideoDisabledIcon: React.FC = () => {
- return (
-
- );
+ return (
+
+ );
};
diff --git a/CustomWebCameraButton/src/components/CustomWebCameraButton/VideoEnabledIcon.tsx b/CustomWebCameraButton/src/components/CustomWebCameraButton/VideoEnabledIcon.tsx
index e3974421..5d37593a 100644
--- a/CustomWebCameraButton/src/components/CustomWebCameraButton/VideoEnabledIcon.tsx
+++ b/CustomWebCameraButton/src/components/CustomWebCameraButton/VideoEnabledIcon.tsx
@@ -1,20 +1,20 @@
-import React from "react";
+import type React from "react";
export const VideoEnabledIcon: React.FC = () => {
- return (
-
- );
+ return (
+
+ );
};
diff --git a/CustomWebCameraButton/src/main.tsx b/CustomWebCameraButton/src/main.tsx
index 04eb326c..07bfa7af 100644
--- a/CustomWebCameraButton/src/main.tsx
+++ b/CustomWebCameraButton/src/main.tsx
@@ -5,11 +5,11 @@ import App from "./App";
const rootElement = document.getElementById("ui-root");
if (!rootElement) {
- throw new Error("Root element not found");
+ throw new Error("Root element not found");
}
createRoot(rootElement).render(
-