☰

Modify the list by cards with images on streaming sites

You are going to need an API https://www.themoviedb.org

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

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