This was my first foray into React. After having been developing on Ruby / Node on Heroku, making a pure frontend static app was refreshing.
Here are some of the features:
- Very, very fast. A lot happening under the hood with video to make the swaps near instant. I had to play around with GPU acceleration and CSS transforms to manipulate the streams.
- Load three streams simultaneously, when you swap out the primary stream, the other two streams are muted automatically.
- A powerful compact stream browser accessible to your left. I've tried to make it so you can scan a whole lot of streams at once to pick out the most interesting ones.
- Auto-refreshing stream list. Hopefully you won't even notice it reloading. It's always kept up to date to minimize any offline streamers and catch your favorite streamers coming online.
- Drag and drop streams into screens, click on screens to promote them to the primary. A lot of small miscellaneous things that hopefully make Teevox more intuitive.
- Auto bandwidth optimization, when you select a very high quality stream (ex: Source), instead of switching all three to high quality, it'll only do it for the primary stream. When you swap out for another primary stream, it will seamlessly transition into the proper quality.
The best part was the static HTML portion that allows it to load almost instantly without any preprocessing necessary. Let me know what you think!
Also, the drag and drop doesn't work for me -- when I drag and drop, the stream doesn't open, the item just stays where I "dropped", and as you can see from the screenshot [1], it stays there (and during one of the drag and drops it also selected some text and couldn't get it to unselect).
Why not just make it to where people click on the items in the sidebar to automatically go into slot 1, 2, then 3?
https://www.reddit.com/r/warpprism https://www.reddit.com/r/teevox
It would be nice if the URL updated to reflect which videos were being streamed, and which layout you were in, that would make configs more copy-paste-able. One of hte great features of multitwitch.tv is that it's easy to craft/copy-paste a URL that leads directly to both games.
React-router should be able to handle it (you said you were using react, wasn't sure if it was in conjunction with react-router), but the documentation that describes the updating patterns of the URL isn't so easy to find... This might help though:
https://github.com/rackt/react-router/issues/266 (Issue from someone trying to change URL without triggering re-route, might help with saving params to URL).
I was thinking that rather than how multitwitch does it (which is multitwitch.tv/<stream1>/<stream2> or something like that), you might want to pass the streams as query string params (ex. "&1=<stream1>").... But then again, you could just use their style. Also it might be smart to selected layout type.
Great to see that it's still in active development!
I imaging that this is supposed to be similar to a sportscast that multi-boxes games occurring at the same time. The issue I find is that the control isn't automated, so I'd have to actually be paying attention to all three to see which is most deserving of my attention at the moment.
I suppose that there are certain games in which multi-boxing is useful, but none of the ones I watch would have much benefit. What are the games you stream that benefit from a setup like this?
Also, you're serving all of the images over HTTP.
- supported more streaming platforms (azubu, hitbox, mlg, etc)
- supported more than 3 streams (currently we use http://multitwitch.tv/)
Is there a chance I can look into a github repo for an under the hood look ?
