A couple of suggestions for the new unbox version

[rebellion1969]

As from my previous ticket, I still would like to see some of the original version from your old version of unbox implemented into this version. So here goes.

The main implementation I really think you should consider adding is the choice of being able to choose the display style that is shown on the overlay. ie the "Now playing" (vertical and horizontal), "Next Up" and, my personal favourite out of them, the "History" (Current and Previous Track) elements into unbox.

I also now have a secondary suggestion, after playing around a bit with this version. I notice one slightly (ONLY slightly!) annoying thing about this version and that is, the track information is updated WAY too quickly. I, and I am sure others too, notice that track information is changed almost immediately when the fader is pushed to half way (ie full mix) - wouldnt it be a lot more convenient if track information was only updated as and when the cross-fader (IMO) is fully across to the next track. Again I had a play with the code in "unbox_overlay.html" and did get it to work half way. By changing some of the values (ill include the changed code at bottom of this post to show as example) I did manage to get it to work slightly. I noticed fading from deck 1 to full mix (deck 1&2 fully playing together) - track information didnt change immediately. Upon sliding fully over to deck 2 - track information was updated. My only problem was going in reverse. Upon fading from deck 2 to full mix (again Decks 1 and 2 in sync) it seemed that track information was being updated with what was on deck 1 even though I hadnt pushed the cross fader all the way across.

Can you make changes to code so that track information isnt updated until the fader is either at full position on either deck 1 or deck 2 and not at centre when they are both in full mix?

Note: I think I know WHY the tracks are prematurely changing on "Now Playing". The changes I made DO work. But! Ive also noticed if I changed the slider gains for each deck individually (to balance out volume of the mix track on the opposing deck), Unbox is picking up on this and changing track information in relation to this. Now I know there are those out there who prefer cross-fade mixing and those who prefer fading into mix using volumes - Could there be a way to circumvent this so that BOTH styles can be implemented?

Changes to code (lines 10 to 106 - inside the script tags) that I made to emulate the feel that I wanted with this program are shown below I would suggest this to be added as a push for implementation but of course, lets iron out creases first, as you may notice the changes are to the values in some of the lines (basically add a zero to all the 1000 numerical values):

` <script>
document.addEventListener('DOMContentLoaded', () => {
const items = [{"id":1,"contentType":"NOW PLAYING","selector":".sweep-text-now-playing"},{"id":2,"contentType":"Artist","selector":".sweep-text-artist"},{"id":3,"contentType":"Title","selector":".sweep-text-title"},{"id":4,"contentType":"Label","selector":".sweep-text-label"}];
items.forEach(item => {
item.element = document.querySelector(item.selector);
});
const setupWebSocket = (elements) => {
const applyAnimation = (element, properties, duration = 10000) => {
if (!element) return;
anime({
targets: element,
...properties,
duration: duration,
easing: 'easeInOutQuad'
});
}
const resetAnimation = (element) => {
if (!element) return;
anime.remove(element);
}
const socket = new WebSocket('ws://localhost:3000');

socket.addEventListener('message', (event) => {
    const trackDetails = JSON.parse(event.data);

    elements.forEach((item) => {
        applyAnimation(item.element, { translateX: [0, '100%'], opacity: [1, 0] }, (1 + item.id * 0.1) * **10000**);
    });

    setTimeout(() => {
        const updateTrackDetails = (trackDetails, elements) => {
const applyAnimation = (element, properties, duration = **10000**) => {
if (!element) return;
anime({
    targets: element,
    ...properties,
    duration: duration,
    easing: 'easeInOutQuad'
});

}
const resetAnimation = (element) => {
if (!element) return;
anime.remove(element);
}
elements.forEach((item) => {
let content;
switch (item.contentType) {
case 'NOW PLAYING':
content = 'NOW PLAYING';
break;
case 'Artist':
content = trackDetails.artist || '';
break;
case 'Title':
content = trackDetails.track || '';
break;
case 'Artist - Title':
content = trackDetails.artist && trackDetails.track ? ${trackDetails.artist} - '${trackDetails.track}' : '';
break;
case 'Label':
content = trackDetails.artist && !trackDetails.label ? '' : [${trackDetails.label}];
break;
case 'Album Art':
content = trackDetails.artwork || '';
break;
default:
content = '';
}

    if (item.element) {
        if (item.contentType === 'Album Art') {
            item.element.style.display = content ? '' : 'none';
            item.element.src = content;
        } else {
            item.element.textContent = content;
        }
    }
});

elements.forEach((item) => {
    resetAnimation(item.element);
    applyAnimation(item.element, { translateX: ['100%', 0], opacity: [0, 1] }, (1 + item.id * 0.1) * **10000**);
});

}
updateTrackDetails(trackDetails, elements);

        elements.forEach((item) => {
            resetAnimation(item.element);
            applyAnimation(item.element, { translateX: ['100%', 0], opacity: [0, 1] }, (1 + item.id * 0.1) * **10000**);
        });

    }, 10000);
});

}
setupWebSocket(items);
});
</script>`

Can my assumption be that these values have changed the "response time" unbox reacts to transitions in track change and slows down its reaction time.

EDIT: Sorry I happened to forget, that again, this is with testing on VirtualDJ. Obviously I dont know what would happen in other versions of DJ software. Maybe someone could test this and comment further on it. Edit 2: I apologise for some of the script code showing as "code" and other parts not. Think that is due to the the single quotations withing the actual code causing this.