☰

Remplacer div par card et ajouter posters

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

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

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