360-player customisation problem

[jbonnett92]

Hi All, I took a look at the Customizing the UI section found here.

All I did was change it to:

threeSixtyPlayer.config = {
    playNext: false, // stop after one sound, or play through list until end
    autoPlay: false, // start playing the first sound right away
    allowMultiple: false, // let many sounds play at once (false = one at a time)
    loadRingColor: '#ffffff',// amount of sound which has loaded
    playRingColor: '#eb1668', // amount of sound which has played
    backgroundRingColor: '#00000', // "default" color shown underneath everything else
    animDuration: 500,
    animTransition: Animator.tx.bouncy, // http://www.berniecode.com/writing/animator.html
    showHMSTime: true,
}

and I get this strange behaviour: See the ring with a pink line though it, well that pink line is supposed to be the duration ring.

Any ideas how to fix this?

Thanks in advance.

[scottschiller]

Hi! Pardon late follow-up - I probably made a mistake in the demo params, sorry about that. I think this is a long-standing goof - these properties should be mixed in with the existing config, because what's shown are only values that changed and not the full / original object. If you replace it by copy/paste, you'll lose a lot of other config bits that determine how the UI works.

If you merge your changes into the existing default config without completely overwriting it e.g., underscore/lodash or similar like threeSixtyPlayerConfig = _.merge(threesixtyPlayer.config, { ... your custom bits here ... }) or similar, I think things will work.

Note that in the source of 360player.js, there are a lot more config name/value pairs. Rather than _.merge() et al, if you edit the values in the original file or just assign each one individually e.g., threeSixtyPlayer.config.playRingColor = '#eb1668';, it should work!

[jbonnett92]

Hi @scottschiller , Thank you for the reply, I tried your suggestion like so:

Object.assign(threeSixtyPlayer.config, {
    playNext: false, // stop after one sound, or play through list until end
    autoPlay: false, // start playing the first sound right away
    allowMultiple: false, // let many sounds play at once (false = one at a time)
    loadRingColor: '#ffffff',// amount of sound which has loaded
    playRingColor: '#eb1668', // amount of sound which has played
    backgroundRingColor: '#00000', // "default" color shown underneath everything else
    animDuration: 500,
    animTransition: Animator.tx.bouncy, // http://www.berniecode.com/writing/animator.html
    showHMSTime: true,
});

This time it's better although not without strange behaviour, even when I assign individually: Notice how the pink ring doesn't start at the top.

Here is an example of what it looks like the moment I press play:

Jamie

[scottschiller]

Hmm. To be safe, can you try using the default values first and see if the UI works as expected? Sorry this demo is a little fiddly, it's almost 10 years old! ;)

[jbonnett92]

It works fine with default values, 10 years wow. I thought canvas was a recent HTML5 standard?

[scottschiller]

Apple / Safari introduced <canvas> quite a while back I think, it was something they came up with. It was later standardized. IE got support for it in version 9. Firefox and Chrome had support since early-digit releases.