sparkletown / sparkle Goto Github PK

On some venue page, extra scrollbar shows up and causes the whole page to jitter when I move my mouse around the page.

It looks like the scrollbar issue can be prevented by adding overflow:none to .party-map-map-component class, but I am not sure if that's the right thing to do, or if there is more fundamental issue. The purple popup is also cut off at the bottom - which can also be corrected by adjusting z-index.. but I haven't really looked into it.

Noticed at temple burn that there was a lot of noise spam, and a lot of people wishing they had an in-app way to mute them (without resorting to muting the whole tab, etc)

It would be cool if there was a mute button within the app or similar for these occasions.

Related PR #1311 / 🔒 https://github.com/sparkletown/internal-sparkle-issues/issues/622 is augmenting chat panel to be pinnable (on big screens) which would indeed be nice. It seems to need more testing and mitigate some issues, but if resizing to be developed, quite likely it might better be on top of that PR? May be @soichih has a quick idea on how to add resizing capability?

Hi! I am interested in configuring a setup using entirely local resources (possibly orchestrated through something like docker-compose), and from the README it looked as though the first step towards getting advice on this was to open an issue. I'm sure I'll have more questions once the ball is rolling, so a big thank you for all your help in advance!

Just discovered that datetimes seems to be automagically presented in my local time zone (at least in the Schedule)! Which is awesome! To avoid visitors wondering if the times are in the local to them time zone, I think it might be valuable to explicitly display time zone (even if in just GMT+-offset e.g. GMT+1 or GMT-4) somewhere. Ideally, if it could have been chosen - might be nice as well since it would help people to communicate when to arrive to some event - they could switch time zone to see when it would happen

Discovered while considering it in some shape or form for also rendering emojis and urls in the chat messages.
ATM it creates a separate return <React.Fragment key={index}>{word} </React.Fragment>; for each non-url word thus making it

IMHO for no benefit since it could have stayed at least a single string. I do not know if that would provide any notable benefit performance wise but I would assume so? Could be easily addressed within getLinkFromText but accumulating words until needed to be output (e.g. when hitting some non-text fragment like a url or an emoji; or reaching the end and still have some accumulated)

Feel welcome to close if no notable benefit to be gained

Inspired by seeing #1468 by @0xdevalias decided to share an idea which could be nice for a hackathon and could be used by @sparkletown to quickly establish a sample integration smoke test + benchmarking + democase for any given target event deployment.

For our https://dandiarchive.org project we created a quick&dirty https://github.com/dandi/dandi-api-webshots/#readme (code generating it: https://github.com/dandi/dandi-api-webshots/blob/master/tools/make_webshots.py , walkthrow scenario part) where we sweep through dandisets and provide summary of timings to see what aspects should be improved and what dandisets would be "clinical cases" triggering the need.

For sparkle then it would be just a sequence of steps through the event with their timings, webshots and ideally output from browser console to spot any possible errors. Possibly with a summary on top leading to the steps which either exceed some desired timing threshold or error out.

E.g for env/ohbm (attn @margulies ) it could be a walkthrough

• go to main page
• click on poster hall
• search for some target poster
• go to the target poster as the first among found
• go back up one level (to posterhall)
• ... and so on

Seeing screenshots would allow rapidly assess "where we are" in terms of desired development, what is missing, how UX would be given the timings, etc.

Ideally, if such testing setup becomes a part of should be then placed into a CI so could run against the target branch deployment and then provide diff on timing or error out if something is not fixed. But that would be quite a bit more evolved ;) Re concern "but it is on CI with unreliable timing!": that would be ok since it would be just for comparison as done/ran on the same instance. We do that for seeing effect of PR on benchmarks in DataLad and it works wonderfully. Relevant workflow (just for ref): https://github.com/datalad/datalad/blob/master/.github/workflows/benchmarks.yml

It is highly desired (if not desperately needed) to be able to quickly get a better idea about any particular poster displayed in a poster hall. It is needed for a number of reasons, e.g. user might want to quickly get more information about the poster/research without going to a room since that takes time and "cancels" search result (see #1447).

I think a nice approach would be to overlay clickable icons which would perform extra actions:

• 📄 - bring up an overlayed pane (scrollable) with rendering of the abstract (ideally in markdown -- #1383 ) . Would have some x to close or just allow to close outside to close, or escape button press (relevant: #1416)
  • note: this is the main feature needed. could be partially mitigated by the next one - ⬇️
• ⬇️ - download PDF of the poster
• "share" icon -- social media share - #1396 (probably not a good idea)
• 📺 - video preview pane, as being implemented in #1522 but without explicit icon for it
• 🔖 -- #1375 is establishing the precedent/framework for this

ATM they all point to non existing https://ohbm.sparkle.space/in/exhibitionhall which should be https://ohbm.sparkle.space/in/exhibithall or actually specific booths like https://ohbm.sparkle.space/in/boothsiemenshealthineers for Siemens

Attn @margulies et al

I think the problem may be related to a limit of 10 queries using the 'in' option in 'whereOptions':

For a reference to this problem: link

ATM

(markdown issue filed separately: #1505 )

So if the event has time -- it should be displayed, as "Starts at HH:MM on MM/DD/YY in PLACE"

fancy one would be : if starts on the same day or let's say in 24h to be kind to midnight people, display
"Starts in MM minutes at HH:MM in PLACE" (I think it is ok to skip the date in such case ;-)) or even switch to ticking clock with minutes/seconds counting down -- it is React after all, right? ;)

When I go to http://localhost:3000/in/seasig in devel instance for ohbm, staging branch (originally detected while cruising in #1383) and choose a seat - end up with following error replacing the room:

Unhandled Rejection (Error): internal
new HttpsErrorImpl
src/api/error.ts:65
  62 |  */
  63 | readonly details?: unknown;
  64 | 
> 65 | constructor(code: FunctionsErrorCode, message?: string, details?: unknown) {
     | ^  66 |   super(message);
  67 | 
  68 |   // This is a workaround for a bug in TypeScript when extending Error:
View compiled
_errorForResponse
src/api/error.ts:175
  172 |     return null;
  173 |   }
  174 | 
> 175 |   return new HttpsErrorImpl(code, description, details);
  176 | }
  177 | 
View compiled
Service.<anonymous>
src/api/service.ts:231
  228 | }
  229 | 
  230 | // Check for an error status, regardless of http status.
> 231 | const error = _errorForResponse(
      | ^  232 |   response.status,
  233 |   response.json,
  234 |   this.serializer
View compiled
▼ 3 stack frames were expanded.
step
node_modules/tslib/tslib.es6.js:100
next
node_modules/tslib/tslib.es6.js:81
fulfilled
node_modules/tslib/tslib.es6.js:71
▲ 3 stack frames were expanded.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

I thought it might have been because I was present in the same browser from multiple tabs under different users - one in this local devel instance and another on https://ohbm.sparkle.space/in/seasig . I went to Home in the official one but issue persisted. I have not observed it in the official one.

to not overpromote the lucky first X and leave the others behind.

randomization sounds like the easiest/best way to give fair exposure

Currently we don't really have any efficient patterns around load testing the platform, particularly to see how far it can scale, as well as making it easier to identify 'hard to find' performance issues that seem to only pop up at scale.

Would love to hear any thoughts/ideas around this, and any proposed solutions/things you have found useful in the past.

Given we are a rather 'frontend heavy' React app, and we're building around Firebase, I expect we don't really need to test the infrastructure layer of things at all, so will need to be able to simulate 'real user in a browser' sort of functionality.

I expect we may not need to do this via full 'browser integration test' automation, as that would presumably be fairly limiting if we wanted to see what 1000, 10,000, 100,000, etc users on the platform performs like from a 'data/updates' perspective. One idea I had for this in the past was to create little 'artificial load' scripts, that simulate the actions a user might be taking, but 'write' those directly into firebase, with only 1 'real browser' being used to 'feel the impact' of what that level of activity/updates would cause.

(Sparkle Team: We also have an internal issue about this: 🔒 https://github.com/sparkletown/internal-sparkle-issues/issues/267, as well as 🔒 https://github.com/sparkletown/internal-sparkle-issues/issues/871)

Background Context

I've tested the venue page with around 1000 audiences.

Was this with real/live users? Or did you create artificial users/‘fake load’ to test this out?

Originally posted by @0xdevalias in #1434 (comment)

I've used fake users to test this.

Originally posted by @soichih in #1434 (comment)

I've used fake users to test this.

Interesting.. how did you go about doing that out of curiosity? We haven't got any particularly good patterns/tooling around load testing features at the moment, so what you used here might be useful.

Originally posted by @0xdevalias in #1434 (comment)

Once create-react-app / react-scripts supports it, we should upgrade from the deprecated node-sass dependency to the Dart based sass

Related upstream issues:

• webpack-contrib/sass-loader#899
• facebook/create-react-app#9986
  • facebook/create-react-app#9988
  • 4.0.2 milestone: https://github.com/facebook/create-react-app/milestone/79
• facebook/create-react-app#10045

  • 9.0.0 (2020-07-02): facebook/create-react-app#10045 (comment): dart-sass is the default option in sass-loader. So what you need to do it's just install sass and it will work. Docs regarding it should be updated

  • 7.2.0 (2019-08-08): https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md#900-2020-07-02

    • prefer sass (dart-sass) by default, it is strongly recommended to migrate on sass (dart-sass)

  • https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md#720-2019-08-08

    • support auto resolving dart-sass

See also:

• https://github.com/facebook/create-react-app/blob/v3.4.4/packages/react-scripts/package.json#L73
  • "sass-loader": "8.0.2"
• https://webpack.js.org/loaders/sass-loader/

  • We recommend using Dart Sass

  • https://github.com/webpack-contrib/sass-loader/blob/v8.0.2/package.json#L43-L44
    • "node-sass": "^4.0.0"
    • "sass": "^1.3.0"
  • https://github.com/webpack-contrib/sass-loader/blob/v10.0.5/package.json#L43-L44
    • "node-sass": "^4.0.0 || ^5.0.0"
    • "sass": "^1.3.0"
• https://github.com/sass/node-sass

  • Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

  • sass/node-sass#2952
• https://sass-lang.com/dart-sass
  • https://github.com/sass/dart-sass

When firebase-tools exports it's TypeScript definitions (see upstream issue: firebase/firebase-tools#2378) then we should use them.

I do expect audience to provide pointers and links to other chat rooms and external websites. ATM URLs in the chat are not presented as hyperlinks, requiring dances to follow them. I think it would be great UX feature and trivial to implement to convert them (upon rendering) into <a> elements. Smart code should probably discriminate between external URLs and URLs to the event website and open external in a new window with needed security provisions. Or just open always in external since we should encourage people to stay in the chat.

Somewhat relates to discussion in #1387 for the internal urls. But otherwise I think it should be safe and very useful UX feature very easy to implement.

edit:

• might interact/interfer with Emoji'fication (see #1394 )
• possible solutions are in https://stackoverflow.com/questions/33235890/react-replace-links-in-a-text . Haven't spotted any react- library mentioned there already being used but didn't look too hard

A chaser for #1393 (a "fix" proposed in #1394) : I wonder how much work would adding emoji picker such as e.g. https://github.com/missive/emoji-mart would be?

The 'host' name doesn't appear when editing an event, and needs to be entered again each time. I was able to correct this by adding:

host: event.host,

to:

(I figured it was easier to post an issue on this that submitting a PR, but let me know what you prefer)

It would be cool if we were able to walk around the paddock using WASD keys, in addition to the current arrow keys.

It looks like the simplest place to add this without needing to make major changes to other areas of the app is in https://github.com/sparkletown/sparkle/blob/staging/src/components/templates/Playa/MyAvatar.tsx#L195-L205

A naive minimal implementation might be as simple as:

    const keyListener = (event: KeyboardEvent) => {
      switch (event.key) {
+       case "w":
+         pressedKeys["ArrowUp"] = event.type === "keydown";
+         break;
+       case "a":
+         pressedKeys["ArrowLeft"] = event.type === "keydown";
+         break;
+       case "s":
+         pressedKeys["ArrowDown"] = event.type === "keydown";
+         break;
+       case "d":
+         pressedKeys["ArrowRight"] = event.type === "keydown";
+         break;
        case "ArrowLeft":
        case "ArrowRight":
        case "ArrowUp":
        case "ArrowDown":
          pressedKeys[event.key] = event.type === "keydown";
          break;
        default:
          return;
      }

ATM running a devel instance off env/ohbm results in console showing following traceback

v3:1 Uncaught (in promise) IntegrationError: Please call Stripe() with your publishable key. You used an empty string.
    at new o (https://js.stripe.com/v3:1:2923)
    at yi (https://js.stripe.com/v3:1:155638)
    at new xu (https://js.stripe.com/v3:1:232159)
    at Lu (https://js.stripe.com/v3:1:233101)
    at initStripe (http://localhost:3000/static/js/vendors~main.chunk.js:64747:28)
    at http://localhost:3000/static/js/vendors~main.chunk.js:64771:12
o @ v3:1
yi @ v3:1
xu @ v3:1
Lu @ v3:1
initStripe @ stripe.esm.js:101
(anonymous) @ stripe.esm.js:125
Promise.then (async)
Elements @ react-stripe.umd.js:344
renderWithHooks @ react-dom.development.js:14803
mountIndeterminateComponent @ react-dom.development.js:17482
beginWork @ react-dom.development.js:18596
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
render @ react-dom.development.js:24840
(anonymous) @ index.tsx:272
unstable_trace @ scheduler-tracing.development.js:87
(anonymous) @ index.tsx:271
./src/index.tsx @ index.tsx:301
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ wdyr.js:9
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1

I don't see it while browsing https://ohbm.sparkle.space/in/home but didn't check if it may be just that the instance does have API key set, and thus it does spend time on each page load to communicate to stripe. AFAIK we do not need stripe service for the event, and any additional communication == "delay/waste", so would be nice to be able to cleanly "cut off" services which are not involved.

I was trying to add markdown rendering for Poll to go in #1383 (attn @margulies , yet to pushed to that PR), for that I had added a poll on the main OHBM page (on https://ohbm.sparkle.space/in/home logged in as Y.Halchenko) and then went to local instance on http://localhost:3000/in/home where I am logged in as Yarik, but when I tried to click on 👍 button (rendered nicely with markdown BTW) I am thrown into debugger, I switched back to staging where the poll looks like

and tried again to click on :+1: and console has

service.ts:160 POST http://localhost:5001/sparkle-ohbm/us-central1/venue-voteInPoll net::ERR_CONNECTION_REFUSED

(anonymous) @ service.ts:160
step @ tslib.es6.js:100
(anonymous) @ tslib.es6.js:81
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
Service.postJSON @ service.ts:151
(anonymous) @ service.ts:216
step @ tslib.es6.js:100
(anonymous) @ tslib.es6.js:81
fulfilled @ tslib.es6.js:71
Promise.then (async)
step @ tslib.es6.js:73
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
Service.call @ service.ts:192
(anonymous) @ service.ts:140
voteInVenuePoll @ chat.ts:137
(anonymous) @ useVenuePoll.ts:25
(anonymous) @ ChatPoll.tsx:66
onClick @ ChatPoll.tsx:81
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
executeDispatch @ react-dom.development.js:389
executeDispatchesInOrder @ react-dom.development.js:414
executeDispatchesAndRelease @ react-dom.development.js:3278
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287
forEachAccumulated @ react-dom.development.js:3259
runEventsInBatch @ react-dom.development.js:3304
runExtractedPluginEventsInBatch @ react-dom.development.js:3514
handleTopLevel @ react-dom.development.js:3558
batchedEventUpdates$1 @ react-dom.development.js:21871
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168

ice6.somafm.com/secretagent-128-aac:1 GET https://ice6.somafm.com/secretagent-128-aac net::ERR_CONNECTION_RESET

in the console, clicked on :+1: and got the same error as before.

I have tried to submit a new poll from the local instance but got

chat.ts:138 Uncaught (in promise) Error: internal
    at new HttpsErrorImpl (error.ts:65)
    at _errorForResponse (error.ts:175)
    at Service.<anonymous> (service.ts:231)
    at step (tslib.es6.js:100)
    at Object.next (tslib.es6.js:81)
    at fulfilled (tslib.es6.js:71)

so again suggesting that something is funky about login for the purpose of the Poll from a local dev instance?

edit: FWIW -- I did try poll yesterday and it worked - but I don't remember in which instance I had submitted and in which voted... and then I removed that poll to "not clutter" (should have kept)

primary use case to show/hide chat (while it is a floating one).

I see that some provisions were done already to 45108f2 provide support for shortcuts, but I wondered -- are any already there and it is just a matter of documentation (and having some "Help" pane) or it ended up non-trivial to support?

if (count) ideally should

• turn red (not stay white)
• show number of unread messages
• whenever counter increases, issue some sound to announce arrival of a new message

without that users would not be alerted whenever they get new messages

notes:

• when I unfolded directly into already active "Direct messages" view for my other account, there were no counter on top because that was "active" I guess (although folded and not visible). Something to look out for when displaying counter in folded state
• apparently that count is not total number of messages but likely how many people have direct messages not yet read... ideally "ping" or even count should reflect total number of messages. But at least making it react to new people number would already be an improvement

May be @soichih sees a quick way to accomplish the mission

even if it adds no performance hit (but I have heard about "no free lunch") to the what seems now longer time to load the main page of the event (https://ohbm.sparkle.space/in/home), it is quite annoying to have it start playing every time I go back to main page, even if I paused it when I was previously on the main page. That might also interfere during conference with ongoing audio/video calls (may be outside of the venue platform, or just in a separate tab). So it would be highly desirable to be able to
"pause" it permanently somehow.

And I think it was not like that before, i.e. it wasn't always re-starting when I was getting to the main page, so may be some recentish change in behavior.

I have tried my ignorant-react best to implement it but failed. Especially in the light of shortcuts support (#1416) it would make sense to make InputField (search bar, chat entry) to no longer be focused on if Escape is pressed.

I have tried to follow https://stackoverflow.com/questions/65740016/react-remove-focus-from-input-element-on-escape-key and

diff --git a/src/components/atoms/InputField/InputField.tsx b/src/components/atoms/InputField/InputField.tsx
index 2333a19b..a4a27a53 100644
--- a/src/components/atoms/InputField/InputField.tsx
+++ b/src/components/atoms/InputField/InputField.tsx
@@ -37,6 +37,14 @@ const renderIcon = (
   );
 };
 
+const onEscape = function (action) {
+    window && window.addEventListener('keydown', (e) => {
+        if (e.key === "Escape") {
+            action();
+        };
+    });
+};
+
 const InputField: React.ForwardRefRenderFunction<
   HTMLInputElement,
   InputFieldProps
@@ -61,6 +69,10 @@ const InputField: React.ForwardRefRenderFunction<
 
   const inputClassNames = classNames("input-field__input", inputClassName);
 
+  const onEscape = () => {
+    ref.current.blur();
+  };
+
   return (
     <div className={containerClassNames}>
       <input ref={ref} className={inputClassNames} {...extraInputProps} />

When on a PartyMap, the `RoomModal should show the upcoming events for that room/venue.

It seems that currently, this will only work correctly if the events have the room key set to the name of the room, AND the events are all created on the PartyMap venue itself.

Since all venues can have events created on them in our firestore structure, it makes sense that this is also reflected in how the logic works here. For that to happen we will need to ensure that we're reading the events from the venue the room relates to and using them here. To maintain backwards compatibility, we also will need to continue reading the events from the current PartyMap venue (and filtering them for any events that are related to this room.

Context / Exploration

Originally posted by @0xdevalias in #external-open-source on Slack.

RoomModal gets roomEvents from venueEvents, which is pulled in from venueEventsSelector (src/utils/selectors.ts) which reads from state.firestore.ordered.venueEvents, which is connected/updated by the 2nd query in useConnectCurrentVenue (src/hooks/useConnectCurrentVenue.ts), which is currently called from:

• src/components/templates/PartyMap/PartyMap.tsx
• src/pages/VenuePage/VenuePage.tsx

and a few other places that aren’t really relevant for this discussion.

RoomModal also passes some of the calculated data to RoomModalOngoingEvent (src/components/templates/PartyMap/components/RoomModalOngoingEvent/RoomModalOngoingEvent.tsx)

Plan

Based on the usage of venueEventsSelector / useConnectCurrentVenue, as the code currently is, the events would need to be added to the PartyMap venue itself to work in this way, which isn’t something we want to do.

This suggestion seems like the correct way to go about solving this properly:

@margulies: Ideally, I imagine it would be preferable for venue-level events to be grabbed by the parent venue to be shown on the venue modal, as I do see the logic of organizing events within venues (rather than within partymap rooms)

We would most likely use something like useVenueEvents (src/hooks/events.ts) instead of venueEventsSelector / useConnectCurrentVenue ; by refactoring RoomModalContent to accept the venueId, then connecting it there.

To maintain the current functionality, we may also need to connect/load the current venue’s events (eg. the PartyMap) and filter them based on the roomName / room key in the event; otherwise parties that have been setup with all events on the main map will break.

For now I would suggest that we keep the requirement of the roomName filter here, so that if multiple maps link to the same venue, they can display only a subset of the events as relevant to that particular room link. Would need to check with @sparkletown/product, but IMO that may not be a requirement we need to maintain, and so could potentially remove it in future to simplify the logic here even further.

We may choose not to implement this plan exactly as described above. In particular, one thing that comes to mind is that it may be more efficient to fetch the events for all of the rooms shown on the PartyMap at once, rather than trying to fetch them individually each time the RoomModal is opened. This may also assist us in caching the data better, as we wouldn't need to wait for another 'round trip' to the database every time a RoomModal is opened.

While working with a local instance, I get those . So decided to ask:

• is that expected
• shouldn't there be some /undefined end point and/or why we have it (env/ohbm branch)

Compiled successfully!

You can now view co-reality-map in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.34:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Proxy error: Could not proxy request /in/undefined from localhost:3000 to http://localhost:3001.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

Proxy error: Could not proxy request /in/undefined from localhost:3000 to http://localhost:3001.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

Searching for "ayzasdasdaaaaaa" gave me 3 posters. May be expected ATM (i.e. search is not really there)

Somewhat of a complement in motivation to #1388 (stripe): while loading a page noted browser saying waiting on eventbrite.

$> git grep eventbr
package-lock.json:    "react-eventbrite-popup-checkout": {
package-lock.json:      "resolved": "https://registry.npmjs.org/react-eventbrite-popup-checkout/-/react-eventbrite-popup-checkout-1.0.5.tgz",
package.json:    "react-eventbrite-popup-checkout": "^1.0.5",
public/index.html:    <script src="https://www.eventbrite.co.uk/static/widgets/eb_widgets.js"></script>
src/components/organisms/GiftTicketModal/GiftTicketModal.tsx:          "https://www.eventbrite.com/e/sparkleverse-2020-online-burn-tickets-117154948605"
src/react-app-env.d.ts:declare module "react-eventbrite-popup-checkout" {

Would be nice to disable that for env/ohbm since afaik also not used ("burn-tickets" in above suggest burning man specific venue setup)

I've tested the venue page with around 1000 audiences.

As more and more columns / rows are added, the page starts to skew toward top/left - pushing the main screen toward right/bottom direction.

Eventually, almost quater of the audiences / open seats disappear from the browser screen so users won't be able to see other people / find available spots.

I believe the layout of the page should be adjusted so that entire width of the venue can fit within the whole page. Instead of showing audiences around the screen, you could just display all audiences below the screen so that 1) main window is always visible at the top of the page 2) main window can occupy the full width of the page 3) number of users is not an issue as we can grow the available seat as long as we want (although they will have to scoll down a bit if there are a lot of people already seating). You could also split the window between the main window and audience area where you have a dedicated scroll bar for audience area so user can scroll through audiences without having to make main window disappear.

Like this..

It's not as fun as having audience around it.. but might be simpler / more scalable?

Also, I've noticed that the page becomes somewhat unresponsive when there are a lot of people moving around. This might be an issue when an event starts up and suddenly a whole bunch of people trying find spots.

@0xdevalias feel welcome to close whenever received! ;)

Depending on the verdict/recommendations to #1443, we would need to fix similarly the Screening room search. Should be straightforward

• ATM it searches only by title. Should add at least author and possibly other metadata. But then it falls under #1443 set of changes to be able to do so
• "too fuzy" with default threshold

The next UX fiasco which is not
fixed in this PR anyhow is "Show more posters" for a search query which has no
more to show.

Originally posted by @yarikoptic in #1445

I can see that a change was made in 527e9a3 that replaced profile pictures with a randomly chosen avatar, derived from Math.floor(user.id.charCodeAt(0) % RANDOM_AVATARS.length) when USE_RANDOM_AVATAR is set to true (as it appears to be for Burning Seed, in https://github.com/sparkletown/sparkle/blob/staging/src/settings.ts#L195)

It would be cool if users were able to choose/influence which of the default avatars they want to represent them on the paddock (I may biased'ly want to use avatar-12 :p)

While it would be an 'impactful' change (current random user avatars would end up being chosen differently), a naive minimal way that would allow user's to have some influence over this could be to use user.partyName in place of user.id, eg:

      const randomUrl =
        "/avatars/" +
        RANDOM_AVATARS[
-          Math.floor(user.id.charCodeAt(0) % RANDOM_AVATARS.length)
+          Math.floor(user.partyName.charCodeAt(0) % RANDOM_AVATARS.length)
        ];

For this solution I did across all keys unconditionally.

But if split words started with "{key}:" , restricting only to that key (with making to more obscure DB names), would've been awesome. Then I could say eg

"title: blah blah" author:Пушкин anywhere

and restrict searches - that would've been awesome. Unknown keys ignored and passed as is without splitting or just to all. Can express a brief solution in python, but JS is pain for me.

Originally posted by @yarikoptic in #1460 (comment)

Schedule is quite "busy" in having a large number of venues. It is impossible ATM to grasp it fully (at least on my laptop screen with 3840x2160 resolution ;-) ) without scrolling vertically/horizontally. Using browser's zooming-out helps with getting a full-er view horizontally but nohow helps vertically. I think the most logical solution would be adding a resizing capability to that pane.

Similar desire for the chat bar was expressed in #1392 and horizontal resizing capability for the chat sidebar is proposed/pending in the #1421. So may be the same/similar Resizer could be used for the Schedule (attn @soichih ), but it makes little sense to venture to implement it that way until there is a clear destiny for #1421 .

Satellite to #1387 (re Entering the venue, the same logic/arguments for "user tracking" aspects apply, solution is different).

Posters are numerous and for efficient and just tolerable UX it is needed to be able to quickly go through them.

Now if I search up a good number of posters, and decide to check out a few,

• it would take forever since loading each poster imposes "blue screen of sparkle" penalty
• I would have no chance to get back to my search result since as soon as I click on a poster, going back would bring again to original listing without my search (possibly scrolled) result

to at least partially mitigate, possible workaround is to allow posters to be opened in a new tab/window. For that the same idea as in #1387 applies - expose users ability to do so instead of trying to prevent it. Yet to see where to stick that href url (which is known) for the div.

you can see that no seat assigned when I click in that "middle row"

There is a "Back to {venue up}" button which is sufficient to be able to quickly get back to main landing page from 1st level sub-venues. But a sequence of jumps is needed to percolate from lower levels. Given that every page load takes seconds of "blue screen of sparkle" it becomes quite unpleasant UX quickly.

Possible solutions I see in order of preference

• full path of breadcrumbs: e.g. like "Back to: Home : Poster Hall : Poster 111" (if hypothetically we were in some venue within specific poster) -- if there is a clear nesting structure known
• Dedicated Home + Up: e.g. like "Back to: Home, Poster 111" in the above scenario, with the 2nd one being added ONLY if not it is a {home} (i.e. that we are just 1 level down)

ATM video panel is occupying probably just a 4th of the available space. There is a "Enter full screen" from the video itself, but that hides the rest of the auditorium UI, especially importantly "Chat".

I believe in discussion with @margulies we talked about having that video panel resize so it covers the "seats" but leaves top bar + chat (if open) visible since I believe this would be one of the main ways people would interact -- watch/listen + chat etc.

I guess it would be tricky to make it work "properly" accounting for the chat to be visible or not and what size it is (whenever some version of @soichih 's 750de5d is accepted)

also in the admin interface -- renders the body nicely but not the title.

ping @margulies

might be prohibitively complex to implement at this point, but thought to check on feasibility since may be DB keeps track already of which posters a user has visited. If yes -- poster previews could get some annotation (checkmark icon or alike; blueish border is taken already for speaker attendance). This would be super useful in particular to mitigate current UX shortcomings of being unable to open a poster in a new tab + unable to come back to the prior state of the posterhall (#1477): if I perform search, get e.g. 10 posters, go to one, come back, re-search, go through the list to remember which I already attended, and go to the next one. At least with the clear annotation, it would make the last step easier.

if such information is available in DB, it might be even worthwhile adding a filter with choices: "All" (default), "visited", "not visited", and ideally memoizing that selection as well (#1477), which could help to navigate through the posters.

edit1: oh hoh -- there is "users[].enteredVenueIds"! so information is there!

I've tested the venue page with around 1000 audiences.

..snip..

I've noticed that the page becomes somewhat unresponsive when there are a lot of people moving around. This might be an issue when an event starts up and suddenly a whole bunch of people trying find spots.

Originally posted by @soichih in #1434

Initially thought about it in the context of randomizing the posters listing (#1452 (comment)) but then realized that it would be generally very usefull: unless poster is opened in a new tab/window (#1447 wishlist) when I go to a poster and come back I end up in a fresh state -- search query is gone, my position in the list is gone etc. A general solution would be to somehow memoize the entire state of the page rendering and position at that point so when I get back to it from a poster, I end up in exactly the same state.

One way is to describe the entire state of cause (search query, and probably id of the top visible poster to add to #fragment? and then change url in the history before leaving to be that - so browser would get to it upon "back" and also make onClick to go to that state too).

I wonder if there is some reasonably easy way to accomplish that (attn @0xdevalias @soichih)?

emojis already used for reactions etc. But they are absent where IMHO most needed -- in the chat. I wonder if it might be easy to implement using e.g. https://www.npmjs.com/package/react-emoji-render to render chat messages? I think it would be ok to not have some fancy completions etc to start with and just rely on people to know to type :smile: or :)

Edit by @0xdevalias: See also #1395 as a tightly related issue/feature.

On chrome, when I first open a Venue, all the rooms are collapsed at the top for a second or so before showing the map correctly.

now it requires too much of mouse joggling to go to the thread, click reply, then go down and click within edit box to start typing. IMHO user intention is clear whenever "reply" is clicked, so focusing into that input box would improve UX.

Ignorant in JS me didn't figure out immediate way to do it the best way, but I bet it must be trivial (I do focusing with pure JS in #1416 for search bar)

This feature is likely dependent on markdown rendering support being merged first (see #1383)

To allow the text field to automatically grow in size (up to a configured limit), we probably want to use react-textarea-autosize (see link below), potentially wrapping up this functionality as an optional mode within our generic InputField component:

• https://github.com/Andarist/react-textarea-autosize

To implement the keyboard shortcut (alt+enter) we will need to fix the long outstanding bug in useMousetrap (most likely in a standalone PR) to allow it to correctly bind to a component (using a React ref), rather than being a global shortcut. We would then use useMousetrap to add the shortcut, adding it to (once #1416 is merged) KeyboardShortcutKeys in src/settings.ts (potentially under the inputField 'namespace', depending on where/how we implement this feature)

@yarikoptic Suggested that this feature may make the chat feel too 'cluttered' if we enable this feature before allowing users to resize the chat sidebar (see #1421 / #1392)

Background Context

Cool, thanks. I wonder if we can just tweak the styling a bit to factor for that (eg. it's probably some margin or padding or similar I expect) and not have to remove the p entirely from here? If so, then that might be a better solution (and likely would allow for multiline messages to work)

Originally posted by @0xdevalias in #1383 (comment)

And while the chat may not support multiline at the moment, making it able to do so would take trivial code changes (swapping input element for textarea or similar + maybe some local keybindings so that shift+enter inserts a newline rather than sending the message, etc; similar to how it works in most chat apps), so if it's just a tweak to the styles to correct the 'wrapped in p' issue here, then the not-overengineering-the-solution approach would be to just make that localised tweak fix, rather than changing the fundamentals of the react renderer and the elements it uses across the entire application.

Originally posted by @0xdevalias in #1383 (comment)

I would welcome shift+enter support in chat, but didn't dare to suggest ;-)

Originally posted by @yarikoptic in #1383 (comment)

I would welcome shift+enter support in chat, but didn't dare to suggest ;-)

https://github.com/Andarist/react-textarea-autosize should work to give us a a textarea that can expand. Min rows should be set to 1 so it stays small by default, and then set some sane upper limit so it doesn’t get too tall even when there’s a lot of text (at which point I expect it should scroll)

To add the shift+enter keyboard shortcut we’ll ideally want to fix useMousetrap so that it can properly use a ref. I’ll try and look into that when I’m on a computer next and see if I can figure the solution for it.

Originally posted by @0xdevalias in #1383 (comment)

re Shift-Enter + autosize ... not sure if I would be able to get to it (but may be @soichih or @margulies would find time to help), but hopefully we don't need to make this PR conditioned on that extra feature.

edit: it would be also not as useful unless #1429 lands

Originally posted by @yarikoptic in #1383 (comment)

I meant #1421 PR closing #1392 issue -- resizeable chat sidebar. That is when having multiple lines in a single post formatted nicely with images etc would be handy. ATM it would just clutter than chat message etc IMHO.

Originally posted by @yarikoptic in #1383 (comment)

• search is plain straight fuss.js without what was done for posters hall. impossible to find anything (e.g. by author name) #1448
• title for the https://ohbm.sparkle.space/in/screeningroom web page says "OHBM2021- Poster Hall" not "OHBM2021- Screening Room"
• would be a nice UX to "scroll to top" to the video pane if I hit on a preview down in the list of videos, and ideally go back to the original location when I close that video . Otherwise it is at least confusing and requires figuring out to scroll to the top to actually see the video when "Now playing" appears overlayed on top of the preview (note: click on "Now playing" also doesn't scroll up)
• "now playing" is factually incorrect since clicking/selecting a video doesn't actually start playing it. I think it would be a nice UX addition to start playing video as soon as it is selected
• minor: all titles prepended with "1.". Not sure what that is about

Otherwise -- I really like it! well done!

attn @margulies