coxtor / Bumblebonus (Speedcontrol + Large Images)

// ==UserScript==
// @name        Bumblebonus (Speedcontrol + Large Images)
// @name:de     Bumblebonus (Große Bilder + Sprachnachrichtengeschwindigkeit)
// @namespace   Violentmonkey Scripts
// @match       https://*bumble.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @run-at      document-start
// @grant    GM_addStyle
// @version     2.0.3
// @author      -
// @description 28.1.23
// @description:de 28.1.23
// @license     MIT
// ==/UserScript==

var picssectionstring = `<div class="profile__section--text profile__section--location">
    <div class="profile__subtitle">
        <div class="profile__subtitle-icon"><span class="icon icon--size-stretch" role="presentation"
                data-qa-role="icon" data-qa-icon-name="profile-badge-location"><svg data-origin="pipeline"
                    viewBox="0 0 32 32" fill="none">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16zM9.608 13.72c-.259 3.7 5.772 10.168 6.141 10.194.37.026 6.825-5.569 7.084-9.27.259-3.7-2.492-6.906-6.144-7.161-3.652-.256-6.822 2.537-7.08 6.237zM16 16a2.133 2.133 0 110-4.267A2.133 2.133 0 0116 16z"
                        fill="currentColor"></path>
                </svg></span></div>
        <div class="profile__subtitle-text">
            <div class="p-2 text-ellipsis font-weight-medium"><span>Pics</span></div>
        </div>
    </div>
    <div class="profile__about">
      <ul id="picture_list" class="profile__badges">
      </ul>
    </div>
</div> `;

function InsertImages() {
  var x = $(".profile__photo");
  var i;

  if (!x.hasClass("processed")) {
    var picSection = $($(".profile__section")[0]).append(picssectionstring);
    for (i = 0; i < x.length; i++) {
      src = x[i].src;
      slug = src.split('&size')[0];
      $("#picture_list").append('<li class="profile__badge">\
                                              <div class="pill"> \
                                                  <div class="pill__title">\
                                                    <div class="p-3 text-ellipsis font-weight-medium">\
                                                      <a href="' + slug + '" style="text-decoration:underline;color:#454650;" target="_blank">Pic ' + i + '</a>\
                                                    </div>\
                                                  </div>\
                                           </div></li>');

    }
    x.addClass("processed");
  }
}

function swapAudio() {
  var x = $(".message-audio > audio");
  color = (x.parents().eq(3).hasClass("message--out")) ? "#282828" : "#ffc629";
  var i;
  for (i = 0; i < x.length; i++) {
    var audioUrl = $(x[i]).attr("src");
    var audioTag = '<div style="background-color:"' + color + '";border-radius:15px;padding-top:5px;" > \
                      <audio controls id="audio' + i + '" src="' + audioUrl + '" style="border-radius:15px;margin-left:10px;"></audio> \
                        <button style="margin-right:5px;margin-top:-30px;background:#e6b225;text-align: center;width: 60px;height: 40px;border-radius:15px;display: inline-block;vertical-align:middle;color:#000;" data-current-speed="1" data-audiosource="audio' + i + '" class="speedControl" "> 1x </button> \
                      </div>';
    $(x[i]).parent().html(audioTag);
    $(x[i]).removeClass("message-audio");
  }
}

$(document).ready(function () {
  $(document).on("click", ".speedControl", function () {
    var currentSpeed = $(this).data("current-speed");
    var source = $(this).data("audiosource");
    var newSpeed = currentSpeed + 0.25;
    var audioElement = document.getElementById(source);
    if (newSpeed > 2) newSpeed = 1;
    audioElement.playbackRate = newSpeed;
    audioElement.play();
    $(this).html(newSpeed + "x");
    $(this).data("current-speed", newSpeed);
  });

  window.setInterval(() => {
    InsertImages();
    swapAudio();
  }, 500);

});