Ability to provide more custom styling

[WillsB3]

Hi,

We're using paper-audio-player in a large web-app, but would like to be able to customise the styling more than the built in support for customising the accent colour offers.

Would there be a possibility of somehow having the player support the ability to provide a custom stylesheet to tweak the player styling?

I'm new to Polymer so not sure how this problem is usually solved with re-using shared components, so if this is already possible I'd appreciate any advice or guidance on how it can be done 👍

Thanks!

[gorork]

Hi @WillsB3, thanks for the suggestion!

Could you provide a couple of example of what would you like to re-style?

As a general styling guide you can check this one: https://www.polymer-project.org/1.0/docs/devguide/feature-overview

[WillsB3]

Hi,

The minimum needed to bring it inline with our requirements are the ability to change the font, adjust the positioning of the track title (we need to left align it rather than centre align), and changing the appearance of the drop shadow.

I don't think adding options for all possible customisations really makes sense here. Currently we're including a vulkanized build of an unmodified paper-audio-player in our app as our application and build process does not use Polymer. As far as I can tell this makes adding our own styles impossible as we can't restyle elements inside the components shadow dom unless we add our styles directly to the style tags in the component - which we obviously can't do without forking the project and all the additional maintenance burden that brings.

Any ideas welcome :)

[gorork]

@WillsB3 The font and shadow css customizations could be added. The positioning of track title is little bit more tricky though. The overlay position (when progress bar covers the title) is being recalculated by JS logic. So to make it happen we would need to add a separate setting defining how to align the title, something like title-align="left", and apply different positioning logic based on this setting.

Would you be willing to contribute any of these features to the element?

BTW, could you share your app url? :)

[WillsB3]

I can't share my app URL publicly unfortunately. After further discussion with our stakeholders I think we're going to have to have to move away form using paper audio player as it is now and do something custom (maybe using the Paper Audio Player component as a starting point for a new component that doesn't rely on Polymer).

Many thanks for your time, development efforts and thanks for making this component open source 👍

Please close this issue if the enhancements suggested were too specific to our use case and you feel as though they are not worth pursuing.

[gorork]

Keeping this one open - in case we have any other generic cases for customization.