memelabs / rustla2

Livestream viewing with chat

strims.gg

Livestream viewing with strims.gg chat.

Setup

First, ensure that you have Node.js (version 12 or greater) and npm (preferably the latest stable release) installed. Then,

$ git clone https://github.com/MemeLabs/Rustla2.git
$ cd Rustla2/
$ cp .env.example .env

Edit .env to change various environment variables. Most importantly, JWT_SECRET should not be left blank. The following is recommended:

$ sed -i "s/JWT_SECRET=/JWT_SECRET=$(head -c 22 /dev/urandom | base64 | tr -dc A-Za-z0-9)/" .env

The command is a little different on macOS:

$ sed -i "" "s/JWT_SECRET=/JWT_SECRET=$(head -c 22 /dev/urandom | base64 | tr -dc A-Za-z0-9)/" .env

Install dependencies and build the frontend:

$ npm ci
$ npm run build

Then, follow the instructions in api/README.md for how to start the backend (which includes the API server and a web server for the frontend).

Creating Twitch client

Retrieving thumbnails, viewer counts, and live statuses for Twitch streams requires a registered Twitch client.

1. Go to https://dev.twitch.tv/console/apps/create

2. Name the application whatever you want. The important part is that the Redirect URI is set to $API/oauth. For example:

   

3. Edit .env to include your Redirect URI, Client ID, and Client Secret:

   TWITCH_CLIENT_ID=yourclientid
   TWITCH_CLIENT_SECRET=yourclientsecret
   TWITCH_REDIRECT_URI=http://localhost:3000/oauth
   

UI dev environment setup

Install the latest stable version of Node.

$ git clone https://github.com/MemeLabs/Rustla2.git
$ cd Rustla2/
$ cp .env.example .env

Update API_WS in the config with the production WebSocket API URL.

API_WS=wss://strims.gg/ws

Install the dependencies and start the webpack dev server

$ npm ci
$ npm run dev-server

You can access the dev server from your browser at http://localhost:3000.

Building for production

The process of building for development is essentially the same as building for production, except with the additional step of minifying the frontend JavaScript code. This reduces the overall size of the bundle that is served to users, which can result in faster page loads.

npm run build:production

rustla2's Issues

consider using `recompose/withStateHandlers`

[email protected] added a new enhancer: withStateHandlers(), which seems to be an alternative to the current combo of withState() and withHandlers() we run. This may be worth switching to, especially since it has better Flow support (should we ever start using that).

Components which currently use withState():

• AdvancedStreamEmbed
• Checkbox
• LazyLoadOne
• Stream

re-word footer tagline

@vaindil brought up how the current tagline in the footer:

OverRustle.com, a destiny.gg community

might imply that the site is officially affiliated with Destiny. The tagline should be changed to make it clear that this site is not affiliated with Destiny.

For anyone who wants to fix it, here is the relevant line,

Settings button does nothing

It used to open the settings drop-down thing that had a single option to toggle displaying NSFW streams. Either remove the button or add the functionality.

login from stream page yields unhandled rejection

Steps to reproduce:

1. Be logged out
2. Go to any stream (might have to be the only viewer of that stream?)
3. Click Login button
4. The following stack trace will appear serverside:

Unhandled rejection TypeError: Cannot read property 'service' of null
    at /srv/rustla2/lib/api/websocket.js:72:71
    at Generator.next (<anonymous>)
    at step (/srv/rustla2/lib/api/websocket.js:33:191)
    at /srv/rustla2/lib/api/websocket.js:33:361
    at tryCatcher (/srv/rustla2/node_modules/bluebird/js/release/util.js:16:23)

preferences: fix left-chat

Multiple reports of left-chat not working reliably. Need to figure out details.

nsfw stream preview hiding

another option for user settings is marking your stream as nsfw

if your stream is marked as nsfw and you have a stream preview image, show a big "NSFW" preview image instead, and show the actual image on hover

api endpoint for fetching all streams

Should mostly mirror what https://api.overrustle.com/api provides (but remove all the duplicate information regarding streams). Primarily for Bot to use.

allow de-listing of streams

even if a user adds a particular stream don't show it on the Live Community Streams page.

admin only command

add footer link to the Discord server

destinygg embed is blank after attempting destinygg login

Repro

1. log out of destinygg chat
2. navigate to any stream on strims.gg
3. switch to destinygg chat
4. attempt to send a message (in order to trigger the login prompt)
5. click login
6. embed is now blank

Load denied by X-Frame-Options: https://www.destiny.gg/login does not permit cross-origin framing.

Error building rustla2-api-base docker image (possible race condition)

When building the rustla2-api-base docker image the deps.sh processor usage maxed out and the script eventually failed with error code 137. The failure would always occur when building wangle with cmake.

I was able to work around this by changing the JOBS variable in deps.sh from ${JOBS:-$nproc} to 1 . After that the build process completed without any issues

System:
MacOS: 10.13.4
Model: MacbookPro10,1

Docker 8.03.0-ce-mac60

Processor 2.7ghz Intel i7
Ram: 8GB

add left-chat option in user settings

twitch vods' viewer count should be views count

The number of views a Twitch VOD has is displayed as the number of viewers, instead of the number of views.

Example: https://overrustle.com/twitch-vod/175335717, which has "1115 Viewers" but it should say "1115 Views"

d.gg chat on left side option on strims.gg?

pls ty

Afreeca Support

Hello developers,

I would like to make a case for adding Afreeca support to Overrustle with the next update. Afreeca is the premiere website for Starcraft: Brood War streamers and over the past year the Afreeca Starleague events have been gaining momentum by getting many viewers on Overrustle via Twitch. This content is great, but fans of Brood War cannot watch streamers such as Flash, Jaedong, Nada, Bisu, Shuttle, Larva, and more while shitposting in d.gg chat without Afreeca support.

Thank you for listening.
Love, Dimmui

popout chat

Should function similarly to that of https://www.destiny.gg/bigscreen.

cannot disable left chat

Enabling it seems to work; but disabling does not.

Make service-id handling more user-friendly

Right now using the input box on the main-page is not very nice, since users have to know how to extract the right id to put into the box themselves. At least for popular services (twitch, youtube,...) it would be nice to have this automated, such that pasting
https://www.youtube.com/watch?v=6n3pFFPSlW4 becomes 6n3pFFPSlW4.
Could make the logic dependent on the url-parameter, but things like youtu.be could make it annoying to parse...

The same goes for automatically detecting with service to use (make the default value in the box "auto" or something).

preferences: add ability to disable loading chats by default

admin page

Add an admin page for viewing/editing/banning user accounts.

add toggle between destiny chat and active stream chat (if any)

Something like the original:

add youtube chat toggle for youtube streams

Error when trying to sign in for beta.overrustle

This is the error

"{"error":"Internal Server Error","message":"redirect_mismatch","status":500}"

Allow Advanced embeds to not use HTTPS

I used to watch BBC news on overrustle but I can't now because the embed is not HTTPS. I would guess many other sites cannot be embedded on advanced anymore because of it.

use `babel-preset-env` for frontend transpilation

A follow-up to #33. As of 3c7b4f3, transpilation of server code is now mostly done by babel-preset-env, instead of babel-preset-es2015. It would be great if we could use this preset for the frontend code as well. What needs to be figured out, however, is which browser versions we are willing to support. I don't think there's any analytics present on the site, so we might have to just guess what browsers we think everyone is using 🤷‍♂️

use `babel-preset-env` for at least the backend

https://github.com/babel/babel-preset-env

This will result in less needless transpiling, which leads to faster builds and more readable stack traces. For example, if the target machine has Node 8, then only one plugin is actually necessary:

babel-preset-env: `DEBUG` option

Using targets:
{
  "node": 8
}

Modules transform: commonjs

Using plugins:
  syntax-trailing-function-commas {"node":8}

This could also be done to the frontend as well, such as transpiling only what's necessary for the last 2 versions of each browser.

Afreeca streams won't load

tried viewing Sea's afreeca stream but it wouldn't load

looks like might have something to do with https since for example i can load play.afreecatv.com/yuambo/embed

but

https://play.afreecatv.com/yuambo/embed
won't load.

split polyfills into separate chunk

Split polyfills into their own chunk(s), and only load them if the user's browser actually needs the polyfills.

basic mobile support

Auto-detect(?) mobile users (also applies to desktop-users with small window?), and put chat on the bottom of page. Might also make it a "normal" option.
Same should apply to chat on the frontpage once that is added.

Some inspiration: https://i.vgy.me/BO0CAu.png

Stream/Video ID and Drop down menu needs to be either merged or separated.

looks kinda whack

update to new twitch chat embed URL

See https://discuss.dev.twitch.tv/t/eol-legacy-chat-embed/14667.

`state.stream` not set to `null` when navigating to homepage

Steps to reproduce:

1. Open homepage. state.stream is null at this point.
2. Navigate to a stream via the header form. state.stream is set to the stream's ID.
3. Click the "OverRustle" homepage link at the top left. state.stream is not reset to null, but it should be since user is no longer watching a stream.

lazy load service chats

Delay the rendering of service chats until the user clicks to switch to that external chat. Keep both chats loaded after this occurs.

CSS not properly filling window on Safari

Version 10.0.3 (12602.4.8)
macOS Sierra 10.12.3

Does not fill whole window :(

https://cdn.discordapp.com/attachments/268547141721522178/286338651208548353/Screen_Shot_2017-02-28_at_22.27.04.png

"channel" missing in `/api` and "service" has incorrect value

At the moment, "service" is set to the stream's channel, instead of the service. Furthermore, the "channel" key is missing.

add the ability to reopen chat

After closing chat, the buttons at the top (e.g. "Destiny Chat", "Twitch Chat") still stay there. It would be nice if clicking them would reopen the chat window on the right.

Advanced does not work

Misc Requests

It would be nice if we could set stream titles through overrustle that would be displayed on the main page under the streamer's name. Makes it easier for people to choose a stream they're interested in without opening 5 tabs of 4mb/s video. Also, having the streamer's name listed twice because of Angelthump seems redundant and makes the interface cluttered.

This is reaching meme territory, but a sidebar with a list of streams like on the android app would be dank as fuck. Would be a cool alternative way of switching between streams besides using the search bar or chat commands.

I'm glad that Overrustle is getting redone and I appreciate the work you all are putting into it. I've been having a lot of problems lately with my stream not being listed as live.

Thanks - KiraMikami

add ability to embed m3u8 (or similar) playlists

Many websites have custom players for their custom playlists that we can't all support. At the moment people are stuck embedding the whole website in advanced in that case. It would be nice to be able to only embed the m3u8 and have a custom player on the site to play those.

Invisible donate button

Looks like there is an invisible donate button next to the X Rustlers text. https://gfycat.com/GloriousZestyCock <- also LUL this link text.

hide/unhide chat buttons

request from user

i like to keep my chat popped out, so when i hit an overrustle stream i have to deal with 2 chat windows BabyRage can you copy the "close chat" x from d.gg DestiSenpaii

chat display is blank if selected chat does not exist

If some chat is selected as preference that doesn't exist on some page you visit, the chat is blank (e.g. select twitch chat on some page, then visit an angelthump stream).

Proposed fix: if selected chat does not exist on the current page, default to no/disabled chat (alternative: default to strims chat).

~ As reported and discussed in discord.

Reminder to ban people with longer than average necks

Purple.M.Cow is calling for a total and complete shutdown of Long necked individuals entering OverRustle until our website's representatives can figure out what is going on. According to Pew Research, among others, there is great hatred towards OverRustle by large segments of the Long necked population. Most recently, a poll from the Center for Security Policy released data showing "25% of those polled agreed that violence against Users here in OverRustle is justified as a part of the global jihad" and 51% of those polled, "agreed that Long necked individuals in OverRustle should have the choice of being governed according to Shariah." Shariah authorizes such atrocities as murder against non-believers who won't convert, beheadings and more unthinkable acts that pose great harm to OverRustle, especially women.

Mr. Cow stated, "Without looking at the various polling data, it is obvious to anybody the hatred is beyond comprehension. Where this hatred comes from and why we will have to determine. Until we are able to determine and understand this problem and the dangerous threat it poses, our Website cannot be the victims of horrendous attacks by people that believe only in Jihad, and have no sense of reason or respect for human life. If I win the election for Webmaster, we are going to Make OverRustle Great Again.

Add autoplay to (most) services

Twitch streams do autoplay, and it was requested that YouTube Live behaves the same.

This could be extend it to other services. It would probably at least make sense for normal youtube videos, too.

Properly handle non-existent channels

Channels that don't exist or used to exist should prompt the normal "stream not found" error

add a way to hide offline streams

Requested in discord.

correctly implement websocket PING/PONG

The client has a hacked heartbeat implementation which sends empty text messages ^[1] to the server where they're unceremoniously dropped. ^[2] This is needed to make sure proxies don't drop the connection when the socket is inactive.

This implementation is redundant with the WebSocket spec's own heartbeat mechanism PING/PONG. ^[3] We can achieve achieve the same result by adding a broadcast timer to the server to emit PINGs and correctly implementing PING/PONG in our message handler.

This will allow the web service to dictate heartbeat interval based on the requirements of the hosting environment, enable omitting heartbeats for recently active clients, avoid filling the browser's WS frame inspector with garbage, and make the server more compliant with the WS spec.

StreamThumbnail gets too many properties

Warning: Unknown props `viewers`, `created_at`, `updated_at` on <div> tag. Remove these props from the element.
    in div (created by StreamThumbnail)
    in StreamThumbnail (created by Streams)
    in div (created by Streams)
    in div (created by Streams)
    in div (created by Streams)
    in div (created by MainLayout)
    in div (created by MainLayout)
    in MainLayout (created by Streams)
    in Streams (created by lifecycle(Streams))
    in lifecycle(Streams) (created by Connect(lifecycle(Streams)))
    in Connect(lifecycle(Streams)) (created by RouterContext)
    in LoadingScreen (created by Connect(LoadingScreen))
    in Connect(LoadingScreen) (created by RouterContext)
    in RouterContext (created by Router)
    in Router
    in Provider

We still want backend to provide viewers (for Stream), so that has to be handled client-side (don't send to StreamThumbnail). created_at and updated_at don't need to sent at all, however, since it's not used in the frontend, so that should be fixed in the server-side.

No npm start

Yo peeps, there isn't a npm start script. In the readme should it say npm run dev-server for running locally? Also there should be a info on how to run it for production. I can add those to the readme if others agree.

first viewer of stream never gets latest stream data

Steps to reproduce:

1. Be the first user to begin watching a live Twitch stream
2. External viewer count is not shown because it has not been fetched server-side yet (this is expected)
3. Server fetches external viewer count and updates database entry for that stream
4. Refresh page. External viewer count is still not shown (stream gets removed from db since this was the only user watching?)
5. Open new tab with the same stream. That second tab will show the external viewer count properly.
6. First tab can now refresh and get the viewer count.

So, basically, the first user watching a stream will never be able to get an external viewer count, unless they refresh while another user is watching as well.