@exezt-/webamp 1.5.0-0x1

package/index.d.ts

@@ -0,0 +1,277 @@
+interface TrackInfo {
+  /**
+   * Name to be used until ID3 tags can be resolved.
+   *
+   * If the track has a `url`, and this property is not given,
+   * the filename will be used instead.
+   *
+   * Example: `'My Song'`
+   */
+  defaultName?: string;
+
+  /**
+   * Data to be used _instead_ of trying to fetch ID3 tags.
+   *
+   * Example: `{ artist: 'Jordan Eldredge', title: "Jordan's Song" }`
+   */
+  metaData?: {
+    artist: string;
+    title: string;
+    album?: string;
+  };
+
+  /**
+   * Duration (in seconds) to be used instead of fetching enough of the file to measure its length.
+   *
+   * Example: 95
+   */
+  duration?: number;
+}
+
+interface URLTrack extends TrackInfo {
+  /**
+   * Source URL of the track
+   *
+   * Note: This URL must be served the with correct CORs headers.
+   *
+   * Example: `'https://example.com/song.mp3'`
+   */
+  url: string | URL;
+}
+
+interface BlobTrack extends TrackInfo {
+  /**
+   * Blob source of the track
+   */
+  blob: Blob;
+}
+
+interface LoadedURLTrack {
+  url: string;
+  metaData: {
+    artist: string | null;
+    title: string | null;
+    album: string | null;
+    albumArtUrl: string | null;
+  };
+}
+
+/**
+ * Many methods on the webamp instance deal with track.
+ *
+ * Either `url` or `blob` must be specified
+ */
+type Track = URLTrack | BlobTrack;
+
+interface Options {
+  /**
+   * An object representing the initial skin to use.
+   *
+   * If omitted, the default skin, included in the bundle, will be used.
+   * Note: This URL must be served the with correct CORs headers.
+   *
+   * Example: `{ url: './path/to/skin.wsz' }`
+   */
+  initialSkin?: {
+    url: string;
+  };
+
+  /**
+   * An array of `Track`s to prepopulate the playlist with.
+   */
+  initialTracks?: Track[];
+
+  /**
+   * An array of objects representing available skins.
+   *
+   * These will appear in the "Options" menu under "Skins".
+   * Note: These URLs must be served with the correct CORs headers.
+   *
+   * Example: `[ { url: "./green.wsz", name: "Green Dimension V2" } ]`
+   */
+  availableSkins?: { url: string; name: string }[];
+
+  /**
+   * Should global hotkeys be enabled?
+   *
+   * Default: `false`
+   */
+  enableHotkeys?: boolean;
+
+  /**
+   * An array of additional file pickers.
+   *
+   * These will appear in the "Options" menu under "Play".
+   *
+   * In the offical version, this option is used to provide a "Dropbox" file picker.
+   */
+  filePickers?: [
+    {
+      /**
+       * The name that will appear in the context menu.
+       *
+       * Example: `"My File Picker..."`
+       */
+      contextMenuName: string;
+
+      /**
+       * A function which returns a Promise that resolves to an array of `Track`s
+       *
+       * Example: `() => Promise.resolve([{ url: './rick_roll.mp3' }])`
+       */
+      filePicker: () => Promise<Track[]>;
+
+      /**
+       * Indicates if this options should be made available when the user is offline.
+       */
+      requiresNetwork: boolean;
+    }
+  ];
+  zIndex?: number;
+
+  handleTrackDropEvent?: (
+    e: React.DragEvent<HTMLDivElement>
+  ) => Track[] | null | Promise<Track[] | null>;
+}
+
+export default class Webamp {
+  constructor(options: Options);
+
+  /**
+   * Returns a true if the current browser supports the features that Webamp depends upon.
+   *
+   * It is recommended to check this before you attempt to instantiate an instance of Winamp.
+   */
+  public static browserIsSupported(): boolean;
+
+  /**
+   * Add an array of `Track`s to the end of the playlist.
+   */
+  public appendTracks(tracks: Track[]): void;
+
+  /**
+   * Replace the playlist with an array of `Track`s and begin playing the first track.
+   */
+  public setTracksToPlay(tracks: Track[]): void;
+
+  /**
+   * Play the previous track
+   */
+  public previousTrack(): void;
+
+  /**
+   * Play the next track
+   */
+  public nextTrack(): void;
+
+  /**
+   * Seek forward n seconds in the curent track
+   */
+  public seekForward(seconds: number): void;
+
+  /**
+   * Seek backward n seconds in the curent track
+   */
+  public seekBackward(seconds: number): void;
+
+  /**
+   * Seek to a given time within the current track
+   */
+  public seekToTime(seconds: number): void;
+
+  /**
+   * Pause the current tack
+   */
+  public pause(): void;
+
+  /**
+   * Play the current tack
+   */
+  public play(): void;
+
+  /**
+   * Stop the currently playing audio. Equivilant to pressing the "stop" button
+   */
+  public stop(): void;
+
+  /**
+   * Webamp will wait until it has fetched the skin and fully parsed it and then render itself.
+   *
+   * Webamp is rendered into a new DOM node at the end of the <body> tag with the id `#webamp`.
+   *
+   * If a domNode is passed, Webamp will place itself in the center of that DOM node.
+   *
+   * @returns A promise is returned which will resolve after the render is complete.
+   */
+  public renderWhenReady(domNode: HTMLElement): Promise<void>;
+
+  /**
+   * A callback which will be called when a new track starts loading.
+   *
+   * This can happen on startup when the first track starts buffering, or when a subsequent track starts playing.
+   * The callback will be called with an object `({url: 'https://example.com/track.mp3'})` containing the URL of the track.
+   * Note: If the user drags in a track, the URL may be an ObjectURL.
+   *
+   * @returns An "unsubscribe" function. Useful if at some point in the future you want to stop listening to these events.
+   */
+  public onTrackDidChange(
+    cb: (trackInfo: LoadedURLTrack | null) => void
+  ): () => void;
+
+  /**
+   * Get the current "playing" status.
+   */
+  public getMediaStatus(): "PLAYING" | "STOPPED" | "PAUSED";
+
+  /**
+   * A callback which will be called when Webamp is _about to_ close. Returns an
+   * "unsubscribe" function. The callback will be passed a `cancel` function
+   * which you can use to conditionally prevent Webamp from being closed.
+   *
+   * @returns An "unsubscribe" function. Useful if at some point in the future you want to stop listening to these events.
+   */
+  public onWillClose(cb: (cancel: () => void) => void): () => void;
+
+  /**
+   * A callback which will be called when Webamp is closed.
+   *
+   * @returns An "unsubscribe" function. Useful if at some point in the future you want to stop listening to these events.
+   */
+  public onClose(cb: () => void): () => void;
+
+  /**
+   * Equivalent to selection "Close" from Webamp's options menu. Once closed,
+   * you can open it again with `.reopen()`.
+   */
+  public close(): void;
+
+  /**
+   * After `.close()`ing this instance, you can reopen it by calling this method.
+   */
+  public reopen(): void;
+
+  /**
+   * A callback which will be called when Webamp is minimized.
+   *
+   * @returns An "unsubscribe" function. Useful if at some point in the future you want to stop listening to these events.
+   */
+  public onMinimize(callback: () => any): () => void;
+
+  public setSkinFromUrl(url: string): void;
+
+  /**
+   * Returns a promise that resolves when the skin is done loading.
+   */
+  public skinIsLoaded(): Promise<void>;
+
+  /**
+   * **Note:** _This method is not fully functional. It is currently impossible to
+   * clean up a Winamp instance. This method makes an effort, but it still leaks
+   * the whole instance. In the future the behavior of this method will improve,
+   * so you might as well call it._
+   *
+   * When you are done with a Webamp instance, call this method and Webamp will
+   * attempt to clean itself up to avoid memory leaks.
+   */
+  public dispose(): void;
+}

package/package.json

@@ -0,0 +1,147 @@
+{
+  "name": "@exezt-/webamp",
+  "version": "1.5.0-0x1",
+  "description": "Winamp 2 implemented in HTML5 and JavaScript",
+  "main": "built/webamp.bundle.js",
+  "files": [
+    "built/webamp.bundle.js",
+    "built/webamp.bundle.min.js",
+    "built/webamp.bundle.min.js.map",
+    "built/webamp.lazy-bundle.js",
+    "built/webamp.lazy-bundle.min.js",
+    "built/webamp.lazy-bundle.min.js.map",
+    "index.d.ts"
+  ],
+  "scripts": {
+    "pe": "npm i --legacy-peer-deps",
+    "lint-fix": "eslint . --ext ts,tsx,js --fix",
+    "lint": "eslint . --ext ts,tsx,js",
+    "type-check": "tsc",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider webpack --config=demo/config/webpack.prod.js",
+    "build-library": "NODE_OPTIONS=--openssl-legacy-provider webpack --config=config/webpack.library.js",
+    "serve": "http-server ./demo/built",
+    "start": "webpack-dev-server --open --config=demo/config/webpack.dev.js",
+    "stats": "webpack --config=demo/config/webpack.prod.js --json > stats.json",
+    "stats-library": "webpack --config=config/webpack.library.js --json > stats.json",
+    "test": "jest --config=config/jest.unit.js",
+    "tdd": "jest --config=config/jest.unit.js --watch",
+    "format": "prettier --write \"**/*.{js,ts,tsx,d.ts,css}\"",
+    "integration-tests": "jest --config=config/jest.integration.js --runInBand",
+    "build-skin": "rm assets/skins/base-2.91.wsz && cd assets/skins/base-2.91 && zip -x .* -x 'Skining Updates.txt' -r ../base-2.91.wsz .",
+    "compile-skin": "node scripts/compileSkin.js > css/base-skin.css",
+    "skin-info": "unzip -vl assets/skins/base-2.91.wsz",
+    "build-presets": "node scripts/parsePresetFiles.js > presets/builtin.json"
+  },
+  "keywords": [
+    "Winamp",
+    "HTML5",
+    "audio",
+    "web-audio-api"
+  ],
+  "author": "Jordan Eldredge <jordan@jordaneldredge.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.7.2",
+    "@babel/node": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/polyfill": "^7.7.0",
+    "@babel/preset-env": "^7.7.1",
+    "@babel/preset-react": "^7.7.0",
+    "@babel/preset-typescript": "^7.7.2",
+    "@babel/runtime": "^7.7.2",
+    "@sentry/browser": "5.9.1",
+    "@types/classnames": "^2.2.6",
+    "@types/css-font-loading-module": "^0.0.2",
+    "@types/fscreen": "^1.0.1",
+    "@types/invariant": "^2.2.29",
+    "@types/jest": "^23.3.2",
+    "@types/jszip": "^3.1.5",
+    "@types/lodash": "^4.14.116",
+    "@types/lodash-es": "^4.17.1",
+    "@types/node": "^14.0.1",
+    "@types/react": "^16.8.13",
+    "@types/react-dom": "^16.8.4",
+    "@types/react-redux": "^7.1.1",
+    "@types/webaudioapi": "^0.0.27",
+    "@typescript-eslint/eslint-plugin": "^2.6.1",
+    "@typescript-eslint/parser": "^2.7.0",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "^9.0.0-beta.3",
+    "babel-jest": "^23.4.2",
+    "babel-loader": "^8.0.4",
+    "caniuse-lite": "^1.0.30001154",
+    "canvas-mock": "0.0.0",
+    "copy-webpack-plugin": "^4.6.0",
+    "css-loader": "^1.0.1",
+    "cssnano": "^4.1.10",
+    "data-uri-to-buffer": "^2.0.0",
+    "eslint": "^6.5.1",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react-hooks": "^2.1.2",
+    "file-loader": "^2.0.0",
+    "git-revision-webpack-plugin": "^3.0.3",
+    "glob": "^7.1.4",
+    "html-webpack-inline-svg-plugin": "^2.3.0",
+    "html-webpack-plugin": "^4.5.0",
+    "http-server": "^0.11.1",
+    "imagemin": "^6.1.0",
+    "imagemin-optipng": "^6.0.0",
+    "jest": "^24.9.0",
+    "jest-image-snapshot": "^2.12.0",
+    "jest-puppeteer": "^4.4.0",
+    "postcss": "^8.2.10",
+    "postcss-loader": "^3.0.0",
+    "prettier": "^2.3.0",
+    "puppeteer": "^1.15.0",
+    "react-test-renderer": "^17.0.1",
+    "redux-devtools-extension": "^2.13.2",
+    "redux-sentry-middleware": "^0.1.3",
+    "redux-thunk": "^2.3.0",
+    "style-loader": "^0.23.1",
+    "terser-webpack-plugin": "^1.4.3",
+    "typescript": "^3.7.2",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.41.2",
+    "webpack-bundle-analyzer": "^4.3.0",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.8.2",
+    "webpack-merge": "^4.1.2"
+  },
+  "jest": {
+    "globalSetup": "jest-environment-puppeteer/setup",
+    "globalTeardown": "jest-environment-puppeteer/teardown",
+    "projects": [
+      "config/jest.*.js"
+    ]
+  },
+  "prettier": {
+    "trailingComma": "es5"
+  },
+  "dependencies": {
+    "ani-cursor": "^0.0.4",
+    "butterchurn": "^3.0.0-beta.3",
+    "butterchurn-presets": "3.0.0-beta.4",
+    "classnames": "^2.2.5",
+    "fscreen": "^1.0.2",
+    "invariant": "^2.2.3",
+    "jszip": "^3.1.3",
+    "lodash": "^4.17.21",
+    "milkdrop-preset-converter-aws": "^0.1.6",
+    "music-metadata-browser": "^0.6.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
+    "redux": "^4.0.5",
+    "reselect": "^3.0.1",
+    "tinyqueue": "^1.2.3",
+    "winamp-eqf": "^1.0.0"
+  }
+}