Styling doesnt work properly and UI is not responsive

slash9494 / react-modern-audio-player

🔊 Simple, accessible and flexible audio player

MIT License

296 stars 20 forks source link

Styling doesnt work properly and UI is not responsive #6

Closed Hyphen133 closed 1 year ago

Hyphen133 commented 1 year ago

Looks like items are overlapping and UI is not responsive for mobile screen

<AudioPlayer playList={playList} activeUI={{ // all: true, prevNnext: true, playButton: true, playList: true, repeatType: false, progress:true, volume: false, }} /> I use this configuration. Could you help with that?

slash9494 commented 1 year ago

it looks like the 1.4.0-rc.0 version issue this version is not stable yet So I recommend migrating to 1.3.0 version if you don't use custom component

Hyphen133 commented 1 year ago

In fact the solution was to style it with placement interface : placement={{ interface: { templateArea: { trackInfo: "row1-1", playButton: "row2-1", repeatType: "row2-2", // volume: "row2-3", playList: "row2-3", progress: "row3-1", trackTimeDuration: "row1-3", trackTimeCurrent: "row1-2", }, },

Not all variants are working but I could find one that was suiting my need

peteroren812 commented 1 year ago

Does the mobile variant work? Sounds like the responsiveness issue wasn't resolved? I'm struggling to make the player fit my screen for mobile.