Chaturbate Animate Thumbnail & Re-Layout

Make bigger thumbnails & Animated the thumbnail of a Chaturbate room on mouse hover
Fra 13.01.2022. Se den seneste versjonen.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name            Chaturbate Animate Thumbnail & 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 bigger thumbnails & Animated the thumbnail of a Chaturbate room on mouse hover
// @copyright       2021, nima-rahbar (https://greasyfork.org/en/users/846327-nima-rahbar)
// @license         MIT
// @version         1.0.2
// @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/[email protected]
// @require         https://cdn.jsdelivr.net/npm/@violentmonkey/[email protected]
// @match           *://*.chaturbate.com/*
// @exclude-match   *://status.chaturbate.com/*
// @exclude-match   *://support.chaturbate.com/*
// @run-at          document-idle
// @inject-into     page
// ==/UserScript==

/* global $, VM */

(() => {
  VM.observe(document.body, () => {

      // Change Layout
      function custom_layout(){
          $("body .c-1").css({
              margin: "0 auto",
          });
        $('body').find('.list li').css({
            width: ($("body .c-1").innerWidth() / 5) - 12,
            height: 280,
            maxHeight: 'none',
            margin: "0 5px",
        });
        $('body').find('.list img').css({
            width: '100%',
            height: 'auto'
        });
    }
      custom_layout();

      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 = $('#discover_root .room_list_room, #room_list .room_list_room, #broadcasters .room_list_room, .followedContainer .roomElement')

    if (rooms.length > 0) { // if rooms exists
      $('#room_list').css({
          display: "grid",
          "grid-template-columns": "1fr 1fr 1fr 1fr 1fr",
          "grid-template-rows": "1fr 1fr 1fr 1fr 1fr",
          "gap": "10px 5px",
          "grid-template-areas": '". . . . ." ". . . . ." ". . . . ." ". . . . ." ". . . . ."',
          position: "relative",
          left: 0
      }) // to be able to scale, on room list
      $('#room_list .room_list_room')
        .css('transition', 'transform .1s ease-in-out')
      $('.isIpad #room_list .room_list_room *, #broadcasters .room_list_room *')
        .css('user-select', 'none')
        .css('-webkit-touch-callout', 'none')

      $(rooms).each((index, element) => { // for each room
        let timer
        const name = $(element).find('> a').data('room') ? $(element).find('> a').data('room') : $(element).find('> .user-info > .username > a').text().replace(/^\s/g, '')
        const thumbnail = $(element).find('> a img')

        $(element)
          .bind('pointerdown', (event) => {
            element.releasePointerCapture(event.pointerId)
          })
          .bind('pointerenter', (event) => { // start
            var firstQ = ($("body .c-1").innerWidth() / 5),
                lastQ = firstQ * 4,
                origin = "center center",
                originX = "center",
                originY = "center"
            if( event.pageX < firstQ ){
                originX = "left";
            }else if( event.pageX > lastQ ){
                originX = "right";
            }
            if( event.pageY < $(document).innerHeight() / 4 ){
                originY = "top";
            }else if( event.pageY > $(document).innerHeight() / 4 ){
                originY = "bottom";
            }
            origin = originX + " " + originY;

            if ($(element).parent('#room_list').length > 0) { // scale only on room list
              $(element)
                .css('transform-origin', origin)
                .css('transform', 'translateX(0px) scale(1.5)')
                .css('z-index', '999')
            }

            timer = setInterval(() => { // animate thumbnail
              $(thumbnail)
                .attr('src', `https://cbjpeg.stream.highwebmedia.com/minifwap/${name}.jpg?f=${Date.now()}`)
            }, event.pointerType === 'touch' ? 166 : 83)
          })
          .bind('pointerup pointerleave', (event) => { // stop
            if ($(element).parent('#room_list').length > 0) { // scale only on room list
              $(element)
                .css('transform-origin', 'center center')
                .css('transform', 'translateX(0px) scale(1)')
                .css('z-index', '0')
            }

            clearInterval(timer) // stop animate thumbnail
            timer = undefined
          })
      })

      return false
    }
  })
})()