☰

Remplacer div par card et ajouter posters sur les site de streaming

Remplace les div par des card et ajoute les posters depuis l'API The Movie DB

当前为 2023-04-11 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Remplacer div par card et ajouter posters sur les site de streaming
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2
  5. // @description  Remplace les div par des card et ajoute les posters depuis l'API The Movie DB
  6. // @author       M1tx
  7. // @match        https://brorov.com/*
  8. // @match        https://www.votrob.com/*
  9. // @match        https://tiblor.com/*
  10. // @match        https://www.redziv.com/*
  11. // @match        https://grogab.com/*
  12. // @match        https://nopliv.com/*
  13. // @match        https://evdod.com/*
  14. // @grant        GM_xmlhttpRequest
  15. // ==/UserScript==
  16.  
  17. (function() {
  18.     'use strict';
  19.  
  20.     const apiKey = 'Yourkeyapi';
  21.  
  22.     function fetchMoviePoster(movieTitle, callback) {
  23.         const url = `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=${encodeURIComponent(movieTitle)}`;
  24.         console.log('Fetching poster for:', movieTitle);
  25.         GM_xmlhttpRequest({
  26.             method: "GET",
  27.             url: url,
  28.             onload: function(response) {
  29.                 const json = JSON.parse(response.responseText);
  30.                 if (json.results && json.results.length > 0) {
  31.                     const posterPath = json.results[0].poster_path;
  32.                     const posterUrl = `https://image.tmdb.org/t/p/w200${posterPath}`;
  33.                     console.log('Poster URL:', posterUrl);
  34.                     callback(posterUrl);
  35.                 } else {
  36.                     console.log('No poster found for:', movieTitle);
  37.                     callback(null);
  38.                 }
  39.             }
  40.         });
  41.     }
  42.  
  43.     function replaceDivsWithCards() {
  44.         const divs = document.querySelectorAll('#hann');
  45.         divs.forEach(div => {
  46.             const movieLink = div.querySelector('a');
  47.             const movieTitle = movieLink.textContent.trim();
  48.             const movieYearMatch = movieTitle.match(/\((\d{4})\)/);
  49.             const movieYear = movieYearMatch ? movieYearMatch[1] : '';
  50.  
  51.             // Supprimer l'année et "HD" du titre du film
  52.             const cleanMovieTitle = movieTitle.replace(/\((\d{4})\)|HD/gi, '').trim();
  53.  
  54.             fetchMoviePoster(cleanMovieTitle, posterUrl => {
  55.                 const card = document.createElement('div');
  56.                 card.className = 'movie-card';
  57.                 card.innerHTML = `
  58.                     <a href="${movieLink.href}" class="movie-card-link">
  59.                         <div class="movie-poster">
  60.                             ${posterUrl ? `<img src="${posterUrl}" alt="${movieTitle}">` : ''}
  61.                         </div>
  62.                         <div class="movie-info">
  63.                             <h3>${movieTitle}</h3>
  64.                             <p>${movieYear}</p>
  65.                         </div>
  66.                     </a>
  67.                 `;
  68.                 div.parentNode.replaceChild(card, div);
  69.             });
  70.         });
  71.     }
  72.  
  73. function addCardStyles() {
  74.     const style = document.createElement('style');
  75.     style.innerHTML = `
  76.         .movie-card {
  77.             display: inline-block;
  78.             width: 200px;
  79.             padding: 10px;
  80.             box-sizing: border-box;
  81.             vertical-align: top;
  82.             text-align: center;
  83.             margin: 5px;
  84.             border: 1px solid #ccc;
  85.             border-radius: 5px;
  86.             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  87.             background-color: #fff;
  88.             transition: transform 0.3s;
  89.         }
  90.         .movie-card:hover {
  91.             transform: translateY(-5px);
  92.             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  93.         }
  94.         .movie-card-link {
  95.             display: block;
  96.             text-decoration: none;
  97.             color: inherit;
  98.         }
  99.         .movie-card-link:hover {
  100.             text-decoration: none;
  101.         }
  102.         .movie-poster {
  103.             width: 100%;
  104.             height: auto;
  105.             position: relative;
  106.             overflow: hidden;
  107.             border-radius: 5px;
  108.         }
  109.         .movie-poster img {
  110.             width: 100%;
  111.             height: auto;
  112.             display: block;
  113.             transition: transform 0.3s;
  114.         }
  115.         .movie-card:hover .movie-poster img {
  116.             transform: scale(1.1);
  117.         }
  118.         .movie-info {
  119.             margin-top: 10px;
  120.         }
  121.         .movie-info h3 {
  122.             font-size: 18px;
  123.             margin-bottom: 5px;
  124.             font-weight: bold;
  125.             line-height: 1.3;
  126.             color: #000000
  127.         }
  128.         .movie-info p {
  129.             font-size: 14px;
  130.             color: #777;
  131.             margin: 0;
  132.         }
  133.     `;
  134.     document.head.appendChild(style);
  135. }
  136.  
  137.  
  138.  
  139.     // Appeler la fonction pour ajouter des styles CSS
  140.     addCardStyles();
  141.  
  142.     // Appeler la fonction pour remplacer les divs par des cartes
  143.     replaceDivsWithCards();
  144. })();