Hi. First of all I'd like to say this project looks very interesting! I was taking a look at the package.json file and I saw there's a config for ESLint but the dependency isn't included. I also took a look at the change proposal for running prettier only on staged files #15 and #16.

How about using ESLint as well for a more complete code style enforcement? You can add prettier as a plugin for ESLint and add a pre-commit hook for ESLint on only staged files with lint-staged.

This will allow setting the subscriber role automatically. Might require integration with the Discord API on the server.

Notes:

• Use markdown for image rendering
• Potential for abuse, make opt-in?

Right now a room will continue "existing" and the interval keeps running. I think when all users left from the room roster, the room could be set to "cold" which stops the interval and pauses the videos but keeps it open.

What do you think @howardchung ?

Currently, if the buffer pool is exhausted and a brand new VM needs to be provisioned, it can take 1-2 minutes for the VM to be assigned. If the user cancels by hitting stop, the assignment isn't cancelled and the vbrowser will start when it's ready, even if the user is doing something else.

Currently, the vbrowser won't trigger the keyboard to open on mobile devices as there appears to be no focus on an input field.

We might have to do something like the "proxy input element" approach here to pick up keystrokes and send them.

https://stackoverflow.com/questions/4609765/manually-triggering-the-iphone-ipad-ipod-keyboard-from-javascript

Make these recognized as youtube URLs

Currently the homepage hosts a default room, but probably want to make a splash/landing page to showcase the features (and also avoid people putting objectionable content up)

Apparently this won't work if a non-supported file is passed to prettier.

We can either whitelist extensions (as in the original change), just run on everything (might be ok), or turn off running prettier on commit. I'm not super opposed to just running it with npm run prettier when we want to do a formatting pass.

Noticed an issue with the combobox where picking a result sometimes doesn't trigger a video change. Haven't been able to repro it reliably, but will update if I can

I think just being capped to one video at a time is bad when you find another video but don't want to interupt the current video.

Currently the app assumes that URLs will be for media files, but currently if you paste a link that's not a video it'll just fail to load.

Possible solutions:

• Show the user a message indicating that maybe they want to launch a VBrowser
• Show the website in an iframe (will not sync between room members)

The browser can take up to a minute to launch, and also might start with a black screen before Chromium opens. Might want to add some text to explain this.

Bit a longer-term goal, but it should be possible to build a RN app that talks to the same API and has better mobile support.

Packaging the existing app as a PWA is also an option, but that's probably Android-only and PWAs don't seem to have taken off.

I think having better instructions on how to setup the project helps the repo to get traction and is helpful specially for beginners.

What do you think @howardchung?

You might have a better system already, but have you thought about possibly integrating with protobowl.com? It has a system for generating/joining rooms, as well as a ton of questions from quizbowl-type competitions.

I don't know enough to know how easy it would be, so feel free to discard. The Github is here.

Currently ID values are reset on disconnect/reconnect since socket.io generates a new ID.

Allow clients to register with a custom ID value so that all random values can be mapped back to a single ID.

Should we have a Discord server for this project for faster iterations?

Currently capped at 720p, but some users might want higher resolution.

Firebase supports handling the backend for this, but we'll have to implement our own signup/login form.

I saw the recommendation of a Docker deployment, but I'd like to suggest LXD/LXC as a possibility. Has all of the advantages of a Docker situation, but minus the "random layers" issues Docker can bring to the table.

If it sounds like something interesting, I might be willing to pitch in and help develop the image :)

Currently VMs will auto shutdown after a maximum session duration. Put a message in chat to make it more clear what's happening.

This is currently due to the fact that the server tracks the controller by their socket.io ID and this is reset when the server restarts and all clients reconnect.

We either need to use a different ID value or provide some method of mapping to the old value.

I've achieved this previously by having each client store their socket.io id in localStorage and providing a reconnect socket command that transfers state over to the new ID. Works if we can trust room members.

When you go fullscreen, you lose the ability to use any of the video player's controls. Being able to pause, skip forward and change the volume whilst fullscreen would be very useful.

Multiple people have asked for this.

Probably we'd need to:

• Create a modal interface for picking video and subtitle (not just direct to file picker like it is now)
• Send the srt file over a separate RTCPeerConnection
• Convert srt to vtt on all clients
• Add vtt as track on the video

Normally, we end the session (reset host to '') when the screensharer disconnects. However, if the server gets restarted (code update, etc.) it's not clear what the current behavior is. It's possible the room might end up in a locked state where the video can't be updated as the name of the streamer is no longer valid.

Currently, screenshare/fileshare require one user to upload to everyone else in the room, which doesn't scale to large room sizes.

To achieve higher viewer counts, we can try something like MediaSoup which provides a server that will broadcast a single user's video stream to everyone else over WebRTC.

Including:

• Extension list (currently, ublock Origin and NordVPN)
• Custom home page (currently google.com homepage, sometimes shows captcha)

Fix is to do numlockx on in the container.

This makes numlock permanently on, so toggle ability is lost. Might be ok.

Safety feature to prevent abuse. Not a problem yet, but keeping it in mind.

this is actually a bit nontrivial as we have to network the sub status (currently clients only know if they are a subscriber)

For allowing integrations to create/launch rooms with specific videos set.

We already have a createRoom endpoint, although it currently doesn't auto-set a video.

Since we discussed the pre-hook for prettier before I think it makes sense to actually just scan the files that were changed by prettier.

See here:
https://www.brianhan.co/2018-11-22-prettier-pre-commit/

This will speed up the formatting process a lot

Note: only applicable for http video sources (url or youtube)

Docker might be worth exploring for the benefits it brings in quick setup and portability. Maybe not force the project to use docker but have the option available. I find it's particularly helpful for setting up databases like postgres in a quick and simple manner.

The virtual browsers do cost something to run, so ideas for features we can offer to subscribers:

• Longer time before auto-shutdown (currently VMs are unassigned from rooms after 6 hours, could make this e.g. 12 hours vs 3)
• Offer higher-resolution (1080p vs 720p)
• Faster instances for subscribers (might be linked to the above)

Allow copy/paste into the virtual browser

First of great project @howardchung! I'm a user of cytube right now and me and my friends enjoy watching videos from then to then.

Biggest issue is switching between Cytube and Discord when we want to watch non-youtube content together and I think the vBrowser solution is great!

I think having the option to create 1 persistent room which can be password or whitelist protected would be an awesome feature (and possibly could be a premium feature for more than one room).

What are your thoughts on this?

Currently if the vbrowser connection is lost and the user is controlling, the client will reconnect but won't try to re-obtain the controls. Fix is to refresh, but we should make this better.

Allow logged in users to designate certain users as "hosts" (default to themselves) and lock the room so no one else can change things.

This will be needed for larger rooms.

Apparently VP8+Opus won't work, so maybe test out H264 + Opus, or wait for Safari to catch up to the rest. Not sure how much demand there is for it to work on Safari.

Started some work on this #59 but need to finalize.

Please comment or react if this is something you would really want to see!

Currently this can be done by configuring REACT_APP_MEDIA_PATH, or by changing the setting in localstorage (settings dialog not enabled atm)

We should probably make this a room property so that all members have a consistent view of the media source.

Supported sources now are s3 buckets, GitLab repos, and nginx file servers. Plex media servers would probably be good to add as well.

Will make refactoring easier

Currently VMs are in the US, but considering moving them to Europe for lower costs. However this will probably mean some services like Hulu won't work without proxying.