Current Path : /storage/v11800/alliedessence/public_html/wp-content/plugins/lottiefiles/src/components/ |
Linux v11800 5.3.0-1023-aws #25~18.04.1-Ubuntu SMP Fri Jun 5 15:19:18 UTC 2020 aarch64
|
Current File : /storage/v11800/alliedessence/public_html/wp-content/plugins/lottiefiles/src/components/Tile.tsx |
/**
* Copyright 2022 Design Barn Inc.
*/
import { useTracker } from '@context/tracker-provider';
import { HitCountEvents } from '@helpers/enums';
import { eventsConst, eventEnums } from '@lottiefiles/plugin-tracker';
import { Appearance, Avatar, Size, TextColor } from '@lottiefiles/react-ui-kit';
import { useContext } from '@wordpress/element';
import * as React from 'react';
import { Button, Card } from '../_components';
import { LottieContext } from '../context/lottie-provider';
import { saveToMediaLibrary } from '../utility';
import { extractDotLottie, isDotLottie } from '../utils';
import { LottiePlayer } from './LottiePlayer';
interface IUserProps {
avatarUrl: string;
firstName: string;
}
export interface ITileProps {
bgColor: string;
createdBy: IUserProps;
id: number;
lottieUrl: string;
}
export const Tile: React.FC<ITileProps> = ({ bgColor, createdBy, id, lottieUrl }: ITileProps): JSX.Element => {
const tracker = useTracker();
const { appData, closeModal, setAttributes } = useContext(LottieContext);
const onFileSave = (src: string, jsonSrc?: null | Record<string, unknown>): void => {
setAttributes({ src, jsonSrc });
closeModal(false);
tracker.pluginTracking({
eventType: eventsConst.click.insertAnimation,
userId: appData.userData.id,
eventProperties: { animationId: id, type: eventEnums.animationsType.lottie },
resourceId: id,
method: HitCountEvents.DOWNLOAD_LOTTIE_JSON,
});
};
const onInsert = (): void => {
if (appData.copyLottieToMedia) {
saveToMediaLibrary({
url: lottieUrl,
onFileSave: (src: string, jsonSrc?: null | Record<string, unknown>) => onFileSave(src, jsonSrc),
onError: (error: unknown) => {
console.log(error);
},
});
} else {
if (isDotLottie(lottieUrl)) {
const getLottie = async () => {
try {
const lottieJson = await extractDotLottie(lottieUrl);
onFileSave(lottieUrl, lottieJson);
} catch (error) {
console.log(error);
}
};
getLottie();
return;
}
onFileSave(lottieUrl);
}
};
if (!lottieUrl || lottieUrl === '') {
return <></>;
}
return (
<div
key={`project-${id}`}
onKeyDown={(): null => null}
className="list-item lf-h-44 lf-cursor-pointer lf-list-none lf-mb-2"
>
<Card size={Size.fluid}>
<LottiePlayer bgColor={bgColor} src={lottieUrl} isPreview />
<div className="lf-hidden group-hover:lf-block lf-absolute lf-bottom-4">
<Button appearance={Appearance.primary} size={Size.tiny} textColor={TextColor.white} onClick={onInsert}>
Insert animation
</Button>
</div>
</Card>
<div className="lf-flex lf-items-center lf-mt-2">
<div className="lf-w-4 lf-mr-2">
<Avatar src={createdBy?.avatarUrl} size={Size.fluid} className="lf-border-0" />
</div>
<div>
<h5 className="lf-font-bold lf-text-xs">{createdBy?.firstName || 'loading...'}</h5>
</div>
</div>
</div>
);
};