Consolidate where the demo site reaches out into Webamp (#1056)

packages/webamp/demo/js/DemoDesktop.tsx

@@ -1,4 +1,4 @@
-import WebampLazy from "../../js/webampLazy";
+import { WebampLazy } from "./Webamp";
 import { Suspense } from "react";
 import WebampIcon from "./WebampIcon";
 // import Mp3Icon from "./Mp3Icon";

packages/webamp/demo/js/MilkIcon.tsx

@@ -1,11 +1,10 @@
-import WebampLazy from "../../js/webampLazy";
+import { WebampLazy, loadPresets } from "./Webamp";
 import { useCallback } from "react";
 // @ts-ignore
 import iconLarge from "../images/manifest/icon-96x96.png";
 // @ts-ignore
 import iconSmall from "../images/manifest/icon-48x48.png";
 import DesktopIcon from "./DesktopIcon";
-import * as Actions from "../../js/actionCreators";
 
 const iconUrl = window.devicePixelRatio > 1 ? iconLarge : iconSmall;
 
@@ -25,7 +24,7 @@ const MilkIcon = ({ webamp, preset }: Props) => {
       },
     } as const;
 
-    webamp.store.dispatch(Actions.loadPresets([statePreset]));
+    webamp.store.dispatch(loadPresets([statePreset]));
   }, [preset, webamp]);
   return (
     <DesktopIcon

packages/webamp/demo/js/Mp3Icon.tsx

@@ -1,11 +1,10 @@
-import WebampLazy from "../../js/webampLazy";
+import { WebampLazy, URLTrack } from "./Webamp";
 import { useCallback } from "react";
 // @ts-ignore
 import iconLarge from "../images/manifest/icon-96x96.png";
 // @ts-ignore
 import iconSmall from "../images/manifest/icon-48x48.png";
 import DesktopIcon from "./DesktopIcon";
-import { URLTrack } from "../../js/types";
 
 const iconUrl = window.devicePixelRatio > 1 ? iconLarge : iconSmall;
 

packages/webamp/demo/js/SkinIcon.tsx

@@ -1,4 +1,4 @@
-import WebampLazy from "../../js/webampLazy";
+import { WebampLazy } from "./Webamp";
 // @ts-ignore
 import iconSmall from "../images/icons/paint-file-32x32.png";
 import DesktopIcon from "./DesktopIcon";

packages/webamp/demo/js/Webamp.ts

@@ -0,0 +1,30 @@
+// This is a temporary module intended to collect all the places where the demo
+// site reaches out into Webamp code. The goal is to eventually have the demo
+// site consume the actual Webamp NPM module, so hopefully this module can go
+// away once we've figured out how to expose all the things that the demo site
+// needs, or reduce the things that the demo site needs access to.
+
+export { default as WebampLazy } from "../../js/webampLazy";
+export {
+  ButterchurnOptions,
+  Track,
+  AppState,
+  URLTrack,
+  FilePicker,
+  Action,
+} from "../../js/types";
+export { WINDOWS } from "../../js/constants";
+export {
+  STEP_MARQUEE,
+  UPDATE_TIME_ELAPSED,
+  UPDATE_WINDOW_POSITIONS,
+  SET_VOLUME,
+  SET_BALANCE,
+  SET_BAND_VALUE,
+  DISABLE_MARQUEE,
+  TOGGLE_REPEAT,
+  TOGGLE_SHUFFLE,
+  SET_EQ_AUTO,
+  SET_DUMMY_VIZ_DATA,
+} from "../../js/actionTypes";
+export { loadPresets } from "../../js/actionCreators";

packages/webamp/demo/js/WebampIcon.tsx

@@ -1,4 +1,4 @@
-import WebampLazy from "../../js/webampLazy";
+import { WebampLazy } from "./Webamp";
 import { useEffect, useState } from "react";
 // @ts-ignore
 import iconSmall from "../images/icons/winamp2-32x32.png";

packages/webamp/demo/js/butterchurnOptions.ts

@@ -1,4 +1,4 @@
-import { ButterchurnOptions } from "../../js/types";
+import { ButterchurnOptions } from "./Webamp";
 
 const KNOWN_PRESET_URLS_REGEXES = [
   /^https:\/\/unpkg\.com\/butterchurn-presets\/.*\.json$/,

packages/webamp/demo/js/config.ts

@@ -1,4 +1,4 @@
-import { Track, AppState, URLTrack } from "../../js/types";
+import { Track, AppState, URLTrack } from "./Webamp";
 // @ts-ignore
 import llamaAudio from "../mp3/llama-2.91.mp3";
 import { DeepPartial } from "redux";

packages/webamp/demo/js/dropboxFilePicker.ts

@@ -1,4 +1,4 @@
-import { FilePicker } from "../../js/types";
+import { FilePicker } from "./Webamp";
 
 interface DropboxFile {
   link: string;

packages/webamp/demo/js/eventLogger.ts

@@ -1,5 +1,5 @@
 import { log, GoogleAnalyticsEvent } from "./logger";
-import { Action } from "../../js/types";
+import { Action } from "./Webamp";
 
 function logEventFromAction(action: Action): GoogleAnalyticsEvent | null {
   switch (action.type) {

packages/webamp/demo/js/index.js

@@ -4,11 +4,11 @@ import * as Sentry from "@sentry/browser";
 import ReactDOM from "react-dom";
 import createMiddleware from "redux-sentry-middleware";
 import isButterchurnSupported from "butterchurn/lib/isSupported.min";
-import { WINDOWS } from "../../js/constants";
 import { loggerMiddleware } from "./eventLogger";
 
-import WebampLazy from "../../js/webampLazy";
 import {
+  WebampLazy,
+  WINDOWS,
   STEP_MARQUEE,
   UPDATE_TIME_ELAPSED,
   UPDATE_WINDOW_POSITIONS,
@@ -20,7 +20,7 @@ import {
   TOGGLE_SHUFFLE,
   SET_EQ_AUTO,
   SET_DUMMY_VIZ_DATA,
-} from "../../js/actionTypes";
+} from "./Webamp";
 
 import { getButterchurnOptions } from "./butterchurnOptions";
 import dropboxFilePicker from "./dropboxFilePicker";

packages/webamp/demo/js/mediaSession.ts

@@ -1,4 +1,4 @@
-import WebampLazy from "../../js/webampLazy";
+import { WebampLazy } from "./Webamp";
 
 export default function enableMediaSession(webamp: WebampLazy) {
   if ("mediaSession" in navigator) {

packages/webamp/demo/js/screenshotInitialState.ts

@@ -1,5 +1,5 @@
 import { DeepPartial } from "redux";
-import { AppState } from "../../js/types";
+import { AppState } from "./Webamp";
 
 const defaultTracksState = {
   "0": {