Chaturbate Animate Thumbnail

Animated the thumbnail of a Chaturbate room on mouse hover
As of 09. 09. 2021. See the latest version.
Visit the author's site for support, ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name            Chaturbate Animate Thumbnail
// @name:de         Chaturbate Miniaturansicht Animieren
// @name:fr         Vignette Animée Chaturbate
// @name:it         Miniatura Animata Chaturbate
// @author          iXXX94
// @namespace       https://sleazyfork.org/users/809625-ixxx94
// @icon            https://www.google.com/s2/favicons?sz=64&domain=chaturbate.org
// @description     Animated the thumbnail of a Chaturbate room on mouse hover
// @description:de  Animieren die miniaturansicht eines Chaturbate-raums beim maus über
// @description:fr  Anime le vignette d'une salle Chaturbate au survol de la souris
// @description:it  Animata la miniatura di una stanza Chaturbate al passaggio del mouse
// @copyright       2021, iXXX94 (https://sleazyfork.org/users/809625-ixxx94)
// @license         MIT
// @version         1.2.0
// @homepageURL     https://sleazyfork.org/scripts/431581-chaturbate-animate-thumbnail
// @homepage        https://sleazyfork.org/scripts/431581-chaturbate-animate-thumbnail
// @supportURL      https://sleazyfork.org/scripts/431581-chaturbate-animate-thumbnail/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 */

(() => {
  'use strict'

  VM.observe(document.body, () => {
    const rooms = $('#discover_root .room_list_room, #room_list .room_list_room, .followedContainer .roomElement')

    // if rooms exists
    if (rooms.length) {
      // to be able to scale, on room list
      $('#room_list')
        .css('display', 'inline-flex')
        .css('overflow', 'visible')
        .css('white-space', 'nowrap')
        .css('align-content', 'flex-start')
        .css('justify-content', 'flex-start')
        .css('align-items', 'flex-start')
        .css('position', 'relative')
        .css('left', '0')
        .css('flex-wrap', 'wrap')
      $('#room_list .room_list_room')
        .css('transition', 'transform .1s ease-in-out')

      // for each room
      $(rooms).each((index, element) => {
        let timer
        const name = $(element).find('> a').data('room')
        const thumbnail = $(element).find('> a img')

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

            // animate thumbnail
            timer = setInterval(() => {
              $(thumbnail)
                .attr('src', `https://cbjpeg.stream.highwebmedia.com/minifwap/${name}.jpg?f=${new Date().getTime()}`)
            }, 83)
          })
          .mouseleave(() => { // on mouse leave
            // scale only on room list
            if ($(element).parent('#room_list').length) {
              $(element)
                .css('transform-origin', 'center center')
                .css('transform', 'translateX(0px) scale(1)')
                .css('z-index', '0')
            }

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

      return false
    }
  })
})()