Rocket Beans Community

YouTube-Alternative


#21

Gute platzsparende Idee :smile:
Baue ich nachher ein!


#22

Ich hab mal geforked und bin schon dabei :smile:


#23

UPDATE

  • '├ťbersicht' hat nun eine Autocomplete-Funktion in der Suche.
    Folgende Shows werden dabei gelistet:
    MoinMoin, Kino+, Bohn Jour, Almost Daily, Almost Plaily, Game+, Pen & Paper, Panelz, Chat Duell, TheraThiel, Bohndesliga, Spiele mit Bart, RBTV News, Nerd Quiz
    Visuell sind die Vorschl├Ąge rechts im Suchfeld als Badges sichtbar. W├Ąhlt man diesen aus (per Tab + Enter oder Click), wird die Suchanfrage auf den entsprechenden Wert gesetzt und ein "Zur Playlist"-Button wird aus├čerdem noch eingeblendet
  • Das Nachladen der Suchergebnisse etc. wurde performanceoptimiert und durch ein paar Animationen ausgeschm├╝ckt :smile:
  • Bugfixes... :wink:
  • @zwecki's Vorschlag ist drin: Abk├╝rzen der Bezeichnungen innerhalb der Filter-Buttons f├╝r kleine Fenster-Gr├Â├čen / Mobile
  • AdBlock wird detected und entsprechend eine Meldung ausgegeben
  • Alle Dateien werden auf dem Server minifiziert und gzip-kompromiert (kleinere Dateien = Seite schneller)

#24

Freut mich, dass ich's ins Endprodukt geschafft habe. Ich hab schon eine neue "Idee". Allerdings würde ich das im Gegensatz zu meiner letzten unscheinbaren Änderung testen müssen und zum Testen fehlt mir im Moment die Erfahrung mit Node.js ... :smile:


Es geht nochmal um die Suchleiste, genauer gesagt wieder um die Buttons.
Im Moment finde ich da den Code:

<div class="layout-search search-container">
  <div class="search-label-container">
    <label class="search-label">
      <input type="text" placeholder="Suchen..." class="form-control search js-search">
    </label>
    <div class="region-autocomplete hidden-xs"><div class="items-autocomplete" style="display: none;"></div></div>
  </div>
  <div role="group" class="btn-group filter-buttons">
    <button class="btn btn-default js-filter-rbtv active" type="button">
        <span class="hidden-xs">
            Rocket Beans TV
        </span>
        <span class="visible-xs-inline">
            RBTV
        </span>
    </button>
    <button class="btn btn-default js-filter-lp" type="button">
        <span class="hidden-xs">
            Let`s Play
        </span>
        <span class="visible-xs-inline">
            LP
        </span>
    </button>
  </div>
</div>

Die Buttons werden dabei, soweit ich das beurteilen kann, absolut positioniert, damit sie am rechten Rand der Suchleiste bleiben. In Bootstrap gibt es allerdings die M├Âglichkeit, dies durch Input Gruppen und Input Gruppen Addons zu realisieren. Der "search-label-container" m├╝sste dann folgenderma├čen aussehen:

<div class="search-label-container">
  <label class="search-label">
    <div class="input-group">
      <input placeholder="Suchen..." class="form-control search js-search" type="text">
      <span class="input-group-btn">
        <button type="button" class="btn btn-default js-filter-rbtv active">
          <span class="hidden-xs">
            Rocket Beans TV
          </span>
          <span class="visible-xs-inline">
            RBTV
          </span>
        </button>
      </span>
      <span class="input-group-btn">
        <button type="button" class="btn btn-default js-filter-lp">
          <span class="hidden-xs">
            Let`s Play
          </span>
          <span class="visible-xs-inline">
            LP
          </span>
        </button>
      </span>
    </div>
  </label>
  <div class="region-autocomplete hidden-xs"><div style="display: none;" class="items-autocomplete"></div></div>
</div>

Dann k├Ânnte man theoretisch die absolut positionierten Buttons rausnehmen. Im Moment f├╝hrt das allerdings - soweit ich es bei meinen direkten "Injections" ├╝ber Firebug ├╝berblicken kann - dazu, dass die Funktionalit├Ąt der Buttons zwar weiterhin gegeben ist, das optische Feedback (Eindr├╝cken des Buttons bei Auswahl) allerdings ausbleibt.

Au├čerdem wird in eine Input-Gruppe offenbar absolut ├╝berhalb des normalen Inhalts (z-index) positioniert, was dazu f├╝hrt, das sowohl das Lupe-Symbol am Anfang der Leiste, als auch die Autovervollst├Ąndigungstags (Feedback: Super Idee!) nicht mehr sichtbar sind.

Das lie├če sich aber bestimmt mit relativ kleinen ├änderungen beheben.


Ich hoffe, ich konnte helfen. Im ├ťbrigen bin ich bei Frontend-Problemen generell gerne bereit zu helfen, wenn ich die Zeit finde. In dem Bereich bin ich n├Ąmlich auch beruflich zu Hause. :smile:


#25

Die Filter-Buttons werden im aktuellsten Release nicht mehr absolute sondern per Flexbox positioniert. Das ist meiner Ansicht nach die beste L├Âsung daf├╝r. Kannst es dir ja nochmal anschauen.

Eltern-Element:

.search-container { display: flex }

Kinder-Elemente:

.search-container > .search-label-container { flex: 2 0 0; }

Dadurch werden die Autocomplete-Elemente auch korrekt am rechten Rand positioniert. Funktioniert das bei dir? Cache? :smile:


#26

Also aktuell funktioniert alles. Das wollte ich gar nicht bestreiten. Ich hab nur gestern gesehen, dass die Buttons auf kleinen Bildschirmen, irgendwann zu weit nach links geschoben werden. Aber dann wird das wohl mittlerweile nicht mehr der Fall sein. Dann ist mein Vorschlag nat├╝rlich obsolet, obwohl er f├╝r h├Âhere Browserkompabilit├Ąt sorgen w├╝rde. :stuck_out_tongue:


Gute Arbeit auf jeden Fall. Auch die anderen Neuerungen gefallen mir. :smile:


#27

UPDATE

  • Anzeige der Namen unter dem Beschreibungstext in ├ťbersicht und Suche.
    Falls dort noch Namen fehlen bitte Bescheid geben :smile:
    Technisch l├Ąuft das so, dass ich zu jedem Video die Tags auslese und diese mit einer Namens-Liste der Mitarbeiter abgleiche.
    Vorweg: Es ist derzeit nicht m├Âglich nach diesen Namen zu filtern. Das wird erst (vermutlich) funktionieren, wenn Daten auf dem Server gecached vorliegen.

Geplant

  • Cachen der YouTube-Daten auf dem Server

#28

Da das hier alles noch ein Hobbyprojekt ist, w├╝rde ich erstmal von der gro├čen Browserkompatibilit├Ąt absehen (soll ja Spa├č machen) und neue Dinge (├í la Flexbox...) ausprobieren :smile:


#29

Hey, meinen Segen hast du! :thumbsup:
Ich gehe auch davon aus, dass die meisten, die diese Web-Applikation nutzen, einen aktuellen Browser nutzen. Und dann f├Ąllt im Grunde nur noch der IE11 raus, was ich mal als Kollateralschaden verbuchen w├╝rde. :smile: Und gute Fallbacks gibt's zur Not auch, also halb so wild, ich wollte es nur anmerken.


#30

huhu,

wie geil ist das denn bitte ?

Super geile Arbeit, so l├Ąsst es sich wieder auf youtube bzw bei den Beans vern├╝nftig die Beitr├Ąge gucken, auch die Suchfunktion funktioniert tadellos, habe dies jetzt in meinen Bookmarks reingesetzt.

Super Geil :smiley:


#31

Sehr geil! Sieht gut aus, funktioniert 1A, TOP eBayer, gern wieder. :wink:
Die Such- (und Autocomplete-) Funktion funktioniert bei Playlist-Namen schon sehr gut, bei einzelnen Videos z.B. aber nicht so.Wenn ich z.B. BeansCastl eingebe, gibt es keine Ergebnisse. Erst, wenn ich das e ans Ende anf├╝ge, werden mir entsprechende Videos angezeigt.

├ťbrigens: Wenn du auf der Desktop-Seite von einem YT-Kanal bist, ist oben eine Suchfunktion, die auch passende Playlists anzeigt:

Nichtsdestotrotz ist deine Alternative wesentlich komfortabler und ├╝bersichtlicher! :+1: Also: Entweder an die Bohnen und direkt an YouTube verkaufen. :stuck_out_tongue:


#32

Sieht sehr gut aus! Weiter so :smile:
Definitiv nur aktuelle Browser ber├╝cksichtigen und IE ganz au├čen vor lassen. Sehe ich als Voraussetzung.

2 Sachen sind mir direkt aufgefallen:
1. Die "Namen-Labels" laufen aus dem Rahmen (siehe Screenshot)
2. W├╝rde auf min-height: 262px; f├╝r das .layout-activities .items .item .thumbnail>.link>.thumb - Image verzichten


#33

Ganz gro├čes Lob! Nutze es seit gestern komplett als rbtv Alternative zu Youtube. :smile:


#34

Moin @LexikonDesNutzlosen

Hierauf habe ich leider keinen Einfluss. Ich schicke die Suchanfrage nur an YT weiter und die liefern die Ergebnisse daf├╝r aus.

Danke f├╝r den Hinweis! Kann man echt schnell ├╝bersehen - h├Ątte ich das vorher gewusst..... :open_mouth: :smiley:


#35

Hi @jog,

Danke f├╝r die Hinweise. Ich werde mich morgen darum k├╝mmern!


#36

UPDATE

Die komplette Applikation hat jetzt ein kleines Nodejs-Backend im Hintergrund laufen wor├╝ber alle Requests an YouTube geschleust werden. Die Daten der Endpunkte werden kontrolliert in einer Redis-Datenbank gecached.

Hier die Cache-Zeiten pro individueller Anfrage:

  • /activities - 2 mins
  • /search - 2 Tage
  • /playlists - 7 Tage
  • /playlistItem - 60 mins
  • /videos - 7 Tage

Dabei beachten, dass ich bei Heroku den kleinen Plan f├╝r Redis nehmen musste (free, 25 MB Speicher). Falls jemand einen Server daf├╝r hat bitte bescheid geben :wink:
(Der erste kostenpflichte Plan f├╝r Redis kostet bei Heroku 15$ :confused: )

Weiterhin ist nun auch eine mongoDB dahinter geklemmt, die alle Anfragen auf Videos speichert. Hierr├╝ber wird sp├Ąter die Suche nach den Moderatoren m├Âglich sein.


#37

Gibt es da keine M├Âglichkeit, Platzhalter zu verweden? Ich kenne die Youtube API nicht, k├Ânnte mir aber schon vorstellen, dass sie so etwas wie "%#{search_term}%" versteht. Was denkst du?

Falls das nicht geht, k├Ânnte man dann eventuell aus den gespeicherten Suchanfragen eine Art selbstlernende Autocomplete-Funktion bauen?


#38

Guter Hinweis. Ich pr├╝fe das nachher mal!

EDIT:
Laut YouTube-API ist folgendes m├Âglich:

The q parameter specifies the query term to search for. Your request can also use the Boolean NOT (-) and OR (|) operators to exclude videos or to find videos that are associated with one of several search terms. For example, to search for videos matching either "boating" or "sailing", set the q parameter value to boating|sailing. Similarly, to search for videos matching either "boating" or "sailing" but not "fishing", set the q parameter value to boating|sailing -fishing. Note that the pipe character must be URL-escaped when it is sent in your API request. The URL-escaped value for the pipe character is %7C. (string)

Also leider keine Wildcards.


#39

UPDATE

Ihr k├Ânnt nun auch nach den Namen der Moderatoren suchen und bekommt nach den ersten 2 Buchstaben per Autocomplete die Vorschl├Ąge eingeblendet.


#40

Ganz gro├čen Respekt was du da geschaffen hast!
F├╝r mich sollte genau so eine Mediathek von einem Online Sender aussehen.

Ich hoffe mal, dass es auf die RBTV Seite ├╝bernommen wird.
Wurde ja mit dem Community Sendeplan auch schon gemacht.

Die RBTV Community ist einfach klasse und sehr kreativ.