Initial Commit ...
This commit is contained in:
@@ -0,0 +1,643 @@
|
||||
import {
|
||||
isImage,
|
||||
isVideo,
|
||||
isAudio,
|
||||
XFileBlob,
|
||||
isValidURL,
|
||||
isDocument,
|
||||
isFunction,
|
||||
isXFileBlob,
|
||||
nameofInstance,
|
||||
isNullOrUndefined,
|
||||
isNullOrEmptyString,
|
||||
XResourceIdentifier,
|
||||
XColorIdentifier,
|
||||
} from 'x-framework-core';
|
||||
import {
|
||||
MediaType,
|
||||
toMediaType,
|
||||
MediaSourceType,
|
||||
isMediaTypePassed,
|
||||
VMediaPresentType,
|
||||
getMediaSourceType,
|
||||
isVMediaPresentType,
|
||||
MediaSourceInputType,
|
||||
isVMediaPresentTypePassed,
|
||||
VMediaPresentTypeIdentifier,
|
||||
} from './v-media.typings';
|
||||
import {
|
||||
XSlotName,
|
||||
XIconNames,
|
||||
XSlotLayout,
|
||||
XButtonType,
|
||||
XIconIdentifier,
|
||||
} from 'x-framework-components';
|
||||
import { XFileDto } from 'x-mabsut-api-sdk';
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { SafeUrl } from '@angular/platform-browser';
|
||||
import { FileLocalizationsResourceIDs } from '../v-file.configs';
|
||||
import { VBaseInCardComponent } from '../../classes/v-base.component';
|
||||
import { XSimpleListItemSlideOption } from '../../typings/simple.list-item.typings';
|
||||
|
||||
@Component({
|
||||
selector: 'v-media',
|
||||
templateUrl: './v-media.component.html',
|
||||
styleUrls: ['./v-media.component.scss'],
|
||||
})
|
||||
export class VMediaComponent extends VBaseInCardComponent {
|
||||
//
|
||||
//#region Props ...
|
||||
|
||||
//
|
||||
readonly SlotNames = Object.assign({}, XSlotName);
|
||||
readonly ButtonTypes = Object.assign({}, XButtonType);
|
||||
readonly SlotLayouts = Object.assign({}, XSlotLayout);
|
||||
readonly MediaPresentTypes = Object.assign({}, VMediaPresentType);
|
||||
|
||||
/**
|
||||
* Provided Source for Presenting ...
|
||||
*/
|
||||
@Input()
|
||||
src: MediaSourceInputType = undefined;
|
||||
|
||||
/**
|
||||
* CSS Classes names to Attach ...
|
||||
*/
|
||||
@Input()
|
||||
cssClass: Array<string> = [];
|
||||
|
||||
/**
|
||||
* Force to Use Thumbnails Paths if Provided XFileDto source ...
|
||||
*/
|
||||
@Input()
|
||||
useThumbnailsIfProvided: boolean = true;
|
||||
|
||||
/**
|
||||
* Specify How to Represent Component ...
|
||||
*/
|
||||
@Input()
|
||||
presentType: VMediaPresentTypeIdentifier = VMediaPresentType.AsCard;
|
||||
|
||||
/**
|
||||
* Thumbnail Provided Icon's Color ...
|
||||
*/
|
||||
@Input()
|
||||
thumbnailIconColor: XColorIdentifier = this.ColorNames.TertiaryShade;
|
||||
|
||||
/**
|
||||
* Provides Thumbnails Icon for Use if necessary ...
|
||||
*
|
||||
* @param type
|
||||
* @returns
|
||||
*/
|
||||
@Input()
|
||||
thumbnailIconProvider: (type: MediaType) => XIconIdentifier = (type) => {
|
||||
//
|
||||
let result: XIconIdentifier = undefined;
|
||||
|
||||
//
|
||||
if (isMediaTypePassed(type)) {
|
||||
//
|
||||
switch (type) {
|
||||
//
|
||||
case MediaType.Image:
|
||||
result = XIconNames.image;
|
||||
break;
|
||||
|
||||
//
|
||||
case MediaType.Video:
|
||||
result = XIconNames.video;
|
||||
break;
|
||||
|
||||
//
|
||||
case MediaType.Audio:
|
||||
result = XIconNames.audio;
|
||||
break;
|
||||
|
||||
//
|
||||
case MediaType.Document:
|
||||
result = XIconNames.document;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* Provides Thumbnail Title for Use if necessary ...
|
||||
* @param type
|
||||
* @returns
|
||||
*/
|
||||
@Input()
|
||||
thumbnailTitleProvider: (type: MediaType) => XResourceIdentifier = (type) => {
|
||||
//
|
||||
let result: XResourceIdentifier = undefined;
|
||||
|
||||
//
|
||||
if (isMediaTypePassed(type)) {
|
||||
//
|
||||
switch (type) {
|
||||
//
|
||||
case MediaType.Image:
|
||||
result = FileLocalizationsResourceIDs.image;
|
||||
break;
|
||||
|
||||
//
|
||||
case MediaType.Video:
|
||||
result = FileLocalizationsResourceIDs.video;
|
||||
break;
|
||||
|
||||
//
|
||||
case MediaType.Audio:
|
||||
result = FileLocalizationsResourceIDs.audio;
|
||||
break;
|
||||
|
||||
//
|
||||
case MediaType.Document:
|
||||
result = FileLocalizationsResourceIDs.document;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* Provided Actions which Used only in Card Present Type ...
|
||||
*/
|
||||
@Input()
|
||||
providedActions: Array<XSimpleListItemSlideOption> = [];
|
||||
|
||||
//
|
||||
// Required Fields For Describe Media ...
|
||||
|
||||
//
|
||||
url: string = undefined;
|
||||
info: string = undefined;
|
||||
type: MediaType = undefined;
|
||||
safeUrl: SafeUrl = undefined;
|
||||
inputType: MediaSourceType = undefined;
|
||||
|
||||
//
|
||||
thumbnailUrl: string = undefined;
|
||||
thumbnailSafeUrl: SafeUrl = undefined;
|
||||
thumbnailIcon: XIconIdentifier = undefined;
|
||||
thumbnailTitle: XResourceIdentifier = undefined;
|
||||
//#endregion
|
||||
|
||||
//
|
||||
//#region LifeCycles ...
|
||||
afterViewInit(): void {
|
||||
super.afterViewInit();
|
||||
|
||||
//
|
||||
this.handlePrepareSource();
|
||||
}
|
||||
|
||||
onChange(changeKeys: string[]): void {
|
||||
super.onChange(changeKeys);
|
||||
|
||||
//
|
||||
let isChanged = false;
|
||||
let applyChnages = false;
|
||||
|
||||
//
|
||||
// Providers Change ...
|
||||
isChanged =
|
||||
changeKeys.includes(nameofInstance(this, 'thumbnailIconProvider')) ||
|
||||
changeKeys.includes(nameofInstance(this, 'thumbnailTitleProvider'));
|
||||
if (isChanged) {
|
||||
//
|
||||
// Icon ...
|
||||
if (
|
||||
isNullOrUndefined(this.thumbnailIconProvider) ||
|
||||
!isFunction(this.thumbnailIconProvider)
|
||||
) {
|
||||
//
|
||||
this.thumbnailIconProvider = (type) => {
|
||||
//
|
||||
let result: XIconIdentifier = undefined;
|
||||
|
||||
//
|
||||
if (isMediaTypePassed(type)) {
|
||||
//
|
||||
switch (type) {
|
||||
//
|
||||
case MediaType.Image:
|
||||
result = XIconNames.image;
|
||||
break;
|
||||
|
||||
//
|
||||
case MediaType.Video:
|
||||
result = XIconNames.video;
|
||||
break;
|
||||
|
||||
//
|
||||
case MediaType.Audio:
|
||||
result = XIconNames.audio;
|
||||
break;
|
||||
|
||||
//
|
||||
case MediaType.Document:
|
||||
result = XIconNames.document;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
//
|
||||
// Title ...
|
||||
if (
|
||||
isNullOrUndefined(this.thumbnailTitleProvider) ||
|
||||
!isFunction(this.thumbnailTitleProvider)
|
||||
) {
|
||||
//
|
||||
this.thumbnailTitleProvider = (type) => {
|
||||
//
|
||||
let result: XResourceIdentifier = undefined;
|
||||
|
||||
//
|
||||
if (isMediaTypePassed(type)) {
|
||||
//
|
||||
switch (type) {
|
||||
//
|
||||
case MediaType.Image:
|
||||
result = FileLocalizationsResourceIDs.image;
|
||||
break;
|
||||
|
||||
//
|
||||
case MediaType.Video:
|
||||
result = FileLocalizationsResourceIDs.video;
|
||||
break;
|
||||
|
||||
//
|
||||
case MediaType.Audio:
|
||||
result = FileLocalizationsResourceIDs.audio;
|
||||
break;
|
||||
|
||||
//
|
||||
case MediaType.Document:
|
||||
result = FileLocalizationsResourceIDs.document;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
//
|
||||
applyChnages = true;
|
||||
this.thumbnailIcon = this.thumbnailIconProvider(this.type);
|
||||
this.thumbnailTitle = this.thumbnailTitleProvider(this.type);
|
||||
}
|
||||
|
||||
//
|
||||
// Source Change ...
|
||||
isChanged = changeKeys.includes(nameofInstance(this, 'src'));
|
||||
if (isChanged) {
|
||||
this.handlePrepareSource();
|
||||
}
|
||||
|
||||
//
|
||||
// PresentType Change ...
|
||||
isChanged = changeKeys.includes(nameofInstance(this, 'presentType'));
|
||||
if (isChanged) {
|
||||
//
|
||||
if (
|
||||
isNullOrUndefined(this.presentType) ||
|
||||
!isVMediaPresentType(this.presentType)
|
||||
) {
|
||||
//
|
||||
applyChnages = true;
|
||||
this.presentType = VMediaPresentType.AsCard;
|
||||
}
|
||||
|
||||
//
|
||||
this.setAttribute(nameofInstance(this, 'presentType'), this.presentType);
|
||||
}
|
||||
|
||||
//
|
||||
// Provided Actions ...
|
||||
isChanged = changeKeys.includes(nameofInstance(this, 'providedActions'));
|
||||
if (isChanged) {
|
||||
//
|
||||
if (isNullOrUndefined(this.providedActions)) {
|
||||
//
|
||||
applyChnages = true;
|
||||
this.providedActions = [];
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Thumbnail Icon Color ...
|
||||
isChanged = changeKeys.includes(nameofInstance(this, 'thumbnailIconColor'));
|
||||
if (isChanged) {
|
||||
//
|
||||
if (isNullOrEmptyString(this.thumbnailIconColor)) {
|
||||
//
|
||||
applyChnages = true;
|
||||
this.thumbnailIconColor = this.ColorNames.TertiaryShade;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
if (applyChnages) {
|
||||
this.detectChanges();
|
||||
}
|
||||
}
|
||||
//#endregion
|
||||
|
||||
//
|
||||
//#region Providers ...
|
||||
/**
|
||||
* Check Present Type is Allow Component Presenting ...
|
||||
*
|
||||
* @returns
|
||||
*/
|
||||
canPresent() {
|
||||
return isVMediaPresentTypePassed(this.presentType);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check Conditions For Thumbnail Present Type ...
|
||||
*/
|
||||
canShowAsThumbnail() {
|
||||
return (
|
||||
!isNullOrUndefined(this.thumbnailIcon) &&
|
||||
!isNullOrUndefined(this.thumbnailTitle)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check Provided Actions ...
|
||||
*/
|
||||
hasActions() {
|
||||
return (
|
||||
!isNullOrUndefined(this.providedActions) &&
|
||||
this.hasChild(this.providedActions)
|
||||
);
|
||||
}
|
||||
//#endregion
|
||||
|
||||
//
|
||||
//#region Handlers ...
|
||||
/**
|
||||
* Prepare Source and Parse data ...
|
||||
*
|
||||
* @returns
|
||||
*/
|
||||
handlePrepareSource() {
|
||||
//
|
||||
// Validate ...
|
||||
if (isNullOrUndefined(this.src)) {
|
||||
return;
|
||||
}
|
||||
|
||||
//
|
||||
// Detect Input Type ...
|
||||
this.inputType = getMediaSourceType(this.src);
|
||||
switch (this.inputType) {
|
||||
//
|
||||
case MediaSourceType.Url:
|
||||
this.handlePrepareUrlSource();
|
||||
break;
|
||||
|
||||
//
|
||||
case MediaSourceType.File:
|
||||
this.handlePrepareFileSource();
|
||||
break;
|
||||
|
||||
//
|
||||
case MediaSourceType.Blob:
|
||||
case MediaSourceType.XFileBlob:
|
||||
this.handlePrepareBlobSource();
|
||||
break;
|
||||
|
||||
//
|
||||
case MediaSourceType.XFileDto:
|
||||
this.handlePrepareDtoSource();
|
||||
break;
|
||||
}
|
||||
|
||||
//
|
||||
// Preparing Thumbnail Info ...
|
||||
this.thumbnailIcon = this.thumbnailIconProvider(this.type);
|
||||
this.thumbnailTitle = this.thumbnailTitleProvider(this.type);
|
||||
|
||||
//
|
||||
// Detect Thumbnail URL ...
|
||||
if (this.type === MediaType.Image) {
|
||||
//
|
||||
if (this.inputType === MediaSourceType.XFileDto) {
|
||||
//
|
||||
const value = this.src as XFileDto;
|
||||
this.thumbnailUrl = !isNullOrEmptyString(value.thumbPath)
|
||||
? value.thumbPath
|
||||
: value.path;
|
||||
} else {
|
||||
this.thumbnailUrl = this.url;
|
||||
}
|
||||
|
||||
//
|
||||
if (isNullOrUndefined(this.thumbnailUrl)) {
|
||||
this.thumbnailUrl = undefined;
|
||||
}
|
||||
|
||||
//
|
||||
if (!isNullOrUndefined(this.safeUrl) && isNullOrEmptyString(this.url)) {
|
||||
//
|
||||
this.thumbnailUrl = undefined;
|
||||
this.thumbnailSafeUrl = this.safeUrl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Calling Action Handler ...
|
||||
*
|
||||
* @param action
|
||||
* @returns
|
||||
*/
|
||||
async handleCallingActionHandler(action: XSimpleListItemSlideOption) {
|
||||
//
|
||||
// Validate ...
|
||||
if (isNullOrUndefined(action)) {
|
||||
return;
|
||||
}
|
||||
|
||||
//
|
||||
// Validate Handler Exists ...
|
||||
if (isNullOrUndefined(action.handler) && !isFunction(action.handler)) {
|
||||
return;
|
||||
}
|
||||
|
||||
//
|
||||
// Calling Action Handler ...
|
||||
await this.getValuesAsync(action.handler(this.src));
|
||||
}
|
||||
//#endregion
|
||||
|
||||
//
|
||||
//#region Private ...
|
||||
/**
|
||||
* Set Thumbnail Size ...
|
||||
*
|
||||
* @param size
|
||||
*/
|
||||
private handleSetThumbnailSize(size: number) {
|
||||
//
|
||||
if (size < 32) {
|
||||
size = 32;
|
||||
}
|
||||
|
||||
//
|
||||
const name = 'thumbnail-size';
|
||||
const value = `${size}px;`;
|
||||
|
||||
//
|
||||
this.setCssVar(name, value);
|
||||
this.setCssVar(name, value, document.documentElement);
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract required data when user provides string as source ...
|
||||
*/
|
||||
private handlePrepareUrlSource() {
|
||||
//
|
||||
let value = this.src as string;
|
||||
|
||||
//
|
||||
// Detecting Type ...
|
||||
this.detectType(value);
|
||||
|
||||
//
|
||||
// Assign URL if has a Valid Url ...
|
||||
this.url = value;
|
||||
|
||||
//
|
||||
if (isValidURL(value)) {
|
||||
//
|
||||
this.info = value;
|
||||
}
|
||||
|
||||
//
|
||||
this.safeUrl = undefined;
|
||||
this.thumbnailSafeUrl = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract required data when user provides XFileDto as source ...
|
||||
*/
|
||||
private handlePrepareDtoSource() {
|
||||
//
|
||||
let value = this.src as XFileDto;
|
||||
|
||||
//
|
||||
// Validate ...
|
||||
if (isNullOrUndefined(value) || isNullOrEmptyString(value.id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
//
|
||||
// Detecting Type ...
|
||||
this.detectType(value);
|
||||
|
||||
//
|
||||
// Check Can User Thumbnail ...
|
||||
if (this.useThumbnailsIfProvided && !isNullOrEmptyString(value.thumbPath)) {
|
||||
this.url = value.thumbPath;
|
||||
} else if (!isNullOrEmptyString(value.path)) {
|
||||
this.url = value.path;
|
||||
}
|
||||
|
||||
//
|
||||
this.safeUrl = undefined;
|
||||
this.thumbnailSafeUrl = undefined;
|
||||
this.info = value.name || value.path || value.thumb || value.thumbPath;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract required data when user provides Blob as source ...
|
||||
*/
|
||||
private handlePrepareBlobSource() {
|
||||
//
|
||||
// Blob ...
|
||||
if (this.src instanceof Blob) {
|
||||
//
|
||||
let value = this.src as Blob;
|
||||
this.url = undefined;
|
||||
this.detectType(value);
|
||||
this.safeUrl =
|
||||
this.sharedService.managerService.securityService.toSafeURL(
|
||||
URL.createObjectURL(value)
|
||||
);
|
||||
} else if (isXFileBlob(this.src)) {
|
||||
//
|
||||
let value = this.src as XFileBlob;
|
||||
this.detectType(value);
|
||||
this.url = value.name;
|
||||
this.info = value.name;
|
||||
this.safeUrl = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract required data when user provides File as source ...
|
||||
*/
|
||||
private handlePrepareFileSource() {
|
||||
//
|
||||
let value = this.src as File;
|
||||
|
||||
//
|
||||
this.detectType(value);
|
||||
this.url = undefined;
|
||||
this.safeUrl = this.sharedService.managerService.securityService.toSafeURL(
|
||||
URL.createObjectURL(value)
|
||||
);
|
||||
this.info = value.name;
|
||||
}
|
||||
|
||||
/**
|
||||
* Detect Media Type based on Identifier ...
|
||||
*
|
||||
* @param identifier
|
||||
* @returns
|
||||
*/
|
||||
private detectType(identifier: XFileDto | File | Blob | XFileBlob | string) {
|
||||
//
|
||||
let result: MediaType = MediaType.None;
|
||||
|
||||
//
|
||||
// Validate ...
|
||||
if (!isNullOrUndefined(identifier)) {
|
||||
//
|
||||
if (this.inputType === MediaSourceType.XFileDto) {
|
||||
this.type = toMediaType((identifier as XFileDto).type);
|
||||
} else {
|
||||
//
|
||||
if (isImage(identifier as any)) {
|
||||
this.type = MediaType.Image;
|
||||
} else if (isVideo(identifier as any)) {
|
||||
this.type = MediaType.Video;
|
||||
} else if (isAudio(identifier as any)) {
|
||||
this.type = MediaType.Audio;
|
||||
} else if (isDocument(identifier as any)) {
|
||||
this.type = MediaType.Document;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
return result;
|
||||
}
|
||||
//#endregion
|
||||
}
|
||||
Reference in New Issue
Block a user