profile
viewpoint
Robert Long robertlong @Mozilla San Francisco http://robertlong.me Software Engineer. Working on VR tools. WebVR, React, robotics, Unity3d, JS/C#/Rust

mozilla/hubs 863

Duck-themed multi-user virtual spaces in WebVR. Built with A-Frame.

KhronosGroup/UnityGLTF 826

Runtime GLTF Loader for Unity3D

ecsyjs/ecsy 727

Entity Component System for javascript

mozilla/Spoke 277

Easily create custom 3D environments

mozilla/reticulum 126

Phoenix web server for hubs.mozilla.com

ecsyjs/ecsy-three 51

ECSY and three.js components, systems and helpers

mozilla/naf-janus-adapter 16

networked-aframe Janus network adapter

PR opened mozilla/hubs

Room UI Redesign: Add inspect other player behavior

@brianpeiris brought up that you can inspect other players by right clicking. I was unaware of that at the time. This PR fixes that behavior and adds a hide button when inspecting other behaviors.

+74 -14

0 comment

2 changed files

pr created time in 3 hours

create barnchmozilla/hubs

branch : redesign/inspect-player

created branch time in 3 hours

PR opened mozilla/hubs

Room UI Redesign: Sign In Modal / Auth UI Refactor

This was originally going to be a fairly straightforward port of the sign in dialog to the new modal design, but it turned into a lot more than that.

This is the first closable modal so I moved the Close/Back buttons out of the Sidebar file and into their own files. I cleaned up some of the css to make the buttons work in both Modals and Sidebars.

Then I noticed that the code for the sign in dialog was nearly identical to the code in the sign in page. So I attempted to dry up that code. In doing so I wanted to make sure that I could test these components in Storybook which required me to make all of the login page components into presentational and container components. I also did this for the verify page at the same time. It was a lot of work, but now we can test the login modals in both the room and auth page views.

I also removed the showSignInModal function from ui-root.js. As far as I could tell there is no flow that would bring you to the avatar editor in a non-signed in state. There is a showContextualSignInDialog guard in hub.js that ensures that you are signed in when navigating to the avatar editor. I thought, perhaps you could use the browser back navigation to get into this state if you were signed in, signed out, and hit back. However, that doesn't seem to cause any issues.

+987 -865

0 comment

50 changed files

pr created time in 5 hours

push eventmozilla/hubs

Robert Long

commit sha eb1b844d7ed582af9d4471b374e71876a4409dd8

Remove sign-in-dialog

view details

push time in 5 hours

create barnchmozilla/hubs

branch : redesign/login-modal

created branch time in 5 hours

PR opened mozilla/hubs

Room UI Redesign: Room Info Sidebar

This PR migrates the room info dialog to the new redesign.

+147 -231

0 comment

5 changed files

pr created time in a day

create barnchmozilla/hubs

branch : redesign/room-info

created branch time in 2 days

push eventmozilla/hubs

Robert Long

commit sha 9797defbbe7c7df6797d18b7034b3e467c1b7510

Add description to toggle input

view details

push time in 2 days

PR opened mozilla/hubs

Room UI Redesign: Room Settings Sidebar

This PR migrates the Room Settings Dialog to a sidebar and uses the new design system. This PR also adds the NumericInput and RadioInput components which are used in the sidebar.

+574 -297

0 comment

15 changed files

pr created time in 2 days

push eventmozilla/hubs

Robert Long

commit sha cf709b4fc12c7132e335a9ba2fbc8b883ce5db02

Remove unused 2d-hud code

view details

Robert Long

commit sha 5368f1daf6a0487d1d38572fa8228cc7d7bc89f6

Remove svgi usage

view details

push time in 2 days

create barnchmozilla/hubs

branch : redesign/room-settings

created branch time in 2 days

push eventmozilla/hubs

Robert Long

commit sha e9a5ec5f79762615b752f4f626c321949e2dd2f7

Add additional toolbar icons

view details

Robert Long

commit sha 29caf0ce69e22d17867276e2fe424baf3bf35f91

Stub out PlacePopover and SharePopover

view details

Robert Long

commit sha f757d6f8aad6ccc029a535bbdb392c302b40a3e4

Add place popover item logic

view details

Robert Long

commit sha c35203d9883b3bc8552f570407762ad3cb138814

Add SharePopover functionality

view details

Robert Long

commit sha 0501465eaebfac3881a5ed521ba47a21ab6747ba

Add permissions to PlacePopover

view details

Robert Long

commit sha adfc22bc349f92aba7fb4731831bf17ad3551734

Fix prop types for popovers

view details

Robert Long

commit sha 8ecd1a2ac23c1d751b30d246e3a0a0ab824edb93

Add VoiceButtonContainer logic

view details

Robert Long

commit sha f5ed3beae32d4c8fb382ab50fe0315d56247cca7

Add leave room functionality

view details

Robert Long

commit sha 1fcb722cdc02c8e68b069cc9202ad1376292c3f6

Remove leave button from pause screen

view details

Robert Long

commit sha a7a057c856d6991ea8008f34a2e9960eec83950e

Fix pen/camera state in place menu

view details

Robert Long

commit sha 175d1ae5805629699ba03594673eb83054094d97

Add React button functionality

view details

Robert Long

commit sha e3825be8be86c343acb562f02bdd32f64ddaae8d

Fix linting

view details

Robert Long

commit sha 7159d67ccc84d6dfccf7bf3b1590275f04092367

Merge branch 'room-ui-redesign' into redesign/toolbar-buttons

view details

Robert Long

commit sha 8adfe267f8350ed62be2c1c65a00f70d51aa95cd

Fix PR feedback

view details

Robert Long

commit sha 366e3a21ba7ba98d5ea63a258b41c559f33c6d87

Merge pull request #3206 from mozilla/redesign/toolbar-buttons Room UI Redesign: Toolbar Buttons / Menus

view details

push time in 2 days

delete branch mozilla/hubs

delete branch : redesign/toolbar-buttons

delete time in 2 days

PR merged mozilla/hubs

Room UI Redesign: Toolbar Buttons / Menus

This PR includes the functionality for the share popover, place popover, reaction/emoji menu, and leave button.

I'm not a huge fan of the way the reaction/emoji menu turned out. The original plan for phase one of the redesign was to use the existing menu but this puts you into freeze mode. I think we should go with this concept instead:

image

When you click one of the emojis, it'll spawn in the world and you can still grab it.

+588 -234

1 comment

22 changed files

robertlong

pr closed time in 2 days

push eventmozilla/hubs

Robert Long

commit sha 8adfe267f8350ed62be2c1c65a00f70d51aa95cd

Fix PR feedback

view details

push time in 2 days

Pull request review commentmozilla/hubs

Room UI Redesign: Toolbar Buttons / Menus

 AFRAME.registerComponent("mute-mic", {     if (!NAF.connection.adapter) return;     if (!this.el.sceneEl.is("entered")) return; -    this.el.sceneEl.systems["hubs-systems"].soundEffectsSystem.playSoundOneShot(SOUND_TOGGLE_MIC);

Hmm, good point. I'll add it back.

robertlong

comment created time in 2 days

PullRequestReviewEvent
PullRequestReviewEvent

issue openedmozilla/hubs

Room UI Redesign: Spawning Chat Messages

Currently you can spawn chat messages by pressing the magic wand button in the chat bar or by clicking the magic wand button next to a chat bubble. In the redesign, we've preserved these two features, but haven't yet added the ability to chat bubbles in the chat sidebar. We should think through the use cases for spawning chat messages and how to best implement this behavior.

Some things to keep in mind:

  • Spawning media messages
  • Spawning emojis
  • Spawning links or media using urls

We also have the place menu which can take on some of these responsibilities. We need to determine what is the best UX given the intended use cases.

created time in 2 days

pull request commentmozilla/hubs

Room UI Redesign: Toolbar Buttons / Menus

I want to cover the reactions/emojis issues in detail in another PR. But I agree with all of these concerns.

I've created two issues to cover the Reactions menu and emojis in chat. I think these are two separate issues and deserve two separate spots in the UI. However, we need to discuss how each of them will work.

https://github.com/mozilla/hubs/issues/3232 https://github.com/mozilla/hubs/issues/3233

robertlong

comment created time in 2 days

issue openedmozilla/hubs

Room UI Redesign: Chat Emoji Menu

created time in 2 days

issue openedmozilla/hubs

Room UI Redesign: Reaction Menu Behavior

created time in 2 days

PullRequestReviewEvent

Pull request review commentmozilla/hubs

Room UI Redesign: Toolbar Buttons / Menus

 import { Popover } from "../popover/Popover"; import { ToolbarButton } from "../input/ToolbarButton"; import { ReactComponent as ObjectIcon } from "../icons/Object.svg"; -export function PlacePopoverButton({ items, onSelect }) {+export function PlacePopoverButton({ items }) {

I'll bring this up with DPX. Thanks for flagging this :+1:

robertlong

comment created time in 2 days

Pull request review commentmozilla/hubs

Room UI Redesign: Toolbar Buttons / Menus

+import { waitForDOMContentLoaded } from "../utils/async-utils";++// Used for tracking and managing pen tools in the scene+AFRAME.registerSystem("pen-tools", {

I like the current implementation because it allows for removing a pen that you own but have dropped. Also this code is a direct copy of the camera-tools system.

robertlong

comment created time in 2 days

PullRequestReviewEvent

Pull request review commentmozilla/hubs

Room UI Redesign: Toolbar Buttons / Menus

 AFRAME.registerComponent("mute-mic", {     if (!NAF.connection.adapter) return;     if (!this.el.sceneEl.is("entered")) return; -    this.el.sceneEl.systems["hubs-systems"].soundEffectsSystem.playSoundOneShot(SOUND_TOGGLE_MIC);

Can we play this toggle sound just in VR? IMO it doesn't make sense in the 2D UI. None of the other buttons make noise and other 2D apps don't have sounds bound to their 2D UI buttons.

robertlong

comment created time in 2 days

PullRequestReviewEvent

push eventmozilla/hubs

Takahiro

commit sha 730074836b770f8d72817347bb3843aa19c083e7

Add volume option to run-bot.js

view details

Takahiro

commit sha 2b494bed5364e4a2001a0ad45c8cf93f44f21e25

AudioNormalization

view details

Takahiro

commit sha 75d430c8f24f11db6fa95a0f6d51503bae828bfd

Improve Audio Normalization algorithm

view details

Takahiro

commit sha ecc7fdb0a4cfe1a367040efddce9cd35c4d67a17

Let audioNormalization command take factor parameter

view details

Takahiro

commit sha 2c5c62345407634aac0e10f01adcc501b94b563f

Formattinng for lint

view details

dependabot[bot]

commit sha 11978f511bb9bcea790f9ddcfc983df9ed012354

Bump lodash from 4.17.11 to 4.17.20 Bumps [lodash](https://github.com/lodash/lodash) from 4.17.11 to 4.17.20. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.17.11...4.17.20) Signed-off-by: dependabot[bot] <support@github.com>

view details

dependabot[bot]

commit sha 9f24a4fb36e5768b1e7c36c3c1ddb7f4651eb6ff

Bump node-fetch from 2.6.0 to 2.6.1 Bumps [node-fetch](https://github.com/bitinn/node-fetch) from 2.6.0 to 2.6.1. - [Release notes](https://github.com/bitinn/node-fetch/releases) - [Changelog](https://github.com/node-fetch/node-fetch/blob/master/docs/CHANGELOG.md) - [Commits](https://github.com/bitinn/node-fetch/compare/v2.6.0...v2.6.1) Signed-off-by: dependabot[bot] <support@github.com>

view details

dependabot[bot]

commit sha d301eb6d3a07963549b93ca04da5f684e653e002

Bump lodash.merge from 4.6.1 to 4.6.2 Bumps [lodash.merge](https://github.com/lodash/lodash) from 4.6.1 to 4.6.2. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/commits) Signed-off-by: dependabot[bot] <support@github.com>

view details

Manuel Martin

commit sha ab3c79b1dcd2bb0713a65bb815bde3a1f8c2b352

Fallback to default local model when there is an avatar load error

view details

Takahiro

commit sha 834f6e06dc32af537526b72af9b54f2e58704bb6

Merge remote-tracking branch 'upstream/master' into AudioNormalization

view details

John Shaughnessy

commit sha cb9f4d5eee6b0e74a3669e35a06a150f868118e5

Use audio listener for distance based attenuation

view details

John Shaughnessy

commit sha 769e364eefbcb6483cd4b92e1d45226361e2bd81

Fix bug where audio is not initialized in the correct place

view details

kn1cht

commit sha 526bc1bfc125cf65c0525f35ff865579277c32be

improve some Japanese translations

view details

kn1cht

commit sha 2f7aa2eee8b3e8b2b9a522c1668ad6b3b009b906

fix percent symbols in the Japanese locale fie

view details

Manuel Martin

commit sha b668b3dbcd021938ee939684f613e3e72dee1a06

Default avatar update

view details

kn1cht

commit sha 7837bc77f6dd9ca1e9ffef6892c3c9fd5ed96765

Japanese translation: unify translations of "phone"

view details

Takahiro

commit sha b2aeae952575168e52b3becf36ea464580af706c

Dynamic Audio Normalization: Insert compressor node to protect user's ears in case of misguessing the volume

view details

robin

commit sha c35f91b396e8d7bf525e2f52b97d518061fc3f43

added custom email + auth tab + multiline

view details

John Shaughnessy

commit sha 9655b732617531fe4a6b4a4099058116bbd950f8

Reintroduce query string quality settings

view details

John Shaughnessy

commit sha 6c996cc5136505c283a6cf1ac1cb69a3e47476cc

Rename qs parameter enabling touchscreen

view details

push time in 3 days

push eventmozilla/hubs

Takahiro

commit sha 730074836b770f8d72817347bb3843aa19c083e7

Add volume option to run-bot.js

view details

Takahiro

commit sha 2b494bed5364e4a2001a0ad45c8cf93f44f21e25

AudioNormalization

view details

Takahiro

commit sha 75d430c8f24f11db6fa95a0f6d51503bae828bfd

Improve Audio Normalization algorithm

view details

Takahiro

commit sha ecc7fdb0a4cfe1a367040efddce9cd35c4d67a17

Let audioNormalization command take factor parameter

view details

Takahiro

commit sha 2c5c62345407634aac0e10f01adcc501b94b563f

Formattinng for lint

view details

dependabot[bot]

commit sha 11978f511bb9bcea790f9ddcfc983df9ed012354

Bump lodash from 4.17.11 to 4.17.20 Bumps [lodash](https://github.com/lodash/lodash) from 4.17.11 to 4.17.20. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.17.11...4.17.20) Signed-off-by: dependabot[bot] <support@github.com>

view details

dependabot[bot]

commit sha 9f24a4fb36e5768b1e7c36c3c1ddb7f4651eb6ff

Bump node-fetch from 2.6.0 to 2.6.1 Bumps [node-fetch](https://github.com/bitinn/node-fetch) from 2.6.0 to 2.6.1. - [Release notes](https://github.com/bitinn/node-fetch/releases) - [Changelog](https://github.com/node-fetch/node-fetch/blob/master/docs/CHANGELOG.md) - [Commits](https://github.com/bitinn/node-fetch/compare/v2.6.0...v2.6.1) Signed-off-by: dependabot[bot] <support@github.com>

view details

dependabot[bot]

commit sha d301eb6d3a07963549b93ca04da5f684e653e002

Bump lodash.merge from 4.6.1 to 4.6.2 Bumps [lodash.merge](https://github.com/lodash/lodash) from 4.6.1 to 4.6.2. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/commits) Signed-off-by: dependabot[bot] <support@github.com>

view details

Manuel Martin

commit sha ab3c79b1dcd2bb0713a65bb815bde3a1f8c2b352

Fallback to default local model when there is an avatar load error

view details

Takahiro

commit sha 834f6e06dc32af537526b72af9b54f2e58704bb6

Merge remote-tracking branch 'upstream/master' into AudioNormalization

view details

John Shaughnessy

commit sha cb9f4d5eee6b0e74a3669e35a06a150f868118e5

Use audio listener for distance based attenuation

view details

John Shaughnessy

commit sha 769e364eefbcb6483cd4b92e1d45226361e2bd81

Fix bug where audio is not initialized in the correct place

view details

kn1cht

commit sha 526bc1bfc125cf65c0525f35ff865579277c32be

improve some Japanese translations

view details

kn1cht

commit sha 2f7aa2eee8b3e8b2b9a522c1668ad6b3b009b906

fix percent symbols in the Japanese locale fie

view details

Manuel Martin

commit sha b668b3dbcd021938ee939684f613e3e72dee1a06

Default avatar update

view details

kn1cht

commit sha 7837bc77f6dd9ca1e9ffef6892c3c9fd5ed96765

Japanese translation: unify translations of "phone"

view details

Takahiro

commit sha b2aeae952575168e52b3becf36ea464580af706c

Dynamic Audio Normalization: Insert compressor node to protect user's ears in case of misguessing the volume

view details

robin

commit sha c35f91b396e8d7bf525e2f52b97d518061fc3f43

added custom email + auth tab + multiline

view details

John Shaughnessy

commit sha 9655b732617531fe4a6b4a4099058116bbd950f8

Reintroduce query string quality settings

view details

John Shaughnessy

commit sha 6c996cc5136505c283a6cf1ac1cb69a3e47476cc

Rename qs parameter enabling touchscreen

view details

push time in 3 days

push eventmozilla/hubs

Robert Long

commit sha 8545fde1f5d15efa4947bfc2d5a7954089357220

Add Objects Sidebar

view details

Robert Long

commit sha 63eb3a0f199279a56d8b902d506ad05f9fe8bd4a

Add initial object list implementation

view details

Robert Long

commit sha c9815fda3352b04f31d7b9fda017340ddbc98ded

Fix sidebar vertical overflow

view details

Robert Long

commit sha ba385bf3e9defcb5aa632e93be19a3aed0a02ced

Fix canvas/viewport sizing with the sidebar open

view details

Robert Long

commit sha 83f16d9986a3b62c4ec2e767e88e12a1e49542c9

Fix object selected styling

view details

Robert Long

commit sha 62d2f333b7c6fc495689057a6a55d85c8e17f0e4

Fix aspect ratio

view details

Robert Long

commit sha 3cc5238f8b28ddb108422c8e94d22ada3f6f741e

Add useObjectList hook

view details

Robert Long

commit sha df1203b03a20e6b8ec72bcb66bf7845d652493e5

Fix objects sidebar hover events

view details

Robert Long

commit sha 93180b7d4cc7d83f02ed3f44f7fe46fca6f90175

Better function name

view details

Robert Long

commit sha a1f5d6b6bb8ea6bc03c51e469b7280981172bdde

Add ObjectInfoDialog back

view details

Robert Long

commit sha 393ad86c0a67cec0b3ff89263f6f80dee77ef906

Add ObjectMenu presentational components

view details

Robert Long

commit sha 961beeab2ffb60e2bd8de9e256c10d2aebb34bd6

select/deselect objects

view details

Robert Long

commit sha 55459af2ca895cd2d294401f12e6eed4ba294a10

Use active object for object menu

view details

Robert Long

commit sha 976b3bf584de259e55604fca0c6a4d7e51235edd

Merge branch 'master' into redesign/object-list

view details

Robert Long

commit sha 1ab451c53eb4b130ba265e108eede1823465b21d

Compact ObjectMenu styling

view details

Robert Long

commit sha 275cbdcdfd5e11d1e102a81764c4b4f55e69d601

Add mobile ObjectMenu styling

view details

Robert Long

commit sha ced7e93480096b0acb2e54d114a69db0cdf14081

Improve accessibility on large screens

view details

Robert Long

commit sha 44b60edf42e13af6e8d8c09621c15449f980217c

Add remaining object menu hooks

view details

Robert Long

commit sha fbe4655b0cb9178b199070729e098939bdd633ae

Address selected object edge cases

view details

Robert Long

commit sha c428d0b58fd28b60643f167b25c76d50eb2bb8d6

Merge branch 'room-ui-redesign' into redesign/object-list

view details

push time in 3 days

delete branch mozilla/hubs

delete branch : redesign/object-list

delete time in 3 days

PR merged mozilla/hubs

Room UI Redesign: Object List and Object Menu

This PR adds the object list and object menu functionality. I've tried to preserve all existing functionality and adapt it to the new UI. The only feature that I've removed is the ability to toggle the "lights" on and off while inspecting an object, but we could easily find a way to fit that into the design. IMO, there's still some work to be done on the UX. I'm interested in getting feedback on this feature.

+1281 -1342

1 comment

37 changed files

robertlong

pr closed time in 3 days

Pull request review commentmozilla/hubs

Room UI Redesign: Object List and Object Menu

 export class MouseDevice {     const left = event.button === 0;     const middle = event.button === 1;     const right = event.button === 2;-    this.coords[0] = (event.clientX / window.innerWidth) * 2 - 1;-    this.coords[1] = -(event.clientY / window.innerHeight) * 2 + 1;+    // Note: This assumes the canvas always starts in the top left.+    // This works with the current sidebar and toolbar layout.+    this.coords[0] = (event.clientX / this.canvas.clientWidth) * 2 - 1;+    this.coords[1] = -(event.clientY / this.canvas.clientHeight) * 2 + 1;

I made the change. Idk if it works or not though. I don't have a way to test it.

robertlong

comment created time in 3 days

PullRequestReviewEvent

Pull request review commentmozilla/hubs

Room UI Redesign: Object List and Object Menu

+import React from "react";+import PropTypes from "prop-types";+import { ObjectMenu, ObjectMenuButton } from "./ObjectMenu";+import { useObjectList } from "./useObjectList";+import { usePinObject, useRemoveObject, useGoToSelectedObject, getObjectUrl, getPlayerInfo } from "./object-hooks";+import { ReactComponent as PinIcon } from "../icons/Pin.svg";+import { ReactComponent as LinkIcon } from "../icons/Link.svg";+import { ReactComponent as GoToIcon } from "../icons/GoTo.svg";+import { ReactComponent as DeleteIcon } from "../icons/Delete.svg";+import { ReactComponent as AvatarIcon } from "../icons/Avatar.svg";++export function ObjectMenuContainer({ hubChannel, scene, onOpenProfile }) {+  const { objects, activeObject, deselectObject, selectNextObject, selectPrevObject } = useObjectList();+  const { canPin, isPinned, togglePinned } = usePinObject(hubChannel, scene, activeObject);+  const { canRemoveObject, removeObject } = useRemoveObject(hubChannel, scene, activeObject);+  const { canGoTo, goToSelectedObject } = useGoToSelectedObject(scene, activeObject);+  const url = getObjectUrl(activeObject);+  const isPlayer = getPlayerInfo(activeObject);++  return (+    <ObjectMenu+      title="Object"+      currentObjectIndex={objects.indexOf(activeObject) + 1}+      objectCount={objects.length}+      onClose={deselectObject}+      onBack={deselectObject}+      onNextObject={selectNextObject}+      onPrevObject={selectPrevObject}+    >+      {canPin && (+        <ObjectMenuButton onClick={togglePinned}>+          <PinIcon />+          <span>{isPinned ? "Unpin" : "Pin"}</span>

I will make sure to do that in the i18n PR

robertlong

comment created time in 3 days

PullRequestReviewEvent

Pull request review commentmozilla/hubs

Room UI Redesign: Object List and Object Menu

+import React from "react";+import PropTypes from "prop-types";+import classNames from "classnames";+import styles from "./ObjectsSidebar.scss";+import { Sidebar, CloseButton } from "../sidebar/Sidebar";+import { ButtonListItem } from "../layout/List";+import listStyles from "../layout/List.scss";+import { ReactComponent as ObjectIcon } from "../icons/Object.svg";+import { ReactComponent as ImageIcon } from "../icons/Image.svg";+import { ReactComponent as VideoIcon } from "../icons/Video.svg";+import { ReactComponent as AudioIcon } from "../icons/Audio.svg";+import { ReactComponent as TextDocumentIcon } from "../icons/TextDocument.svg";++function getObjectIcon(type) {+  switch (type) {+    case "video":+      return VideoIcon;+    case "audio":+      return AudioIcon;+    case "image":+      return ImageIcon;+    case "pdf":+      return TextDocumentIcon;+    case "model":+    default:+      return ObjectIcon;+  }+}++const objectTypeNames = {+  video: "Video",+  audio: "Audio",+  image: "Image",+  pdf: "PDF",+  model: "Model",+  default: "Object"

Yeah, I will in a future i18n focused PR for the redesign.

robertlong

comment created time in 3 days

PullRequestReviewEvent

Pull request review commentmozilla/hubs

Room UI Redesign: Object List and Object Menu

 import styles from "./IconButton.scss"; import textInputStyles from "./TextInput.scss";  export const IconButton = memo(-  forwardRef(({ className, as: ButtonComponent, children, ...rest }, ref) => {+  forwardRef(({ className, as: ButtonComponent, compactSm, children, ...rest }, ref) => {     return (       <ButtonComponent-        className={classNames(styles.iconButton, textInputStyles.iconButton, className)}+        className={classNames(+          styles.iconButton,+          textInputStyles.iconButton,+          { [styles.compactSm]: compactSm },

I added a comment to the prop types.

robertlong

comment created time in 3 days

PullRequestReviewEvent

push eventmozilla/hubs

Robert Long

commit sha 1decd3cfdd05716f7ee7d881804774da96b04246

Add compactSm comment

view details

push time in 3 days

push eventmozilla/hubs

Robert Long

commit sha 1cd04d256646a39b7fa126679d1bb2c5acb68beb

getPlayerInfo -> isPlayer

view details

Robert Long

commit sha 929d45d316e83f4c1b8deaba5f9d6a4c328c25af

DRY up useObjectList

view details

Robert Long

commit sha fd9b08885cceb05797da07512c6ef64686d0e545

Fix touchscreen coords

view details

Robert Long

commit sha c8a845c0e70f3bedc085823b7ec4cb13156ae483

Merge branch 'redesign/object-list' of github.com:mozilla/hubs into redesign/object-list

view details

push time in 3 days

pull request commentmozilla/hubs

Room UI Redesign: Object List and Object Menu

Idk if I want the "lights" on or off when focusing on an object, but overall I find the focusing on objects UX very confusing. I don't think we want the 3D orbiting behavior for 2D media, only 3D media. Having a way to full screen 2D media like videos would be nice. I'd like to have a larger design discussion and I'll add this to our discussion topics with DPX.

robertlong

comment created time in 3 days

Pull request review commentmozilla/hubs

Room UI Redesign: Object List and Object Menu

 export class MouseDevice {     const left = event.button === 0;     const middle = event.button === 1;     const right = event.button === 2;-    this.coords[0] = (event.clientX / window.innerWidth) * 2 - 1;-    this.coords[1] = -(event.clientY / window.innerHeight) * 2 + 1;+    // Note: This assumes the canvas always starts in the top left.+    // This works with the current sidebar and toolbar layout.+    this.coords[0] = (event.clientX / this.canvas.clientWidth) * 2 - 1;+    this.coords[1] = -(event.clientY / this.canvas.clientHeight) * 2 + 1;

Ah, thanks. I don't actually have a way to test on my iPad due to the secure websocket connection and locally signed cert. I'll make the change and I guess we can test on the staging server?

robertlong

comment created time in 3 days

Pull request review commentmozilla/hubs

Room UI Redesign: Object List and Object Menu

+import React from "react";+import PropTypes from "prop-types";+import { ObjectMenu, ObjectMenuButton } from "./ObjectMenu";+import { useObjectList } from "./useObjectList";+import { usePinObject, useRemoveObject, useGoToSelectedObject, getObjectUrl, getPlayerInfo } from "./object-hooks";+import { ReactComponent as PinIcon } from "../icons/Pin.svg";+import { ReactComponent as LinkIcon } from "../icons/Link.svg";+import { ReactComponent as GoToIcon } from "../icons/GoTo.svg";+import { ReactComponent as DeleteIcon } from "../icons/Delete.svg";+import { ReactComponent as AvatarIcon } from "../icons/Avatar.svg";++export function ObjectMenuContainer({ hubChannel, scene, onOpenProfile }) {+  const { objects, activeObject, deselectObject, selectNextObject, selectPrevObject } = useObjectList();+  const { canPin, isPinned, togglePinned } = usePinObject(hubChannel, scene, activeObject);+  const { canRemoveObject, removeObject } = useRemoveObject(hubChannel, scene, activeObject);+  const { canGoTo, goToSelectedObject } = useGoToSelectedObject(scene, activeObject);+  const url = getObjectUrl(activeObject);+  const isPlayer = getPlayerInfo(activeObject);++  return (+    <ObjectMenu+      title="Object"+      currentObjectIndex={objects.indexOf(activeObject) + 1}+      objectCount={objects.length}+      onClose={deselectObject}+      onBack={deselectObject}+      onNextObject={selectNextObject}+      onPrevObject={selectPrevObject}+    >+      {canPin && (+        <ObjectMenuButton onClick={togglePinned}>+          <PinIcon />+          <span>{isPinned ? "Unpin" : "Pin"}</span>+        </ObjectMenuButton>+      )}+      {url && (+        <ObjectMenuButton as="a" href={url} target="_blank" rel="noopener noreferrer">+          <LinkIcon />+          <span>Link</span>+        </ObjectMenuButton>+      )}+      {canGoTo && (+        <ObjectMenuButton+          onClick={() => {+            goToSelectedObject();+            deselectObject();+          }}+        >+          <GoToIcon />+          <span>View</span>+        </ObjectMenuButton>+      )}+      {canRemoveObject && (

I switched to this method. Seems like a good design to me :+1:

robertlong

comment created time in 3 days

Pull request review commentmozilla/hubs

Room UI Redesign: Object List and Object Menu

+import React, { useState, useEffect, useContext, createContext, useCallback, Children, cloneElement } from "react";+import PropTypes from "prop-types";+import { mediaSort, getMediaType } from "../../utils/media-sorting.js";++function getDisplayString(el) {+  // Having a listed-media component does not guarantee the existence of a media-loader component,+  // so don't crash if there isn't one.+  const url = (el.components["media-loader"] && el.components["media-loader"].data.src) || "";+  const split = url.split("/");+  const resourceName = split[split.length - 1].split("?")[0];+  let httpIndex = -1;+  for (let i = 0; i < split.length; i++) {+    if (split[i].indexOf("http") !== -1) {+      httpIndex = i;+    }+  }++  let host = "";+  let lessHost = "";+  if (httpIndex !== -1 && split.length > httpIndex + 3) {+    host = split[httpIndex + 2];+    const hostSplit = host.split(".");+    if (hostSplit.length > 1) {+      lessHost = `${hostSplit[hostSplit.length - 2]}.${hostSplit[hostSplit.length - 1]}`;+    }+  }++  const firstPart =+    url.indexOf("poly.google") !== -1+      ? "Google Poly"+      : url.indexOf("sketchfab.com") !== -1+        ? "Sketchfab"+        : url.indexOf("youtube.com") !== -1+          ? "YouTube"+          : lessHost;++  return `${firstPart} ... ${resourceName.substr(0, 4)}`;+}++const ObjectListContext = createContext({+  objects: [],+  focusedObject: null,+  selectedObject: null,+  focusObject: () => {},+  unfocusObject: () => {},+  inspectObject: () => {},+  uninspectObject: () => {}+});++export function ObjectListProvider({ scene, children }) {+  const [objects, setObjects] = useState([]);+  const [focusedObject, setFocusedObject] = useState(null); // The object currently shown in the viewport+  const [selectedObject, setSelectedObject] = useState(null); // The object currently selected in the object list++  useEffect(+    () => {+      function updateMediaEntities() {+        const objects = scene.systems["listed-media"].els.sort(mediaSort).map(el => ({+          id: el.object3D.id,+          name: getDisplayString(el),+          type: getMediaType(el),+          el,+          enableLights: false

If you inspect an object using the in-world ui, the lights are enabled, if you inspect an object from the object list then they are not enabled. I didn't want to change that behavior so this is how I implemented that.

robertlong

comment created time in 3 days

Pull request review commentmozilla/hubs

Room UI Redesign: Object List and Object Menu

+import React, { useState, useEffect, useContext, createContext, useCallback, Children, cloneElement } from "react";+import PropTypes from "prop-types";+import { mediaSort, getMediaType } from "../../utils/media-sorting.js";++function getDisplayString(el) {+  // Having a listed-media component does not guarantee the existence of a media-loader component,+  // so don't crash if there isn't one.+  const url = (el.components["media-loader"] && el.components["media-loader"].data.src) || "";+  const split = url.split("/");+  const resourceName = split[split.length - 1].split("?")[0];+  let httpIndex = -1;+  for (let i = 0; i < split.length; i++) {+    if (split[i].indexOf("http") !== -1) {+      httpIndex = i;+    }+  }++  let host = "";+  let lessHost = "";+  if (httpIndex !== -1 && split.length > httpIndex + 3) {+    host = split[httpIndex + 2];+    const hostSplit = host.split(".");+    if (hostSplit.length > 1) {+      lessHost = `${hostSplit[hostSplit.length - 2]}.${hostSplit[hostSplit.length - 1]}`;+    }+  }++  const firstPart =+    url.indexOf("poly.google") !== -1+      ? "Google Poly"+      : url.indexOf("sketchfab.com") !== -1+        ? "Sketchfab"+        : url.indexOf("youtube.com") !== -1+          ? "YouTube"+          : lessHost;++  return `${firstPart} ... ${resourceName.substr(0, 4)}`;+}++const ObjectListContext = createContext({+  objects: [],+  focusedObject: null,+  selectedObject: null,+  focusObject: () => {},+  unfocusObject: () => {},+  inspectObject: () => {},+  uninspectObject: () => {}+});++export function ObjectListProvider({ scene, children }) {+  const [objects, setObjects] = useState([]);+  const [focusedObject, setFocusedObject] = useState(null); // The object currently shown in the viewport+  const [selectedObject, setSelectedObject] = useState(null); // The object currently selected in the object list++  useEffect(+    () => {+      function updateMediaEntities() {+        const objects = scene.systems["listed-media"].els.sort(mediaSort).map(el => ({+          id: el.object3D.id,+          name: getDisplayString(el),+          type: getMediaType(el),+          el,+          enableLights: false+        }));++        setObjects(objects);+      }++      let timeout;++      function onListedMediaChanged() {+        // HACK: The listed-media component exists before the media-loader component does, in cases where an entity is created from a network template because of an incoming message, so don't updateMediaEntities right away.+        // Sorry in advance for the day this comment is out of date.+        timeout = setTimeout(() => updateMediaEntities(), 0);+      }++      scene.addEventListener("listed_media_changed", onListedMediaChanged);++      updateMediaEntities();++      return () => {+        scene.removeEventListener("listed_media_changed", updateMediaEntities);+        clearTimeout(timeout);+      };+    },+    [scene, setObjects]+  );++  useEffect(+    () => {+      function onInspectTargetChanged() {+        const cameraSystem = scene.systems["hubs-systems"].cameraSystem;++        const inspectedEl = cameraSystem.inspectable && cameraSystem.inspectable.el;++        if (inspectedEl) {+          setSelectedObject({+            id: inspectedEl.object3D.id,+            name: getDisplayString(inspectedEl),+            type: getMediaType(inspectedEl),+            el: inspectedEl,+            enableLights: true+          });+        } else {+          setSelectedObject(null);+        }+      }++      scene.addEventListener("inspect-target-changed", onInspectTargetChanged);++      return () => {+        scene.removeEventListener("inspect-target-changed", onInspectTargetChanged);+      };+    },+    [scene, setSelectedObject, objects, selectedObject]+  );++  const selectObject = useCallback(+    object => {+      const cameraSystem = scene.systems["hubs-systems"].cameraSystem;++      setSelectedObject(object);++      if (object.el.object3D !== cameraSystem.inspectable) {+        if (cameraSystem.inspectable) {+          cameraSystem.uninspect(false);+        }++        cameraSystem.enableLights = object.enableLights;+        cameraSystem.inspect(object.el, 1.5, true, false);+      }+    },+    [scene, setSelectedObject]+  );++  const deselectObject = useCallback(+    () => {+      const cameraSystem = scene.systems["hubs-systems"].cameraSystem;++      setSelectedObject(null);++      cameraSystem.enableLights = true;+      cameraSystem.uninspect(false);++      if (focusedObject) {+        cameraSystem.enableLights = focusedObject.enableLights;+        cameraSystem.inspect(focusedObject.el, 1.5, true, false);+      }+    },+    [scene, setSelectedObject, focusedObject]+  );++  const focusObject = useCallback(+    object => {+      const cameraSystem = scene.systems["hubs-systems"].cameraSystem;++      setFocusedObject(object);++      if (object.el.object3D !== cameraSystem.inspectable) {+        if (cameraSystem.inspectable) {+          cameraSystem.uninspect(false);+        }++        cameraSystem.enableLights = object.enableLights;+        cameraSystem.inspect(object.el, 1.5, true, false);+      }+    },+    [scene, setFocusedObject]+  );++  const unfocusObject = useCallback(+    () => {+      const cameraSystem = scene.systems["hubs-systems"].cameraSystem;++      setFocusedObject(null);++      cameraSystem.enableLights = true;+      cameraSystem.uninspect(false);++      if (selectedObject) {+        cameraSystem.enableLights = selectedObject.enableLights;+        cameraSystem.inspect(selectedObject.el, 1.5, true, false);+      }+    },+    [scene, setFocusedObject, selectedObject]+  );++  const selectNextObject = useCallback(+    () => {+      const curObjIdx = objects.indexOf(selectedObject);++      if (curObjIdx !== -1) {+        const nextObjIdx = (curObjIdx + 1) % objects.length;+        selectObject(objects[nextObjIdx]);+      }+    },+    [selectObject, objects, selectedObject]+  );++  const selectPrevObject = useCallback(+    () => {+      const curObjIdx = objects.indexOf(selectedObject);++      if (curObjIdx !== -1) {+        const nextObjIdx = curObjIdx === 0 ? objects.length - 1 : curObjIdx - 1;+        selectObject(objects[nextObjIdx]);+      }+    },+    [selectObject, objects, selectedObject]+  );++  const context = {+    objects,+    activeObject: focusedObject || selectedObject,+    focusedObject,+    selectedObject,+    focusObject,+    unfocusObject,+    selectObject,+    deselectObject,+    selectPrevObject,+    selectNextObject+  };++  // Note: If we move ui-root to a functional component and use hooks,+  // we can use the useObjectList hook instead of cloneElement.

Yeah, I'm working towards this, but it could take a while and may even happen after we ship the redesign. I'd rather keep this in code so people know why I'm using cloneElement here in case they run across it before things change.

robertlong

comment created time in 3 days

Pull request review commentmozilla/hubs

Room UI Redesign: Object List and Object Menu

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

I think it's good to tie them conceptually to being used as a React component, because that's essentially how they are being used with the svgr library. Webpack is set up to apply svgr to the svg files within the react-components directory and transform them into react components. Notice there's also the IconTemplate.js file in that folder that is used on those svg files.

robertlong

comment created time in 3 days

Pull request review commentmozilla/hubs

Room UI Redesign: Object List and Object Menu

+import React, { useCallback, useRef } from "react";+import PropTypes from "prop-types";+import { ObjectsSidebar, ObjectsSidebarItem } from "./ObjectsSidebar";+import { List } from "../layout/List";+import { useObjectList } from "./useObjectList";++export function ObjectsSidebarContainer({ onClose }) {+  const listRef = useRef();+  const { objects, selectedObject, selectObject, unfocusObject, focusObject } = useObjectList();++  const onUnfocusListItem = useCallback(+    e => {+      if (e.relatedTarget === listRef.current || !listRef.current.contains(e.relatedTarget)) {+        unfocusObject();+      }+    },+    [unfocusObject, listRef]+  );++  return (+    <ObjectsSidebar objectCount={objects.length} onClose={onClose}>+      <List ref={listRef}>+        {objects.map(object => (+          <ObjectsSidebarItem+            selected={selectedObject === object}+            object={object}+            key={object.id}+            onClick={() => selectObject(object)}+            onMouseOver={() => focusObject(object)}+            onFocus={() => focusObject(object)}+            onMouseOut={onUnfocusListItem}+            onBlur={onUnfocusListItem}+          />+        ))}+      </List>+    </ObjectsSidebar>

Yes, an empty state is a good idea. I'll add it.

robertlong

comment created time in 3 days

Pull request review commentmozilla/hubs

Room UI Redesign: Object List and Object Menu

 import styles from "./IconButton.scss"; import textInputStyles from "./TextInput.scss";  export const IconButton = memo(-  forwardRef(({ className, as: ButtonComponent, children, ...rest }, ref) => {+  forwardRef(({ className, as: ButtonComponent, compactSm, children, ...rest }, ref) => {     return (       <ButtonComponent-        className={classNames(styles.iconButton, textInputStyles.iconButton, className)}+        className={classNames(+          styles.iconButton,+          textInputStyles.iconButton,+          { [styles.compactSm]: compactSm },

Yeah, this might need a better name. That style makes the icon button shift to a vertical layout when in the small breakpoint (which actually is sm). I could also just add a comment to the prop types that explains it.

robertlong

comment created time in 3 days

Pull request review commentmozilla/hubs

Room UI Redesign: Object List and Object Menu

+import React from "react";+import PropTypes from "prop-types";+import { ObjectMenu, ObjectMenuButton } from "./ObjectMenu";+import { useObjectList } from "./useObjectList";+import { usePinObject, useRemoveObject, useGoToSelectedObject, getObjectUrl, getPlayerInfo } from "./object-hooks";+import { ReactComponent as PinIcon } from "../icons/Pin.svg";+import { ReactComponent as LinkIcon } from "../icons/Link.svg";+import { ReactComponent as GoToIcon } from "../icons/GoTo.svg";+import { ReactComponent as DeleteIcon } from "../icons/Delete.svg";+import { ReactComponent as AvatarIcon } from "../icons/Avatar.svg";++export function ObjectMenuContainer({ hubChannel, scene, onOpenProfile }) {+  const { objects, activeObject, deselectObject, selectNextObject, selectPrevObject } = useObjectList();+  const { canPin, isPinned, togglePinned } = usePinObject(hubChannel, scene, activeObject);+  const { canRemoveObject, removeObject } = useRemoveObject(hubChannel, scene, activeObject);+  const { canGoTo, goToSelectedObject } = useGoToSelectedObject(scene, activeObject);+  const url = getObjectUrl(activeObject);+  const isPlayer = getPlayerInfo(activeObject);++  return (+    <ObjectMenu+      title="Object"+      currentObjectIndex={objects.indexOf(activeObject) + 1}+      objectCount={objects.length}+      onClose={deselectObject}+      onBack={deselectObject}+      onNextObject={selectNextObject}+      onPrevObject={selectPrevObject}+    >+      {canPin && (+        <ObjectMenuButton onClick={togglePinned}>+          <PinIcon />+          <span>{isPinned ? "Unpin" : "Pin"}</span>+        </ObjectMenuButton>+      )}+      {url && (+        <ObjectMenuButton as="a" href={url} target="_blank" rel="noopener noreferrer">+          <LinkIcon />+          <span>Link</span>+        </ObjectMenuButton>+      )}+      {canGoTo && (+        <ObjectMenuButton+          onClick={() => {+            goToSelectedObject();+            deselectObject();+          }}+        >+          <GoToIcon />+          <span>View</span>+        </ObjectMenuButton>+      )}+      {canRemoveObject && (+        <ObjectMenuButton+          onClick={() => {+            removeObject();+            deselectObject();+          }}+        >+          <DeleteIcon />+          <span>Delete</span>+        </ObjectMenuButton>+      )}+      {isPlayer && (+        <ObjectMenuButton onClick={onOpenProfile}>+          <AvatarIcon />+          <span>Edit Avatar</span>+        </ObjectMenuButton>

Yeah, I think that's the way it is right now since you can only inspect yourself, but maybe I should add a check for it anyway? What's the best way to do that?

robertlong

comment created time in 3 days

Pull request review commentmozilla/hubs

Room UI Redesign: Object List and Object Menu

+import React from "react";+import PropTypes from "prop-types";+import { ObjectMenu, ObjectMenuButton } from "./ObjectMenu";+import { useObjectList } from "./useObjectList";+import { usePinObject, useRemoveObject, useGoToSelectedObject, getObjectUrl, getPlayerInfo } from "./object-hooks";+import { ReactComponent as PinIcon } from "../icons/Pin.svg";+import { ReactComponent as LinkIcon } from "../icons/Link.svg";+import { ReactComponent as GoToIcon } from "../icons/GoTo.svg";+import { ReactComponent as DeleteIcon } from "../icons/Delete.svg";+import { ReactComponent as AvatarIcon } from "../icons/Avatar.svg";++export function ObjectMenuContainer({ hubChannel, scene, onOpenProfile }) {+  const { objects, activeObject, deselectObject, selectNextObject, selectPrevObject } = useObjectList();+  const { canPin, isPinned, togglePinned } = usePinObject(hubChannel, scene, activeObject);+  const { canRemoveObject, removeObject } = useRemoveObject(hubChannel, scene, activeObject);+  const { canGoTo, goToSelectedObject } = useGoToSelectedObject(scene, activeObject);+  const url = getObjectUrl(activeObject);+  const isPlayer = getPlayerInfo(activeObject);++  return (+    <ObjectMenu+      title="Object"+      currentObjectIndex={objects.indexOf(activeObject) + 1}+      objectCount={objects.length}+      onClose={deselectObject}+      onBack={deselectObject}+      onNextObject={selectNextObject}+      onPrevObject={selectPrevObject}+    >+      {canPin && (+        <ObjectMenuButton onClick={togglePinned}>+          <PinIcon />+          <span>{isPinned ? "Unpin" : "Pin"}</span>+        </ObjectMenuButton>+      )}+      {url && (+        <ObjectMenuButton as="a" href={url} target="_blank" rel="noopener noreferrer">+          <LinkIcon />+          <span>Link</span>

Yes, I am and have been so far. I'll be doing PRs with just i18n specific changes once things are feature complete.

robertlong

comment created time in 3 days

PullRequestReviewEvent
PullRequestReviewEvent

push eventmozilla/hubs

Robert Long

commit sha ebcc3a502d59696bbb62044da4d828a4948c00f7

Apply suggestions from code review Co-authored-by: Brian Peiris <brianpeiris@gmail.com>

view details

push time in 3 days

push eventmozilla/hubs

Robert Long

commit sha 3f930d561e5135dbcabeca4bf8414aac0aeb3123

Add no objects state to objects list

view details

push time in 3 days

push eventmozilla/hubs

Robert Long

commit sha 14fdf8916a969223788242543fa280156384940d

Fix object index nit

view details

Robert Long

commit sha 731eb4be5688adb3298a4d5dd9fd30558e46635e

Disable buttons instead of hiding them

view details

push time in 3 days

push eventmozilla/hubs

Robert Long

commit sha 6603cde94a5b3b9352cbc68d4d32634fe739df9b

Add prev/next object behavior

view details

push time in 6 days

push eventmozilla/hubs

Robert Long

commit sha e3825be8be86c343acb562f02bdd32f64ddaae8d

Fix linting

view details

push time in 7 days

PR opened mozilla/hubs

Room UI Redesign: Toolbar Buttons / Menus

This PR includes the functionality for the share popover, place popover, reaction/emoji menu, and leave button.

I'm not a huge fan of the way the reaction/emoji menu turned out. The original plan for phase one of the redesign was to use the existing menu but this puts you into freeze mode. I think we should go with this concept instead:

image

When you click one of the emojis, it'll spawn in the world and you can still grab it.

+1768 -1560

0 comment

57 changed files

pr created time in 7 days

push eventmozilla/hubs

Robert Long

commit sha f5ed3beae32d4c8fb382ab50fe0315d56247cca7

Add leave room functionality

view details

Robert Long

commit sha 1fcb722cdc02c8e68b069cc9202ad1376292c3f6

Remove leave button from pause screen

view details

Robert Long

commit sha a7a057c856d6991ea8008f34a2e9960eec83950e

Fix pen/camera state in place menu

view details

Robert Long

commit sha 175d1ae5805629699ba03594673eb83054094d97

Add React button functionality

view details

push time in 7 days

push eventmozilla/hubs

Robert Long

commit sha adfc22bc349f92aba7fb4731831bf17ad3551734

Fix prop types for popovers

view details

Robert Long

commit sha 8ecd1a2ac23c1d751b30d246e3a0a0ab824edb93

Add VoiceButtonContainer logic

view details

push time in 8 days

create barnchmozilla/hubs

branch : redesign/toolbar-buttons

created branch time in 9 days

push eventmozilla/hubs

Robert Long

commit sha 6d6d9131f5c1d3f29c9bb95220b8292d00e62fd9

Use removeNetworkedObject util

view details

Robert Long

commit sha 609c499c18c636e769a17c380437f2ade422d77e

Make select focus/select methods call inspect/uninspect

view details

Robert Long

commit sha 43f141a3921810f41336aca7aa0a9a3c98a72149

Clean up remaining inspect edge cases

view details

push time in 9 days

push eventmozilla/hubs

Robert Long

commit sha 2e1a176bd950e25d348b0032e6a595a62376675f

Remove old code

view details

push time in 10 days

push eventmozilla/hubs

John Shaughnessy

commit sha bfab9869824ea04ca957fb170018dbd025cde053

Remove unused prop

view details

John Shaughnessy

commit sha c0aa8a0749776110abce0b47081cb5eca04689eb

Fix prop name signedIn -> isSignedIn

view details

Robert Long

commit sha d524f81709a950dffe7ed601a8cf5c9fda892d0f

Remove onOpenAvatarSettings proptype

view details

Robert Long

commit sha da482e84d062895ccd77e8db005ae527caf52b6e

Merge pull request #3171 from mozilla/redesign/people-list-quick-fix Redesign/people list quick fix

view details

Robert Long

commit sha 2db2d6ca503d981ee0341ae80487d1d93105414e

Merge pull request #3148 from mozilla/redesign/people-list Room UI Redesign: People Sidebar

view details

Robert Long

commit sha 88479cc1de625f4f3014c756ffc7e4f968900b20

Merge branch 'master' into room-ui-redesign

view details

Robert Long

commit sha f0786cf8172078705a69274ef768a994db073295

Merge branch 'room-ui-redesign' of github.com:mozilla/hubs into room-ui-redesign

view details

Robert Long

commit sha c428d0b58fd28b60643f167b25c76d50eb2bb8d6

Merge branch 'room-ui-redesign' into redesign/object-list

view details

push time in 10 days

PR opened mozilla/hubs

Room UI Redesign: Object List and Object Menu

This PR adds the object list and object menu functionality.

+1664 -572

0 comment

35 changed files

pr created time in 10 days

push eventmozilla/hubs

Robert Long

commit sha fbe4655b0cb9178b199070729e098939bdd633ae

Address selected object edge cases

view details

push time in 10 days

push eventmozilla/hubs

Robert Long

commit sha 1ab451c53eb4b130ba265e108eede1823465b21d

Compact ObjectMenu styling

view details

Robert Long

commit sha 275cbdcdfd5e11d1e102a81764c4b4f55e69d601

Add mobile ObjectMenu styling

view details

Robert Long

commit sha ced7e93480096b0acb2e54d114a69db0cdf14081

Improve accessibility on large screens

view details

Robert Long

commit sha 44b60edf42e13af6e8d8c09621c15449f980217c

Add remaining object menu hooks

view details

push time in 11 days

Pull request review commentmozilla/hubs

Set quality setting with query string parameters (again)

 const validator = new Validator(); import { EventTarget } from "event-target-shim"; import { fetchRandomDefaultAvatarId, generateRandomName } from "../utils/identity.js"; +export const defaultMaterialQualitySetting = (function() {+  const MATERIAL_QUALITY_OPTIONS = ["low", "medium", "high"];+  let isMobile;+  try {+    // HACK: AFRAME is not available on all pages, so we catch the ReferenceError.+    // We could move AFRAME's device utils into a separate package (or into this repo)+    // if we wanted to use these checks without having to import all of AFRAME.+    isMobile = AFRAME.utils.device.isMobile() || AFRAME.utils.device.isMobileVR();

Instead of wrapping this in a try/catch you could just check for window.AFRAME.

johnshaughnessy

comment created time in 13 days

PullRequestReviewEvent
PullRequestReviewEvent

startedTimvanScherpenzeel/detect-gpu

started time in 14 days

push eventmozilla/hubs

robin

commit sha 13e912f8205a4fb28e624988c953669713ba3483

remove create button for avatars

view details

Manuel Martin

commit sha f6e481fed049393162d5ae510c65982d9fb3e30a

Fixes the room description scroll

view details

Manuel Martin

commit sha 20d5d115138205a2306a7868c18cfbd722f65bfb

Get the device Id from the audio track instead of the outbound stream

view details

Manuel Martin

commit sha 8ef2953ce482281b2be7a598e0235b3e7dbc7b13

Spanish localization Rebase fixes

view details

Manuel Martin

commit sha c2dad2a4a2eeb8a35c6285c3617574351ff6a40c

Address review change requests

view details

Manuel Martin

commit sha 8006da4f8432b94434fa2e9026b340654784429e

Merge pull request #3095 from keianhzo/room-info-scroll-fix Fixes the room details scrollbar visibility

view details

Manuel Martin

commit sha 9ea70d174202679da664904456866c5570a984c8

Merge pull request #3104 from keianhzo/input-device-selection-fix Fix the last used input device id

view details

Manuel Martin

commit sha df0a05037c04945d3734b0551b0f8bb53beccc24

Merge pull request #3109 from keianhzo/es-es-localization Spanish localization

view details

robin

commit sha efd42cd89ff013affa9670eb58975163d70473a2

resolved merge conflict

view details

Robin K Wilson

commit sha 8e5a5709e90d2d6e6486149bdac1a9406226a991

Merge pull request #3002 from robin-k-wilson/remove-create-btn-avatars Remove create button for Avatar menu in Admin Panel

view details

Robert Long

commit sha 976b3bf584de259e55604fca0c6a4d7e51235edd

Merge branch 'master' into redesign/object-list

view details

push time in 14 days

push eventmozilla/hubs

robin

commit sha 13e912f8205a4fb28e624988c953669713ba3483

remove create button for avatars

view details

Manuel Martin

commit sha f6e481fed049393162d5ae510c65982d9fb3e30a

Fixes the room description scroll

view details

Manuel Martin

commit sha 20d5d115138205a2306a7868c18cfbd722f65bfb

Get the device Id from the audio track instead of the outbound stream

view details

Manuel Martin

commit sha 8ef2953ce482281b2be7a598e0235b3e7dbc7b13

Spanish localization Rebase fixes

view details

Manuel Martin

commit sha c2dad2a4a2eeb8a35c6285c3617574351ff6a40c

Address review change requests

view details

Manuel Martin

commit sha 8006da4f8432b94434fa2e9026b340654784429e

Merge pull request #3095 from keianhzo/room-info-scroll-fix Fixes the room details scrollbar visibility

view details

Manuel Martin

commit sha 9ea70d174202679da664904456866c5570a984c8

Merge pull request #3104 from keianhzo/input-device-selection-fix Fix the last used input device id

view details

Manuel Martin

commit sha df0a05037c04945d3734b0551b0f8bb53beccc24

Merge pull request #3109 from keianhzo/es-es-localization Spanish localization

view details

robin

commit sha efd42cd89ff013affa9670eb58975163d70473a2

resolved merge conflict

view details

Robin K Wilson

commit sha 8e5a5709e90d2d6e6486149bdac1a9406226a991

Merge pull request #3002 from robin-k-wilson/remove-create-btn-avatars Remove create button for Avatar menu in Admin Panel

view details

Robert Long

commit sha 88479cc1de625f4f3014c756ffc7e4f968900b20

Merge branch 'master' into room-ui-redesign

view details

Robert Long

commit sha f0786cf8172078705a69274ef768a994db073295

Merge branch 'room-ui-redesign' of github.com:mozilla/hubs into room-ui-redesign

view details

push time in 14 days

push eventmozilla/hubs

Robert Long

commit sha ebdac7b1f1cb28dac8206754b53b659cf58a4062

Add ContentMenu component

view details

Robert Long

commit sha 2bc1e94dc17b7619a8505134af4e5ddccc0ce384

Migrate object/presence list to new sidebar UI

view details

Robert Long

commit sha 9510483caa3ece4f4525bc6a8b968692e9f7c31c

Add PeopleSidebar styling

view details

Robert Long

commit sha cf1968395793264d52d2efe10f7bfa419f9aa5f4

Add PeopleSidebarContainer

view details

Robert Long

commit sha 142728cd2768484a6fa5527023b939db43d4e235

Fix client info routing

view details

Robert Long

commit sha 300fe0981cf51b3e03d217691ac6ee099f64f756

Add Mute All button functionality

view details

Robert Long

commit sha 4958b388c587ba5db99369a517f60a1735eaf1a0

Remove old presence-list code

view details

Robert Long

commit sha e3bd97c70922989179b520c396846762b5863e1c

Merge branch 'redesign/chat' into redesign/people-list

view details

Robert Long

commit sha 466edf9493eb3ea9171fad033be834a10956c15c

Clean up sidebar buttons

view details

Robert Long

commit sha d552921502f3a0ab030b964a37293e101fcb2f81

Add people sidebar navigation

view details

Robert Long

commit sha 295a5876f734f0dfe917d3b7202995fc786494df

Update client info dialog

view details

Robert Long

commit sha bcf16ee753f9c1cfc9a568b6f24d6c884e36e615

Merge branch 'redesign/chat' into redesign/people-list

view details

Robert Long

commit sha 0cfb997b7072d8c87d124d47089678e7fd4cc661

Merge branch 'room-ui-redesign' into redesign/people-list

view details

John Shaughnessy

commit sha bfab9869824ea04ca957fb170018dbd025cde053

Remove unused prop

view details

John Shaughnessy

commit sha c0aa8a0749776110abce0b47081cb5eca04689eb

Fix prop name signedIn -> isSignedIn

view details

Robert Long

commit sha d524f81709a950dffe7ed601a8cf5c9fda892d0f

Remove onOpenAvatarSettings proptype

view details

Robert Long

commit sha da482e84d062895ccd77e8db005ae527caf52b6e

Merge pull request #3171 from mozilla/redesign/people-list-quick-fix Redesign/people list quick fix

view details

Robert Long

commit sha 2db2d6ca503d981ee0341ae80487d1d93105414e

Merge pull request #3148 from mozilla/redesign/people-list Room UI Redesign: People Sidebar

view details

push time in 14 days

delete branch mozilla/hubs

delete branch : redesign/people-list

delete time in 14 days

PR merged mozilla/hubs

Room UI Redesign: People Sidebar

This PR adds the people sidebar and cleans up the styling for editing your own profile and viewing other users.

+989 -589

2 comments

26 changed files

robertlong

pr closed time in 14 days

Pull request review commentmozilla/hubs

Room UI Redesign: People Sidebar

+import React, { useCallback, useEffect, useState } from "react";+import PropTypes from "prop-types";+import { PeopleSidebar } from "./PeopleSidebar";+import { getMicrophonePresences } from "../../utils/microphone-presence";+import ProfileEntryPanel from "../profile-entry-panel";+import ClientInfoDialog from "../client-info-dialog";++export function userFromPresence(sessionId, presence, micPresences, mySessionId) {+  const meta = presence.metas[presence.metas.length - 1];+  const micPresence = micPresences.get(sessionId);+  return { id: sessionId, isMe: mySessionId === sessionId, micPresence, ...meta };+}++function usePeopleList(presences, mySessionId, micUpdateFrequency = 500) {+  const [people, setPeople] = useState([]);++  useEffect(+    () => {+      let timeout;++      function updateMicrophoneState() {+        const micPresences = getMicrophonePresences();++        setPeople(+          Object.entries(presences).map(([id, presence]) => {+            return userFromPresence(id, presence, micPresences, mySessionId);+          })+        );++        timeout = setTimeout(updateMicrophoneState, micUpdateFrequency);+      }++      updateMicrophoneState();++      return () => {+        clearTimeout(timeout);+      };+    },+    [presences, micUpdateFrequency, setPeople, mySessionId]+  );++  return people;+}++function PeopleListContainer({ hubChannel, presences, mySessionId, onSelectPerson, onClose }) {+  const people = usePeopleList(presences, mySessionId);++  const onMuteAll = useCallback(+    () => {+      for (const person of people) {+        if (person.presence === "room" && person.permissions && !person.permissions.mute_users) {+          hubChannel.mute(person.id);

It doesn't currently check for that: https://github.com/mozilla/hubs/blob/master/src/react-components/presence-list.js#L195

robertlong

comment created time in 14 days

PullRequestReviewEvent

Pull request review commentmozilla/hubs

Room UI Redesign: People Sidebar

+import React from "react";+import PropTypes from "prop-types";+import styles from "./PeopleSidebar.scss";+import { Sidebar, CloseButton, SidebarButton } from "../sidebar/Sidebar";+import { ReactComponent as StarIcon } from "../icons/Star.svg";+import { ReactComponent as DesktopIcon } from "../icons/Desktop.svg";+import { ReactComponent as DiscordIcon } from "../icons/Discord.svg";+import { ReactComponent as PhoneIcon } from "../icons/Phone.svg";+import { ReactComponent as VRIcon } from "../icons/VR.svg";+import { ReactComponent as VolumeOffIcon } from "../icons/VolumeOff.svg";+import { ReactComponent as VolumeHighIcon } from "../icons/VolumeHigh.svg";+import { ReactComponent as VolumeMutedIcon } from "../icons/VolumeMuted.svg";+import { List, ButtonListItem } from "../layout/List";++function getDeviceLabel(ctx) {+  if (ctx) {+    if (ctx.mobile) {+      return "On Mobile";+    } else if (ctx.discord) {+      return "Discord Bot";+    } else if (ctx.hmd) {+      return "In VR";+    }+  }++  return "On Desktop";+}++function getDeviceIconComponent(ctx) {+  if (ctx) {+    if (ctx.mobile) {+      return PhoneIcon;+    } else if (ctx.discord) {+      return DiscordIcon;+    } else if (ctx.hmd) {+      return VRIcon;+    }+  }++  return DesktopIcon;+}++function getVoiceLabel(micPresence) {+  if (micPresence) {+    if (micPresence.talking) {+      return "Talking";+    } else if (micPresence.muted) {+      return "Muted";+    }+  }++  return "Not Talking";+}++function getVoiceIconComponent(micPresence) {+  if (micPresence) {+    if (micPresence.talking) {+      return VolumeHighIcon;+    } else if (micPresence.muted) {+      return VolumeMutedIcon;+    }+  }++  return VolumeOffIcon;+}++// TODO: i18n+function getPresenceMessage(presence) {+  switch (presence) {+    case "lobby":+      return "In Lobby";+    case "room":+      return "In Room";+    case "entering":+      return "Entering Room";+    default:+      return undefined;+  }+}++function getPersonName(person) {+  return person.profile.displayName + (person.isMe ? " (You)" : "");+}++function getLabel(person) {+  if (person.context.discord) {+    return `${getDeviceLabel(person.context)}, ${getPersonName(person)} is ${getPresenceMessage(person.presence)}.`;+  }++  return `${person.roles.owner ? "Moderator " : ""}${getPersonName(person)}, is ${getPresenceMessage(+    person.presence+  )} and ${getVoiceLabel(person.micPresence)} ${getDeviceLabel(person.context)}.`;+}++export function PeopleSidebar({ people, onSelectPerson, onClose, showMuteAll, onMuteAll }) {+  return (+    <Sidebar+      title={`People (${people.length})`}+      beforeTitle={<CloseButton onClick={onClose} />}+      afterTitle={showMuteAll ? <SidebarButton onClick={onMuteAll}>Mute All</SidebarButton> : undefined}+    >+      <List>+        {people.map(person => {+          const DeviceIcon = getDeviceIconComponent(person.context);+          const VoiceIcon = getVoiceIconComponent(person.micPresence);++          return (+            <ButtonListItem+              className={styles.person}+              key={person.id}+              type="button"+              aria-label={getLabel(person)}+              onClick={e => onSelectPerson(person, e)}+            >+              {<DeviceIcon title={getDeviceLabel(person.context)} />}+              {!person.context.discord && VoiceIcon && <VoiceIcon title={getVoiceLabel(person.micPresence)} />}+              <p>{getPersonName(person)}</p>

It lets you select the text but it still triggers the button press. So you can't really copy the text. I think this is a relatively minor thing that we can tackle later.

robertlong

comment created time in 14 days

PullRequestReviewEvent

issue closedVRLiberationFund/Quest2Root

Root Access on Quest 2

Placeholder issue for testing BountySource

closed time in 14 days

robertlong
IssuesEvent

issue closedVRLiberationFund/Quest2Root

Root Access on Quest 2

Placeholder issue for testing BountySource

closed time in 14 days

robertlong

issue commentVRLiberationFund/Quest2Root

Root Access on Quest 2

Fixed in #2

robertlong

comment created time in 14 days

push eventVRLiberationFund/Quest2Root

Robert Long

commit sha 5b589ceb2738670f2a09b2227d1536c9c4d35392

Test

view details

Robert Long

commit sha 0e4818182f90582d9ef11291bc7e235843653f7d

Merge pull request #2 from VRLiberationFund/robertlong-patch-1 Test

view details

push time in 14 days

PR opened VRLiberationFund/Quest2Root

Test
+4 -0

0 comment

1 changed file

pr created time in 14 days

create barnchVRLiberationFund/Quest2Root

branch : robertlong-patch-1

created branch time in 14 days

issue openedVRLiberationFund/Quest2Root

Root Access on Quest 2

Placeholder issue for testing BountySource

created time in 14 days

push eventVRLiberationFund/Quest2Root

Robert Long

commit sha 0ba4953d57a1e98b9acfd3f923c95ed57bbce596

Update README.md

view details

push time in 14 days

create barnchVRLiberationFund/Quest2Root

branch : main

created branch time in 14 days

created repositoryVRLiberationFund/Quest2Root

created time in 14 days

pull request commentmozilla/hubs

Redesign/people list quick fix

Awesome thanks!

johnshaughnessy

comment created time in 15 days

push eventmozilla/hubs

John Shaughnessy

commit sha bfab9869824ea04ca957fb170018dbd025cde053

Remove unused prop

view details

John Shaughnessy

commit sha c0aa8a0749776110abce0b47081cb5eca04689eb

Fix prop name signedIn -> isSignedIn

view details

Robert Long

commit sha da482e84d062895ccd77e8db005ae527caf52b6e

Merge pull request #3171 from mozilla/redesign/people-list-quick-fix Redesign/people list quick fix

view details

push time in 15 days

delete branch mozilla/hubs

delete branch : redesign/people-list-quick-fix

delete time in 15 days

PR merged mozilla/hubs

Redesign/people list quick fix

Couple one-liners I noticed when reviewing

+1 -2

0 comment

2 changed files

johnshaughnessy

pr closed time in 15 days

push eventmozilla/hubs

Robert Long

commit sha d524f81709a950dffe7ed601a8cf5c9fda892d0f

Remove onOpenAvatarSettings proptype

view details

push time in 15 days

more