Chaturbate Animate Thumbnail

Animated the thumbnail of a Chaturbate room on mouse hover

Per 22-09-2021. Zie de nieuwste versie.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==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.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 */

(() => {
  VM.observe(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
          })
      })

      return false
    }
  })
})()