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.
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…
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.
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
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
@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
@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
@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.
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.
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.
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.
