Artwork view customizations

[AudioBabble]

Hi,

I wonder if anyone can point me in the right direction to make some customizations to the way artwork is viewed?

I want to achieve the following:

1. to have a skip button appear in the popup view window that appears when you click on the artwork preview. Currently, there is are skip buttons in the preview pane and i would like to achieve the same in the popup window.

2. to make the pop-up window zoomable, ideally in response to mouse wheel.

3. to make the contents of the popup window draggable, i.e. when zoomed in, the image can be dragged around (think google maps!)

So, I'm looking for advice on which js or html files relate to the popup window... as for the code, I can probably look that up and experiment, although any pointers would be welcome.

Thanks

[drakinite]

Good idea! I think people would like that addon.

You'll want to edit dialogs/dlgArtworkDetail.html and dialogs/dlgArtworkDetail.js. Pro tip: With a debug build, right click -> Inspect Element on the dialog you're looking at, and look for the data-posssavename attribute on the body. That usually tells you what JS/HTML file for the dialog you're investigating. https://i.imgur.com/ZYnR0ZA.png

1) Here's a short blurb on icons: https://www.mediamonkey.com/wiki/Gettin ... #data-icon

2) Here's info on mousewheel events: https://developer.mozilla.org/en-US/doc ... WheelEvent

Code: Select all

localListen(window, 'wheel', e => {
    e.preventDefault();
    // do your custom stuff
}, {passive: false});

3) You'll probably want to override the image's native "drag" event: https://developer.mozilla.org/en-US/doc ... d_Drop_API

Code: Select all

var artwork = qid('artwork');

localListen(artwork, 'dragstart', e => {
    e.preventDefault();
    // do your custom stuff
});

That override will stop a "ghost" image from being dragged around. Then you can probably set up a mousemove handlers to move the image around, and a mouseup handler to stop the custom dragging.
(FYI: I just found out that window.localListen is not documented on the api, but I'll write it out now. It's basically a wrapper for app.listen(), but app.unlisten() is called automatically in window.cleanupDocument())

[AudioBabble]

Thanks so much, that's super-helpful.

Lots to be getting into, I look forward to playing around with it. Cheers

[drakinite]

No problem good luck! Feel free to continue the thread if you have more questions. I get notifications for all posts on this forum.