Sleazy Fork is available in English.

Chaturbate Re-Layout

Make custom grid thumbnails

// ==UserScript==
// @name            Chaturbate Re-Layout
// @author          nima-rahbar
// @namespace       https://greasyfork.org/en/users/846327-nima-rahbar
// @icon            https://www.google.com/s2/favicons?sz=64&domain=chaturbate.org
// @description     Make custom grid thumbnails
// @copyright       2022, nima-rahbar (https://greasyfork.org/en/users/846327-nima-rahbar)
// @license         MIT
// @version         1.2.5
// @homepageURL     https://greasyfork.org/en/scripts/437111-chaturbate-animate-thumbnail-re-layout
// @homepage        https://greasyfork.org/en/scripts/437111-chaturbate-animate-thumbnail-re-layout
// @supportURL      https://greasyfork.org/en/scripts/437111-chaturbate-animate-thumbnail-re-layout/feedback
// @require         https://cdn.jsdelivr.net/npm/jquery@3.6.0
// @require         https://cdn.jsdelivr.net/npm/@violentmonkey/dom@1.0.9
// @match           *://*.chaturbate.com/*
// @run-at          document-idle
// ==/UserScript==

/* global $, VM */

(() => {
  $("#nav").append(
    '<li><a href="#" class="reset-grids" style="display: flex; align-items: center; column-gap: 5px;"><img style="height:17px;" alt="Reset Grid Count" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAA7EAAAOxAGVKw4bAAADBElEQVR4nO1bMWsUQRh9sxyHoklODRIwWARBUUklUQTFxkZbiwiCWCsoiiBoZyFoIYhNOgsr/0EEc2ClFimCWAjGIAFBUgQRlOO8Z+FeWGe+uf0gkA9v5sE07+7tvP32229ndmccyQaA+wBmkRYWAFx3JB8AuGPtxggvCgAnrF0YYqawdmCNRoTvVdogNAWuo+i3EPruAegqtI1SX0UXoVf/P4XAhUSJIwBGyrYDwHahHRR0y5H/+u2WoH2q1C4I2rOlzxGvjQHYVbY9EC6OlAE9AGvOuV/CbxsgKWaHc64ua2La3ia1tdlDsgMva2MZUGtkWJBaAIIsSf4pkFoAcgb4yAGwNrDFCIp7bCR4mOSPmoNNCFyT5LTCyD6BG1dqRwVuiuS6QhucryPZBnBGIR5GrKR2CwTIAbA2YI1YEVxC/dS0CeCox3UAvFf0uxfApMd9A7Cq0B5AWAg/Aqgr2gAwDf+cSbb5L36TbNUdieR+hvikMAGS1wTtY6V2XtCeVmq/errPyd8COQDWBqyRA2BtwBo5ANYGrJF8AGIjwdskf9ZoxwSuRfKeot/jAjej1E4J3GXlYGinT+TpsLUDa+QAWBuwRuzb4EPUf+UdBXDD49YBPFH0ewzAOY97A+ClQnsJYSF8BuCLQnsTfiHM0+HEkQNgbcAaOQDWBqyRA2BtwBrJB0AaCRYAXpGs+zCyTeAmSb5V9Ct9WZ4leVKhPSRwcyS/K7TjPpGnw9YOrJEDYG3AGrHp8CnUf22dADDvcasAziv6vYhwj8JzAI8U2jmES/yvAFhUaNsAdleJ2EvRD865gWtuKK/J6TjnlupcRKava0qtVO2XlVr1OsFhvTXUy+WTQQ5AhI/Vhv8dwXlJAUgqK1IrgqoMSAqxe71Ved72n50bu8g0e3ssQLJ6QfvnVlSaeq1wdcAgblIqDyhtmxu42apizjfThW7bXBNh5nYqnnxIQeljJZYBm3kKSO8JNJCCooV0IVRIvgYUAN5ZmzDEYgPAXfwNxAVjM1uN1wCu/gFdn51EBIXtygAAAABJRU5ErkJggg==" /> Reset Grid Count</a></li>'
  );
  $("body").on("click", ".reset-grids", function () {
    var grids = prompt(
      "Enter layout grids count (between 4 and 10):",
      localStorage.getItem('grid-count')
    );
    if (grids) {
      if( grids > 10 ) grids = 10;
      if( grids < 4 ) grids = 4;
      localStorage.setItem('grid-count', grids);
    }
    location.reload();
  });
  VM.observe(document.body, () => {
    // Change Layout
    function custom_layout(grid_count) {
      $("body .list.endless_page_template").css({
        gridTemplateColumns: "repeat("+grid_count+", 1fr)",
        margin: "0 auto",
      }).children('.roomCard').css('width', 'auto');
      $("body").find(".list.endless_page_template img").css({
        width: "100%",
        height: "auto",
      });
    }

    var oldXHR = window.XMLHttpRequest;
    function newXHR() {
      var realXHR = new oldXHR();
      realXHR.addEventListener(
        "readystatechange",
        function () {
          if (realXHR.readyState == 4) {
            setTimeout(custom_layout, 400);
          }
        },
        false
      );
      return realXHR;
    }
    window.XMLHttpRequest = newXHR;

    const rooms = $(
      ".list.endless_page_template .roomCard"
    );

    if (rooms.length > 0) {
      // if rooms exists
      var grids = 11;
      if (!localStorage.getItem("grid-count")) {
        grids = prompt("Enter layout grids count:", "11");
        if (grids) {
          localStorage.setItem('grid-count', grids);
        }
      } else {
        grids = localStorage.getItem('grid-count');
      }
      custom_layout(grids);
      var grid_template_columns = "repeat(" + grids + ", 1fr)";
      $(".list.endless_page_template").css({
        "grid-template-columns": grid_template_columns,
        "grid-template-rows": "auto",
        "grid-column-gap": "5px",
        "grid-row-gap": "15px",
        position: "relative",
        left: 0,
      }); // to be able to scale, on room list
      $(".list.endless_page_template .roomCard").css(
        "transition",
        "transform .1s ease-in-out"
      );
      $(".isIpad .list.endless_page_template *")
        .css("user-select", "none")
        .css("-webkit-touch-callout", "none");

      rooms.each(function(index, room){
          $(room).attr('data-index', index);
      });

      $("body").on("mouseover", ".roomCard", function(e){
          var maxGrids = localStorage.getItem('grid-count'),
              roomCardWidth = $('.roomCard').width() + 10,
              origin = "center top",
              leftPart = roomCardWidth * Math.floor(localStorage.getItem('grid-count') / 2),
              rightPart = roomCardWidth * Math.floor(maxGrids) - roomCardWidth * Math.floor(maxGrids / 2);
          console.log(
              $(this).eq()
          );
          if($(this).offset().left < leftPart){
              origin = "left top";
          }else if($(this).offset().left > rightPart){
              origin = "right top";
          }
          $(this).css({
              transformOrigin: origin,
              transform: "translateX(0px) scale(1.3)",
              zIndex: "2"
          });
      });

      $("body").on("mouseleave", ".roomCard", function(e){
          $(this).css({
              transformOrigin: "center center",
              transform: "translateX(0px) scale(1)",
              zIndex: "0"
          });
      });
      return false;
    }
  });
})();