UserScript BetaSeries

UserScript pour le site BetaSeries testé avec Tampermonkey sur Chrome

Sommaire

1. Description
2. Améliorations
   • Générales
   • Séries, Films et épisodes
     • Commentaires
   • Séries et Films
   • Séries
     • Gestion des épisodes
       • Update auto
   • Liste des séries
   • Gestion des séries
   • Membres
   • API
3. Styles CSS
4. Corrections
5. Futures améliorations possibles
6. Développement
7. Ressources
8. Données partagées

Description

Ce UserScript permet d'ajouter plusieurs améliorations et corrections au site BetaSeries.

Différentes améliorations seront ajoutées au fur et à mesure, mais vos idées (réalistes) sont les bienvenues.

Améliorations

Générales

• Masque les emplacements de pub
• Ajout d'une fonction d'authentification sur le site API BetaSeries, en cas de perte du token sur le site
• Ajout d'une fonctionnalité de recherche par identifiants externes (IMDB, TheTVDB, TheMovieDB). Pour l'utiliser, il suffit de réaliser une recherche dans le bandeau supérieur de la page et d'indiquer le tag suivi de l'identifiant.

imdb: tt5045900
or
tvdb: 299881
or
tmdb: 634649

---

Séries, Films et épisodes

• Ajout du nombre de votants à la note d'une série ou d'un film ou d'un épisode

• J'ai aussi ajouté une popup pour l'affichage de la note du média, seulement dans le cas où le membre a voté. Cela montre la note globale et la note du membre, avec des couleurs différentes.

• En mode DEV, ajout d'un bouton pour visualiser les infos de la ressource
• En mode DEV, ajout d'un bouton, à côté du titre du média principal, permettant de copier l'identifiant du média.
• Ajout de la gestion du synopsis (description), pour l'afficher au complet et pour revenir à un synopsis tronqué, autant de fois que nécessaire.
• Modification de l'affichage pour noter le média. Je l'ai modifié pour les mêmes raisons que les commentaires (cf. ci-dessous).
• Ajout du nombre de médias similaires, dans la barre de navigation du média, à côté de lien SIMILAIRES.

Commentaires

• Modification de l'affichage des commentaires dans la popup (Je l'ai modifié car, à plusieurs reprises, les commentaires ne se chargeait pas dans la popup. Il fallait recharger la page 😧):
  • Ajout de la possibilité de naviguer entre les commentaires à l'aide des boutons Prev et Next.
  • Les spoilers ne sont pas affichés directement. Comme avant, il faut cliquer sur le lien pour afficher le message.
  • Affichage des réponses
  • TODO:
    • Mieux gérer le retour d'état d'un thumb
      • Le survol des icônes thumb montre une couleur verte pour le +1 et rouge pour le -1
      • Lorsque vous votez, l'icône sur lequel vous avez cliqué, se remplit de couleur jaune pâle
      • Il manque une petite animation sur la note lors d'un thumb
    • Utiliser un bouton, plutôt qu'un lien, pour l'affichage d'un spoiler
      • Le lien pour l'affichage d'un spoiler est maintenant de couleur rouge, donc bien visible
      • Le lien spoiler permet maintenant de fonctionner en mode toggle. Vous pourrez masquer le spoiler en cas d'erreur.
    • Ajouter l'écriture d'une réponse
      • Seuls les commentaires de premier niveau peuvent recevoir une/plusieurs réponse(s), sinon c'est trop galère à gérer
      • La gestion des tags @membre est bien pris en compte
    • Edition d'un commentaire écrit par le membre
      • L'édition d'un commentaire de premier niveau met à jour le commentaire dans la liste des commentaires affichés sur la page
    • Suppression d'un commentaire écrit par le membre
      • La suppression d'un commentaire entraîne la suppression des réponses qui lui sont associées
    • Gérer l'affichage de l'ensemble des commentaires
    • Gérer l'envoi de message privé directement depuis la popup
    • Ajouter un bouton pour afficher/masquer toutes les réponses lors de l'affichage de l'ensemble des commentaires.
    • Ajouter la possibilité de modifier le tri des commentaires
    • Ajouter l'autocomplétion sur les noms des membres dans les commentaires (ils doivent être précédé par un arobase @ )
• Ajout d'une popup, au survol du titre de la section commentaires, qui affiche les évaluations du média par les membres ayant écrit un commentaire. Seules les évaluations des membres, ayant écrits un commentaire, sont disponibles. Il faudrait peut être demander d'avoir le détail des votes pour chaque média, afin d'améliorer les statistiques, par exemple, le nombre de votes pour chaque index, de 1 à 5.

---

Séries et Films

• En mode DEV, ajout d'un bouton à côté du titre d'un similar, pour visualiser ses données JSON.
• Ajoute un bandeau d'angle "Viewed" sur les séries/films similaires déjà vues (Nécessite d'être connecté à votre compte utilisateur)

• Ajout d'une popup avec les détails d'une série/film similaire lors du survol de l'image d'un similaire
• Dans la popup d'un similaire:
  • Film: Possibilité d'indiquer l'état Vu, A voir ou Ne veux pas voir
  • Série: Possibilité d'ajouter la série au compte de l'utilisateur connecté
• Ajout des notes sous les titres des similaires
• Ajout du logo de classification TV dans les infos de la ressource principale (série et film)
• Ajout de la récupération d'images, pour les similars, sur les sites thetvdb et themoviedb, Si elles ne sont pas présentes sur betaseries. Les images ne sont pas accessibles directement sur ces sites.
• Dans le cas ou l'affiche du média n'existe pas, une affiche d'un autre site sera recherché.
• Ajout d'une fonction permettant de surcharger le choix de l'affiche du film ou de la série. Pour l'utiliser, vous trouverez une icône format camera, en haut à droite de l'affiche. Il vous suffit de cliquer dessus pour afficher les différentes affiches disponibles. Sélectionnez celle que vous souhaitez en cliquant dessus.

⚠️ Attention, pour le chargement d'images provenant d'un autre site, les bloqueurs de pubs peuvent poser problème. ⚠️

Donc, si le poster du média ne s'affiche pas, vérifiez d'abord si votre bloqueur de pubs n'est pas en cause.

---

Séries

• Ajout d'une popup, au survol d'une vignette d'un épisode, pour afficher le synopsis.
• Ajout de la note, sous la forme d'étoiles, dans le titre de la popup d'un épisode. Survolez les étoiles pour obtenir le détail de la note (nombre de votants et note moyenne sur 5).
• Ajout de la gestion des boutons Ajouter, Archiver, Favoris et Options. Plus besoin de recharger la page lors de l'ajout ou de la suppression d'une série.
• Lorsque le dernier épisode de la série est coché Vu et que le statut de la série est terminé, il vous sera proposé d'archiver la série et de la noter.
• Ajout d'un bouton pour sélectionner une série à voir plus tard Il fonctionne en mode toggle, donc vous pouvez ajouter/enlever la série facilement. La série est automatiquement enlevée lorsqu'elle est ajoutée au compte du membre.
• Un lien a été ajouté dans le menu "Séries" (Séries à voir) pour afficher le détail des séries à voir plus tard.

• Un lien a été ajouté dans le menu "Séries" (10 last seen) pour afficher les 10 dernières séries vues par le membre, dans le même style que les séries à voir plus tard.
• Ouverture de la fiche TheTVDB dans un nouvel onglet
• Ajout d'une fonction permettant de surcharger le choix de l'affiche d'une saison. Pour l'utiliser, vous trouverez une icône format camera, en haut à gauche de l'affiche de chaque saison. Il vous suffit de cliquer dessus pour afficher les différentes affiches disponibles. Sélectionnez celle que vous souhaitez en cliquant dessus.
• Ajout de la visualisation de la filmographie d'un acteur/actrice, lors d'un clic sur sa photo.

Gestion des épisodes

• Ajout d'un bouton de mise à jour de tous les épisodes de la saison courante.
• Ajout d'une case à cocher "Vu" sur les vignettes des épisodes pour ajouter ou retirer l'épisode des épisodes vus. La barre de progression de la série, ainsi que l'affichage du prochain épisode à visionner, sont mis à jour en même temps que les épisodes, sans recharger toute la page.

Update auto

• Ajout d'une mise à jour automatique des épisodes de la saison courante, avec réglage des options, au survol du bouton de mise à jour. Les options permettent d'activer l'update et de régler l'intervalle de temps entre les mises à jour.
• Lors de l'activation pour la première fois, sur une série, il vous est proposé une intervalle calculée en fonction de la durée d'un épisode. Cliquez simplement sur la case activer et la valeur de l'intervalle sera automatiquement sélectionnée. Rien ne vous empêche de la modifier si vous le souhaitez.
• Un badge dans le titre de la popup vous indique l'état de la tâche de mise à jour, ainsi que la couleur du bouton de mise à jour des épisodes:
  • Gris: Indique que l'update auto n'est pas configuré pour cette série
  • Vert: Indique que l'update est configuré, activé et que la tâche est en cours
  • Orange: Indique que l'update est configuré et activé, mais la tâche est arrêtée (arrêt manuellement via le badge)
  • Rouge: Indique que l'update est configuré mais pas activé et que la tâche est arrêtée
• Vous pouvez aussi lancer/arrêter manuellement la tâche d'update auto en cliquant sur le badge running, dans le titre de la popup. Les options doivent être préalablement configurées.
• La mise à jour auto des épisodes ne peut pas être configurée, si la série n'a pas été préalablement ajoutée au compte du membre.
• La popup de configuration doit être fermée, soit par la croix dans le titre ou bien par les boutons du formulaire.
• L'update auto s'arrêtera automatiquement lorsque vous aurez atteint la fin des épisodes de la série, mais que son statut est en cours. Vous pourrez relancer la tâche de mise à jour, lorsqu'il y aura de nouveaux épisodes à voir.
• L'update auto sera supprimé lorsque vous aurez fini la série et que son statut est terminé.

---

Films

• Ajout de la gestion du bouton Vu, afin d'activer la notation. La popup de notation est ouverte lorsque le film est indiqué comme vu.

---

Liste des séries

• Ajout d'un paginateur en haut de la liste des séries Plutôt qu'un nouveau paginateur, j'ai préféré remonter en haut de page automatiquement.
• Modification du fonctionnement du filtre pays, sur la page des séries, pour permettre d'ajouter plusieurs pays (Seul un pays ajouté sera retenu, si vous rafraîchissez la page).
• Ajout d'un bouton A voir dans les actions des fiches des séries, pour indiquer les séries à voir plus tard. Un logo, sous forme de montre, est affiché à côté du titre, si la série est taguée à voir plus tard.
• Ajout du détail de la note, survol des étoiles, sur chaque fiche des séries.

---

Gestion des séries

• Ajout du statut des séries sur la page de gestion des séries du membre connecté

---

Membres

• Ajout de la fonction de comparaison entre 2 membres. Visible sur la page des autres membres, accessible via le bouton "Se comparer à ce membre" en haut du profil.
• Ajout d'un champ de recherche sur la page des amis d'un membre

---

API

• Ajout d'un sommaire, sur les pages des méthodes de l'API, avec les liens des différentes fonctions. Ce qui permet de voir toutes les fonctions liées aux méthodes, en début de page.
• Ajout d'un bouton, sur chaque titre de méthodes, pour remonter au sommaire.

• Ajout d'améliorations sur la page de la console de l'API
  • Un bouton pour supprimer la ligne de paramètre (le paramètre version ne peut être supprimé)
  • Un bouton pour vérouiller la ligne de paramètre (le paramètre version est vérouillé)
  • Un bouton pour désactiver la ligne de paramètre dans la requête (le paramètre version est vérouillé)
  • La suppression des paramètres, hors ceux vérouillés, lors du changement de méthode
  • Un bouton pour afficher/masquer le résultat de la requête
  • Un clic sur un paramètre, dans la section documentation, permet d'ajouter ce paramètre directement

Styles CSS

• Je tente de faire en sorte d'adapter l'affichage en fonction du thème choisi (dark ou light), mais il peut y avoir des couacs. N'hésitez pas à créer un ticket pour indiquer l'anomalie. Pour ma part, j'ai choisi le thème dark.

Corrections

• Décode les HTMLEntities dans le titre de la série

Futures améliorations possibles

• Afficher les infos de la ressource dans une popup, lors du survol d'un similar
• Revoir l'affichage des commentaires, qui après un certain temps, n'arrivent plus à être chargés dans la Popup.
• Réaliser une page de recherche de séries permettant de trier et de filtrer par note

Développement

• Utilisation des Promise
• Mise en cache des ressources, pour limiter les appels à l'API
• Utilisation de Fetch au lieu de jQuery.Ajax
• Ajout d'une vérification de la validité du token pour certains endpoints de l'API (cf. https://www.betaseries.com/bugs/api/461). Cela concerne exclusivement le fonctionnement du userScript.
• Utilisation de classes Javascript (Cache, Note, Media, Show, Movie, Episode et Similar) pour stocker et manipuler les données en fonction du type de ressource. Plus simple aussi pour passer les données d'une fonction à une autre.
• Les classes sont développées en TypeScript et sont stockées dans ce repository.
• Utilisation de Grunt pour l'automatisation des tâches de build.
• Utilisation de grunt connect comme serveur local pour le développement, n'oubliez pas de modifier la variable serverBaseUrl, en début de script, pour pointer sur le serveur local http://localhost:9001.
• Utilisation du serveur pour stocker les données partagées, plutôt que le stockage de Tampermonkey.
• Utilisation de websocket pour le push de nouvelles notifications. Dorénavant, les requêtes à l'API, pour les notifications, se feront à partir du serveur gérant les ressources statiques et les proxy. Utilisation d'un serveur Redis pour le stockage des sessions de websocket.

Ressources

Les feuilles de style, les images et les scripts JS sont disponibles dans le repository betaseries-oauth.

Vous pouvez définir votre propre serveur en modifiant la constante serverBaseUrl en début de script.

const serverBaseUrl = 'https://betaseries.example.org';

⚠️ N'oubliez pas que votre serveur doit être sécurisé, sinon les appels ne passeront pas entre le site betaseries et votre serveur. ⚠️

Données partagées

Les données partagées correspondent aux données, initialement stockées avec Tampermonkey, qui permettent de personnaliser l'affichage des pages du site Web BetaSeries.com. J'ai décidé de déplacer les données sur le serveur pour pouvoir utiliser le userscript sur différents navigateurs et systèmes d'exploitation.

Si l'utilisateur n'est pas un membre connecté sur le site BetaSeries, le script va utiliser le stockage de Tampermonkey.

Types de données partagées

• objUpAuto: Contient les infos de mise à jour automatique des épisodes des séries.
• override: Contient les infos de surcharges de certaines propriétés des médias (pour le moment, les affiches des médias et des saisons).
• toSee: Contient les identifiants des séries à voir plus tard.

Evolutions liés aux données partagées

• Identifier l'utilisateur par les en-têtes HTTP
• stocker et servir les données partagées par utilisateur identifié.