Animated the thumbnail of a Chaturbate room on mouse hover
// ==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.4.1 // @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/@violentmonkey/[email protected]/dist/index.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js // @match *://*.chaturbate.com/* // @exclude-match *://status.chaturbate.com/* // @exclude-match *://support.chaturbate.com/* // @run-at document-start // @inject-into page // ==/UserScript== /* global $, VM */ (() => { VM.observe(document.documentElement || document.body, () => { 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') // to be able to scale, on 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') $('.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 if ($(element).parent('#room_list').length > 0) { // scale only on room list $(element) .css('transform-origin', 'center center') .css('transform', 'translateX(0px) scale(1.2)') .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 }) }) // keep observing return false } }) })()
