file drag & drop is added

package-lock.json

@@ -5710,6 +5710,14 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
+    "id3-parser": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/id3-parser/-/id3-parser-2.0.0.tgz",
+      "integrity": "sha512-bkGeAtUX70rC9sq2mjzIrkmPZjUsGuqCjZKGFJnugKXqYVDuJgfWDa8MehUZaCqlkoCaXkYevYeaRxkHOJsv9w==",
+      "requires": {
+        "promise-a-plus": "^0.7.0"
+      }
+    },
     "ieee754": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
@@ -8198,6 +8206,14 @@
       "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-2.2.0.tgz",
       "integrity": "sha512-2kaC1itlEMxiMAPJ320hOpcwU9vhvjbKQCZ1Go6bGhYjJtqG7eYvhNP7mM9IhFz1/afG2tBryJPySWmFUGhRpA=="
     },
+    "ngx-file-drop": {
+      "version": "8.0.7",
+      "resolved": "https://registry.npmjs.org/ngx-file-drop/-/ngx-file-drop-8.0.7.tgz",
+      "integrity": "sha512-o+PrT+H1TM0GdobMdfwlBD6hMM8nkhiLe9yhPxjBoHhnLPxxQ4uaKF9lv9TxSNzYLbEW/S2qTifj1CrsQEy0gg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -9110,6 +9126,11 @@
         "asap": "~2.0.3"
       }
     },
+    "promise-a-plus": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/promise-a-plus/-/promise-a-plus-0.7.0.tgz",
+      "integrity": "sha512-cWbWdSKaHiNGWP3aUSAq5nkZFYL1A6glTMgGc/LpFZ6DEJ5FRXzu7T2k4mmi+cD/R5EJ9DHHzWezXnO1IMPb5w=="
+    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",

package.json

@@ -37,10 +37,12 @@
     "chart.js": "^2.8.0",
     "d3": "^5.9.7",
     "hammerjs": "^2.0.8",
+    "id3-parser": "^2.0.0",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "ng2-charts": "^2.3.0",
     "ngx-cookie-service": "^2.2.0",
+    "ngx-file-drop": "^8.0.7",
     "perfect-scrollbar": "^1.4.0",
     "prismjs": "^1.17.1",
     "rxjs": "^6.5.2",

src/app/pages/medias/media/component/detail.component.html

@@ -21,10 +21,13 @@
           <mat-icon>arrow_back</mat-icon>
         </button>
 
-        <!-- <div class="product-image mr-8 mr-sm-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
-                    <img *ngIf="product.images[0]" [src]="product.images[0].url">
-                    <img *ngIf="!product.images[0]" [src]="'assets/images/ecommerce/product-image-placeholder.png'">
-                </div> -->
+        <div
+          class="product-image mr-8 mr-sm-16"
+          [@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
+        >
+          <!-- <img *ngIf="product.images[0]" [src]="product.images[0].url">
+                    <img *ngIf="!product.images[0]" [src]="'assets/images/ecommerce/product-image-placeholder.png'"> -->
+        </div>
 
         <div
           fxLayout="column"
@@ -68,20 +71,56 @@
     <div class="content-card">
       <!-- CONTENT -->
       <div class="content">
-        <form
+        <!-- <form
           name="mediaForm"
           [formGroup]="mediaForm"
           class="media w-100-p"
           fxLayout="column"
           fxFlex
-        >
-          <mat-tab-group>
-            <mat-tab label="Basic Info">
-              <div class="tab-content p-24" fusePerfectScrollbar>
-                <mat-form-field
+        > -->
+        <mat-tab-group>
+          <mat-tab label="Basic Info">
+            <div
+              class="tab-content p-24"
+              fusePerfectScrollbar
+              fxLayout="column"
+            >
+              <div
+                class="border border-radius-8"
+                fxFlex="100"
+                style="margin-bottom: 21.5px;"
+              >
+                <div
+                  class="p-16"
+                  fxLayout="row"
+                  fxLayoutAlign="space-between center"
+                >
+                  <div class="pr-16">
+                    <div class="h1">{{ id3Tag?.title }}</div>
+                    <div class="h4 secondary-text">{{ id3Tag?.subtitle }}</div>
+                  </div>
+
+                  <div
+                    [hidden]="!id3Tag"
+                    class="w-100 h-100 border border-radius-8"
+                  >
+                    <img #testImage src="" />
+                  </div>
+
+                  <ngx-file-drop
+                    *ngIf="!id3Tag"
+                    dropZoneClassName="w-100 h-100 uploadfilecontainer"
+                    (onFileDrop)="onFileDropped($event)"
+                    multiple="false"
+                  >
+                  </ngx-file-drop>
+                </div>
+              </div>
+
+              <!-- <mat-form-field
                   appearance="outline"
                   floatLabel="always"
-                  class="w-100-p"
+                  fxFlex="100"
                 >
                   <mat-label>Media Name</mat-label>
                   <input
@@ -91,9 +130,34 @@
                     formControlName="name"
                     required
                   />
-                </mat-form-field>
+                </mat-form-field> -->
+              <!-- <div
+                    floatLabel="always"
+                    fxFlex="10"
+                    style="text-align: right"
+                  >
+                    <input
+                      hidden
+                      type="file"
+                      #fileInput
+                      (change)="onMediaAdded($event)"
+                    />
+                    <button
+                      mat-fab
+                      color="warn"
+                      class="add-file-button"
+                      (click)="$event.preventDefault(); fileInput.click()"
+                      aria-label="Add file"
+                      [@animate]="{
+                        value: '*',
+                        params: { delay: '300ms', scale: '0.2' }
+                      }"
+                    >
+                      <mat-icon>add</mat-icon>
+                    </button>
+                  </div> -->
 
-                <mat-form-field
+              <!-- <mat-form-field
                   appearance="outline"
                   floatLabel="always"
                   class="w-100-p"
@@ -105,10 +169,9 @@
                     name="description"
                     formControlName="description"
                     rows="5"
-                  >
-                  </textarea>
-                </mat-form-field>
-
+                  ></textarea>
+                </mat-form-field> -->
+              <!--
                 <mat-form-field
                   appearance="outline"
                   floatLabel="always"
@@ -121,21 +184,21 @@
                     name="categories"
                     formControlName="categories"
                   >
-                    <!-- <mat-chip *ngFor="let category of product.categories"
+                    <mat-chip *ngFor="let category of product.categories"
                                                   [removable]="true" (removed)="product.removeCategory(category)">
                                             {{category}}
                                             <mat-icon matChipRemove>cancel</mat-icon>
-                                        </mat-chip> -->
+                                        </mat-chip>
 
                     <input
                       [matChipInputFor]="categoryList"
                       [matChipInputAddOnBlur]="true"
-                      (matChipInputTokenEnd)="product.addCategory($event)"
+                      (matChipInputTokenEnd)="media.addCategory($event)"
                     />
                   </mat-chip-list>
-                </mat-form-field>
+                </mat-form-field> -->
 
-                <mat-form-field
+              <!-- <mat-form-field
                   appearance="outline"
                   floatLabel="always"
                   class="w-100-p"
@@ -143,28 +206,28 @@
                   <mat-label>Tags</mat-label>
 
                   <mat-chip-list #tagList name="tags" formControlName="tags">
-                    <!-- <mat-chip
+                    <mat-chip
                       *ngFor="let tag of product.tags"
                       [removable]="true"
                       (removed)="product.removeTag(tag)"
                     >
                       {{ tag }}
                       <mat-icon matChipRemove>cancel</mat-icon>
-                    </mat-chip> -->
+                    </mat-chip>
 
                     <input
                       [matChipInputFor]="tagList"
                       [matChipInputAddOnBlur]="true"
-                      (matChipInputTokenEnd)="product.addTag($event)"
+                      (matChipInputTokenEnd)="media.addTag($event)"
                     />
                   </mat-chip-list>
-                </mat-form-field>
-              </div>
-            </mat-tab>
+                </mat-form-field> -->
+            </div>
+          </mat-tab>
 
-            <mat-tab label="Product Images">
-              <div class="tab-content p-24" fusePerfectScrollbar>
-                <!-- <div fxLayout="row wrap" fxLayoutAlign="start start">
+          <mat-tab label="Product Images">
+            <div class="tab-content p-24" fusePerfectScrollbar>
+              <!-- <div fxLayout="row wrap" fxLayoutAlign="start start">
                   <div
                     *ngIf="product.images.length === 0"
                     class="product-image"
@@ -190,14 +253,14 @@
                     </div>
                   </div>
                 </div> -->
-              </div>
-            </mat-tab>
+            </div>
+          </mat-tab>
 
-            <mat-tab label="Pricing">
-              <div class="tab-content p-24" fusePerfectScrollbar></div>
-            </mat-tab>
-          </mat-tab-group>
-        </form>
+          <mat-tab label="Pricing">
+            <div class="tab-content p-24" fusePerfectScrollbar></div>
+          </mat-tab>
+        </mat-tab-group>
+        <!-- </form> -->
       </div>
       <!-- / CONTENT -->
     </div>

src/app/pages/medias/media/component/detail.component.scss

@@ -60,3 +60,21 @@
     }
   }
 }
+
+.uploadfilecontainer {
+  background-image: url('/assets/images/file-manager/cloud-2044823_960_720.png');
+  background-repeat: no-repeat;
+  background-size: 80px;
+  background-position: center;
+  // height: 200px;
+  // width: 80%;
+  // margin: 20px auto;
+  border: 2px dashed #1c8adb;
+  border-radius: 10px;
+}
+
+.uploadfilecontainer:hover {
+  cursor: pointer;
+  background-color: #9ecbec !important;
+  opacity: 0.8;
+}

src/app/pages/medias/media/component/detail.component.ts

@@ -1,4 +1,11 @@
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import {
+  Component,
+  OnDestroy,
+  OnInit,
+  ViewEncapsulation,
+  ViewChild,
+  ElementRef
+} from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Location } from '@angular/common';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -8,6 +15,11 @@ import { takeUntil } from 'rxjs/operators';
 import { fuseAnimations } from 'src/@fuse/animations';
 import { FuseUtils } from 'src/@fuse/utils';
 
+import universalParse from 'id3-parser/lib/universal';
+import { IID3Tag } from 'id3-parser/lib/interface';
+
+import { NgxFileDropEntry, FileSystemFileEntry } from 'ngx-file-drop';
+
 @Component({
   selector: 'app-pages-medias-media-detail',
   templateUrl: './detail.component.html',
@@ -19,6 +31,10 @@ export class DetailComponent implements OnInit, OnDestroy {
   media: any;
   pageType: string;
   mediaForm: FormGroup;
+  id3Tag: IID3Tag | null;
+
+  @ViewChild('testImage', { static: true })
+  testImage: ElementRef;
 
   // Private
   private _unsubscribeAll: Subject<any>;
@@ -58,4 +74,31 @@ export class DetailComponent implements OnInit, OnDestroy {
   // -----------------------------------------------------------------------------------------------------
   // @ Public methods
   // -----------------------------------------------------------------------------------------------------
+  onMediaAdded(ev: any): void {
+    universalParse(ev.target.files[0]).then(tags => {
+      this.id3Tag = tags;
+      const b64encoded =
+        `data:${tags.image.mime};base64,` +
+        btoa(String.fromCharCode.apply(null, tags.image.data));
+      console.log(b64encoded);
+      this.testImage.nativeElement.src = b64encoded;
+    });
+  }
+
+  onFileDropped(files: NgxFileDropEntry[]) {
+    console.log(files[0].fileEntry);
+
+    const fileEntry = files[0].fileEntry as FileSystemFileEntry;
+
+    fileEntry.file((file: File) => {
+      universalParse(file).then(tags => {
+        this.id3Tag = tags;
+        const b64encoded =
+          `data:${tags.image.mime};base64,` +
+          btoa(String.fromCharCode.apply(null, tags.image.data));
+
+        this.testImage.nativeElement.src = b64encoded;
+      });
+    });
+  }
 }

src/app/pages/medias/media/medias-media.module.ts

@@ -15,6 +15,8 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 
+import { NgxFileDropModule } from 'ngx-file-drop';
+
 import { FuseSharedModule } from 'src/@fuse/shared.module';
 import { FuseWidgetModule } from 'src/@fuse/components/widget/widget.module';
 
@@ -39,6 +41,8 @@ import { COMPONENTS } from './component';
     MatTabsModule,
     MatCheckboxModule,
 
+    NgxFileDropModule,
+
     FuseSharedModule,
     FuseWidgetModule,
 

src/modules/audio-player/audio-player.module.ts

@@ -0,0 +1,25 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { COMPONENTS } from './component';
+import { SERVICES } from './service';
+
+@NgModule({
+  imports: [],
+  exports: []
+})
+export class AudioPlayerRootModule {}
+
+@NgModule({
+  declarations: [...COMPONENTS],
+  imports: [CommonModule],
+  exports: []
+})
+export class AudioPlayerModule {
+  public static forRoot(): ModuleWithProviders<AudioPlayerRootModule> {
+    return {
+      ngModule: AudioPlayerRootModule,
+      providers: [SERVICES]
+    };
+  }
+}

src/modules/audio-player/component/index.ts

@@ -0,0 +1 @@
+export const COMPONENTS = [];

src/modules/audio-player/service/index.ts

@@ -0,0 +1 @@
+export const SERVICES = [];