Animated the thumbnail of a Chaturbate room on mouse hover
As of
// ==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.3.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/jquery@3.6.0
// @require https://cdn.jsdelivr.net/npm/@violentmonkey/dom@1.0.9
// @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, () => {
const rooms = $('#discover_root .room_list_room, #room_list .room_list_room, .followedContainer .roomElement')
// if rooms exists
if (rooms.length > 0) {
// 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 > 0) {
$(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=${Date.now()}`)
}, 83)
})
.mouseleave(() => { // on mouse leave
// scale only on room list
if ($(element).parent('#room_list').length > 0) {
$(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
}
})
})()