webamp icon indicating copy to clipboard operation
webamp copied to clipboard

resize playlist programatically, or prevent size change

Open vesper8 opened this issue 4 years ago • 4 comments

I've noticed something pretty annoying. When I load Webamp on my mobile device, initially the playlist takes up the full height of the screen as this is how I've set it using

        __initialWindowLayout: {
          main: { position: { x: this.offset.x + 0, y: this.offset.y + 0 } },
          playlist: { position: { x: this.offset.x + 0, y: this.offset.y + 116 }, size: [0, 12] },
        },

However once I load new songs or load a new playlist, it auto-centers the play and shrinks the playlist to only 4 visible items. And I have yet to figure out how to prevent this behaviour. I want the playlist to always be as big as possible, and I'd like to ideally have a way to trigger this resize through a button or every time a new song / playlist is loaded so that it never shrinks the way it currently does

Any idea how I can achieve this?

Many thanks

vesper8 avatar Dec 08 '20 15:12 vesper8

Basically, I can mimic this on desktop as well.. the moment I resize the window my playlist shrinks.. how can I catch this and either prevent it or have some control over the size of the windows upon a resize ?

vesper8 avatar Dec 08 '20 15:12 vesper8

The behavior where Webamp will respond to window resize events is registered here:

https://github.com/captbaritone/webamp/blob/master/packages/webamp/js/components/App.tsx#L91

This is intended to prevent issues where the user resizes the window and Webamp ends up off screen, or artificially changing the width of the page. It make Webamp hide itself, measures the "natural" size of the window and then tries to move itself so that it's not off screen at all. If the layout is too large for the screen it will give up and resize the windows to ensure Webamp fits entirely on screen.

https://github.com/captbaritone/webamp/blob/ea1c7bdbbd2d711d41a4a41372f7fc8d5ade4b5f/packages/webamp/js/actionCreators/windows.ts#L267

There is not currently any way to disable this feature.

It should only trigger on window resize, so maybe mobile is triggering resize events more than desktop? Like when a keyboard appears/goes away? I'm not sure why playing a track would cause that. You could try to investigate that.

I don't have a great fix for you. To be honest mobile support is a low priority for me, but if you have a solution I'd be happy to hear it.

captbaritone avatar Dec 11 '20 04:12 captbaritone

@captbaritone If there is no way to prevent the resize/re-centering, then is there a way to re-apply the window sizes at any time after initialization? Like you are able to via __initialWindowLayout ?

vesper8 avatar Dec 11 '20 10:12 vesper8

@vesper8 Yeah, we can/should expose the UPDATE_WINDOW_POSITIONS action.

For now, you can call the Redux store directly with something like this and see if you can make it work:

const absolute = false;
const positions = {
  main: {x: 0, y: 0},
  playlist: {x: 100, y: 100},
  equalizer: {x: 200, y: 200},
}
webamp.store.dispatch({ type: "UPDATE_WINDOW_POSITIONS", positions, absolute });

This is a private API which may break in the future, but if it works for you let me know and I can make a public API that uses this under the hood.

captbaritone avatar Dec 20 '20 04:12 captbaritone