Raw Source Toggle Dropdown

• Minified Source

ni554n / RapidMoviez Scrollable Popular Movies and TV Shows Section

// ==UserScript==

// @name                RapidMoviez Scrollable Popular Movies and TV Shows Section
// @description         Changes the grid style of "Popular Movies and TV Shows" section of RapidMoviez to a scrollable list mimicking the "Latest Episodes" section.
// @version             2.2

// @namespace           io.github.ni554n
// @match               http*://rmz.cr/*

// @updateURL           https://openuserjs.org/meta/ni554n/RapidMoviez_Scrollable_Popular_Movies_and_TV_Shows_Section.meta.js
// @supportURL          https://github.com/ni554n/userscripts/issues
// @license             MIT

// @author              Nissan Ahmed
// @homepageURL         https://ni554n.github.io/
// @contributionURL     https://paypal.me/ni554n

// ==/UserScript==

/* Migration Notice */

console.log(`
 █████  ████████ ████████ ███████ ███    ██ ████████ ██  ██████  ███    ██ 
██   ██    ██       ██    ██      ████   ██    ██    ██ ██    ██ ████   ██ 
███████    ██       ██    █████   ██ ██  ██    ██    ██ ██    ██ ██ ██  ██ 
██   ██    ██       ██    ██      ██  ██ ██    ██    ██ ██    ██ ██  ██ ██ 
██   ██    ██       ██    ███████ ██   ████    ██    ██  ██████  ██   ████ 
                                                                           
                                                                           
`)

console.log(
`Thanks for using "RapidMoviez Scrollable Popular Movies and TV Shows Section" userscript downloaded from OpenUserJS.

You are seeing this message because due to a change introduced in OpenUserJS,
future updates to this script will no longer be vaiable.

If you like to get updates in the future, please open your userscript manager program,
and remove the "RapidMoviez Scrollable Popular Movies and TV Shows Section" script.

Then head over to this Github link and install this script again.
https://github.com/ni554n/userscripts/blob/master/rapidmoviez/scrollable-popular-movies-and-tv-shows-section#installation

It's very easy to do and will take only 3-4 clicks.

Sorry for the inconvenience!`
);


const popularSectionDiv = document.getElementsByClassName("pops clear")[0];

if (!popularSectionDiv) {
  console.warn(`Failed to get a reference of the "Popular Movies and TV Shows" section.`);

  return;
}

const releaseList = popularSectionDiv.getElementsByTagName("ul")[0];

// Mimic the structure of "Latest Episodes" items.
for (const releaseItem of releaseList?.children) {
  // Remove the class in order to reset the current grid style.
  releaseItem.removeAttribute("class");

  const thumbnailLink = releaseItem.firstElementChild;

  // Align the thumbnail image to the left.
  thumbnailLink.firstElementChild.setAttribute("align", "left");

  // Prepare a clickable link of the release title next to the thumbnail.
  const releaseTitleLink = thumbnailLink.cloneNode();

  // The link title attribute can be unavailable in some releases. In that case,
  // transform the link path to the release title.
  releaseTitleLink.textContent = releaseTitleLink.getAttribute("title")
    || releaseTitleLink.getAttribute("href").substring(1)
      .split("-")
      .map((word) => word.charAt(0).toUpperCase() + word.substring(1))
      .join(" ");

  const linkSpan = document.createElement("span");
  linkSpan.appendChild(releaseTitleLink);

  releaseItem.appendChild(linkSpan);
}

// To apply the list style, mimic the div structure of the "Latest Episodes" section.
const div = document.createElement("div");
div.className = "epicontainer";
div.setAttribute("style", "margin: 0px 0 0 -5px; height: 380px");
div.appendChild(releaseList);

popularSectionDiv.className = "latest clear";
popularSectionDiv.appendChild(div);