banana-sound-backend/src/app/pages/medias/media/component/detail.component.html

<div id="media" class="page-layout carded fullwidth inner-scroll">
  <!-- TOP BACKGROUND -->
  <div class="top-bg accent"></div>
  <!-- / TOP BACKGROUND -->

  <!-- CENTER -->
  <div class="center">
    <!-- HEADER -->
    <div
      class="header accent"
      fxLayout="row"
      fxLayoutAlign="space-between center"
    >
      <!-- APP TITLE -->
      <div fxLayout="row" fxLayoutAlign="start center">
        <button
          mat-icon-button
          class="mr-0 mr-sm-16"
          [routerLink]="'/media/medias'"
        >
          <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
          fxLayout="column"
          fxLayoutAlign="start start"
          [@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
        >
          <div class="h2" *ngIf="pageType === 'edit'">
            {{ media.name }}
          </div>
          <div class="h2" *ngIf="pageType === 'new'">
            New Media
          </div>
          <div class="subtitle secondary-text">
            <span>Media Detail</span>
          </div>
        </div>
      </div>
      <!-- / APP TITLE -->

      <button
        mat-raised-button
        class="save-media-button"
        [disabled]="mediaForm.invalid"
        *ngIf="pageType === 'new'"
      >
        <span>ADD</span>
      </button>

      <button
        mat-raised-button
        class="save-media-button"
        [disabled]="mediaForm.invalid || mediaForm.pristine"
        *ngIf="pageType === 'edit'"
      >
        <span>SAVE</span>
      </button>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT CARD -->
    <div class="content-card">
      <!-- CONTENT -->
      <div class="content">
        <!-- <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
              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"
                  fxFlex="100"
                >
                  <mat-label>Media Name</mat-label>
                  <input
                    matInput
                    placeholder="Media Name"
                    name="name"
                    formControlName="name"
                    required
                  />
                </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
                  appearance="outline"
                  floatLabel="always"
                  class="w-100-p"
                >
                  <mat-label>Media Description</mat-label>
                  <textarea
                    matInput
                    placeholder="Media Description"
                    name="description"
                    formControlName="description"
                    rows="5"
                  ></textarea>
                </mat-form-field> -->
              <!--
                <mat-form-field
                  appearance="outline"
                  floatLabel="always"
                  class="w-100-p"
                >
                  <mat-label>Categories</mat-label>

                  <mat-chip-list
                    #categoryList
                    name="categories"
                    formControlName="categories"
                  >
                    <mat-chip *ngFor="let category of product.categories"
                                                  [removable]="true" (removed)="product.removeCategory(category)">
                                            {{category}}
                                            <mat-icon matChipRemove>cancel</mat-icon>
                                        </mat-chip>

                    <input
                      [matChipInputFor]="categoryList"
                      [matChipInputAddOnBlur]="true"
                      (matChipInputTokenEnd)="media.addCategory($event)"
                    />
                  </mat-chip-list>
                </mat-form-field> -->

              <!-- <mat-form-field
                  appearance="outline"
                  floatLabel="always"
                  class="w-100-p"
                >
                  <mat-label>Tags</mat-label>

                  <mat-chip-list #tagList name="tags" formControlName="tags">
                    <mat-chip
                      *ngFor="let tag of product.tags"
                      [removable]="true"
                      (removed)="product.removeTag(tag)"
                    >
                      {{ tag }}
                      <mat-icon matChipRemove>cancel</mat-icon>
                    </mat-chip>

                    <input
                      [matChipInputFor]="tagList"
                      [matChipInputAddOnBlur]="true"
                      (matChipInputTokenEnd)="media.addTag($event)"
                    />
                  </mat-chip-list>
                </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">
                  <div
                    *ngIf="product.images.length === 0"
                    class="product-image"
                    fxlayout="row"
                    fxLayoutAlign="center center"
                  >
                    <img
                      class="media"
                      [src]="
                        'assets/images/ecommerce/product-image-placeholder.png'
                      "
                    />
                  </div>

                  <div *ngFor="let image of product.images">
                    <div
                      *ngIf="product.images.length > 0"
                      class="product-image"
                      fxlayout="row"
                      fxLayoutAlign="center center"
                    >
                      <img class="media" [src]="image.url" />
                    </div>
                  </div>
                </div> -->
            </div>
          </mat-tab>

          <mat-tab label="Pricing">
            <div class="tab-content p-24" fusePerfectScrollbar></div>
          </mat-tab>
        </mat-tab-group>
        <!-- </form> -->
      </div>
      <!-- / CONTENT -->
    </div>
    <!-- / CONTENT CARD -->
  </div>
  <!-- / CENTER -->
</div>