I want to be only on the playlist page, album page and artist(No Background) page. Add div elements, and can follow and scroll

[harbassan]

I want to be only on the playlist page, album page and artist(No Background) page. Add div elements, and can follow and scroll

[youthyan]

I just like music very much, I want to div my own player, I want to make it look good,thank you.

[harbassan]

Can you explain specifically what you want to do without mentioning the code, then I can help you. Do you want to change the background image? If yes, what exactly do you want to change it to?

[youthyan]

I just want to add createElement("div") to the image container, not to the body background, sorry, I fell asleep, the time zone is different

[harbassan]

If you only want it to happen for those specific pages, then you need to run your created function on page change when the page type is any of those three. You can do this by adding your function to this part of the galaxy.js file like so:

switch (type) {
        case "playlist":
          getPlaylistImage(uid);
          myFunction()
          break;
        case "album":
          fetchAlbumImage(uid);
          myFunction()
          break;
        case "artist":
          fetchArtistImage(uid);
          myFunction()
          break;

Then in your function you need to wait for the .main-entityHeader-image by using the waitForElement() function that is in the code already. You can see how it is used in the code.

Then inside the callback function of that you can create your image element and set the source of it to the .src of the .main-entityHeader-image that you have waited for.

Can you understand this?

[youthyan]

1. I don't know how to write "myFunction()" to make it work.

   • If I put waitForElement([".main-entityHeader-image"], ([image2]) =>
     Outside of myFunction() ,
   • it will only work on Reload, and switch pages doesn't work.

2. I don't know how to set source image src for .main-entityHeader-image.

   • If I put const bgImage = bgs.children[0].children[0];
     in a function,
   • function setBg(imagedata) { bgImage.src = image data;}
     will be wrong.

I don’t seem to understand the basics of js.
I understand js code in order to modify this js. But js is so difficult.
Can you edit myFunction() for me? thank you very much.

[harbassan]

this is the function:

const myfunction = () => {
        setTimeout(() => {
            waitForElement([`.main-entityHeader-image`], ([headerImage]) => {
                const shadowImage = headerImage.cloneNode(true);
                shadowImage.classList.add("shadow-image");
                headerImage.parentElement.append(shadowImage);
            });
        }, 50);
};

then this is the call:

if (!config.useHomeEverywhere) {
            switch (type) {
                case "playlist":
                    getPlaylistImage(uid);
                    myfunction();
                    break;
                case "album":
                    fetchAlbumImage(uid);
                    myfunction();
                    break;
                case "artist":
                    fetchArtistImage(uid);
                    myfunction();
                    break;
                case "lyrics":
                    fetchCurrTrackAlbumImage();
}

I recommend you learn javascript if you want to do more, but you should be able to use css from here to get to your desired result. Using the .shadow-image selector.

[youthyan]

This function is fine, the method of clone is very good.
I will modify the css, you are amazing.
I have solved this problem, thank you for your patience and guidance.