function wallpaperMediaPropertiesListener(event) {
// reset animation
test.stop(true);
test.css('margin-left', 0);
// set song title.
test.text(event.title);
var testWidth = test.outerWidth();
// clone text
$('.test-copy').remove();
if (testWidth > $('#line1').width()) {
test.clone().css({'margin-left': gap, 'font-size': '1.05vh'}).removeClass().addClass('test-copy').insertAfter(test);
}
// move text
let speed = 5;
function shiftingAnimation() {
let timer = setTimeout(() => {
test.animate({'margin-left': -(testWidth + gap)}, {
duration: Math.abs((testWidth + gap) * 100 / speed),
easing: 'linear',
complete: function () {
test.css({'margin-left': 0});
clearTimeout(timer);
shiftingAnimation();
}
});
}, 3000);
}
// first execution
if (testWidth > $('#line1').width()) {
setTimeout(shiftingAnimation, 3000);
}
}
event.title returns the name of the song currently playing. The wallpaperMediaPropertiesListener function is triggered when there is a change in the song.
The animation starts after a 3-second delay when testWidth is greater than #line1 width. Once the animation ends, it repeats itself with a 3-second delay each time. If the event.title value changes, the animation resets and starts from the initial 3-second delay again.
However, the issue arises when the event.title value changes during the 3-second delay. The animation is applied regardless of whether the condition (testWidth > #line1) is true or false, and it appears to be using the previous testWidth for the animation.