Closed nzoschke closed 1 year ago
As a workaround, the old dispatch stuff is still working
webamp.store.dispatch({ type: "TOGGLE_DOUBLESIZE_MODE" });
webamp.store.dispatch({ type: "TOGGLE_WINDOW", windowId: "equalizer" });
webamp.store.dispatch({
size: [11, 11],
type: "WINDOW_SIZE_CHANGED",
windowId: "playlist",
});
webamp.store.dispatch({
absolute: true,
positions: {
"main": {
x: (window.innerWidth - 550) / 2,
y: 48,
},
"playlist": {
x: (window.innerWidth - 550) / 2,
y: 280,
},
},
type: "UPDATE_WINDOW_POSITIONS",
});
There are a a few other issues related to programmatic layout
The new enableDoubleSizeMode: true
is working great, thanks!
I also get a differet error if I leave it as windowLayout: {}
, which is valid according to TS
caught (in promise) TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
at $3b33ae002d6cb89f$var$getWPixelSize (webamp@next:110:267841)
at webamp@next:110:268852
at webamp@next:110:225481
at Array.forEach (<anonymous>)
at $010a8194e057afe2$export$58aefef1ff9edd34 (webamp@next:110:225464)
at webamp@next:110:268804
at webamp@next:110:236667
at webamp@next:110:235976
at webamp@next:110:236833
at webamp@next:110:235976
I figured it out!
<!-- load jszip, webamp next, butterchurn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js" integrity="sha512-XMVd28F1oH/O71fzwBnV7HucLxVwtxf26XV8P4wPk26EDxuGZ91N8bsOttmnomcCD3CS5ZMRL50H0GgOHvegtg==" crossOrigin="anonymous" referrerPolicy="no-referrer"></script>
<script src="https://unpkg.com/webamp@next"></script>
<script src="https://unpkg.com/butterchurn@2.6.7/lib/butterchurn.min.js"></script>
<script src="https://unpkg.com/butterchurn-presets@2.4.7/lib/butterchurnPresets.min.js"></script>
<!-- initialize webamp with new API -->
<script>
new Webamp({
__butterchurnOptions: {
butterchurnOpen: true,
getPresets: () => {
const presets = window.butterchurnPresets.getPresets();
return Promise.resolve(Object.keys(presets).map((name) => {
return {
butterchurnPresetObject: presets[name],
name,
} as Preset;
}));
},
importButterchurn: () => Promise.resolve(window.butterchurn),
},
enableDoubleSizeMode: true,
initialSkin: {
"url": "https://r2.webampskins.org/skins/c5d0fd8e2d1c6bf8cbbaa770b19695b3.wsz",
},
initialTracks: window.props.initialTracks,
requireJSZip: () => window.JSZip,
requireMusicMetadata: () => Promise.resolve(false),
windowLayout: {
// equalizer: { closed: true, position: { left: 0, top: 0 }, },
main: { position: { left: 0, top: 0, } },
milkdrop: {
position: { left: 0, top: 232 }, size: {
extraHeight: 11,
extraWidth: 11,
}
},
// playlist: { position: { x: 0, y: 232 }, size: [0, 4] },
}
}).renderWhenReady(el);
</script>
I'm trying to use the "next" version with the new API from here: https://github.com/captbaritone/webamp/commit/17f0a393f779cf721f29f5f5905dfa41c807b05e
I get this error:
Furthermore, I get an alert "Webamp has not been configured to support custom skins." This looks like it comes from not setting PrivateOptions for
requireJSZip
andrequireMusicMetadata
, which are not obvious how or why to set these.