Actualiser README.md
This commit is contained in:
parent
4c532969b0
commit
4178bd450b
248
README.md
248
README.md
@ -1,113 +1,221 @@
|
|||||||
# Mode Affiches Alternatif — UseNet Enhanced
|
# Mode Affiches Alternatif — UseNet Enhanced
|
||||||
|
|
||||||
Userscript pour transformer la liste de releases sur UNFR en **galerie d'affiches responsive**, avec overlay d’info avancé et configuration dynamique.
|
Userscript avancé pour transformer la liste de releases sur un indexeur privé en **galerie d’affiches responsive**, overlay d’info détaillé, et actions directes Radarr/Sonarr.
|
||||||
|
|
||||||
Encore un grand bravo & merci au développeur du site !
|
> **Merci au développeur du site pour le partenariat technique !** Qui a en plus ajouté le mode écran large :)
|
||||||
|
|
||||||
<div align="center">
|
> **Merci à chatGPT pour les corrections (1 erreur de corrigée, 2 de créées lol), le décalage de l'overlay, l'intégration de Radarr en exemple et le ReadMe !**
|
||||||
|
|
||||||
<img src="https://raw.githubusercontent.com/Aerya/Mode-Affiches/refs/heads/main/Screens/1.2.png" alt="Menu" />
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🚀 Fonctionnalités principales
|
## 🚀 Fonctionnalités principales
|
||||||
|
|
||||||
- **Affichage galerie** (grille responsive) pour les films et séries, sur la page d'accueil et les sections Films / Séries
|
- **Affichage galerie** : Grille responsive pour films & séries (Accueil, Films, Séries)
|
||||||
- **Regroupement de releases** pour les films et séries, sur la page chargée, toutes les releases d'un même contenu solt regroupées
|
- **Regroupement intelligent** : Toutes les releases d’un même film/série sont rassemblées sous une seule affiche
|
||||||
- **Overlay** : au clic sur une affiche, détail de toutes les releases du même titre (avec icônes d’action natives du site)
|
- **Overlay dynamique & configurable** :
|
||||||
- **Largeur d’affiche configurable** (slider : 200–360 px), lisible et adaptatif
|
- Clic sur une affiche = détails de toutes les releases du titre (scroll auto si +10 releases)
|
||||||
- **Affichage de la note TMDB avec lien vers la fiche** optionnel, avec clé API personnelle à configurer
|
- Sur option, ouverture dans un nouvel onglet de la fiche du média/Voir toutes les releases
|
||||||
- **Menu de configuration dynamique** : sélectionnez les sections à transformer (Accueil, Films, Séries)
|
- **Taille de police de l’overlay réglable**
|
||||||
- **Nettoyage/normalisation des titres** (optimisé Films & Séries)
|
- **Actions Radarr/Sonarr/4K/Overserr/Jellyseerr** : (NB : j'ai pas pris le temps de tester Jellyseerr, je me suis basé sur Overseerr)
|
||||||
- **Bouton “Remonter en haut de page”** visible lors du scroll
|
- Boutons d’ajout direct (Radarr, Radarr 4K, Sonarr, Sonarr 4K) affichés **uniquement si des instances sont configurées** (via le menu)
|
||||||
- **Options persistantes** (taille d’affiche & sections actives via LocalStorage)
|
- Configuration facile des instances, sans exposer d’URL du site ou de clés en dur
|
||||||
- **Mise à jour automatique** depuis GitHub à chaque utilisation du script dans le navigateur
|
- Fonctionne avec URL ou http://ip:port **sans blackslash à la fin**
|
||||||
|
- Pour Overseerr/Jellyseerr, voir plus loin dans le ReadMe (Détails Techniques) car il faut modifier le reverse-proxy si vous en utilisez un
|
||||||
|
- Qualité et dossier cible auto, choix du profil dynamique
|
||||||
|
- **Badges notes TMDB/IMDB** :
|
||||||
|
- Notes avec icônes, fond blanc translucide, texte noir gras
|
||||||
|
- **Lien direct vers la fiche TMDB**
|
||||||
|
- **Largeur d’affiche configurable** : Slider 200–360 px
|
||||||
|
- **Menu de configuration dynamique** : Sélection des sections à transformer (Accueil, Films, Séries), instances Radarr/Sonarr, options d’UI
|
||||||
|
- **Persistant** : Toutes les préférences (sections actives, tailles, instances…) sont sauvegardées en LocalStorage
|
||||||
|
- **Bouton “Remonter en haut de page”** : Apparition automatique au scroll
|
||||||
|
- **Sécurité et vie privée** :
|
||||||
|
- **Le script ne contient aucune URL d’indexeur**
|
||||||
|
- Grâce à une détection côté navigateur, il s’active uniquement sur le bon site, sans config manuelle
|
||||||
|
- **Mises à jour automatiques** : Le script vérifie et propose les updates GitHub/Gitea de lui-même (il check les dépôts toutes les 12h)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🆕 Journal des mises à jour
|
## 🆕 Journal des mises à jour
|
||||||
|
|
||||||
### 6.29 (12/07/2025)
|
**8.4.3 (12/07/2025)**
|
||||||
- Intégration patch UNFR pour proxifier les notes TMDB/IMDB
|
|
||||||
- Le fichier `mode_affiches.js` n'a plus besoin d'être édité par l'utilisateur
|
|
||||||
|
|
||||||
### 6.28 (12/07/2025)
|
- Ajout de la fonction d’auto-update discrète depuis tig. et GitHub
|
||||||
- Ajout lien vers fiche TMDB dans icône + note (votes)
|
- Support amélioré pour charger la mise à jour depuis les deux sources simultanément
|
||||||
|
- Correction mineure dans le processus d’ouverture de l’onglet de mise à jour
|
||||||
|
- Stabilisation générale du script, sans suppression de fonctionnalités
|
||||||
|
|
||||||
### 6.27 (12/07/2025)
|
**8.4.2 (12/07/2025)**
|
||||||
- Corrections affichage note TMDB. Au besoin, la taille de l'icône se modifie ligne 158 `width="70" height="42"`
|
|
||||||
|
|
||||||
### 6.26 (12/07/2025)
|
- Badges TMDB/IMDB : fond blanc opaque, texte noir gras, lien direct vers la fiche TMDB
|
||||||
- Correction overlay qui pouvait dépasser les dimensions du navigateur
|
- Icônes Radarr/Sonarr/4K visibles uniquement si instances configurées
|
||||||
- Ajout de notes TMDB sur les affiches, en option
|
- Config multi-instance Radarr/Sonarr, Overseerr, Jellyseerr, overlay moderne, taille de police ajustable
|
||||||
|
- Nombreuses optimisations UX
|
||||||
### 6.25 (12/07/2025)
|
|
||||||
- Correction bogue Bouton de menu
|
|
||||||
|
|
||||||
### 6.24 (12/07/2025)
|
|
||||||
- Ajout d’une option pour la taille de police des noms de releases dans l’overlay (menu configuration)
|
|
||||||
- Séparateur centré dans le header de l’overlay, correction « Voir toutes les releases pour le film / la série »
|
|
||||||
- Correction : NFO toujours affiché devant l’overlay, ajustement dynamique de la hauteur de l’overlay
|
|
||||||
- Mise à jour automatique depuis GitHub
|
|
||||||
|
|
||||||
### 6.23 (11/07/2025)
|
|
||||||
- Overlay extra-large (1150px), responsive à la largeur de vignette
|
|
||||||
- Menu amélioré, bouton Remonter en haut de page
|
|
||||||
- Affichage propre, bugfix police et espacements
|
|
||||||
|
|
||||||
### 6.20 (10/07/2025)
|
|
||||||
- Adaptation à la nouvelle structure du site
|
|
||||||
- Responsive, pagination propre, intégration menu config
|
|
||||||
- Groupement des releases par ID film/série, overlay dynamique par affiche
|
|
||||||
- Option sections (Films, Séries, Accueil)
|
|
||||||
- Slider taille d’affiche amélioré
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 📦 Installation
|
## 📦 Installation
|
||||||
|
|
||||||
1. **Installez [Tampermonkey](https://www.tampermonkey.net/)** (ou équivalent : Violentmonkey, Greasemonkey)
|
1. **Installez [ViolentMonkey](https://violentmonkey.github.io/)** (ou [TamperMonkey](https://www.tampermonkey.net/), [GreaseMonkey](https://www.greasespot.net/)…)
|
||||||
2. Créez un nouveau script et copiez-y le contenu de `mode_affiches.js`
|
2. **Créez un nouveau script** et collez-y le contenu de `mode_affiches.js`
|
||||||
3. Modifiez le champ `@match` du script pour cibler votre propre indexeur (ex : `https://lesite.domaine/*`)
|
3. **Activez le script**. Il détectera automatiquement s’il se trouve sur le bon indexeur (grâce à la collaboration avec le développeur)
|
||||||
4. Pour avoir les notes TMDB sur les affiches, mettez votre [clé API TMDB](https://www.themoviedb.org/settings/api) (gratuite) dans le champ `const TMDB_API_KEY = '1234'; // Mettez votre clé ici !`
|
4. **Configurez** vos instances Radarr/Sonarr/4K si besoin, via le menu (aucune URL du site à renseigner)
|
||||||
3. Sauvegardez, activez le script
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🖥️ Screenshots
|
## 🖥️ Aperçu visuel
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
### Menu
|
||||||
|
<img src="https://raw.githubusercontent.com/Aerya/Mode-Affiches/refs/heads/main/Screens/menu.1.0.png" />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
### Overlay
|
||||||
|
<img src="https://raw.githubusercontent.com/Aerya/Mode-Affiches/refs/heads/main/Screens/overlay.1.0.png" />
|
||||||
|
<img src="https://raw.githubusercontent.com/Aerya/Mode-Affiches/refs/heads/main/Screens/overlay.1.1.png" />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
### Affiches
|
||||||
|
<img src="https://raw.githubusercontent.com/Aerya/Mode-Affiches/refs/heads/main/Screens/affiches.1.0.png" />
|
||||||
|
<img src="https://raw.githubusercontent.com/Aerya/Mode-Affiches/refs/heads/main/Screens/affiches.1.1.png" />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
### Radarr
|
||||||
|
<img src="https://raw.githubusercontent.com/Aerya/Mode-Affiches/refs/heads/main/Screens/radarr.1.0.png" />
|
||||||
|
<img src="https://raw.githubusercontent.com/Aerya/Mode-Affiches/refs/heads/main/Screens/radarr.1.1.png" />
|
||||||
|
<img src="https://raw.githubusercontent.com/Aerya/Mode-Affiches/refs/heads/main/Screens/radarr.1.2.png" />
|
||||||
|
<img src="https://raw.githubusercontent.com/Aerya/Mode-Affiches/refs/heads/main/Screens/radarr.1.3.png" />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
### Overseerr
|
||||||
|
<img src="https://raw.githubusercontent.com/Aerya/Mode-Affiches/refs/heads/main/Screens/overseerr.1.0.png" />
|
||||||
|
<img src="https://raw.githubusercontent.com/Aerya/Mode-Affiches/refs/heads/main/Screens/overseerr.1.1.png" />
|
||||||
|
<img src="https://raw.githubusercontent.com/Aerya/Mode-Affiches/refs/heads/main/Screens/overseerr.1.2.png" />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🧩 Détails techniques
|
## 🧩 Détails techniques
|
||||||
|
|
||||||
- **Vanilla JS** (pas de dépendances externes)
|
- **Vanilla JS** : Zéro dépendance externe
|
||||||
- Overlay uniquement au clic (ergonomie : pas d’effet “polluant” au survol)
|
- **Détection automatique du site** : Activation sans configuration d’URL
|
||||||
- Regroupement des releases par titre (film ou série) depuis la page chargée, donc pas d'appel superflue au site
|
- **Groupement local** : Toutes les opérations sont faites côté navigateur, jamais d’appel API “sauvage” à l’indexeur
|
||||||
- Icônes natives pour chaque release (signalement, téléchargement, panier, etc.)
|
- **Overlay au clic** : Ergonomie optimale
|
||||||
|
- **Mises à jour automatiques** : Pas besoin de surveiller GitHub, le script le fait pour vous
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### ⚡ Pré-requis côté serveur : activer CORS pour votre domaine
|
||||||
|
|
||||||
|
#### ▶️ Nginx Proxy Manager
|
||||||
|
|
||||||
|
Dans l’onglet **Advanced** du proxy vers Overseerr/Jellyseerr, ajoutez (en adaptant l’URL de l’indexeur si besoin) : rempalcez `https://lesite.extension` par la vraie URL de l'indexeur et `ttp://192.168.0.195:5055` par l'IP et le port de l'application
|
||||||
|
|
||||||
|
```nginx
|
||||||
|
location /api/v1/ {
|
||||||
|
add_header 'Access-Control-Allow-Origin' 'https://lesite.extension' always;
|
||||||
|
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
|
||||||
|
add_header 'Access-Control-Allow-Headers' 'Authorization, X-Api-Key, Content-Type, Accept' always;
|
||||||
|
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
|
||||||
|
|
||||||
|
if ($request_method = 'OPTIONS') {
|
||||||
|
add_header 'Access-Control-Allow-Origin' 'https://lesite.extension' always;
|
||||||
|
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
|
||||||
|
add_header 'Access-Control-Allow-Headers' 'Authorization, X-Api-Key, Content-Type, Accept' always;
|
||||||
|
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
|
||||||
|
add_header 'Access-Control-Max-Age' 86400 always;
|
||||||
|
add_header 'Content-Type' 'text/plain charset=UTF-8' always;
|
||||||
|
add_header 'Content-Length' 0 always;
|
||||||
|
return 204;
|
||||||
|
}
|
||||||
|
|
||||||
|
proxy_pass http://192.168.0.195:5055;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
<img src="https://raw.githubusercontent.com/Aerya/Mode-Affiches/refs/heads/main/Screens/npm.1.0.png" alt="Démo NPM1 1" width="350"/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
#### ▶️ Traefik
|
||||||
|
|
||||||
|
Dans la section `middlewares` de votre `docker-compose.yml` ou traefik config :
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
overseerr-cors:
|
||||||
|
headers:
|
||||||
|
accessControlAllowOriginList:
|
||||||
|
- "https://lesite.extension"
|
||||||
|
accessControlAllowMethods:
|
||||||
|
- "GET"
|
||||||
|
- "POST"
|
||||||
|
- "OPTIONS"
|
||||||
|
- "PUT"
|
||||||
|
- "DELETE"
|
||||||
|
accessControlAllowHeaders:
|
||||||
|
- "Authorization"
|
||||||
|
- "X-Api-Key"
|
||||||
|
- "Content-Type"
|
||||||
|
- "Accept"
|
||||||
|
accessControlExposeHeaders:
|
||||||
|
- "Content-Length"
|
||||||
|
- "Content-Range"
|
||||||
|
accessControlMaxAge: 86400
|
||||||
|
addVaryHeader: true
|
||||||
|
```
|
||||||
|
|
||||||
|
Ajoutez le middleware à votre service Overseerr/Jellyseerr :
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
labels:
|
||||||
|
- "traefik.http.routers.overseerr.middlewares=overseerr-cors@docker"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
> ⚠️ Si vous voyez un message “CORS error” dans la console navigateur :
|
||||||
|
> C’est la config proxy qui doit être adaptée (voir ci-dessus)
|
||||||
|
> Un simple `curl` qui marche ne suffit pas, le navigateur exige un header CORS valide et un endpoint `OPTIONS` qui répond 204/200
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## ❓ FAQ
|
## ❓ FAQ
|
||||||
|
|
||||||
- **Le script ne fonctionne pas ?**
|
**Le script ne fonctionne pas ?**
|
||||||
Vérifiez le champ `@match` tout en haut du script : il doit correspondre à votre site.
|
Vérifiez que vous êtes bien sur les pages sur lesquelles il agit. Vérifiez que l'URL est bien détectée (et non bloquée par une extension de votre navigateur Internet)
|
||||||
- **Je veux plus d’options !**
|
**Un bug ?**
|
||||||
Forkez le script ou ouvrez un ticket pour proposer vos idées.
|
Joignez un extrait HTML de la page pour correction express
|
||||||
- **Vous constatez un bug ?**
|
|
||||||
Fournissez un extrait du HTML concerné pour correction rapide.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## 💡 Idées pour les prochaines versions
|
||||||
|
|
||||||
|
- **Section musique** : recherche sur Spotify, recherche par genres/artistes similaires, intégration de Lidarr
|
||||||
|
- ... ?
|
||||||
|
---
|
||||||
|
|
||||||
## 🤝 Crédits
|
## 🤝 Crédits
|
||||||
|
|
||||||
Développé par [Aerya](https://github.com/Aerya) — libre d’utilisation et de modification du moment que la source est citée.
|
Développé par **[Aerya](https://github.com/Aerya)** — libre d’utilisation & de modification, avec mention de la source.
|
||||||
Toute contribution est la bienvenue !
|
|
||||||
|
|
||||||
---
|
---
|
||||||
Loading…
x
Reference in New Issue
Block a user