☰

Chaturbate Animate Thumbnail

Animated the thumbnail of a Chaturbate room on mouse hover

As of 2022-02-17. See the latest version.

  1. // ==UserScript==
  2. // @name            Chaturbate Animate Thumbnail
  3. // @name:de         Chaturbate Miniaturansicht Animieren
  4. // @name:fr         Vignette Animée Chaturbate
  5. // @name:it         Miniatura Animata Chaturbate
  6. // @author          iXXX94
  7. // @namespace       https://sleazyfork.org/users/809625-ixxx94
  8. // @icon            https://www.google.com/s2/favicons?sz=64&domain=chaturbate.com
  9. // @description     Animated the thumbnail of a Chaturbate room on mouse hover
  10. // @description:de  Animieren die miniaturansicht eines Chaturbate-raums beim maus über
  11. // @description:fr  Anime le vignette d'une salle Chaturbate au survol de la souris
  12. // @description:it  Animata la miniatura di una stanza Chaturbate al passaggio del mouse
  13. // @copyright       2021, iXXX94 (https://sleazyfork.org/users/809625-ixxx94)
  14. // @license         MIT
  15. // @version         2.0.0
  16. // @homepageURL     https://sleazyfork.org/scripts/431581-chaturbate-animate-thumbnail
  17. // @homepage        https://sleazyfork.org/scripts/431581-chaturbate-animate-thumbnail
  18. // @supportURL      https://sleazyfork.org/scripts/431581-chaturbate-animate-thumbnail/feedback
  19. // @require         https://cdn.jsdelivr.net/npm/@violentmonkey/dom@2.1.0/dist/index.min.js
  20. // @require         https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
  21. // @match           *://*.chaturbate.com/*
  22. // @exclude-match   *://status.chaturbate.com/*
  23. // @exclude-match   *://support.chaturbate.com/*
  24. // @run-at          document-start
  25. // @inject-into     page
  26. // ==/UserScript==
  27.  
  28. /* global $, VM */
  29.  
  30. (() => {
  31.   const addStyle = () => {
  32.     $('#room_list') // to be able to scale, on room list
  33.       .css('display', 'inline-flex')
  34.       .css('overflow', 'visible')
  35.       .css('white-space', 'nowrap')
  36.       .css('align-content', 'flex-start')
  37.       .css('justify-content', 'flex-start')
  38.       .css('align-items', 'flex-start')
  39.       .css('position', 'relative')
  40.       .css('left', '0')
  41.       .css('flex-wrap', 'wrap')
  42.     $('#room_list .room_list_room')
  43.       .css('transition', 'transform .1s ease-in-out')
  44.     $('.isIpad #room_list .room_list_room *, #broadcasters .room_list_room *')
  45.       .css('user-select', 'none')
  46.       .css('-webkit-touch-callout', 'none')
  47.   }
  48.  
  49.   const scale = (element, on) => {
  50.     if ($(element).parent('#room_list').length > 0) { // only on room list
  51.       if (on) {
  52.         $(element)
  53.           .css('transform-origin', 'center center')
  54.           .css('transform', 'translateX(0px) scale(1.2)')
  55.           .css('z-index', '999')
  56.       } else {
  57.         $(element)
  58.           .css('transform-origin', 'center center')
  59.           .css('transform', 'translateX(0px) scale(1)')
  60.           .css('z-index', '0')
  61.       }
  62.     }
  63.   }
  64.  
  65.   const setThumbnail = (element) => {
  66.     const name = $(element).find('> a').data('room') ? $(element).find('> a').data('room') : $(element).find('> .user-info > .username > a').text().replace(/^\s/g, '')
  67.     const thumbnail = $(element).find('> a img')
  68.  
  69.     $(thumbnail)
  70.       .attr('src', `https://cbjpeg.stream.highwebmedia.com/minifwap/${name}.jpg?f=${Date.now()}`)
  71.   }
  72.  
  73.   VM.observe(document.documentElement || document.body, () => {
  74.     const rooms = $('#discover_root .room_list_room, #room_list .room_list_room, #broadcasters .room_list_room, .followedContainer .roomElement')
  75.  
  76.     if (rooms.length > 0) { // if rooms exists
  77.       addStyle()
  78.       $(rooms).each((index, element) => { // for each room
  79.         let timer
  80.  
  81.         $(element).on({
  82.           mouseover: () => { // mouse start
  83.             scale(element, true)
  84.             timer = setInterval(() => setThumbnail(element), 83) // animate thumbnail
  85.           },
  86.           mouseout: () => { // mouse stop
  87.             scale(element, false)
  88.             clearInterval(timer) // stop animate thumbnail
  89.             timer = undefined
  90.           },
  91.           touchstart: () => { // touch start
  92.             scale(element, true)
  93.             timer = setInterval(() => setThumbnail(element), 166) // animate thumbnail
  94.           },
  95.           touchend: () => { // touch stop
  96.             scale(element, false)
  97.             clearInterval(timer) // stop animate thumbnail
  98.             timer = undefined
  99.           }
  100.         })
  101.       })
  102.  
  103.       // keep observing
  104.       return false
  105.     }
  106.   })
  107. })()