Webamp Next Window Layout API and Custom Skin errors

[nzoschke]

I'm trying to use the "next" version with the new API from here: 17f0a39

  // load via  <script src="https://unpkg.com/webamp@next" />
  const webamp = new Webamp({
    windowLayout: {
      equalizer: { position: { left: 0, top: 116 } },
      main: { position: { left: 0, top: 0 } },
      milkdrop: {
        position: { left: 275, top: 0 },
        size: { extraHeight: 12, extraWidth: 7 },
      },
      playlist: {
        position: { left: 0, top: 232 },
        size: { extraHeight: 4, extraWidth: 0 },
      },
    },
  });

  webamp.renderWhenReady(el);

I get this error:

caught TypeError: Cannot destructure property 'canResize' of 'e.genWindows[t.windowId]' as it is undefined.
    at $50bf15f324d3b688$var$windows (webamp@next:110:232041)
    at webamp@next:110:210470
    at f (webamp@next:110:207841)
    at webamp@next:110:336591
    at webamp@next:110:334543
    at webamp@next:110:212291
    at dispatch (webamp@next:110:211816)
    at webamp@next:110:284779
    at Object.dispatch (webamp@next:110:212282)
    at new $cc8f6e80f3ca7a31$var$Webamp (webamp@next:115:355942)

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 and requireMusicMetadata, which are not obvious how or why to set these.

[nzoschke]

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",
  });

[nzoschke]

There are a a few other issues related to programmatic layout

• #1039
• #1025
• #788
• #783

[nzoschke]

The new enableDoubleSizeMode: true is working great, thanks!

[nzoschke]

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

[nzoschke]

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>

[fireworksordie]

are there any changes that broke this? i can get the window to render with the code from nzoschke but none of the positioning seems to do anything.

I figured it out!

<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> <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>