YouTube Likes/Dislikes direkt in der Video Card sehen (2)!

Im letzten Beitrag der kleinen YouTube – Tampermonkey Reihe ging es um das initiale Anzeigen von Likes und Dislikes in einer Video Card. Mit Hilfe der YouTube Data API werden die entsprechenden Daten abgefragt und dann mittels JavaScript als neue DOM Elemente eingehängt. Das Problem ist jedoch noch, dass der erste Wurf des Skripts nur funktioniert, wenn man den Subscriptions Feed ansurft, also zu https://www.youtube.com/subscriptions/feed. Dieses Problem wurde in der zweiten Iteration gelöst, welche im Folgenden genauer betrachtet wird.

Wo bin ich?

Im Wesentlichen haben sich vier Dinge in der Einstiegsfunktion geändert

  1. Refactoring
  2. Verzicht auf den Check, ob das Element schon vorhanden ist
  3. Als root Element wird das Element verwendet bei dem das Attribut role den Wert main hat
  4. Die Suche nach den Video Card Elementen wurde in getVideoAnchorElements ausgelagert

Zum Refactoring gibt es eigentlich nicht viel zu sagen, das passiert einfach immer mal wieder während des Programmierens 😉 Der Check, ob das entsprechende Element schon vorhanden ist war in der ersten Version des Skripts eigentlich nur vorhanden, weil ich noch einige Probleme hatte. Der EventListener auf das load Event sollte ausreichend sein. Dass das “aktuelle Element” das Attribut role='main' trägt hat sich in einer Analyse des DOM gezeigt.

Was es mit page-subtype="subscrriptions" auf sich hat, wird im nächsten Code Schnipsel ersichtlich.

Die richtigen Suchkriterien

Es hat sich gezeigt, dass es hauptsächlich zwei Elemente gibt unter denen Video Card Elemente platziert werden.

  • ytd-search: Dieses Element findet sich, wie der Name schon sagt, bei der Suche
  • ytd-browse: Dieses Element findet sich auf der Hauptseite, im Subscriptions Feed und in den Trends

Befinden wir uns in der Suche, kann direkt nach Elementen mit der Klasse #video-title gesucht werden die sich unterhalb eines ytd-video-renderer Elements befinden. Befinden wir uns auf der Hauptseite, im Subscriptions Feed oder in den Trends muss weiter unterschieden werden und zwar anhand des Attributs page-subtype.

Das waren auch schon die Veränderungen im Vergleich zur ersten Skriptversion. Nichts Dramatisches, aber das Skript funktioniert jetzt überall auf YouTube. Naja fast… Wechselt man den Bereich, z.B. von der Startseite auf die Suche ist leider schon Ende im Gelände. Das liegt, wie im ersten Teil erwähnt, daran, dass YouTube eine SPA ist und sich beim Bereichswechsel nur das DOM ändert, die Seite aber nicht effektiv neu geladen wird. So springt natürlich auch das Skript kein weiteres Mal an. Darüber hinaus gibt es noch ein Defizit. Wenn beim Scrollen Videos nachgeladen werden, greift das Skript noch nicht. Der Grund hierfür ist ein ähnlicher und begründet sich in SPF. Nachgeladene Videos sind natürlich nachgeladene DOM Elemente und so etwas gilt es zu beobachten. Das wird in der dritten und finalen Version des Skripts umgesetzt, welche im nächsten Beitrag betrachtet wird.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.