Rocket Beans Community

RocketView - Alternativer Webviewer für den RBTV Youtube Stream


#1

Hallo zusammen,

Der Rocket Beans Stream ist nun auf Youtube gestartet. Allerdings werden sowohl die Youtube eigene Oberfläche als auch die aktuell auf rocketbeans.tv vorhandene meinen Ansprüchen und Anforderungen nicht gerecht. Da ich sowieso Lust auf ein kleines Projekt hatte und mich mit der Youtube API beschäftigen wollte habe ich mir kurzerhand einen eigenen Viewer/Player geschrieben.

Ohne viel Konzept drauf los programmiert ist die Webseite RocketView entstanden.

Features/Beschreibung:

  • Optimiert für die neuesten Chrome/Firefox Versionen.
  • Live Stream/Broadcast + Chat + Wochenplan ansehen.
  • Zugriff auf die letzten (neuesten) Youtube Uploads aller drei Channels (inkl. Game Two).
  • Responsive, möglicht wenig Platzverschwendung, maximale Raumnutzung für Player/Chat.
  • Singlepage-App, kein Laden/Öffnen von Unterseiten, kein Refresh der Seite notwendig.
  • Streamtitel, Videolisten, Viewer Count und Wochenplan werden automatisch aktualisiert.
  • Flüssiger Wechsel zwischen Stream und neusten Videos.
  • Wechsel zwischen allen verfügbaren RBTV Streams (mehrere Streams können parallel laufen).
  • Dark Theme.
  • Position von Player und Chat austauschbar (Quality of Life für Leute die auf dem 2. Monitor schauen).
  • 100% Clientside + Open Source + werbefrei.

Trotz werbefreiheit sollte euer AdBlocker natürlich ausgeschaltet werden. Rocket Beans soll nicht auf diese Einnahmen verzichten müssen.

Limits (Youtube API v3 Quota Limits)
Github-Repository
Spreadsheet: Regex zur Erkennung der Sendungen im Video/Stream-Titel
Spreadsheet: Stream/Video Infos

[Alt] Spreadsheet: Webscraping für Stream Infos (hardcoded Stream)
[Alt] Spreadsheet: Webscraping für Stream Infos (Alle auf Channel verfügbare Streams)

Ursprünglich für den Eigenbedarf entstanden ist natürlich jeder herzlich eingeladen RocketView auch zu nutzen. Falls jemand Gefallen daran findet.

Bug Reporting / Feature Requests

Kann natürlich hier geschehen, allerdings bieten sich Github-Issues auch sehr gut an.

Updates

20.08.2016 | 21.08.2016 | 22.08.2016 | 30.08.2016 | 31.08.2016 | 11.09.2016 | 21.09.2016 | 09.11.2016 | 20.11.2016 | 14.01.2017


Wie sehe ich den Youtube-Livestream - Anleitungen
#2

Sieht klasse aus! Besonders gefällt mir, dass du den Zwischenraum zwischen Chat und Stream beseitigt hast, der stört mich bei YouTube Gaming extrem.

Und "toggle Chad" :smiley:


#3

Die Seite ist echt gut gemacht. :thumbsup: :thumbsup: :thumbsup:

Was ich noch geil fände, wäre ein Theater Mode. Bei dem der Stream Vollbild angezeigt wird und man sich den Chat und den Sendeplan einblenden kann.


#4

Gefällt mir sehr, sehr gut. Wird dann wohl meine bevorzugte Art zu gucken. Zwei Punkte, die es für mich perfekt machen würden:

  • Ich mag es am Tag lieber hell, weswegen ich einen Schalter zum switchen zwischen Light und Dark Mode super finden würde.
  • Einbindung der Zuschauerzahlen unter dem Stream. Finde ich gerade bei Prime Time Formaten immer interessant.

Ansonsten, wie gesagt, absolut super. :ok_hand:


#5

Gefällt mir von Design schonmal gut :thumbsup:

Das funktioniert bei mir nicht so ganz. In der Breite bleibt leider viel Platz ungenutzt.


#6

Du hast aber auch einen extrem breiten Bildschirm :smiley:

Aber @Eruyome kann ja die "max-width" vom .grid-container auf 98vw statt 98rem ändern... dann ist allerdings aber auch der Player in der Vertikalen größer als jeder normale Bildschirm. Vlt. kann man dann mit Media Queries noch etwas beeinflussen, dass der Player-und-Chat-Container nicht 100vh oder 90vh überschreiten...


#7

Ja wenn ich das auf 85vw ändere dann passt es auf nutzt es die Breite aus.


Leider versteh ich nicht sonderlich viel von Webentwicklung und bekomm es nicht zum laufen wenn ich es von GitHub geladen habe.


#8

gestern gleich gebookmarkt, vor allem, dass der player responsive ist, finde ich klasse :thumbsup:


#9

Was spricht eigentlich gegen max-width: 100%?

P.S.: Könntest du der iFrame-URL noch das Argument "&from_gaming=1" übergeben? Damit verschwinden diese kleinen Infocards, wenn man mit der Maus über die Benutzernamen fährt.


#10

Dagegen spricht nix, allerdings ist sogar tatsächlich am einfachsten, das max-width ganz rauszunehmen - dann skaliert sich die Anwendung von ganz alleine auf die volle Breite :slight_smile:
Ab einer gewissen Breite werden halt Dinge auch mal unübersichtlich und man möchte vielleicht nicht unbedingt immer sein Browserfenster skalieren, nur weil einem der Player oder anderes gerade zu breit ist. Darum wurde wahrscheinlich die Durchschnittsbreite von 980 Pixeln (98rem = 98 x Root-Element-Fontsize von 10px = 980px) gewählt, die über die gesamte Bandbreite von Monitorgrößen (auf Desktop bezogen) gleich aussieht und sich so besser designtechnisch unter Kontrolle halten lässt. /infodropping

Aber ja, responsiv ist die Seite insofern eben als dass sie auch auf KLEINEN Monitoren funzt - aber große Monitore eben vernachlässigt. Vielleicht mach ich da nachher einfach mal einen Pull Request bei GitHub :slight_smile:


#11

Hey, danke für euer Feedback.

@Aynce Ich werde mir das bei Gelegenheit mal ansehen (Theater Mode).

@ratzeputze Light Theme ist nicht schwer, hat jedoch geringe Prioriät. Ich werde wahrscheinlich ein Modal oder Panel mit Optionen integrieren, dank AngularJS ist es dann auch einfach ohne die Seite neu zu laden andere CSS Klassen zu verwenden und per Button/Checkbox das Theme zu ändern.

Zuschauerzahlen sind etwas kompliziert. Problem und mögliche Lösung http://stackoverflow.com/a/37478112, allerdings habe ich keinen PHP Server laufen und möchte für diese Anwendung auch darauf verzichten, Ich schaue mir grad webscraping mit google.sheets importxml an, vielleicht führt das zu etwas.

@Lubitzkie und @DoomDesign Die max-width ist tatsächlich auf eine maximale Bildschirmgröße von 1920x1080px optimiert. Bei Browser Vollbild und ausgeblendetem Chat sollen Player, Titel und Buttons (Play Live-Stream + Toggle Chad) im Bild sein. Da lässt sich bestimmt noch etwas optimieren. Ich habe nichts gegen Pull Requests, aber gedulded euch ruhig noch ein wenig und lasst mich noch etwas daran feilen :wink:

@Lubitzkie Ist gar nicht so schwer das Projekt zum Laufen zu bekommen. Erfordert node.js, ich benutze das Foundation for Apps Framework, die Installationsanleitung reicht eigentlich. Ohne WebDev bzw. Dev Erfahrung würde ich es mir allerdings gut überlegen da einzusteigen :wink:

@pronuntiator Danke für den Hinweis mit dem iframe Parameter, war mir nicht bekannt.

Abschließend: Womit ich aktuell am ehesten Hilfe benötige ist das oben erwähnte webscraping über importxml. GoogleSpreadsheet Beispiel, Abfrage des ViewCounts bei normalen Video Uploads funktioniert, bei Live Videos noch nicht. Wahrscheinlich hab ich einfach ein riesen Brett vorm Kopf und sehe die offensichtliche Lösung nicht.


#12

Ich hab dir eine Lösung mit IMPORTDATA hinterlassen, aber vermutlich ist es einfacher, wenn du gleich ein App-Skript schreibst, das die Daten von live_stats in das Spreadsheet einträgt. Du hast da ein Quota von 13 Abfragen pro Minute.

Edit: Wie willst du das dann eigentlich darstellen? Dieses Geckoboard aus dem Artikel kostet Geld.


#13

Cool danke. So etwas sollte reichen.


#14

Ah, ok. Bin neu in JavaScript und kannte cross origin request header noch nicht :sweat_smile:


#15

Wirklich tolle Seite bzw. tolles Projekt!


#16

Updates

  1. Viewer Count hinzugefügt (Webscraping über Google Spreadsheet + GoogleAppScript -> JSON Request), minütliche Aktualisierung (GoogleAppScript Limit).
  2. Optimierungen der max-width.

#17

Nutzt jetzt die Breite gut aus.
Bei eingeblendetem Chat fehlt jetzt allerdings die Leiste unter dem Stream inklusive dem Chat Eingabefeld.
Zumindest bei meinem 21:9 Bildschirm.Wegen mir musst du es aber auch nicht Optimieren. Ich werde wohl letztendlich hauptsächlich mit VLC + Chatfenster schauen.
Weiterverfolgen werde ich das Projekt aber. Mit Webentwicklung will ich mich eigentlich sowieso mal beschäftigen.


#18

Ich werde nicht allzu viel Aufwand betreiben 21:9 zu unterstützen, allerdings kannst du mit wenig Aufwand helfen. Folgende Klassen werden genutzt um die max-width zu regeln. .grid-container-118rem wird über JavaScript (Angular) hinzugefügt je nachdem ob der Chat ein- oder ausgeblendet ist. Ich bin noch nicht sicher welche Optionen Sinn machen aber ich plane ein Options-Menü, hier könnte auch eine Checkbox für 21:9 vorhanden sein. Wenn du mir gute Breakpoints und max-width in rem dafür gibst, bzw für die vorhandenen Breakpoints, kann ich mit 1 min Arbeitsaufwand diesen Support hinzufügen.

.grid-container {
	max-width: 93rem;
	padding: 1rem;
	@include mq($min-width: 2100px) {
		max-width: 103rem;
	}
	@include mq($min-width: 2300px) {
		max-width: 116rem;
	}
}
.grid-container-118rem {
	max-width: 118rem !important;
	@include mq($min-width: 2100px) {
		max-width: 128rem !important;
	}
	@include mq($min-width: 2300px) {
		max-width: 141rem !important;
	}
}

#19

Ok kann ich demnächst machen. Einen max-width Wert der für 21:9 passt zu finden bekomme ich hin.
Aber was meinst du mit Breakpoints?


#20

CSS Media-Query Breakpoints. Im gezeigten CSS also z.B. $min-width: 2100px.