Switch dependency from music-metadata-browser to music-metadata

Borewit · Jul 9, 2024 · b7f7979 · b7f7979
1 parent e48bda2
commit b7f7979
Show file tree

Hide file tree

Showing 14 changed files with 4,786 additions and 653 deletions.
diff --git a/.github/workflows/nodejs-ci.yml b/.github/workflows/nodejs-ci.yml
@@ -9,12 +9,15 @@ jobs:
     steps:
 
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Prepare Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 22.x
+
+      - name: Install Angular client
+        run: yarn install -g @angular/cli
 
       - name: Install dependencies
         run: yarn install

diff --git a/README.md b/README.md
@@ -5,18 +5,17 @@
 
 # Audio Tag Analyzer
 
-Project demonstrating [music-metadata-browser](https://github.com/Borewit/music-metadata-browser), the browser version of [music-metadata](https://github.com/Borewit/music-metadata).
-Drag and drop any audio file and displays a list of metadata found.
+Project demonstrating [music-metadata](https://github.com/Borewit/music-metadata) running in a browser.
 
 ## Live version
 
-### [:rocket: Show me](https://audio-tag-analyzer.netlify.com/)
+### [:rocket: Show me](https://audio-tag-analyzer.netlify.app/)
 
 ## Licence
 
 (The MIT License)
 
-Copyright (c) 2022 Borewit
+Copyright (c) 2024 Borewit
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

diff --git a/angular.json b/angular.json
@@ -24,8 +24,9 @@
               "src/browserconfig.xml"
             ],
             "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "src/styles.css"
+              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "./node_modules/filepond/dist/filepond.min.css",
+              "./src/styles.css"
             ],
             "scripts": [],
             "vendorChunk": true,
@@ -55,7 +56,11 @@
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,
-              "buildOptimizer": true
+              "buildOptimizer": true,
+              "outputPath": "",
+              "index":,
+              "main": "",
+              "tsConfig": ""
             }
           },
           "defaultConfiguration": ""

diff --git a/package.json b/package.json
@@ -20,32 +20,30 @@
     "@angular/platform-browser-dynamic": "^18.0.6",
     "@angular/platform-server": "^18.0.6",
     "@angular/router": "^18.0.6",
-    "angular-pipes": "^10.0.0",
     "bootstrap": "4.6.2",
-    "buffer": "^6.0.3",
     "core-js": "^3.24.0",
-    "debug": "^4.3.2",
-    "drag-drop": "^7.2.0",
-    "jquery": "1.9.1 - 3",
-    "music-metadata-browser": "^2.5.5",
+    "filepond": "^4.31.1",
+    "music-metadata": "^8.3.0",
+    "ngx-filepond": "^7.0.3",
     "popper.js": "^1.16.1",
     "process": "^0.11.10",
     "rxjs": "^6.6.7",
     "tslib": "^2.3.1",
-    "zone.js": "~0.14.7"
+    "uint8array-extras": "^1.3.0",
+    "zone.js": "^0.14.7"
   },
   "devDependencies": {
-    "@angular-eslint/builder": "14.0.2",
-    "@angular-eslint/eslint-plugin": "14.0.2",
-    "@angular-eslint/eslint-plugin-template": "14.0.2",
-    "@angular-eslint/schematics": "14.0.2",
-    "@angular-eslint/template-parser": "14.0.2",
+    "@angular-devkit/build-angular": "^18.0.7",
+    "@angular-eslint/builder": "^18.1.0",
+    "@angular-eslint/eslint-plugin": "^18.1.0",
+    "@angular-eslint/eslint-plugin-template": "^18.1.0",
+    "@angular-eslint/schematics": "^18.1.0",
+    "@angular-eslint/template-parser": "^18.1.0",
     "@angular/compiler-cli": "^18.0.6",
     "@angular/language-service": "^18.0.6",
     "@tokenizer/token": "^0.3.0",
     "@types/jasmine": "~4.0.3",
     "@types/jasminewd2": "~2.0.10",
-    "@types/node": "^18.6.1",
     "@typescript-eslint/eslint-plugin": "5.29.0",
     "@typescript-eslint/parser": "5.29.0",
     "eslint": "^8.18.0",
@@ -65,4 +63,4 @@
     "**/util": "^0.12.0",
     "**/buffer": "^5.4.3"
   }
-}
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -13,83 +13,79 @@ <h1>Audio Tag Analyzer</h1>
   </div>
 
   <footer class="blockquote-footer">
-    <a href="https://github.com/Borewit/audio-tag-analyzer">Audio-Tag-Analyzer</a> v{{version.app}} |
-    <a href="https://github.com/Borewit/music-metadata-browser">music-metadata-browser</a> v{{version.mmb}} |
-    <a href="https://github.com/Borewit/music-metadata">music-metadata</a> v{{version.mm}}
+    <a href="https://github.com/Borewit/audio-tag-analyzer">Audio-Tag-Analyzer</a> v{{ version.app }} |
+    <a href="https://github.com/Borewit/music-metadata-browser">music-metadata-browser</a> v{{ version.mmb }} |
+    <a href="https://github.com/Borewit/music-metadata">music-metadata</a> v{{ version.mm }}
   </footer>
 
   <div class="center">
 
-    <div class="p-2">
-      <div class="custom-file">
-        <input type="file" class="custom-file-input" id="inputGroupFile01"
-               aria-describedby="inputGroupFileAddon01" (change)="handleFileSelected($event)">
-        <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
-      </div>
-    </div>
-    <div class="p-2">
-    <app-drag-and-drop-box class="p-2" (emitDropFiles)="handleFilesDropped($event)"
-                           (emitEnterFiles)="handleFilesEnter($event)"
-                           (emitLeaveFiles)="handleFilesLeave($event)"
-                           (emitDropText)="handleTextDropped($event)">
-      <h3>Drop your audio files here</h3>
-      <hr class="my-4">
-      <p>Dropped files will stay within your local browser. They will not be uploaded anywhere else.</p>
-    </app-drag-and-drop-box>
+
+    <div class="col-md-12">
+      <file-pond #myPond
+                 [options]="pondOptions"
+                 [files]="pondFiles"
+                 (oninit)="pondHandleInit()"
+                 (onaddfile)="pondHandleAddFile($event)"
+                 (onactivatefile)="pondHandleActivateFile($event)"
+                 (onremovefile)="pondHandleRemoveFile($event)">
+      </file-pond>
     </div>
 
-    <div *ngFor="let upload of results">
+    <div *ngIf="result">
 
       <h2>File information</h2>
       <table class="table">
         <tr>
           <td class="text-right">Name</td>
-          <td>{{ upload.file.name }}</td>
+          <td>{{ result.file.name }}</td>
         </tr>
         <tr>
           <td class="text-right">File type</td>
-          <td>{{ upload.file.type }}</td>
+          <td>{{ result.file.type }}</td>
         </tr>
         <tr>
           <td class="text-right">Size</td>
-          <td>{{ upload.file.size | bytes}}</td>
+          <td>{{ result.file.size }}</td>
         </tr>
         <tr>
           <td class="text-right">Last modified</td>
-          <td>{{ upload.file.lastModifiedDate }}</td>
+          <td>{{ result.file.lastModifiedDate }}</td>
         </tr>
       </table>
 
-      <div *ngIf="!upload.metadata && !upload.parseError" class="alert alert-info">
+      <div *ngIf="!result.metadata && !result.parseError" class="alert alert-info">
         Parsing...
       </div>
 
-      <div *ngIf="upload.metadata">
+      <div *ngIf="result.metadata">
         <h2>Quality information</h2>
-        <div *ngIf="upload.metadata && upload.metadata.quality.warnings.length > 0">
+        <div *ngIf="result.metadata && result.metadata.quality.warnings.length > 0">
           <h2>Parser warnings</h2>
-          <div *ngFor="let warning of upload.metadata.quality.warnings" class="alert alert-warning">{{warning.message}}</div>
+          <div *ngFor="let warning of result.metadata.quality.warnings"
+               class="alert alert-warning">{{ warning.message }}
+          </div>
         </div>
-        <div *ngIf="upload.metadata && upload.metadata.quality.warnings.length === 0">
+        <div *ngIf="result.metadata && result.metadata.quality.warnings.length === 0">
           <div class="alert alert-success">No issues found</div>
         </div>
       </div>
 
-      <div *ngIf="upload.parseError" class="alert alert-danger">
-        <p>Failed to parse <i>{{ upload.file.name }}</i>.
-        <p>Error message: {{ upload.parseError }}.</p>
+      <div *ngIf="result.parseError" class="alert alert-danger">
+        <p>Failed to parse <i>{{ result.file.name }}</i>.
+        <p>Error message: {{ result.parseError }}.</p>
         <p>If you believe this is a bug, please <a target="_blank"
                                                    href="https://github.com/Borewit/audio-tag-analyzer/issues">open an
           issue here</a>.<br/>
           Don't forget to attach the audio file which could not be parsed.
         </p>
       </div>
 
-      <div *ngIf="upload.metadata">
-        <div *ngIf="upload.metadata.common.picture">
+      <div *ngIf="result.metadata">
+        <div *ngIf="result.metadata.common.picture">
           <h3>Embedded cover art</h3>
-          <div *ngFor="let picture of upload.metadata.common.picture" class="media col-md-8">
-            <img src="data:{{ picture.format }};base64,{{picture.data.toString('base64')}}" class="img-thumbnail">
+          <div *ngFor="let picture of result.metadata.common.picture" class="media col-md-8">
+            <img alt="embedded cover" src="data:{{ picture.format }};base64,{{base64Encode(picture.data)}}" class="img-thumbnail">
             <div class="media-body">
               <table class="table">
                 <tr>
@@ -120,16 +116,17 @@ <h2>{{ tagList.title }}</h2>
               <th>Property name</th>
             </tr>
             <tr *ngFor="let tag of tagList.tags">
-              <td class="text-right"><a *ngIf="tag.label.ref" target="_blank" [href]="tag.label.ref">{{tag.label.text}}</a><span
-                *ngIf="!tag.label.ref">{{tag.label.text}}</span></td>
+              <td class="text-right"><a *ngIf="tag.label.ref" target="_blank"
+                                        [href]="tag.label.ref">{{ tag.label.text }}</a><span
+                *ngIf="!tag.label.ref">{{ tag.label.text }}</span></td>
               <td>
                 <span *ngFor="let v of tag.value; let first = first;">
                   <span *ngIf="!first">, </span>
-                  <a *ngIf="v.ref" target="_blank" [href]="v.ref">{{v.text}}</a>
-                  <span *ngIf="!v.ref">{{v.text}}</span>
+                  <a *ngIf="v.ref" target="_blank" [href]="v.ref">{{ v.text }}</a>
+                  <span *ngIf="!v.ref">{{ v.text }}</span>
                 </span>
               </td>
-              <td>{{tag.key}}</td>
+              <td>{{ tag.key }}</td>
             </tr>
           </table>
 
@@ -147,15 +144,14 @@ <h3>{{ type.type }}</h3>
               <th>Value</th>
             </tr>
             <tr *ngFor="let tag of type.tags">
-              <td class="text-right">{{tag.id }}</td>
+              <td class="text-right">{{ tag.id }}</td>
               <td>{{ tag.value }}</td>
             </tr>
           </table>
 
         </div>
       </div>
     </div>
-
   </div>
 
 </div>