{message ? (
intl.formatMessage(message)
) : (
-
+
+ Thanks for paying! You can also create rooms with these exclusive scenes:
+ ) : (
+
+
+ Sign up for Web Monetization
+ {" "}
+ to unlock exclusive scenes.
+
+ )}
+
+ {sent ? "You" : sender}
+
+ {formatMessageBody(messages[0].body).formattedBody}
+
+
+
+ {isFriend &&
-
+ {messages.map(message => proxyAndGetMessageComponent(message))}
+
+ {isLoading ? (
+ Loading...
+ ) : (
+
+ Load more
+
+ )}
+
+ )
+ );
+}
+
+export function ImmersPermissionUpgrade({ scope, role, children }) {
+ const { permissions, reAuthorize } = useContext(ImmersFeedContext);
+ if (permissions.includes(scope) || !reAuthorize) {
+ return null;
+ }
+ return (
+
+
+ );
+}
+
+ImmersPermissionUpgrade.propTypes = {
+ children: PropTypes.node,
+ scope: PropTypes.string,
+ role: PropTypes.string
+};
+
+export function ImmersPermissionUpgradeButton({ role }) {
+ const { reAuthorize } = useContext(ImmersFeedContext);
+ if (!reAuthorize) {
+ // initial auth has not occurred
+ return null;
+ }
+ return (
+ reAuthorize(role)}>
+ Reload & change
+
+ );
+}
+
+ImmersPermissionUpgradeButton.propTypes = {
+ role: PropTypes.string
+};
+
+export function ImmersClaimAccountModal({ scene, startImmersAuth, onClose }) {
+ const onAuthDone = ({ detail }) => {
+ if (detail === "immers-authorizing") {
+ scene.removeEventListener("stateremoved", onAuthDone);
+ onClose();
+ }
+ };
+ const handleClick = event => {
+ scene.addEventListener("stateremoved", onAuthDone);
+ startImmersAuth(event);
+ };
+ return (
+
+ {children}.
+ Create an account that you can use to login anywhere in the Immers Space metaverse. You'll save your current + avatar and be able to start adding friends. +
+ +
- {entry.type === "avatar" && (
+ {entry.type === "__disabled:avatar" && (
)}
{entry.type === "avatar_listing" &&
+ onCopy &&
entry.allow_remixing && (
)}
{entry.type === "scene_listing" &&
+ onCopy &&
entry.allow_remixing && (
+ {onlineMsg} onSelectPerson(person, e)}
+ disabled={person.remote}
>
+ {person.friendStatus &&
+
+ Need permission to load friends
+
+
);
diff --git a/src/react-components/room/PeopleSidebar.scss b/src/react-components/room/PeopleSidebar.scss
index 9a3344bff7..782a48b522 100644
--- a/src/react-components/room/PeopleSidebar.scss
+++ b/src/react-components/room/PeopleSidebar.scss
@@ -35,3 +35,13 @@
flex: 1;
justify-content: flex-end;
}
+
+:local(.image-icon-wrapper) {
+ width: 20px;
+ height: 20px;
+ overflow: hidden;
+}
+
+:local(.image-icon) {
+ width: 20px;
+}
diff --git a/src/react-components/room/PeopleSidebarContainer.js b/src/react-components/room/PeopleSidebarContainer.js
index 4e7c1df725..28b653c2bf 100644
--- a/src/react-components/room/PeopleSidebarContainer.js
+++ b/src/react-components/room/PeopleSidebarContainer.js
@@ -10,24 +10,63 @@ export function userFromPresence(sessionId, presence, micPresences, mySessionId)
const micPresence = micPresences.get(sessionId);
return { id: sessionId, isMe: mySessionId === sessionId, micPresence, ...meta };
}
-
-function usePeopleList(presences, mySessionId, micUpdateFrequency = 500) {
+// sometimes the mic presence timeout fails to clear
+let lastTimeout;
+function usePeopleList(presences, mySessionId, friends, micUpdateFrequency = 500) {
const [people, setPeople] = useState([]);
-
useEffect(
() => {
+ clearTimeout(lastTimeout);
let timeout;
+ const friendsAndPresences = Object.assign({}, presences);
+ const presenceFriendLookup = Object.fromEntries(
+ Object.entries(presences).map(([, presence]) => [
+ presence.metas[presence.metas.length - 1].profile.id,
+ presence
+ ])
+ );
+ friends.sort((a, b) => {
+ if (a.type === b.type) {
+ return 0;
+ }
+ if (a.type === "Leave") {
+ return 1;
+ }
+ return -1;
+ });
+ friends.forEach(friend => {
+ const localPresence = presenceFriendLookup[friend.actor.id];
+ if (localPresence) {
+ localPresence.metas[localPresence.metas.length - 1].friendStatus = friend;
+ } else {
+ friendsAndPresences[friend.id] = {
+ id: friend.actor.id,
+ metas: [
+ {
+ context: {},
+ profile: {
+ displayName: friend.actor.name
+ },
+ roles: {},
+ friendStatus: friend,
+ remote: true
+ }
+ ]
+ };
+ }
+ });
function updateMicrophoneState() {
const micPresences = getMicrophonePresences();
setPeople(
- Object.entries(presences).map(([id, presence]) => {
+ Object.entries(friendsAndPresences).map(([id, presence]) => {
return userFromPresence(id, presence, micPresences, mySessionId);
})
);
timeout = setTimeout(updateMicrophoneState, micUpdateFrequency);
+ lastTimeout = timeout;
}
updateMicrophoneState();
@@ -36,7 +75,7 @@ function usePeopleList(presences, mySessionId, micUpdateFrequency = 500) {
clearTimeout(timeout);
};
},
- [presences, micUpdateFrequency, setPeople, mySessionId]
+ [presences, friends, micUpdateFrequency, setPeople, mySessionId]
);
return people;
@@ -75,6 +114,7 @@ PeopleListContainer.propTypes = {
export function PeopleSidebarContainer({
hubChannel,
presences,
+ friends,
mySessionId,
displayNameOverride,
store,
@@ -84,7 +124,7 @@ export function PeopleSidebarContainer({
showNonHistoriedDialog,
onClose
}) {
- const people = usePeopleList(presences, mySessionId);
+ const people = usePeopleList(presences, mySessionId, friends);
const [selectedPersonId, setSelectedPersonId] = useState(null);
const selectedPerson = people.find(person => person.id === selectedPersonId);
const setSelectedPerson = useCallback(
@@ -137,6 +177,7 @@ PeopleSidebarContainer.propTypes = {
onClose: PropTypes.func.isRequired,
mySessionId: PropTypes.string.isRequired,
presences: PropTypes.object.isRequired,
+ friends: PropTypes.array.isRequired,
performConditionalSignIn: PropTypes.func.isRequired,
onCloseDialog: PropTypes.func.isRequired,
showNonHistoriedDialog: PropTypes.func.isRequired
diff --git a/src/react-components/room/RoomEntryModal.js b/src/react-components/room/RoomEntryModal.js
index 91e80ff536..2c45f84ebf 100644
--- a/src/react-components/room/RoomEntryModal.js
+++ b/src/react-components/room/RoomEntryModal.js
@@ -7,12 +7,14 @@ import { ReactComponent as EnterIcon } from "../icons/Enter.svg";
import { ReactComponent as VRIcon } from "../icons/VR.svg";
import { ReactComponent as ShowIcon } from "../icons/Show.svg";
import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
+import { ReactComponent as WMIcon } from "../icons/wm-icon.svg";
import { ReactComponent as HmcLogo } from "../icons/HmcLogo.svg";
import styles from "./RoomEntryModal.scss";
import styleUtils from "../styles/style-utils.scss";
import { useCssBreakpoints } from "react-use-css-breakpoints";
import { Column } from "../layout/Column";
import { FormattedMessage } from "react-intl";
+import { ImmersIcon } from "./ImmersReact";
import configs from "../../utils/configs";
export function RoomEntryModal({
@@ -20,6 +22,10 @@ export function RoomEntryModal({
logoSrc,
className,
roomName,
+ showLoginToImmers,
+ showGuestEntry,
+ onLoginToImmers,
+ onGuestEntry,
showJoinRoom,
onJoinRoom,
showEnterOnDevice,
@@ -28,6 +34,9 @@ export function RoomEntryModal({
onSpectate,
showOptions,
onOptions,
+ showRoomFull,
+ showMonetizationRequired,
+ showMonetized,
...rest
}) {
const breakpoint = useCssBreakpoints();
@@ -48,21 +57,51 @@ export function RoomEntryModal({
{getPersonName(person, intl)}
{person.roles.owner && ({getPresenceMessage(person.presence, intl)}
++ {getPresenceMessage(person.presence, intl) ?? getLocationMessage(person.friendStatus, myHandle, intl)} +
); })} +{roomName}
Login or create a free account to join this space
+ + )} + + ) : ( + <> + {showJoinRoom && ( + + )} + {showEnterOnDevice && ( + + )} + )} {showSpectate && ( )} +
+ {showMonetized && (
+ <>
+
+
{showOptions &&
breakpoint !== "sm" && (
<>
@@ -102,7 +165,9 @@ RoomEntryModal.propTypes = {
showSpectate: PropTypes.bool,
onSpectate: PropTypes.func,
showOptions: PropTypes.bool,
- onOptions: PropTypes.func
+ onOptions: PropTypes.func,
+ showMonetizationRequired: PropTypes.bool,
+ showMonetized: PropTypes.bool
};
RoomEntryModal.defaultProps = {
diff --git a/src/react-components/room/RoomEntryModal.scss b/src/react-components/room/RoomEntryModal.scss
index 0e50c90cdb..4bab1f4fee 100644
--- a/src/react-components/room/RoomEntryModal.scss
+++ b/src/react-components/room/RoomEntryModal.scss
@@ -10,6 +10,10 @@
@media(min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
padding: 24px;
}
+ p {
+ font-size: theme.$font-size-sm;
+ max-width: 275px;
+ }
}
:local(.logo-container) {
@@ -50,3 +54,12 @@
}
}
}
+
+:local(.webmon) {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ svg {
+ flex-shrink: 0;
+ }
+}
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index d44c9caace..1865061ef3 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -93,6 +93,13 @@ import { TweetModalContainer } from "./room/TweetModalContainer";
import { TipContainer, FullscreenTip } from "./room/TipContainer";
import { SpectatingLabel } from "./room/SpectatingLabel";
import { SignInMessages } from "./auth/SignInModal";
+import {
+ ImmersFeedContextProvider,
+ ImmersFeedSidebarContainer,
+ ImmersFeedToolbarButtonContainer,
+ ImmersRegisterToolbarButtonContainer
+} from "./room/ImmersFeedSidebarContainer";
+import { ImmersClaimAccountModal } from "./room/ImmersReact";
import { MediaDevicesEvents } from "../utils/media-devices-utils";
const avatarEditorDebug = qsTruthy("avatarEditorDebug");
@@ -139,6 +146,12 @@ class UIRoot extends Component {
isSupportAvailable: PropTypes.bool,
presenceLogEntries: PropTypes.array,
presences: PropTypes.object,
+ friends: PropTypes.array,
+ handle: PropTypes.string,
+ immersScopes: PropTypes.array,
+ isImmersConnected: PropTypes.bool,
+ startImmersAuth: PropTypes.func,
+ isMonetized: PropTypes.bool,
sessionId: PropTypes.string,
subscriptions: PropTypes.object,
initialIsFavorited: PropTypes.bool,
@@ -165,6 +178,12 @@ class UIRoot extends Component {
breakpoint: PropTypes.string
};
+ static defaultProps = {
+ friends: [],
+ immersScopes: [],
+ isImmersConnected: false
+ };
+
state = {
enterInVR: false,
entered: false,
@@ -194,9 +213,12 @@ class UIRoot extends Component {
videoShareMediaSource: null,
showVideoShareFailed: false,
+ guestEntry: false,
+
objectInfo: null,
objectSrc: "",
sidebarId: null,
+ hasUnreadFriendUpdate: false,
presenceCount: 0,
chatInputEffect: () => {}
};
@@ -261,6 +283,12 @@ class UIRoot extends Component {
});
}
+ if (prevProps.friends !== this.props.friends && this.state.sidebarId !== "people") {
+ this.setState({ hasUnreadFriendUpdate: true });
+ this.props.scene.addState("notification");
+ } else if (!this.state.hasUnreadFriendUpdate) {
+ this.props.scene.removeState("notification");
+ }
if (!this.props.selectedObject || !prevProps.selectedObject) {
const sceneEl = this.props.scene;
@@ -375,6 +403,7 @@ class UIRoot extends Component {
this.playerRig = scene.querySelector("#avatar-rig");
scene.addEventListener("action_media_tweet", this.onTweet);
+ scene.addEventListener("action_immers_register", this.onImmersRegister);
}
UNSAFE_componentWillMount() {
@@ -388,6 +417,7 @@ class UIRoot extends Component {
this.props.scene.removeEventListener("share_video_disabled", this.onShareVideoDisabled);
this.props.scene.removeEventListener("share_video_failed", this.onShareVideoFailed);
this.props.scene.removeEventListener("action_media_tweet", this.onTweet);
+ this.props.scene.removeEventListener("action_immers_register", this.onImmersRegister);
this.props.store.removeEventListener("statechanged", this.storeUpdated);
window.removeEventListener("concurrentload", this.onConcurrentLoad);
window.removeEventListener("idle_detected", this.onIdleDetected);
@@ -741,6 +771,19 @@ class UIRoot extends Component {
});
};
+ showImmersRegister = () => {
+ this.showNonHistoriedDialog(ImmersClaimAccountModal, {
+ startImmersAuth: this.props.startImmersAuth,
+ scene: this.props.scene
+ });
+ };
+
+ onImmersRegister = () => {
+ handleExitTo2DInterstitial(true, () => {}).then(() => {
+ this.showImmersRegister();
+ });
+ };
+
onChangeScene = () => {
this.props.performConditionalSignIn(
() => this.props.hubChannel.can("update_hub"),
@@ -807,7 +850,13 @@ class UIRoot extends Component {
renderEntryStartPanel = () => {
const { hasAcceptedProfile, hasChangedName } = this.props.store.state.activity;
const promptForNameAndAvatarBeforeEntry = this.props.hubIsBound ? !hasAcceptedProfile : !hasChangedName;
-
+ const pageIsMonetized = !!document.querySelector("meta[name=monetization]");
+ const showLogin = !this.props.isImmersConnected && !this.state.guestEntry;
+ const showGuestEntry = configs.IMMERS_ALLOW_GUESTS !== "false";
+ // monetized users can bypass room limit
+ const canEnter = !this.props.entryDisallowed || !!this.props.isMonetized;
+ // only show when joining is not possible to reduce number of choices shown
+ const canSpectate = !showLogin && !canEnter;
// TODO: What does onEnteringCanceled do?
return (
<>
@@ -815,7 +864,11 @@ class UIRoot extends Component {
appName={configs.translation("app-name")}
logoSrc={configs.image("logo")}
roomName={this.props.hub.name}
- showJoinRoom={!this.state.waitingOnAudio && !this.props.entryDisallowed}
+ showLoginToImmers={showLogin}
+ onLoginToImmers={this.props.startImmersAuth}
+ showGuestEntry={showGuestEntry}
+ onGuestEntry={() => this.setState({ guestEntry: !this.state.guestEntry })}
+ showJoinRoom={!this.state.waitingOnAudio && canEnter}
onJoinRoom={() => {
if (promptForNameAndAvatarBeforeEntry || !this.props.forcedVREntryType) {
this.setState({ entering: true });
@@ -831,9 +884,9 @@ class UIRoot extends Component {
this.handleForceEntry();
}
}}
- showEnterOnDevice={!this.state.waitingOnAudio && !this.props.entryDisallowed && !isMobileVR}
+ showEnterOnDevice={!this.state.waitingOnAudio && canEnter && !isMobileVR}
onEnterOnDevice={() => this.attemptLink()}
- showSpectate={!this.state.waitingOnAudio}
+ showSpectate={!this.state.waitingOnAudio && canSpectate}
onSpectate={() => this.setState({ watching: true })}
showOptions={this.props.hubChannel.canOrWillIfCreator("update_hub")}
onOptions={() => {
@@ -843,6 +896,11 @@ class UIRoot extends Component {
SignInMessages.roomSettings
);
}}
+ showRoomFull={!this.state.waitingOnAudio && !showLogin && this.props.entryDisallowed}
+ showMonetizationRequired={
+ !this.state.waitingOnAudio && pageIsMonetized && !showLogin && !this.props.isMonetized && !canEnter
+ }
+ showMonetized={!this.state.waitingOnAudio && !showLogin && this.props.isMonetized}
/>
{!this.state.waitingOnAudio && (
+ Thanks for paying! {showRoomFull && You can join this space even though it is full.}{" "} + Search for this icon in the space to find other premium features. +
+ + )} + {showMonetizationRequired && ( + <> ++ This space has no more free slots available.{" "} + + Sign up for Web Monetization + {" "} + to join anyway. +
+ + )} +
-
+ {toEmojis(message, { className: emojiClassName }).map( + (node, i) => (typeof node === "string" ? : node) + )} +
+ )); const multiline = messages.length > 1; diff --git a/src/utils/configs.js b/src/utils/configs.js index cec4bf3572..f35d3b6ab2 100644 --- a/src/utils/configs.js +++ b/src/utils/configs.js @@ -16,6 +16,9 @@ let isAdmin = false; "SENTRY_DSN", "GA_TRACKING_ID", "SHORTLINK_DOMAIN", + "IMMERS_SERVER", + "IMMERS_SCOPE", + "IMMERS_ALLOW_GUESTS", "BASE_ASSETS_PATH", "UPLOADS_HOST" ].forEach(x => { diff --git a/src/utils/hub-channel.js b/src/utils/hub-channel.js index 76a027f0c4..2328c6d304 100644 --- a/src/utils/hub-channel.js +++ b/src/utils/hub-channel.js @@ -60,7 +60,8 @@ export default class HubChannel extends EventTarget { // Returns true if the current session has the given permission, *or* will get the permission // if they sign in and become the creator. canOrWillIfCreator(permission) { - if (this._getCreatorAssignmentToken() && HUB_CREATOR_PERMISSIONS.includes(permission)) return true; + // immers: just show current perms; avoid showing options that aren't available + // if (this._getCreatorAssignmentToken() && HUB_CREATOR_PERMISSIONS.includes(permission)) return true; return this.can(permission); } @@ -142,6 +143,7 @@ export default class HubChannel extends EventTarget { // Note: token is not verified. this.token = token; this._permissions = jwtDecode(token); + this._permissions.pin_objects = this._permissions.pin_objects && this._signedIn; configs.setIsAdmin(this._permissions.postgrest_role === "ret_admin"); this.dispatchEvent(new CustomEvent("permissions_updated")); @@ -325,8 +327,8 @@ export default class HubChannel extends EventTarget { this.channel .push("sign_in", { token, creator_assignment_token }) .receive("ok", ({ perms_token }) => { - this.setPermissionsFromToken(perms_token); this._signedIn = true; + this.setPermissionsFromToken(perms_token); resolve(); }) .receive("error", err => { diff --git a/src/utils/immers.js b/src/utils/immers.js new file mode 100644 index 0000000000..d87e4521e6 --- /dev/null +++ b/src/utils/immers.js @@ -0,0 +1,516 @@ +import { ImmersClient } from "immers-client"; +import configs from "./configs"; +import { fetchAvatar } from "./avatar-utils"; +import { SOUND_CHAT_MESSAGE } from "../systems/sound-effects-system"; +import { setupMonetization } from "./immers/monetization"; +import immersMessageDispatch from "./immers/immers-message-dispatch"; +import Activities from "./immers/activities"; +const replaceArrays = { arrayMerge: (destinationArray, sourceArray) => sourceArray }; +const localImmer = configs.IMMERS_SERVER; +// immer can set a requested scope, but user can override +const preferredScope = configs.IMMERS_SCOPE; +console.log("immers.space client v1.10.1"); +const jsonldMime = "application/activity+json"; +export const immersClient = new ImmersClient(`${localImmer}/o/immer`, { + allowStorage: true, + localImmer +}); +const activities = new Activities(localImmer); +let homeImmer; +let place; +let token; +let authorizedScopes; +let hubScene; +let localPlayer; +let actorObj; +let handle; +let avatarsCollection; +let blockList; +// map of avatar urls to model objects to avoid recreating their AP representation +// when donned from personal avatars collection +const myAvatars = {}; + +// copy of URL used for sharing/authorization request +const hashParams = new URLSearchParams(window.location.hash.substring(1)); +if (hashParams.has("me")) { + handle = hashParams.get("me"); + // remove your handle before sharing with friends + window.location.hash = ""; +} +const hubUri = new URL(window.location); + +export function getUrlFromAvatar(avatar) { + const links = Array.isArray(avatar.url) ? avatar.url : [avatar.url]; + // prefer gltf + const gltfUrl = links.find(link => link.mediaType.includes("gltf")); + if (gltfUrl) { + return gltfUrl.href; + } + // gamble on a url of unkown type + return ImmersClient.URLFromProperty(links[0]); +} + +export function getAvatarFromActor(actorObj) { + if (!actorObj.avatar) { + return null; + } + const avatar = Array.isArray(actorObj.avatar) ? actorObj.avatar[0] : actorObj.avatar; + return getUrlFromAvatar(avatar); +} + +export async function getObject(IRI) { + if (IRI.startsWith(localImmer) || IRI.startsWith(homeImmer)) { + const headers = { Accept: jsonldMime }; + if (token) { + headers.Authorization = `Bearer ${token}`; + } + const result = await window.fetch(IRI, { headers }); + if (!result.ok) { + throw new Error(`Object fetch error ${result.message}`); + } + return result.json(); + } else { + throw new Error("Object fetch proxy not implemented"); + } +} + +export async function getActor() { + const response = await window.fetch(`${homeImmer}/auth/me`, { + headers: { + Accept: jsonldMime, + Authorization: `Bearer ${token}` + } + }); + if (!response.ok) { + throw new Error(`Error fetching actor ${response.status} ${response.statusText}`); + } + return response.json(); +} + +export function postActivity(outbox, activity) { + return window.fetch(outbox, { + method: "POST", + headers: { + "Content-Type": jsonldMime, + Authorization: `Bearer ${token}` + }, + body: JSON.stringify(activity) + }); +} + +export function updateProfile(actorObj, update) { + update.id = actorObj.id; + const activity = { + type: "Update", + actor: actorObj.id, + object: update, + to: actorObj.followers + }; + return postActivity(actorObj.outbox, activity); +} + +// Adds a new avatar to an immerser's inventory +export async function createAndUseAvatar(hubsAvatarId) { + const hubsAvatar = await fetchAvatar(hubsAvatarId); + const created = await immersClient.createAvatar( + hubsAvatar.name ?? "Imported avatar", + await fetch(hubsAvatar.gltf_url).then(res => res.blob()), + await fetch(hubsAvatar.files?.thumbnail || configs.image("logo")).then(res => res.blob()), + "friends" + ); + await immersClient.addAvatar(created); + await immersClient.useAvatar(created); + return (await immersClient.activities.getObject(created)).object; +} + +export async function fetchMyImmersAvatars(page) { + let collectionPage; + let items; + const hubsResult = { + meta: { + source: "avatar", + next_cursor: null + }, + entries: [], + suggestions: null + }; + if (!actorObj.streams?.avatars) { + return hubsResult; + } + try { + if (!avatarsCollection) { + // cache base collection object + avatarsCollection = await getObject(actorObj.streams.avatars); + } + // check if the collection is not paginated + items = avatarsCollection.orderedItems; + if (!items && avatarsCollection.first) { + // otherwise get page + collectionPage = await getObject(page || avatarsCollection.first); + items = collectionPage.orderedItems; + hubsResult.meta.next_cursor = collectionPage.next; + } + items.forEach(createActivity => { + const avatar = createActivity.object; + const avatarGltfUrl = ImmersClient.URLFromProperty(avatar); + // cache results for lookup by url when donned + myAvatars[avatarGltfUrl] = avatar; + // form object for Hubs MediaBrowser + const icon = Array.isArray(avatar.icon) ? avatar.icon[0] : avatar.icon; + hubsResult.entries.push({ + type: "avatar", + name: avatar.name, + // id used by hubs to set the avatar, put model url here + id: avatarGltfUrl, + images: { + preview: { + // width/height ignored for avatar media + url: ImmersClient.URLFromProperty(icon) + } + }, + // display source immer name & link in description field + attributions: { publisher: { name: avatar.generator?.name } }, + url: avatar.generator?.url || avatar.id + }); + }); + } catch (err) { + console.error("Cannot fetch avatar collection", err); + } + return hubsResult; +} + +export async function getFriends(actorObj) { + const response = await window.fetch(`${actorObj.id}/friends`, { + headers: { + Accept: jsonldMime, + Authorization: `Bearer ${token}` + } + }); + if (!response.ok) { + throw new Error(`Unable to fech friends: ${response.statusText}`); + } + return response.json(); +} + +function getAuthCallback(store, scope) { + return evt => { + // send to token endpoint at local immer, it handles + // detecting remote users and sending them on to their home to login + let _authPromise; + if (evt?.currentTarget?.classList.contains("registration")) { + let suggestedHandle; + if (store.state.activity.hasAcceptedProfile) { + // if registering after joining, pre-fill form with current name + suggestedHandle = `${store.state.profile.displayName}[${localImmer}]`; + } + _authPromise = immersClient.login(hubUri.origin, scope || preferredScope, suggestedHandle, "Register"); + } else { + _authPromise = immersClient.login(hubUri.origin, scope || preferredScope, handle || immersClient.handle); + } + hubScene.addState("immers-authorizing"); + return _authPromise.then(newToken => { + hubScene.removeState("immers-authorizing"); + token = newToken; + homeImmer = `https://${immersClient.profile.homeImmer}`; + authorizedScopes = immersClient.authorizedScopes; + return getActor(); + }); + }; +} + +// force re-login to change authorized scopes +async function resetAuth(store, remountUI, scope) { + token = undefined; + store.update({ + credentials: { + immerToken: null, + immerHome: null, + immerScopes: null + } + }); + immersClient.disconnect(); + getAuthCallback(store, scope)(); + await immersClient.waitUntilConnected(); + store.update({ + credentials: { + immerToken: token, + immerHome: homeImmer, + immerScopes: authorizedScopes + } + }); + // could, in theory, handle scope upgrades without reloading, but it would be a lot of work + return window.location.reload(); +} + +export async function initialize(store, scene, remountUI, messageDispatch, createInWorldLogMessage) { + hubScene = scene; + localPlayer = document.getElementById("avatar-rig"); + place = await getObject(`${localImmer}/o/immer`); + place.url = hubUri.href; // include room id + activities.place = place; + // check if we're already logged in + if (await immersClient.restoreSession()) { + token = store.state.credentials.immerToken; + homeImmer = `https://${immersClient.profile.homeImmer}`; + authorizedScopes = immersClient.authorizedScopes; + } else { + remountUI({ isImmersConnected: false, startImmersAuth: getAuthCallback(store) }); + await immersClient.waitUntilConnected(); + } + actorObj = immersClient.activities.actor; + activities.token = token; + activities.homeImmer = homeImmer; + activities.authorizedScopes = authorizedScopes; + activities.actor = actorObj; + // wait for hubs room metadata to load + if (!window.APP?.hub?.hub_id) { + await new Promise(resolve => { + hubScene.addEventListener("hub_updated", resolve, { once: true }); + }); + } + // set online status to here + immersClient.enter({ + name: APP.hub.name, + url: hubUri.href, + privacy: "friends", + previewImage: APP.hub.scene.screenshot_url + }); + const initialAvi = store.state.profile.avatarId; + const actorAvi = immersClient.profile.avatarModel; + // cache current avatar so doesn't get recreated during a profile update + myAvatars[actorAvi] = immersClient.profile.avatarObject; + store.update( + { + profile: { + id: immersClient.profile.id, + avatarId: actorAvi || initialAvi, + displayName: immersClient.profile.displayName, + handle: immersClient.profile.handle, + inbox: actorObj.inbox, + outbox: actorObj.outbox, + followers: actorObj.followers + }, + credentials: { + immerToken: token, + // record user's home server in case redirected during auth + immerHome: homeImmer, + immerScopes: authorizedScopes + } + }, + // don't accumulate scopes + replaceArrays + ); + // listen for changes makes in other apps or on profile page + immersClient.addEventListener("immers-client-profile-update", () => { + let anyUpdate = false; + const { avatarModel, displayName } = immersClient.profile; + const profile = {}; + if (avatarModel !== store.state.profile.avatarId) { + profile.avatarId = avatarModel; + anyUpdate = true; + } + if (displayName !== store.state.profile.displayName) { + profile.displayName = displayName; + anyUpdate = true; + } + if (anyUpdate) { + store.update({ profile }); + } + }); + + authorizedScopes.forEach(scope => hubScene.addState(`immers-scope-${scope}`)); + const immerSocket = immersClient.streaming.socket; + + // friends list + let friendsCol; + const setFriendState = (immersId, el) => { + // friends not loaded or is myself + if (!friendsCol || immersId === actorObj.id) { + return; + } + const friendStatus = friendsCol.orderedItems.find(act => act.actor.id === immersId); + // inReplyTo on a follow means it is a followback, don't show accept prompt (already a friend) + if (friendStatus?.type === "Follow" && !friendStatus?.inReplyTo) { + el.removeState("immers-follow-friend"); + el.removeState("immers-follow-none"); + el.addState("immers-follow-request"); + } else if (friendStatus && friendStatus.type !== "Reject") { + el.removeState("immers-follow-request"); + el.removeState("immers-follow-none"); + el.addState("immers-follow-friend"); + } else { + el.removeState("immers-follow-request"); + el.removeState("immers-follow-friend"); + el.addState("immers-follow-none"); + } + }; + const updateFriends = async () => { + if (store.state.profile.id) { + const profile = store.state.profile; + try { + friendsCol = await getFriends(profile); + activities.friends = friendsCol.orderedItems; + remountUI({ + friends: friendsCol.orderedItems.filter(act => act.type !== "Reject" && act.actor.id), + handle: profile.handle + }); + } catch (err) { + console.warn(err.message); + remountUI({ friends: [], handle: profile.handle }); + } + // update follow button for new friends + const players = window.APP.componentRegistry["player-info"]; + players?.forEach(infoComp => setFriendState(infoComp.data.immersId, infoComp.el)); + } + }; + updateFriends(); + immerSocket.on("friends-update", updateFriends); + + blockList = await activities.blockList(); + // hide any blocked users currently in the room + Object.entries(window.APP.hubChannel.presence.state).forEach(([clientId, presence]) => { + const immersId = presence.metas[presence.metas.length - 1]?.profile.id; + if (blockList.includes(immersId)) { + window.APP.hubChannel.hide(clientId); + } + }); + // hide blocked users as soon as they connect + scene.addEventListener("presence_updated", ({ detail: { sessionId, profile } }) => { + if (blockList.includes(profile.id)) { + window.APP.hubChannel.hide(sessionId); + } + }); + + const updateProfileNameAndAvi = async () => { + const { displayName, avatarId } = store.state.profile; + // disable the first-time entry name & avatar prompt + store.update({ + activity: { + hasChangedName: true + } + }); + if (!authorizedScopes.includes("creative")) { + return; + } + if (displayName !== immersClient.profile.displayName) { + await immersClient.updateProfileInfo({ displayName }); + } + if (immersClient.profile.avatarModel !== avatarId) { + if (myAvatars[avatarId]) { + await immersClient.useAvatar(myAvatars[avatarId]); + } else { + // caches new avatar under hubs id (unlike others that are cached by gltf url), + // which avoids re-creating the avatar if it is selected again during this session + myAvatars[avatarId] = await createAndUseAvatar(avatarId); + } + } + }; + scene.addEventListener("avatar_updated", updateProfileNameAndAvi); + // registered after joining, save selected avatar & name to profile + if (!actorAvi && store.state.activity.hasAcceptedProfile) { + updateProfileNameAndAvi(); + } + + // entity interactions + scene.addEventListener("immers-id-changed", event => setFriendState(event.detail, event.target)); + + scene.addEventListener("immers-follow", event => { + if (!event.detail) { + return; + } + activities.follow(event.detail).catch(err => console.error("Error sending follow request:", err.message)); + }); + scene.addEventListener("immers-follow-accept", event => { + const follow = friendsCol.orderedItems.find(act => act.actor.id === event.detail && act.type === "Follow"); + if (!follow) { + return; + } + activities.accept(follow).catch(err => console.err("Error sending follow accept:", err.message)); + }); + // unfriend + scene.addEventListener("immers-follow-reject", event => { + // server converts actorId to followId for reject object + activities.reject(event.detail, event.detail).catch(err => console.error("Error sending unfollow:", err.message)); + }); + // blocked + scene.addEventListener("immers-block", ({ detail: { clientId } }) => { + const presence = window.APP.hubChannel.presence.state[clientId]; + const immersId = presence?.metas[presence.metas.length - 1]?.profile.id; + if (immersId) { + activities.block(immersId); + // update local copy in case blocked user reconnects + blockList.push(immersId); + } + }); + + setupMonetization(hubScene, localPlayer, remountUI); + + // news feed and chat integration, behind a feature switch as it needs the new hubs ui + if (createInWorldLogMessage) { + // fetch news feed + const updateFeed = async () => { + const { messages, more } = await activities.feedAsChat(); + messages.forEach(detail => { + immersMessageDispatch.dispatchEvent(new CustomEvent("message", { detail })); + }); + return more; + }; + updateFeed(); + // event from "load more" button at top of in chat sidebar + window.addEventListener("immers-load-more-history", async () => { + const more = await updateFeed(); + window.dispatchEvent(new CustomEvent("immers-more-history-loaded", { detail: more })); + }); + + // stream new activity while in room + immerSocket.on("inbox-update", activity => { + activity = JSON.parse(activity); + const message = activities.activityAsChat(activity); + if (message.body) { + if (message.type !== "activity") { + // play sound for chat/image/video updates + scene.systems["hubs-systems"].soundEffectsSystem.playSoundOneShot(SOUND_CHAT_MESSAGE); + } + immersMessageDispatch.dispatchEvent(new CustomEvent("message", { detail: message })); + if (scene.is("vr-mode")) { + createInWorldLogMessage(message); + } + } + }); + immersMessageDispatch.setDispatchHandler(message => { + // include local room occupants + const localAudience = Object.values(window.APP.hubChannel.presence.state) + .map(presence => presence.metas[presence.metas.length - 1]?.profile.id) + .filter(id => id && id !== actorObj.id); + // send activity + let task; + switch (message.type) { + case "chat": + task = activities.note(message.body, localAudience, message.audience, null); + break; + case "image": + case "photo": + task = activities.image(message.body.src, localAudience, message.audience, null); + break; + case "video": + task = activities.video(message.body.src, localAudience, message.audience, null); + break; + default: + return console.log("Chat message not shared", message); + } + task + .then(async postResult => { + if (!postResult.ok) { + throw new Error(postResult.status); + } + // fetch the newly created activity and feed it back into chat system so your outgoing messages appear in panel + const chat = activities.activityAsChat(await getObject(postResult.headers.get("Location")), true); + immersMessageDispatch.dispatchEvent(new CustomEvent("message", { detail: chat })); + }) + .catch(err => console.error(`Error sharing chat: ${err.message}`)); + }); + const immersReAuth = scope => resetAuth(store, remountUI, scope); + hubScene.addState("immers-connected"); + remountUI({ immersMessageDispatch, immersScopes: authorizedScopes, isImmersConnected: true, immersReAuth }); + } +} diff --git a/src/utils/immers/activities.js b/src/utils/immers/activities.js new file mode 100644 index 0000000000..0feb28ee21 --- /dev/null +++ b/src/utils/immers/activities.js @@ -0,0 +1,278 @@ +import { ImmersClient } from "immers-client"; + +export default class Activities { + static JSONLDMime = "application/activity+json"; + static PublicAddress = "as:Public"; + constructor(localImmer) { + this.localImmer = localImmer; + this.homeImmer = null; + this.token = null; + this.authorizedScopes = null; + this.actor = null; + this.place = null; + this.nextInboxPage = null; + this.nextOutboxPage = null; + this.inboxStartDate = new Date(); + this.outboxStartDate = this.inboxStartDate; + this.friends = []; + } + + trustedIRI(IRI) { + return IRI.startsWith(this.localImmer) || IRI.startsWith(this.homeImmer); + } + + async getObject(IRI) { + if (this.trustedIRI(IRI)) { + const headers = { Accept: Activities.JSONLDMime }; + if (this.token) { + headers.Authorization = `Bearer ${this.token}`; + } + const result = await window.fetch(IRI, { headers }); + if (!result.ok) { + throw new Error(`Object fetch error ${result.message}`); + } + return result.json(); + } else { + throw new Error("Object fetch proxy not implemented"); + } + } + + async inbox() { + let col; + if (this.nextInboxPage === null) { + col = await this.getObject(this.actor.inbox); + if (!col.orderedItems && col.first) { + col = await this.getObject(col.first); + } + } else if (this.nextInboxPage) { + col = await this.getObject(this.nextInboxPage); + } + this.nextInboxPage = col?.next; + return col; + } + + async outbox() { + let col; + if (this.nextOutboxPage === null) { + col = await this.getObject(this.actor.outbox); + if (!col.orderedItems && col.first) { + col = await this.getObject(col.first); + } + } else if (this.nextOutboxPage) { + col = await this.getObject(this.nextOutboxPage); + } + this.nextOutboxPage = col?.next; + return col; + } + + async blockList() { + const blocked = []; + // use blocklist IRI if specified, fallback to immers default + const blockedIRI = this.actor.streams?.blocked || `${this.homeImmer}/blocked/${this.actor.preferredUsername}`; + let col; + try { + col = await this.getObject(blockedIRI); + } catch (err) { + console.warn("Unable to fetch blocklist: ", err.message); + return blocked; + } + if (col.orderedItems?.length) { + blocked.push(...col.orderedItems); + } else { + col = await this.getObject(col.first); + blocked.push(...col.orderedItems); + } + // fetch entire collection + while (col.next) { + col = await this.getObject(col.next); + if (!col.orderedItems?.length) { + break; + } + blocked.push(...col.orderedItems); + } + return blocked.map(b => (typeof b === "object" ? b.id : b)); + } + + async inboxAsChat() { + const inbox = await this.inbox(); + if (!inbox?.orderedItems?.length) { + return []; + } + this.inboxStartDate = new Date(inbox.orderedItems[inbox.orderedItems.length - 1].published); + return inbox.orderedItems.map(act => this.activityAsChat(act)).filter(message => message.body); + } + + async outboxAsChat() { + const outbox = await this.outbox(); + if (!outbox?.orderedItems?.length) { + return []; + } + this.outboxStartDate = new Date(outbox.orderedItems[outbox.orderedItems.length - 1].published); + return outbox.orderedItems.map(act => this.activityAsChat(act, true)).filter(message => message.body); + } + + async feedAsChat() { + const messages = (await this.inboxAsChat()).concat(await this.outboxAsChat()); + // try to balance amount of time covered by inbox & outbox feeds + if (this.inboxStartDate > this.outboxStartDate) { + while (this.inboxStartDate > this.outboxStartDate && this.nextInboxPage) { + messages.push(...(await this.inboxAsChat())); + } + } else { + while (this.outboxStartDate > this.inboxStartDate && this.nextOutboxPage) { + messages.push(...(await this.outboxAsChat())); + } + } + return { + messages, + more: this.nextOutboxPage || this.nextInboxPage + }; + } + + postActivity(activity) { + if (!this.trustedIRI(this.actor.outbox)) { + throw new Error("Inavlid outbox address"); + } + return window.fetch(this.actor.outbox, { + method: "POST", + headers: { + "Content-Type": Activities.JSONLDMime, + Authorization: `Bearer ${this.token}` + }, + body: JSON.stringify(activity) + }); + } + + accept(follow) { + return this.postActivity({ + type: "Accept", + actor: this.actor.id, + object: follow.id, + to: follow.actor + }); + } + + reject(objectId, recipientId) { + return this.postActivity({ + type: "Reject", + actor: this.actor.id, + object: objectId, + to: recipientId + }); + } + + follow(targetId) { + return this.postActivity({ + type: "Follow", + actor: this.actor.id, + object: targetId, + to: targetId + }); + } + + note(content, to, audience, summary) { + const obj = { + content, + type: "Note", + attributedTo: this.actor.id, + context: this.place, + to: to.slice() + }; + if (summary) { + obj.summary = summary; + } + if (audience === "friends" || audience === "public") { + obj.to.push(this.actor.followers); + } + if (audience === "public") { + obj.to.push(Activities.PublicAddress); + } + return this.postActivity(obj); + } + + image(url, to, audience, summary) { + const obj = { + url, + type: "Image", + attributedTo: this.actor.id, + context: this.place, + to: to.slice() + }; + if (summary) { + obj.summary = summary; + } + if (audience === "friends" || audience === "public") { + obj.to.push(this.actor.followers); + } + if (audience === "public") { + obj.to.push(Activities.PublicAddress); + } + return this.postActivity(obj); + } + + video(url, to, audience, summary) { + const obj = { + url, + type: "Video", + attributedTo: this.actor.id, + context: this.place, + to: to.slice() + }; + if (summary) { + obj.summary = summary; + } + if (audience === "friends" || audience === "public") { + obj.to.push(this.actor.followers); + } + if (audience === "public") { + obj.to.push(Activities.PublicAddress); + } + return this.postActivity(obj); + } + + block(blockeeId) { + return this.postActivity({ + type: "Block", + actor: this.actor.id, + object: blockeeId + }); + } + + activityAsChat(activity, outbox = false) { + if (outbox) { + // avoid apex api inconsistency that returns actor as id string for direct activity fetch + activity.actor = this.actor; + } + const message = { + isImmersFeed: true, + isFriend: this.friends.some(status => status.actor.id === activity.actor.id), + sent: outbox, + context: activity.object?.context, + timestamp: new Date(activity.published).getTime(), + name: activity.actor.name, + sessionId: activity.actor.id, + icon: activity.actor.icon, + immer: new URL(activity.actor.id).hostname + }; + switch (activity.object?.type) { + case "Note": + message.type = "chat"; + message.body = activity.object.content; + break; + case "Image": + message.type = "photo"; + message.body = { src: ImmersClient.URLFromProperty(activity.object.url) }; + break; + case "Video": + message.type = "video"; + message.body = { src: ImmersClient.URLFromProperty(activity.object.url) }; + break; + default: + if (activity.type === "Arrive" || activity.type === "Leave") { + message.type = "activity"; + message.body = activity.summary; + } + } + return message; + } +} diff --git a/src/utils/immers/authUtils.js b/src/utils/immers/authUtils.js new file mode 100644 index 0000000000..93e908545a --- /dev/null +++ b/src/utils/immers/authUtils.js @@ -0,0 +1,32 @@ +export const allScopes = [ + "viewProfile", + "viewPublic", + "viewFriends", + "postLocation", + "viewPrivate", + "creative", + "addFriends", + "addBlocks", + "destructive" +]; + +export function catchToken() { + const hashParams = new URLSearchParams(window.location.hash.substring(1)); + if (hashParams.has("access_token")) { + // not safe to update store here, will be saved later in initialize() + const token = hashParams.get("access_token"); + const homeImmer = hashParams.get("issuer"); + const authorizedScopes = hashParams.get("scope")?.split(" ") || []; + window.location.hash = ""; + // If this is an oauth popup, pass the results back up and close + // todo check origin + if (window.opener) { + window.opener.postMessage({ + type: "ImmersAuth", + token, + homeImmer, + authorizedScopes + }); + } + } +} diff --git a/src/utils/immers/immers-message-dispatch.js b/src/utils/immers/immers-message-dispatch.js new file mode 100644 index 0000000000..c3e7d2edd4 --- /dev/null +++ b/src/utils/immers/immers-message-dispatch.js @@ -0,0 +1,11 @@ +class ImmersMessageDispatch extends EventTarget { + setDispatchHandler(dispatchHandler) { + this.dispatchHandler = dispatchHandler; + } + + dispatch(message) { + this.dispatchHandler(message); + } +} + +export default new ImmersMessageDispatch(); diff --git a/src/utils/immers/monetization.js b/src/utils/immers/monetization.js new file mode 100644 index 0000000000..e5f4e24e92 --- /dev/null +++ b/src/utils/immers/monetization.js @@ -0,0 +1,85 @@ +/* Handles monetization feature-checking, api, and initialization race. + * Immers creators can listen for events on the scene that are guaranteed to + * occur after initial scene and entity load. Monetization status is synced to + * the room currently via player-info. This has two limitations, 1) easy to spoof + * and 2) doesn't sync while players are still in lobby. A better implemenation + * would be to extend the reticulum server to support this over hubChannel. + * + * Events (emitted from scene element): + * immers-monetization-started - local user monetization began/resumed + * immers-monetization-stopped - local user monetization ceased + * immers-monetization-progress - local user micropayment received. + * detail: + * amount: Number, amount received on this transation + * totalAmoint: Number, amount received so far during this session + * currency: String, currency of the transation + */ +import "web-monetization-polyfill"; + +const monetization = { + amountPaid: 0, + currency: undefined, + state: undefined +}; +let localPlayer; +let hubScene; +let updateUI; + +// sync player's monetization status with room via player-info component +function onMonetizationStart() { + monetization.state = "started"; + localPlayer.setAttribute("player-info", { monetized: true }); + hubScene.emit("immers-monetization-started"); + updateUI({ isMonetized: true }); +} +function onMonetizationStop() { + monetization.state = "stopped"; + localPlayer.setAttribute("player-info", { monetized: false }); + hubScene.emit("immers-monetization-stopped"); + updateUI({ isMonetized: false }); +} + +// tallies total amount paid during curent session +// (no cross-session tracking is permitted) +function onMonetizationProgress(event) { + const amount = Number.parseInt(event.detail.amount) * Math.pow(10, -event.detail.assetScale); + if (amount) { + monetization.amountPaid += amount; + monetization.currency = event.detail.assetCode; + hubScene.emit("immers-monetization-progress", { + amount, + totalAmount: monetization.amountPaid, + currency: monetization.currency + }); + } +} + +function onSceneLoaded() { + if (document.monetization.state === "started") { + onMonetizationStart(); + } else { + onMonetizationStop(); + } + document.monetization.addEventListener("monetizationstart", onMonetizationStart); + document.monetization.addEventListener("monetizationstop", onMonetizationStop); + document.monetization.addEventListener("monetizationprogress", onMonetizationProgress); +} + +// wait until scene is fully loaded to trigger monetization events so creators don't +// have to worry about whether entities are loaded +export function setupMonetization(scene, player, remountUI) { + hubScene = scene; + localPlayer = player; + updateUI = remountUI; + if (hubScene.is("loaded")) { + onSceneLoaded(); + } else { + const sceneStateListener = ({ detail }) => { + if (detail === "loaded") { + onSceneLoaded(); + hubScene.removeEventListener("stateadded", sceneStateListener); + } + }; + hubScene.addEventListener("stateadded", sceneStateListener); + } +} diff --git a/webpack.config.js b/webpack.config.js index 48e5570135..1ab2b62366 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -676,6 +676,9 @@ module.exports = async (env, argv) => { SENTRY_DSN: process.env.SENTRY_DSN, GA_TRACKING_ID: process.env.GA_TRACKING_ID, POSTGREST_SERVER: process.env.POSTGREST_SERVER, + IMMERS_SERVER: process.env.IMMERS_SERVER, + IMMERS_SCOPE: process.env.IMMERS_SCOPE, + IMMERS_ALLOW_GUESTS: process.env.IMMERS_ALLOW_GUESTS, UPLOADS_HOST: process.env.UPLOADS_HOST, BASE_ASSETS_PATH: process.env.BASE_ASSETS_PATH, APP_CONFIG: appConfig