User-script en JS pour Youtube

[Nuked01]

Salut les devs !

J’aurais besoin d’un coup de pouce sur une problématique en JS. Je bloque complet, je ne trouve aucune solution. Si quelqu’un pouvait ne serait-ce que me donner une axe vers lequel je puisse me diriger, je lui en serait reconnaissant !

Je suis en train de faire une « suite » de user-scripts pour Violentmonkey/Greasemonkey/Tampermonkey, dont le rôle est de faire que certaines « entités » soient occultées une fois consultées par l’utilisateur.
Par exemple, pour un site de ventes privées, cela permettrait de mettre en avant chaque vente n’ayant pas encore été vue (pratique pour aller en priorité sur les ventes non vues sur showroomprive, ça me fait gagner beaucoup de temps). Sur Youtube, de mieux voir les vidéos qui n’ont pas encore été consultées (histoire de pas en louper une qui aurait pu m’intéresser).

Et justement, c’est sur Youtube que je bloque. Sur les autres sites le principe fonctionne parfaitement, mais Youtube dispose de tout un tas d’élements d’UI flottants et ça me complique la vie.

Le principe de mon script est simple : une fonction onclick est bind à une liste prédéfinie de balises (listées avec un querySelectorAll) qui hash le href et le stock dans le localStorage. Au prochain chargement de la même page, les href de la liste de noeuds monitorée sont comparés avec ceux stockés, et j’applique un opacity:0.15 en cas de match.

Sur Youtube le clique molette et le clique gauche fonctionnent. Mais le clique gauche avec un temps de hover très court sur la thumbnail ne fonctionne pas. Probablement à cause d’un élément d’UI invisible ou carrément avec un display:none, je ne sais pas. J’ai tenté de queryall toutes les balises de lien et d’ajouter un onclick pour pouvoir le tracer, sans succès. J’ai aussi tenté de changer ma logique par un catch lors du unload mais ça devient crade. J’ai testé deux ou trois autres trucs mais rien n’y fait, je bloque. Attendre que la preview video s’affiche fonctionne, mais ne pas attendre devrait trigger l’élement en dessous hors ça ne semble pas être le cas.

Bref, je suis vraiment paumé. Quelqu’un aurait une idée ou connaitrait un peu le squellette de Youtube ?

Le code : Hide visited - Youtube - Code source
Une vidéo du problème : yt.mp4 - VEED

[Sarbian]

Salut, ce n’est pas du tout mes compétences, mais par contre j’utilise cette extension qui cache les vidéos vues sur Youtube. Le code pourrait contenir quelque chose d’utile pour ton besoin.

[Nuked01]

Merci, il se peu en effet que j’utilise la même façon de faire qu’eux si je ne trouve vraiment aucune autre solution.

Ils utilisent un MutationObserver, ce qui dans mon cas est un peu over-powerful (et puis certains sites utilisent des redirections d’url, ça devient compliqué pour stocker les hash urls à comparer avec les urls originelles sur la page monitorée).

J’avais donc abandonné cette logique, comme le catch sur les modifications faites à l’historique de navigation.
Mais ce sont des alternatives à garder en mémoire !

EDIT : Ah ça y est, je me rappelle le détail qui m’a fait abandonner le MutationObserver. Il ne fonctionne qu’en cas de « fausse » redirection (en JS, lorsqu’on modifie le DOM en local sans changer de page), puisque une véritable redirection détruit l’Observer.

[Nuked01]

J’ai trouvé
Pour la postérité, dans le cas où quelqu’un tomberait ici suite à une recherche sur Google :

L’UI flottante, comme je l’avais compris, change le href à la volée lorsqu’on le curseur survole la thumbnail d’une vidéo pour afficher en une preview.

Mais, paramétré par défaut, le callback renseigné dans mon addEventListener est exécuté après la distribution de l’évènement à/aux cibles d’évènements. Donc, dans mon cas, potentiellement après que l’UI flottante de Youtube ai supprimé le href suite à un mouseout.

Maintenant, ça fonctionne parfaitement !