Merge pull request #6510 from DougReeder/vr-invite

HUD Invite button: fixes by calling Web Share API directly

src/components/in-world-hud.js

@@ -1,4 +1,8 @@
 import { SOUND_SPAWN_PEN } from "../systems/sound-effects-system";
+import { shareInviteUrl } from "../utils/share";
+import { hubUrl } from "../utils/phoenix-utils";
+import configs from "../utils/configs";
+import { handleExitTo2DInterstitial } from "../utils/vr-interstitial";
 /**
  * HUD panel for muting, freezing, and other controls that don't necessarily have hardware buttons.
  * @namespace ui
@@ -54,12 +58,28 @@ AFRAME.registerComponent("in-world-hud", {
       this.el.emit("action_toggle_camera");
     };
 
-    this.onInviteClick = () => {
-      this.el.emit("action_invite");
+    this.onInviteClick = async event => {
+      try {
+        const extraParams =
+          APP.hub.entry_mode === "invite" ? { hub_invite_id: (await APP.hubChannel.fetchInvite()).hub_invite_id } : {};
+        const url = hubUrl(APP.hub.hub_id, extraParams).href;
+        const didShare = await shareInviteUrl(
+          null,
+          url,
+          { roomName: APP.hub.name, appName: configs.translation("app-name") },
+          true,
+          event
+        );
+        if (didShare) {
+          await handleExitTo2DInterstitial(false, () => {}, true);
+        }
+      } catch (error) {
+        console.error(`while inviting (using HUD):`, error);
+      }
     };
 
     this.onHubUpdated = e => {
-      this.inviteBtn.object3D.visible = e.detail.hub.entry_mode !== "invite";
+      this.inviteBtn.object3D.visible = e.detail.hub.entry_mode !== "invite" || APP.hubChannel.can("update_hub");
     };
   },
 

src/react-components/room/InvitePopoverContainer.js

@@ -25,7 +25,7 @@ export function InvitePopoverContainer({ hub, hubChannel, scene, store, ...rest
 
   const popoverApiRef = useRef();
 
-  // Handle clicking on the invite button while in VR.
+  // Handle clicking on the invite button in "More" menu.
   useEffect(() => {
     function onInviteButtonClicked() {
       handleExitTo2DInterstitial(true, () => {}).then(() => {

src/utils/share.js

@@ -28,8 +28,8 @@ export function share(opts) {
 
 export async function shareInviteUrl(intl, url, values = {}, inEnglish = false, event) {
   try {
-    event.preventDefault();
-    event.stopPropagation();
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
     if (inEnglish) {
       const cache = createIntlCache(); // prevents memory leak
       intl = createIntl({ locale: "en", messages: {} }, cache);
@@ -55,7 +55,9 @@ export async function shareInviteUrl(intl, url, values = {}, inEnglish = false,
     const data = { title, text, url };
     console.info(`attempting to share:`, data);
     await share(data);
+    return true;
   } catch (error) {
     console.error("unable to share:", error);
+    return false;
   }
 }