File
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;
}
}