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/@fuse/scss/partials/_page-layouts.scss

@@ -2,20 +2,15 @@
 // @ Theming
 // -----------------------------------------------------------------------------------------------------
 @mixin page-layouts-theme($theme) {
-
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
   .page-layout {
-
     // Carded layout
     &.carded {
-
       // Fullwidth
       &.fullwidth {
-
         > .center {
-
           > .content-card {
             background: map-get($background, card);
             border-radius: 8px 8px 0 0;
@@ -30,9 +25,7 @@
       // Left / Right sidebar
       &.left-sidebar,
       &.right-sidebar {
-
         > .center {
-
           > .content-card {
             background: map-get($background, card);
             border-radius: 8px 8px 0 0;
@@ -47,13 +40,10 @@
 
     // Simple layout
     &.simple {
-
       // Left / Right sidebar
       &.left-sidebar,
       &.right-sidebar {
-
         > .center {
-
           > .content {
             background: map-get($background, card);
           }
@@ -61,11 +51,8 @@
 
         // Inner sidebar
         &.inner-sidebar {
-
           > .content {
-
             > .center {
-
               > .content {
                 background: map-get($background, card);
               }
@@ -85,7 +72,8 @@ $carded-toolbar-height: 64px !default;
 $header-height: 120px !default;
 
 // Calculate toolbar-less carded header height
-$carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height;
+$carded-header-height-without-toolbar: $carded-header-height -
+  $carded-toolbar-height;
 
 .page-layout {
   position: relative;
@@ -111,7 +99,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
 
     // Fullwidth
     &.fullwidth {
-
       // Center
       > .center {
         display: flex;
@@ -157,7 +144,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
 
       // Tabbed
       &.tabbed {
-
         > .center {
           width: 100%;
           min-width: 0;
@@ -167,7 +153,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
           }
 
           > .content-card {
-
             > .content {
               display: flex;
 
@@ -176,7 +161,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                 width: 100%;
 
                 .mat-tab-header {
-
                   .mat-tab-label {
                     height: 64px;
                   }
@@ -221,19 +205,12 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
 
         // Tabbed
         &.tabbed {
-
           > .center {
-
             > .content-card {
-
               > .content {
-
                 > .mat-tab-group {
-
                   .mat-tab-body {
-
                     .mat-tab-body-content {
-
                       .tab-content {
                         overflow: auto;
                         -webkit-overflow-scrolling: touch;
@@ -274,14 +251,12 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
           }
 
           &.left-positioned {
-
             + .center {
               margin-left: 0;
             }
           }
 
           &.right-positioned {
-
             + .center {
               margin-right: 0;
             }
@@ -351,7 +326,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
 
       // Tabbed
       &.tabbed {
-
         > .center {
           width: calc(100% - 32px);
           min-width: 0;
@@ -365,7 +339,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
           }
 
           > .content-card {
-
             > .content {
               display: flex;
 
@@ -373,7 +346,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
                 overflow: hidden;
 
                 .mat-tab-header {
-
                   .mat-tab-label {
                     height: 64px;
                   }
@@ -403,7 +375,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
         flex: 1 1 auto;
 
         > .sidebar {
-
           .content {
             overflow: auto;
             -webkit-overflow-scrolling: touch;
@@ -426,19 +397,12 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
 
         // Tabbed
         &.tabbed {
-
           > .center {
-
             > .content-card {
-
               > .content {
-
                 > .mat-tab-group {
-
                   .mat-tab-body {
-
                     .mat-tab-body-content {
-
                       .tab-content {
                         overflow: auto;
                         -webkit-overflow-scrolling: touch;
@@ -455,7 +419,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
 
     // Right sidebar specific
     &.right-sidebar {
-
       > .sidebar {
         order: 2;
       }
@@ -476,7 +439,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
 
     // Fullwidth
     &.fullwidth {
-
       > .content {
         flex: 1 1 auto;
         min-width: 0;
@@ -485,7 +447,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
 
     &.fullwidth,
     &.inner-sidebar {
-
       > .header {
         height: $header-height;
         min-height: $header-height;
@@ -515,14 +476,12 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
           }
 
           &.left-positioned {
-
             + .center {
               margin-left: 0;
             }
           }
 
           &.right-positioned {
-
             + .center {
               margin-right: 0;
             }
@@ -561,7 +520,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
         flex: 1 1 auto;
 
         > .sidebar {
-
           .content {
             overflow: auto;
             -webkit-overflow-scrolling: touch;
@@ -586,7 +544,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
           min-height: 0;
 
           > .sidebar {
-
             &.locked-open {
               background: none;
               box-shadow: none;
@@ -614,7 +571,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
 
     // Right sidebar specific
     &.right-sidebar {
-
       > .sidebar {
         order: 2;
       }
@@ -625,9 +581,7 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
 
       // Inner sidebar
       &.inner-sidebar {
-
         > .content {
-
           > .sidebar {
             order: 2;
           }
@@ -650,9 +604,7 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
       }
 
       > .content {
-
         > .mat-tab-group {
-
           .mat-tab-labels {
             padding: 0 24px;
           }
@@ -668,12 +620,9 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
   }
 
   @include media-breakpoint('xs') {
-
     // Smaller margins
     &.carded {
-
       &.fullwidth {
-
         > .center {
           padding: 0 16px;
         }
@@ -681,7 +630,6 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
 
       &.left-sidebar,
       &.right-sidebar {
-
         > .center {
           margin: 0 16px;
         }
@@ -690,5 +638,3 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
     // End - Smaller margins
   }
 }
-
-

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
+            <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,22 +206,22 @@
                   <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>
+                </mat-form-field> -->
             </div>
           </mat-tab>
 
@@ -197,7 +260,7 @@
             <div class="tab-content p-24" fusePerfectScrollbar></div>
           </mat-tab>
         </mat-tab-group>
-        </form>
+        <!-- </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 = [];