File

projects/maplander/components/src/lib/components/property/components/multimedia-uploader/multimedia-uploader.component.ts

Index

Properties

Properties

currentType
currentType: PFileTypeEnum
Type : PFileTypeEnum
multimedia
multimedia: PFile[]
Type : PFile[]
newMedia
newMedia: UserMedia[]
Type : UserMedia[]
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
import {PFile, PFileTypeEnum, UserMedia} from '@maplander/types';

interface MultimediaUploaderData {
  currentType: PFileTypeEnum;
  multimedia: PFile[];
  newMedia: UserMedia[];
}

@Component({
  selector: 'lib-property-multimedia-uploader',
  templateUrl: './multimedia-uploader.component.html',
  styleUrls: ['./multimedia-uploader.component.scss']
})
export class MultimediaUploaderComponent implements OnInit {

  public fileType: 'image' | 'image360' | 'document';
  public images: PFile[];
  public images360: PFile[];
  public videos: PFile[];
  public currentIndex: number;
  private _newMedia: UserMedia[];

  constructor(
    @Inject(MAT_DIALOG_DATA) private _data: MultimediaUploaderData,
    private _dialog: MatDialogRef<MultimediaUploaderComponent, { multimedia: PFile[], newMedia: UserMedia[] }>
  ) {
    switch (this._data.currentType) {
      case PFileTypeEnum.IMAGE:
        this.fileType = 'image';
        this.currentIndex = 0;
        break;
      case PFileTypeEnum.SPHERIC:
        this.fileType = 'image360';
        this.currentIndex = 1;
        break;
      case PFileTypeEnum.VIDEO:
        this.fileType = 'document';
        this.currentIndex = 2;
        break;
    }
    this.images = [];
    this.images360 = [];
    this.videos = [];
    this._newMedia = [];
  }

  private static getYouTubeID(text: string): string {
    if (text.indexOf('https://youtu.be/') !== -1) {
      text = text.replace('https://youtu.be/', '');
    } else if (text.indexOf('https://www.youtube.com/') !== -1) {
      text = text.replace('https://www.youtube.com/', '');
    } else {
      return text = null;
    }
    if (text.indexOf('watch?v=') !== -1) {
      text = text.replace('watch?v=', '');
    } else {
      return text = null;
    }
    return text;
  }

  ngOnInit() {
    this.parseMultimedia();
  }

  onUploadImage(ev: UserMedia | UserMedia[]): void {
    if (!ev) {
      return;
    }
    switch (this.fileType) {
      case 'image':
        if (Array.isArray(ev)) {
          ev.forEach(image => {
            this.createImagePFile(image);
          });
        } else {
          this.createImagePFile(ev);
        }
        break;
      case 'image360':
        if (Array.isArray(ev)) {
          ev.forEach(image => {
            this.createImage360PFile(image);
          });
        } else {
          this.createImage360PFile(ev);
        }
        break;
    }
  }

  onTabChanged(tab: number): void {
    this.currentIndex = tab;
    switch (tab) {
      case 0:
        this.fileType = 'image';
        break;
      case 1:
        this.fileType = 'image360';
        break;
    }
  }

  onListChanged(ev: PFile[]): void {
    switch (this.currentIndex) {
      case 0:
        if (Array.isArray(ev) && ev.length > 0) {
          ev = ev.map((item, index) => {
            item.position = index;
            return item;
          });
          this.images = ev;
        }
        break;
      case 1:
        if (Array.isArray(ev) && ev.length > 0) {
          ev = ev.map((item, index) => {
            item.position = index;
            return item;
          });
          this.images360 = ev;
        }
        break;
      case 2:
        if (Array.isArray(ev) && ev.length > 0) {
          ev = ev.map((item, index) => {
            item.position = index;
            return item;
          });
          this.videos = ev;
        }
        break;
    }
  }

  removeMedia(ev: PFile): void {
    let i = -1;
    if (!ev.id) {
      switch (ev.type) {
        case PFileTypeEnum.IMAGE:
          this.images.splice(this.images.indexOf(ev), 1);
          break;
        case PFileTypeEnum.SPHERIC:
          this.images360.splice(this.images360.indexOf(ev), 1);
          break;
        case PFileTypeEnum.VIDEO:
          this.videos.splice(this.videos.indexOf(ev), 1);
          break;
      }
      this._newMedia.forEach((item, index) => {
        if (item.url === ev.fileCS.thumbnail) {
          i = index;
        }
      });
      if (i > -1) {
        this._newMedia.splice(i, 1);
      }
    } else {
      switch (ev.type) {
        case PFileTypeEnum.IMAGE:
          this.images.splice(this.images.indexOf(ev), 1);
          break;
        case PFileTypeEnum.SPHERIC:
          this.images360.splice(this.images360.indexOf(ev), 1);
          break;
        case PFileTypeEnum.VIDEO:
          this.videos.splice(this.videos.indexOf(ev), 1);
          break;
      }
    }
  }

  onYouTubeInputTextChanged(input: HTMLInputElement): void {
    if (input.value === '') {
      return;
    }
    const id = MultimediaUploaderComponent.getYouTubeID(input.value);
    if (!id) {
      return;
    }
    if (id.length >= 11) {
      const file = new PFile();
      file.type = PFileTypeEnum.VIDEO;
      file.media = true;
      file.name = `video_${new Date().getTime()}`;
      file.fileCS = {
        thumbnail: id,
        blobName: null
      };
      file.position = this.videos.length === 0 ? 0 : this.videos.length;
      this.videos.push(file);
      input.value = '';
    }
  }

  accept(): void {
    this._dialog.close({multimedia: this.joinMultimediaTypes(), newMedia: this._newMedia});
  }

  close(): void {
    this._dialog.close(null);
  }

  private createImagePFile(image: UserMedia): void {
    const file = new PFile();
    file.type = PFileTypeEnum.IMAGE;
    image.type = PFileTypeEnum.IMAGE;
    file.media = true;
    file.fileCS = {
      thumbnail: image.url,
      blobName: null
    };
    const fileName = `image_${Date.now()}_${Math.round(Math.random() * 1000000)}.${image.blob.type.replace('image/', '')}`;
    file.name = fileName;
    image.name = fileName;
    file.position = this.images.length === 0 ? 0 : this.images.length;
    this._newMedia.push(image);
    this.images.push(file);
  }

  private createImage360PFile(image: UserMedia): void {
    const file = new PFile();
    file.type = PFileTypeEnum.SPHERIC;
    image.type = PFileTypeEnum.SPHERIC;
    file.media = true;
    const fileName = `spheric_${Date.now()}_${Math.round(Math.random() * 1000000)}.${image.blob.type.replace('image/', '')}`;
    file.name = fileName;
    image.name = fileName;
    file.fileCS = {
      thumbnail: image.url,
      blobName: null
    };
    file.position = this.images360.length === 0 ? 0 : this.images360.length;
    this._newMedia.push(image);
    this.images360.push(file);
  }

  private parseMultimedia(): void {
    if (this._data) {
      this._data.multimedia.forEach(item => {
        switch (item.type) {
          case PFileTypeEnum.IMAGE:
            this.images.push(item);
            break;
          case PFileTypeEnum.SPHERIC:
            this.images360.push(item);
            break;
          case PFileTypeEnum.VIDEO:
            this.videos.push(item);
            break;
        }
      });
      this._newMedia = this._data.newMedia || [];
    }
  }

  private joinMultimediaTypes(): PFile[] {
    let response = [];
    response = response.concat(this.images);
    response = response.concat(this.images360);
    response = response.concat(this.videos);
    return response;
  }

}

result-matching ""

    No results matching ""