☰

Cleaner lemellotron.com

27/04/2024 18:10:17

// ==UserScript==
// @name        Cleaner lemellotron.com
// @namespace   Violentmonkey Scripts
// @match       https://www.lemellotron.com/*
// @grant       none
// @version     1.2
// @author      neFAST
// @grant       GM_addStyle
// @run-at      document-end
// @description 27/04/2024 18:10:17
// @icon        https://assets-global.website-files.com/62288d6c9e6c33efb4e67d74/622895bc0943958e9518efd7_Icone_black-favicon.png
// @license     MIT
// ==/UserScript==

// This function will be called when the album image src changes
function onImageSrcChange(mutation) {
  // Find the div with the class 'tv'
  var tvDiv = document.querySelector('.tv');

  // Check if the mutation is an attribute mutation and the attribute is 'src'
  if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
    // Set the div's background image to the new src of the image
    tvDiv.style.backgroundImage = 'url(' + mutation.target.src + ')';
  }
}

// This function will be called when the album name div changes
function onAlbumTextChange(mutation) {
  // Find the div with the class 'current-track-album'
  var ourDiv = document.querySelector('.current-track-album');

  if (mutation.type === 'childList' || mutation.type === 'characterData') {
    // Copy the innerHTML from albumDiv to our div
    ourDiv.innerHTML = mutation.target.innerHTML;
  }
}

function initAlbumDiv() {
  // Create a new div element for the album section
  var albumSection = document.createElement('div');
  albumSection.className = 'current-track-album';

  // Set the content of the album section
  var albumTitle = document.createTextNode('Album Title');
  albumSection.appendChild(albumTitle);

  // Find the parent div element with the class 'div-block-41'
  var parentDiv = document.querySelector('.div-block-41');

  // Append the new album section to the parent div
  parentDiv.appendChild(albumSection);
}

window.onload = () => {
  // Select the img element whose src you want to observe
  var imgElement = document.querySelector('#release-picture');
  if (imgElement) {
    // Create an observer instance and pass our callback function to it
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(onImageSrcChange);
    });

    // Configure the observer to listen for changes in the attributes
    var config = {
      attributes: true,
      childList: false,
      subtree: false
    };

    // Start observing the img element for mutations
    observer.observe(imgElement, config);
  } else {
    console.warn('The img element was not found.');
  }

  initAlbumDiv();

  // Select the div where changes will be observed
  var albumDiv = document.getElementById('expand-meta');
  if (albumDiv) {
    // Create an observer instance and pass our callback function to it
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(onAlbumTextChange);
    });

    // Configure the observer to listen for changes in the attributes
    var config = {
      characterData: true,
      childList: true,
      subtree: true
    };

    // Start observing the div element for mutations
    observer.observe(albumDiv, config);
  } else {
    console.warn('The div element was not found.');
  }
};


GM_addStyle(`

.tv {
  height: 570px;
  background-size: cover;
  transition: background-image 1s ease-in-out;
}

.overlay {
  backdrop-filter: blur(55px);
  background: rgb(0 0 0 / 35%);
}

.radioplayer-play-button {
  position: absolute;
  top: 40px
}

#release-picture {
  width: 20%;
  border-radius: 12px;
  box-shadow: -1px 7px 12px 8px rgb(0 0 0 / 75%);
}

#artist-picture {
  display: none; #borken
}

video, .canvas {
  visibility: hidden; /* The video is hidden but still takes up space in the layout */
}

.current-track-title,
.current-track-artist,
.current-track-album {
  font-size: 48px;
  line-height: 48px;
  margin-left: 12px;
}

.current-track-album {
  color: white;
}

.current-track-artist:before {
  content: "🧑‍🎤 ";
}

.current-track-album:before {
  content: "💿 ";
}

.logo {
    width: 140px;
}

.logo:after {
    content: "Le Mellotron";
    font-size: 22px;
}

`)