From 7dc6fb27eac3eb82d20208d29b488a6f7fd5c69f Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 28 Jun 2022 15:08:14 +0100
Subject: [PATCH 1/3] Add embed mode

https://github.com/vector-im/element-call/commit/2db23e411074a9e2e0b4fc5d480a7f05abb9915c
from postmessage_ptt branch done in a slightly nicer way
---
 src/Header.jsx             | 16 +++++++++++++++-
 src/room/GroupCallView.jsx |  2 ++
 src/room/PTTCallView.tsx   |  5 ++++-
 src/room/RoomPage.jsx      |  5 +++--
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/Header.jsx b/src/Header.jsx
index d4f83e5..8edb173 100644
--- a/src/Header.jsx
+++ b/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} />
diff --git a/src/room/GroupCallView.jsx b/src/room/GroupCallView.jsx
index 4b84926..2d2d56b 100644
--- a/src/room/GroupCallView.jsx
+++ b/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 {
diff --git a/src/room/PTTCallView.tsx b/src/room/PTTCallView.tsx
index 2dbc07e..c9a7007 100644
--- a/src/room/PTTCallView.tsx
+++ b/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>
 
diff --git a/src/room/RoomPage.jsx b/src/room/RoomPage.jsx
index 73846e4..a1f175b 100644
--- a/src/room/RoomPage.jsx
+++ b/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>

From 761eee2cdca80d5cd25a326af8f8baa2bbfd7859 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 1 Jul 2022 13:10:08 +0100
Subject: [PATCH 2/3] Remove button props / style too

---
 src/Header.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Header.jsx b/src/Header.jsx
index 8edb173..c1cf771 100644
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -88,7 +88,7 @@ export function RoomSetupHeaderInfo({
 
   if (isEmbedded) {
     return (
-      <div className={styles.backButton} ref={ref} {...buttonProps}>
+      <div ref={ref}>
         <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
       </div>
     );

From 5ebdf3e878dbad059c24efe57fd78fcbabd33eea Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Fri, 1 Jul 2022 13:10:51 +0100
Subject: [PATCH 3/3] Use has on set

Co-authored-by: Robin <robin@robin.town>
---
 src/room/RoomPage.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/room/RoomPage.jsx b/src/room/RoomPage.jsx
index a1f175b..ae3c927 100644
--- a/src/room/RoomPage.jsx
+++ b/src/room/RoomPage.jsx
@@ -31,7 +31,7 @@ export function RoomPage() {
   const { hash, search } = useLocation();
   const [viaServers, isEmbedded] = useMemo(() => {
     const params = new URLSearchParams(search);
-    return [params.getAll("via"), params.get("embed") !== null];
+    return [params.getAll("via"), params.has("embed")];
   }, [search]);
   const roomId = (maybeRoomId || hash || "").toLowerCase();