Merge pull request #3849 from mozilla/bug/iframe-embed

Fix iframe embed support
Hubs-Foundation · Feb 3, 2021 · 307043e · 307043e
2 parents 6c10fab + 7a5ad47
commit 307043e
Show file tree

Hide file tree

Showing 5 changed files with 260 additions and 246 deletions.
diff --git a/src/assets/stylesheets/preload-overlay.scss b/src/assets/stylesheets/preload-overlay.scss
@@ -55,7 +55,3 @@
     width: 100%;
   }
 }
-
-:local(.load-button) {
-  @extend %action-button;
-}
diff --git a/src/react-components/preload-overlay.js b/src/react-components/preload-overlay.js
@@ -4,6 +4,7 @@ import { FormattedMessage } from "react-intl";
 
 import configs from "../utils/configs";
 import styles from "../assets/stylesheets/preload-overlay.scss";
+import { Button } from "./input/Button";
 
 const isMobile = AFRAME.utils.device.isMobile();
 
@@ -33,13 +34,13 @@ export default class PreloadOverlay extends Component {
           <div className={styles.hubName}>{this.props.hubName}</div>
           {this.props.onLoadClicked &&
             (!isMobile ? (
-              <button className={styles.loadButton} onClick={this.props.onLoadClicked}>
+              <Button preset="blue" onClick={this.props.onLoadClicked}>
                 {loadButtonText}
-              </button>
+              </Button>
             ) : (
-              <a href={this.props.baseUrl} target="_blank" className={styles.loadButton} rel="noreferrer noopener">
+              <Button preset="blue" as="a" href={this.props.baseUrl} target="_blank" rel="noreferrer noopener">
                 {loadButtonText}
-              </a>
+              </Button>
             ))}
         </div>
       </div>

diff --git a/src/react-components/room/InvitePopoverContainer.js b/src/react-components/room/InvitePopoverContainer.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import configs from "../../utils/configs";
+import { hubUrl } from "../../utils/phoenix-utils";
 import { InvitePopoverButton } from "./InvitePopover";
 import { handleExitTo2DInterstitial } from "../../utils/vr-interstitial";
 import { useInviteUrl } from "./useInviteUrl";
@@ -9,7 +10,7 @@ export function InvitePopoverContainer({ hub, hubChannel, scene, ...rest }) {
   // TODO: Move to Hub class
   const shortUrl = `https://${configs.SHORTLINK_DOMAIN}`;
   const url = `${shortUrl}/${hub.hub_id}`;
-  const embedUrl = `${location.protocol}//${location.host}${location.pathname}?embed_token=${hub.embed_token}`;
+  const embedUrl = hubUrl(hub.hub_id, { embed_token: hub.embed_token });
   const embedText = `<iframe src="${embedUrl}" style="width: 1024px; height: 768px;" allow="microphone; camera; vr; speaker;"></iframe>`;
   const code = hub.entry_code.toString().padStart(6, "0");
   const popoverApiRef = useRef();