clowdr-app / clowdr-web-app Goto Github PK

Old Clowdr versions 1 & 2 from 2020

License: BSD 3-Clause "New" or "Revised" License

JavaScript 24.33% HTML 0.28% CSS 13.36% TypeScript 57.00% SCSS 5.03%

clowdr-web-app's Introduction

[Deprecated] Clowdr

Versions 0 through 2 of Clowdr live(d) in this repository, which we're keeping here for anyone using it. The new development of Clowdr is over in the clowdr repo.

Suggestions and relevant contributions and issues from this repository will gradually be carried over into the new repository as we progress the redevelopment.

Clowdr is an open source tool suite to make it easier to run interactive and engaging virtual conferences. Imagine that your conference attendees could video and text chat with each other and easily drift between different conversations in different rooms. Now imagine that this app also integrated your conference program (directly imported from conf.researchr.org), and let attendees see who else is watching the same content. We were unable to find a technology platform that allowed for these interactions, so we built Clowdr.

This repository contains the source code for the Clowdr web app.

Information for Conference Participants

See the User Manual for instructions on how to use Clowdr as a conference participant.

Information for Conference Organizers

Please see the Clowdr Conference Organizer's Manual for instructions and answers to frequently asked questions about running Clowdr.

If you are interested in using Clowdr for your event, there is no need for you to download any code or run your own server (unless you want to!). We can host your backend server for free; the only costs to your conference are for streaming video (you'll need accounts with Zoom and Twilio). Clowdr has been battle-tested by thousands of users already this year at PLDI, ICSE and ISSTA. In August, VL/HCC and ICFP plan to use Clowdr. As we gain deployment experience, we hope to offer conference organizers a one-click installation of Clowdr. However, in the meantime, if you are considering Clowdr for your virtual conference, please email us at [email protected] and we can provide a demo and deployment for your conference.

Information for Developers

If you are looking for the most stable version, use the stable branch. If you want the latest code, which may or may not be stable and/or properly documented, use the dev branch.

Clowdr uses the Parse Platform as the backend. You can run this on your local machine for development.

We provide scripts which generate data sets for you to test against, as well as an automated test suite. Please try to follow the principles of TDD - it helps us make sure things work first time, every time. It also enables us to rapidly see what you change and whether it's safe for us to merge.

In order to test video/chat/email features of Clowdr, you will need to set up Twilio and SendGrid accounts. This is optional. If you just want to tweak some part of the UI not related to video/chat/email, then you don't need to set these up.

Standalone front-end setup (for development/testing)

Make sure MongoDB and MongoDB Database Tools (both) are installed on your system.
- Mongo is the database used by Parse. We create a local datastore called clowdr by default which is populated with the test data.
- You will need MongoDB installed to run the database.
- You will also need the MongoDB Database Tools which are a separate download that includes the mongodbrestore utility.
Run npm install -g parse-server parse-dashboard mongodb-runner.
- parse-server: The backend framework
- parse-dashboard: Service utility to view Parse Server configuration and data
- mongodb-runner: Provides easier access to mongodb commands
Clone clowdr-web-app - our Parse-based backend and React frontend
Clone clowdr-backend - our plain Node backend for Twilio callbacks
Within clowdr-web-app, run npm install
Within clowdr-web-app/backend/cloud, run npm install
Within clowdr-backend, run npm install

Start the parse server.

Run this command from within clowdr-web-app:

parse-server \
   --port 4000 \
   --appId XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX \
   --clientKey XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX \
   --masterKey XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX \
   --javascriptKey XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX \
   --restAPIKey XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX \
   --databaseURI mongodb://localhost/clowdr \
   --liveQuery "{ \"classNames\": [\"AttachmentType\",\"Conference\",\"ConferenceConfiguration\",\"ContentFeed\",\"Flair\",\"PrivilegedConferenceDetails\",\"ProgramPerson\",\"ProgramItem\",\"ProgramItemAttachment\",\"ProgramSession\",\"ProgramSessionEvent\",\"ProgramTrack\",\"Sponsor\",\"SponsorContent\",\"TextChat\",\"TextChatMessage\",\"UserProfile\",\"VideoRoom\",\"YouTubeFeed\",\"ZoomRoom\",\"WatchedItems\"] }" \
   --startLiveQueryServer \
   --allowCustomObjectId \
   --cloud ./backend/cloud/main.js

Don't worry: The "XXX..." are supposed to be like that and you don't need to replace them for testing.
This is our main backend. It runs the Parse REST API and our additional API functions, from the scripts in clowdr-web-app/backend/cloud/.
The option allowCustomObjectId is necessary for the test data setup. Do not use it in production.
You can also append the option --verbose to debug failing requests. This is particularly useful for debugging Object not found and permission related issues.

Run parse dashboard.

Run this command (in any folder):

parse-dashboard \
   --port 4001 \
   --dev \
   --appId XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX \
   --masterKey XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX \
   --serverURL http://localhost:4000/parse \
   --appName clowdr

Don't worry: The "XXX..." are supposed to be like that and you don't need to replace them for testing.

Open http://localhost:4001 in a browser. You should see the Parse Dashboard.
You can now close (/stop) the dashboard, but leave the Parse Server running.
Create an environment configuration file:
1. Make a copy .env.dev within clowdr-web-app
2. Rename the copy to .env
3. That's it, no further customisation is required for local development.
Ensure mongo, mongodump and mongorestore are on your PATH.
From within clowdr-web-app, run npm run init-test-data
From within clowdr-web-app, run npm start. This may take a while.
If all went well, you will (eventually - it can take minutes!) end up with a browser tab showing you a test instance of Clowdr.

Configuring External Services

For this step you will need to enter the CLOWDR interface using:

EMAIL:    [email protected]
PASSWORD: admin

Navigate to Administration > Conference Configuration. You will need to add various API keys and tokens to this interface. (Make sure to hit SAVE after each token.)

NOTE DO NOT hit "Initialize Conference" now. The backend is required first.

Twilio

Clowdr uses Twilio as the text and video chat service.

Go to Twilio, and create an account.
Create an API key/secret. (Select API Keys on the left under settings.)
Set these configuration values accordingly.

Config Value	Description
`TWILIO_ACCOUNT_SID`	Visible on the account dashboard.
`TWILIO_API_KEY`	The SID of the new API key you created.
`TWILIO_API_SECRET`	The secret for the API key you created.
`TWILIO_AUTH_TOKEN`	Visible on the account dashboard.
`TWILIO_CHAT_SERVICE_SID`	Under "..." on the left, go to "Programmable Chat". Create a chat service. Use its SID.
`REACT_APP_FRONTEND_URL`	For development, this is just `http://localhost:3000`.

Sendgrid

Clowdr uses Sendgrid to deliver emails to conference participants.

Go to Sendgrid, and create an account.
Create a Web API, and a key for it.
Set up a verified sender address (or domain), for example [email protected] or any other email address that is yours. That will be used as the sender of your Clowdr installation's emails. Sendgrid will ask you to verify it before you can send emails via their API.
Fill in the appropriate configuration values.

Config Value	Description
`SENDGRID_API_KEY`	Your sendgrid API key.
`SENDGRID_SENDER`	Your verified sender address.

Zoom

To use zoom embedding, you need to create a JWT app on Zoom, and set the instance configuration variables ZOOM_API_KEY and ZOOM_API_SECRET with the values from Zoom.

Configuring the CLOWDR Back-end

Clone the CLOWDR backend.
Run npm install in the backend directory.
Run ln -s "../clowdr-web-app/.env" .env to link the .env file.
Run npm start.

Now you can hit "Initialize Conference" in CLOWDR and begin using the app.

Further Setup

The following steps only need to be taken when deploying your own instance of CLOWDR.

Set Up Hosting and Live Query

From the app created in back4app, turn on live queries for the tables in the image below by going to Server Settings -> Web Hosting and Live Query:

Also check the Activate Back4App hosting box, and make sure the subdomain name you give it, YOUR_APP_NAME matches the environment variable REACT_APP_PARSE_DOMAIN=wss://YOUR_APP_NAME.back4app.io in your .env file.

Cloud Functions

Deploying the cloud functions requires the installation of the Back2App console client. Follow the instructions there. Clowdr's cloud code can be found under the folder backend; both of the subfolders in there must be deployed to Back4App. If, during the setup of the b4a CLI, you get an error saying that it can't use the existing backend folder, create a parallel back4app folder under the clowdr-web-app, and copy the two subfolders of backend, and their entire contents, there. Then, before deploying, change to back4app/cloud and do npm init. After this, you can do b4a deploy.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Join us on the Slack CLOWDR workspace!

Licences

Twemoji

Copyright 2020 Twitter, Inc and other contributors Code licensed under the MIT License: http://opensource.org/licenses/MIT Graphics licensed under CC-BY 4.0: https://creativecommons.org/licenses/by/4.0/

clowdr-web-app's People

Contributors

Stargazers

Watchers

Forkers

laofulf inventitech sweirich anniejingchen dlwangyilin mathnerd314 ednutting bingfeizh rossng dorranh ashok314 curiousleo

clowdr-web-app's Issues

Slightly more informative message for Firefox users

Hello,

As JB said:

"Yup, we had a discussion with Alan Jeffrey at Mozilla about this. Their WebRTC implementation was the first implementation out there… and before the standard was finalized. As a result, Firefox does not have as stable of support for WebRTC than other browsers. If you are in a twilio-based video room and there are more than 2-3 video streams, your CPU will spike to 100% and it will get very choppy."

It may be better to display this kind of explanation rather than just say that Chrome/Edge/Safari only are supported as there are a lot of Mozilla supporters/sponsors using Clowdr.

I'll see if I find time to edit the alert myself using this issue for PR. :)

Cheers,
Alex.

"Edit" button on front page doesn't work on Safari

On Safari, pressing the Edit button on the front page yields an empty window. (Pressing the "Save" button restores the original text.)

(This is the only Safari incompatibility I've seen.)

Add hover text for empty chat rooms

The hover text for the name of an empty chat room should say "(currently empty)".

This will prevent a LOT of confusion when new participants are first approaching the site (and therefore probably all the chat rooms are empty)

Pie in the sky / Add emotes on live rooms

Delete users via admin interface

A “delete” button on the user admin page would be handy. Deleting a user should:
Dissasociate any existing ProgramPersons from that UserProfile
Remove the UserProfile from that Users’s list of profiles
Delete the UserProfile

"Go someplace random" button

We've gotten a lot of requests for a button somewhere in the UI that will take someone to a random chat room (with at least one but no more than three people currently in it).

The main reason for this is lowering the "activation threshold" for shy people to join conversations. Thus, the need for this may be a little less if we succeed in our other efforts to help such people (e.g., by creating a "listening mode" when entering chats).

Video / Allow muting the audio of other people

Allow anyone in a room to mute someone else's mic (and put a message in
the chat saying who did it).

(This is important because people sometimes step away from their keyboards, not realizing that they didn't mute themselves, and start making a lot of noise...)

With video muted, you can't see their names

When someone mutes their video, they turn into a black bar. Their name is black text and thus unreadable:

Highlight active posters

Consider how to make it clear which poster sessions are active at the moment (add a list to the Posters page, maybe? and/or to the Lobby page?)

UI / Implement optional dark mode

Code cleanup tasks

refactor all the code that got duplicated in the heat of the moment :-)
move all CSS styling from .js files into App.css
find and remove dead code (especially whole files)

Live sessions / Live session with embedded to iqiyi play at the same time

When accessing the live session from the top bar. All embedded iqiyi sections will play at the same time.

This creates an unpleasing experience both for visual participation and my computer (since it's playing 3,4 live streams at the same time.)

Maybe simply providing the link would be better?

Support DM'ing users who have not yet signed up

status colors and text are not getting updated when they change

... on the ISSTA site, at least

Admin/Rooms

Implement search by name
Fix the layout of the table (it goes out of the available space)

Admin/Items

Show/edit authors and other parts of items
Implement change/add new item (but see #37)

Improve text chat

With just a couple of improvements, it seems we should be able to make the text chat just as good as Sli.do for people to ask questions during talks.

E.g.,allow

marking a post as a question and
filtering the chat to show only questions.

(The former, especially, will be really helpful for replacing Slido!)

Jon's version: We should already have a chat channel for each paper, so add threading for Q&A. We implement that as JSON metadata on each message. Add upvoting and emoji reacts to messages (might be tricky to implement - need to worry about concurrency, can't just have increments on Twilio metadata)

Update: The way to avoid concurrency issues is simply to make each reaction or emoji be a new message (with an attribute that says which message it is reacting to).

UI nits

(Probably some or all of these should be broken out as separate issues for easier tracking...)

Simplify closing vs. minimizing of text chat windows

To minimize confusion about closing the text chat windows, what about
removing the X from the chat window itself and making the -- (minimize) do
what the X does now? I.e., the only way to really close a chat window is
from the sidebar?

Program / Researchr-like features

Either integrate our Program with Researchr (especially including "My Program" view) or else
duplicate that functionality in the Clowdr Program tab

(We decided the
latter was more plausible short-term, but the former would be a better
incentive for the researchr team to collaborate with us!)

No scroll bar in Firefox

I know Firefox is not currently supported, but it actually works great with the exception of one relatively major feature:

Using Firefox 77.0.1, there are no scroll bars in chat windows. This concerns the small 'Facebook-style' pop-up chat windows as well as the big, right-column chat bar. Even in the absence of scroll bars, scrolling in these regions is impossible. I cannot use my mouse or do the old trick of marking text and dragging it.

There are scroll bars in the left "status" bar column, so I am hoping this would be an easy fix.

Thanks for looking into this once you find time. It is not urgent for me.

Emoji nits

Add Emoji reacts for talks (thumbs up, clap, heart). Send as JSON messages in Twilio.
Emoji renderer should never show "undefined" (try typing e.g. 🤷)

Admin area: general fixes

All over the admin area, all tables should have cells editable
adding a new "thing" should create a new empty row, perhaps with default values
change the default pagination to 500
automated creation of YT live streams

Changing channels shouldn't un-mute audio/video

Steps to reproduce:

mute audio (and/or video)
change to another channel

expected behavior:
audio/video is still muted/unmuted, similar to the state in the previous channel

observed behavior:
audio and video are always unmuted

Convert to Typescript

Marking other participants as "Favorites" or "Stars

Whenever you are looking at the name of a participant, you should be able to click a button to “star” them (or add them to a contact list) so that you can easily find and chat with them throughout the event.

There is some subtlety to how to design this feature to balance people's desire to easily find each other with the requirement to protect people from snooping and other unwanted attention.

Feature: Allow muting by default on rooms

When people join to listen, they will have the audio on by default and may accidentally cause a bunch of noise to people around them. It would be useful to set a room to mute by default so everyone who joins won't have to explicitly mute and disable video.

Admin / Add profile field for hobbies

.... and make sure it is displayed with the other profile information.

"Just listening" mode for video chats

One way to lower the "activation threshold" for people to join conversations is to allow them to join in "just listening" mode.

E.g., we could make this the default when people enter a room. They are able to hear (and see?) what's going on, but other people cannot see or hear them -- their name is displayed in a separate part of the UI for people in the room (so that they know who is listening but it's clear that they are not really part of the conversation, don't wish to be asked questions or invited to speak, etc.).

When in listening mode, there is a clear indication that this is what is happening and a prominent button that says "Enter room." (And another for "leave room.)

Zoom-hosted chat rooms

Add an option to make breakout rooms using Zoom. We could make a few standing rooms that you auto-join through the Zoom web SDK, so the experience would be similar to using Twilio video, but higher quality.

Admin / user-defined flairs

Create an admin interface for specifying flair/tags. Allow users to pick up to 2 (?) tags to be displayed next to their name on their "virtual badge"

"Self-driving" mode for set-up and adminstration

Make it possible for people to set up and use Clowdr without devs in the loop.

Admin manual / README
Set up a demo site that we can show people

Posters / Poster "UI card" images

Poster and demo presenters should be able to upload an image that will serve as the background of a UI "card" for each of them

Interface to let moderators create additional public chat channels that users can find and join

Also make an option to make them announcements

Pie in the sky / Watch parties

Have the option of the videos for the breakout room to show up on the side, so that you can be watching a YT live stream, and also have some side channel up.

Insufficient bandwidth warnings not properly placed

When there are bandwidth issues, an 'insufficient bandwidth' warning draws over the grey'd out video stream(s). However that warning is not properly sized/placed and overlaps the chat window and other streams that are not grey.

Example 1:

Example 2:

What does "Lobby" mean?

In general, the semantics of the word "Lobby" is not clear, throughout the whole interface.

Admin/Registrations

Search by name
Show new registrations after file upload

Add security for creation of all new program-related rows

User-created public channels

Create some mechanism for public, user-created channels. Like group DMs, but public.

Clarify semantics of "private" rooms with a tooltip

Right now. it is not clear to people what it means when a room is created (or marked) private. Also, the little "locked" icon is hard to interpret.

One simple way to help would be adding a tooltip for the room name that says, e.g., "Private room: you have been granted access by Jane Smith" or "Private room: you are seeing it because you have moderator privileges"

Private conversations created from text chat should be Ephemeral

If you click on the camera-+ icon in a chat to spin off a new private
room for a conversation, the room should be created in Ephemeral mode, not
Persistent.

However, the fact that only one person at ICFP seems to have created
a room in this way -- and that person was following BCP's instructions! --
suggests that this feature is not obvious to people! We should make it
easier to find -- at a minimum, choose a more intuitive icon for it.

Claiming authorship

Need to add the ability for users to claim authorship of papers/posters, so that they will automatically join the chat
associated with their work, and see notifications when people comment on it or ask questions

The posters/demos chairs should have a special role that allows them to associate "ownership" of the posters to specific email addresses. From then on, the users with those email addresses will have write permissions on the posters. (This is one-off procedure for ICSE that should be generalized later for future conferences: track chairs should have special roles that allows them to set things up)

Deleting a room should make its text chat window go away

allow editing posts on chats
deleting a room should make its text chat window go away
make chat windows resizeable (and reconsider how they are laid out -- e.g., should they be on the bottom of the screen, or should they share space in the right-hand sidebar?)

Pie in the sky / Push notifications for messages

Improved search

We really want to be able to (a) search for anyone on the platform, not
just people in the same top-level room as me, (b) search for anybody
registered for the conference, not just people signed on to the platform
right now, and (c) send a chat message to anybody I can search for…

(JB: This is not hard. The ContextualActiveUsers already gets all of the presences and filters them to the current social space. So, the search bar could be set to search across all of the users.)

Make Clowdr work well on different size screens

Change the number of columns in lobby display depending on screen size (this is partly implemented in App.css, but needs to be checked with several different sizes)
- Think harder about screen real estate on small (e.g., laptop) screens. In particular, the logo and title bar across the top use a lot of space!