Add embed mode

2db23e4110
from postmessage_ptt branch done in a slightly nicer way

src/Header.jsx

@@ -77,9 +77,23 @@ export function RoomHeaderInfo({ roomName, avatarUrl }) {
   );
 }
 
-export function RoomSetupHeaderInfo({ roomName, avatarUrl, ...rest }) {
+export function RoomSetupHeaderInfo({
+  roomName,
+  avatarUrl,
+  isEmbedded,
+  ...rest
+}) {
   const ref = useRef();
   const { buttonProps } = useButton(rest, ref);
+
+  if (isEmbedded) {
+    return (
+      <div className={styles.backButton} ref={ref} {...buttonProps}>
+        <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
+      </div>
+    );
+  }
+
   return (
     <button className={styles.backButton} ref={ref} {...buttonProps}>
       <ArrowLeftIcon width={16} height={16} />

src/room/GroupCallView.jsx

@@ -30,6 +30,7 @@ import { useLocationNavigation } from "../useLocationNavigation";
 export function GroupCallView({
   client,
   isPasswordlessUser,
+  isEmbedded,
   roomId,
   groupCall,
 }) {
@@ -92,6 +93,7 @@ export function GroupCallView({
           participants={participants}
           userMediaFeeds={userMediaFeeds}
           onLeave={onLeave}
+          isEmbedded={isEmbedded}
         />
       );
     } else {

src/room/PTTCallView.tsx

@@ -93,6 +93,7 @@ interface Props {
   participants: RoomMember[];
   userMediaFeeds: CallFeed[];
   onLeave: () => void;
+  isEmbedded: boolean;
 }
 
 export const PTTCallView: React.FC<Props> = ({
@@ -104,6 +105,7 @@ export const PTTCallView: React.FC<Props> = ({
   participants,
   userMediaFeeds,
   onLeave,
+  isEmbedded,
 }) => {
   const { modalState: inviteModalState, modalProps: inviteModalProps } =
     useModalTriggerState();
@@ -176,6 +178,7 @@ export const PTTCallView: React.FC<Props> = ({
             roomName={roomName}
             avatarUrl={avatarUrl}
             onPress={onLeave}
+            isEmbedded={isEmbedded}
           />
         </LeftNav>
         <RightNav />
@@ -203,7 +206,7 @@ export const PTTCallView: React.FC<Props> = ({
             feedbackModalState={feedbackModalState}
             feedbackModalProps={feedbackModalProps}
           />
-          <HangupButton onPress={onLeave} />
+          {!isEmbedded && <HangupButton onPress={onLeave} />}
           <InviteButton onPress={() => inviteModalState.open()} />
         </div>
 

src/room/RoomPage.jsx

@@ -29,9 +29,9 @@ export function RoomPage() {
 
   const { roomId: maybeRoomId } = useParams();
   const { hash, search } = useLocation();
-  const [viaServers] = useMemo(() => {
+  const [viaServers, isEmbedded] = useMemo(() => {
     const params = new URLSearchParams(search);
-    return [params.getAll("via")];
+    return [params.getAll("via"), params.get("embed") !== null];
   }, [search]);
   const roomId = (maybeRoomId || hash || "").toLowerCase();
 
@@ -56,6 +56,7 @@ export function RoomPage() {
             roomId={roomId}
             groupCall={groupCall}
             isPasswordlessUser={isPasswordlessUser}
+            isEmbedded={isEmbedded}
           />
         )}
       </GroupCallLoader>