captbaritone#673 Integration with limited to jsmediatags function rep…

…lacement.

config/webpack.common.js

@@ -7,11 +7,6 @@ module.exports = {
   resolve: {
     extensions: [".js", ".ts", ".tsx"]
   },
-  node: {
-    // Consider suggesting jsmediatags use: https://github.com/feross/is-buffer
-    // Cuts 22k
-    Buffer: false
-  },
   module: {
     rules: [
       {

js/actionCreators/files.ts

@@ -291,20 +291,20 @@ function queueFetchingMediaTags(id: number): Dispatchable {
 }
 
 export function fetchMediaTags(file: string | Blob, id: number): Dispatchable {
-  return async (dispatch, getState, { requireJSMediaTags }) => {
+  return async (dispatch, getState, { requireMusicMetadata }) => {
     dispatch({ type: MEDIA_TAG_REQUEST_INITIALIZED, id });
+
     try {
-      const data = await genMediaTags(file, await requireJSMediaTags());
+      const metadata = await genMediaTags(file, await requireMusicMetadata());
       // There's more data here, but we don't have a use for it yet:
-      // https://github.com/aadsm/jsmediatags#shortcuts
-      const { artist, title, album, picture } = data.tags;
+      const { artist, title, album, picture } = metadata.common;
       let albumArtUrl = null;
-      if (picture) {
-        const byteArray = new Uint8Array(picture.data);
-        const blob = new Blob([byteArray], { type: picture.type });
+      if (picture && picture.length >= 1) {
+        const byteArray = new Uint8Array(picture[0].data);
+        const blob = new Blob([byteArray], { type: picture[0].format });
         albumArtUrl = URL.createObjectURL(blob);
       }
-      dispatch({ type: SET_MEDIA_TAGS, artist, title, album, albumArtUrl, id });
+      dispatch({ type: SET_MEDIA_TAGS, artist: artist ? artist : '', title: title ? title : '', album, albumArtUrl, id });
     } catch (e) {
       dispatch({ type: MEDIA_TAG_REQUEST_FAILED, id });
     }

js/fileUtils.ts

@@ -1,31 +1,23 @@
 import invariant from "invariant";
-
-export interface MediaTags {
-  tags: {
-    artist: string;
-    title: string;
-    album: string;
-    picture: {
-      data: number[];
-      type: string;
-    };
-  };
-}
+import { IAudioMetadata, IOptions } from 'music-metadata-browser';
 
 type JsMediaTagsFile = string | ArrayBuffer | Blob;
 interface JsMediaTagsHandlers {
-  onSuccess: (tags: MediaTags) => void;
+  onSuccess: (tags: IAudioMetadata) => void;
   onError: (error: Error) => void;
 }
 
-interface JsMediaTags {
-  read: (file: JsMediaTagsFile, handlers: JsMediaTagsHandlers) => void;
+interface MusicMetadataBrowserApi {
+
+  parseBlob(blob: Blob, options?: IOptions): Promise<IAudioMetadata>;
+
+  fetchFromUrl(audioTrackUrl: string, options?: IOptions): Promise<IAudioMetadata>
 }
 
 export function genMediaTags(
   file: JsMediaTagsFile,
-  jsmediatags: JsMediaTags
-): Promise<MediaTags> {
+  musicMetadata: MusicMetadataBrowserApi
+): Promise<IAudioMetadata> {
   invariant(
     file != null,
     "Attempted to get the tags of media file without passing a file"
@@ -34,16 +26,17 @@ export function genMediaTags(
   if (typeof file === "string" && !/^[a-z]+:\/\//i.test(file)) {
     file = `${location.protocol}//${location.host}${location.pathname}${file}`;
   }
-  return new Promise((resolve, reject) => {
-    try {
-      jsmediatags.read(file, { onSuccess: resolve, onError: reject });
-    } catch (e) {
-      // Possibly jsmediatags could not find a parser for this file?
-      // Nothing to do.
-      // Consider removing this after https://github.com/aadsm/jsmediatags/issues/83 is resolved.
-      reject(e);
-    }
-  });
+
+  const options = {
+    duration: true,
+      skipPostHeaders: true // avoid unnecessary data to be read
+  };
+
+  if (typeof file === "string") {
+    return musicMetadata.fetchFromUrl(file, options);
+  }
+  // Assume Blob
+  return musicMetadata.parseBlob(file as Blob, options);
 }
 
 export function genMediaDuration(url: string): Promise<number> {

js/index.js

@@ -58,18 +58,18 @@ const requireJSZip = () => {
   });
 };
 
-const requireJSMediaTags = () => {
+const requireMusicMetadata = () => {
   return new Promise((resolve, reject) => {
     require.ensure(
-      ["jsmediatags/dist/jsmediatags"],
+      ["music-metadata-browser/dist/index"],
       require => {
-        resolve(require("jsmediatags/dist/jsmediatags"));
+        resolve(require("music-metadata-browser/dist/index"));
       },
       e => {
-        console.error("Error loading jsmediatags", e);
+        console.error("Error loading music-metadata-browser", e);
         reject(e);
       },
-      "jsmediatags"
+      "music-metadata-browser"
     );
   });
 };
@@ -258,7 +258,7 @@ Raven.context(async () => {
     ],
     enableHotkeys: true,
     requireJSZip,
-    requireJSMediaTags,
+    requireMusicMetadata,
     __extraWindows,
     __enableMediaLibrary: library,
     __initialWindowLayout,

js/types.ts

@@ -503,7 +503,7 @@ export interface AppState {
 
 export interface Extras {
   requireJSZip: () => Promise<never>;
-  requireJSMediaTags: () => Promise<never>;
+  requireMusicMetadata: () => Promise<never>;
 }
 
 export type GetState = () => AppState;

js/webamp.js

@@ -1,13 +1,13 @@
 import JSZip from "jszip";
-import jsmediatags from "jsmediatags";
+import musicMetadataBrowser from "music-metadata-browser";
 import WebampLazy from "./webampLazy";
 
 class Winamp extends WebampLazy {
   constructor(options) {
     super({
       ...options,
       requireJSZip: () => JSZip,
-      requireJSMediaTags: () => jsmediatags
+      requireMusicMetadata: () => musicMetadataBrowser
     });
   }
 }

js/webampLazy.js

@@ -66,7 +66,7 @@ class Winamp {
       enableHotkeys = false,
       zIndex,
       requireJSZip,
-      requireJSMediaTags,
+      requireMusicMetadata,
       __extraWindows
     } = this.options;
 
@@ -78,7 +78,7 @@ class Winamp {
       this._actionEmitter,
       this.options.__customMiddlewares,
       this.options.__initialState,
-      { requireJSZip, requireJSMediaTags }
+      { requireJSZip, requireMusicMetadata }
     );
     this.store.dispatch({
       type: navigator.onLine ? NETWORK_CONNECTED : NETWORK_DISCONNECTED

package.json

@@ -97,7 +97,6 @@
     "jest-mock-random": "^1.0.2",
     "jest-puppeteer": "^3.0.1",
     "jest-runner-eslint": "^0.4.0",
-    "jsmediatags": "^3.8.1",
     "jszip": "^3.1.3",
     "lodash": "^4.17.11",
     "milkdrop-preset-converter-aws": "^0.1.0",
@@ -137,5 +136,8 @@
       "config/jest.*.js"
     ]
   },
-  "prettier": {}
+  "prettier": {},
+  "dependencies": {
+    "music-metadata-browser": "^0.6.1"
+  }
 }