Skip to content

Commit

Permalink
chore(viewer): remove renderer version and load time (#407)
Browse files Browse the repository at this point in the history
  • Loading branch information
@theashraf
theashraf authored Nov 22, 2024
1 parent ae0fbe7 commit 66f7ef4
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 118 deletions.
14 changes: 0 additions & 14 deletions apps/dotlottie-viewer/src/components/dotlottie-new.tsx
View file

This file was deleted.

11 changes: 1 addition & 10 deletions apps/dotlottie-viewer/src/components/load-time.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,16 @@
interface LoadTimeProps extends React.HTMLAttributes<HTMLDivElement> {
className?: string;
loadTime: number;
title: string;
rendererVersion: string;
version: string;
}

const LoadTime: React.FC<LoadTimeProps> = ({ className = '', title, version, rendererVersion, loadTime, ...props }) => {
const LoadTime: React.FC<LoadTimeProps> = ({ className = '', title, version, ...props }) => {
return (
<div className={`flex flex-col items-center ${className}`} {...props}>
<div className="flex items-start">
<h6 className="text-xl font-bold mb-0">{title}</h6>
<span className="ml-1 text-xs text-secondary bg-strong p-0.5 px-1 rounded-lg">{version}</span>
</div>
<span className="p-1 rounded text-xs mb-1 text-secondary">
<strong>Renderer: </strong>
{rendererVersion}
</span>
<p className="text-xs px-2 py-1 bg-strong rounded-full flex justify-center items-center">
Load Time: {loadTime}ms
</p>
</div>
);
};
Expand Down
143 changes: 49 additions & 94 deletions apps/dotlottie-viewer/src/components/players.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import { useCallback, useEffect, useState, useRef } from 'react';
import { useAppDispatch, useAppSelector } from '../store/hooks';
import DotLottieNew from './dotlottie-new';
import { DotLottiePlayer, DotLottieCommonPlayer } from '@dotlottie/react-player';
import { DotLottie } from '@lottiefiles/dotlottie-react';
import {
DotLottieReact,
setWasmUrl as setDotLottieWasmUrl,
DotLottie,
RenderEvent,
} from '@lottiefiles/dotlottie-react';
import dotLottieWebPkg from '@lottiefiles/dotlottie-react/node_modules/@lottiefiles/dotlottie-web/package.json';
import { Range, getTrackBackground } from 'react-range';
import dotLottieWasmUrl from '../../../../packages/web/src/core/dotlottie-player.wasm?url';
import {
setActiveAnimationId,
setAnimations,
setCurrentFrame,
setCurrentState,
setLoadTimeDotLottie,
setLoadTimeLottieWeb,
setLoop,
setMarkers,
setThemes,
Expand All @@ -22,7 +25,7 @@ import { ImLoop } from 'react-icons/im';
import { GiNextButton, GiPreviousButton } from 'react-icons/gi';
import LoadTime from './load-time';

let startTime = performance.now();
setDotLottieWasmUrl(dotLottieWasmUrl);

export default function Players() {
const lottieWebRef = useRef<DotLottieCommonPlayer | null>(null);
Expand All @@ -39,7 +42,6 @@ export default function Players() {
const activeAnimationId = useAppSelector((state) => state.viewer.activeAnimationId);
const activeThemeId = useAppSelector((state) => state.viewer.activeThemeId);
const isJson = useAppSelector((state) => state.viewer.isJson);
const loadTime = useAppSelector((state) => state.viewer.loadTime);
const animations = useAppSelector((state) => state.viewer.animations);
const segment = useAppSelector((state) => state.viewer.segment);
const useFrameInterpolation = useAppSelector((state) => state.viewer.useFrameInterpolation);
Expand All @@ -48,8 +50,7 @@ export default function Players() {

const onLoad = useCallback(() => {
dispatch(setTotalFrames(dotLottie?.totalFrames));
const endTime = performance.now();
dispatch(setLoadTimeDotLottie(endTime - startTime));

if (!src.endsWith('.json') && !src.startsWith('data:application/json')) {
if (!activeAnimationId) {
dispatch(setActiveAnimationId(dotLottie?.manifest?.animations?.[0]?.id || ''));
Expand All @@ -60,15 +61,29 @@ export default function Players() {
}
}, [src, dotLottie, dispatch, activeAnimationId]);

const onFrame = useCallback(() => {
dispatch(setCurrentFrame(dotLottie?.currentFrame || 0));
}, [dispatch, dotLottie]);
const onRender = useCallback(
({ currentFrame }: RenderEvent) => {
dispatch(setCurrentFrame(currentFrame));
},
[dispatch, dotLottie],
);

const onPlay = useCallback(() => {
dispatch(setCurrentState('playing'));
}, [dispatch]);

const onStop = useCallback(() => {
dispatch(setCurrentState('stopped'));
}, [dispatch]);

const onPause = useCallback(() => {
dispatch(setCurrentState('paused'));
}, [dispatch]);

const getNext = useCallback(() => {
const currentIndex = animations.indexOf(activeAnimationId);
if (currentIndex === -1) return undefined; // or handle error
if (currentIndex === -1) return undefined;

// Use modulus to wrap around
const nextIndex = (currentIndex + 1) % animations.length;
return animations[nextIndex];
}, [animations, activeAnimationId]);
Expand All @@ -77,119 +92,65 @@ export default function Players() {
const currentIndex = animations.indexOf(activeAnimationId);
if (currentIndex === -1) return undefined; // or handle error

// Use modulus to wrap around. Adding `emotions.length` before subtracting to avoid negative index
const prevIndex = (currentIndex - 1 + animations.length) % animations.length;
return animations[prevIndex];
}, [animations, activeAnimationId]);

useEffect(() => {
if (!dotLottie) return;
dotLottie.addEventListener('load', onLoad);
dotLottie.addEventListener('frame', onFrame);
dotLottie.addEventListener('render', onRender);
dotLottie.addEventListener('complete', onStop);
dotLottie.addEventListener('stop', onStop);
dotLottie.addEventListener('play', onPlay);
dotLottie.addEventListener('pause', onPause);

return () => {
dotLottie.removeEventListener('load', onLoad);
dotLottie.removeEventListener('frame', onFrame);
dotLottie.removeEventListener('render', onRender);
dotLottie.removeEventListener('complete', onStop);
dotLottie.removeEventListener('stop', onStop);
dotLottie.removeEventListener('play', onPlay);
dotLottie.removeEventListener('pause', onPause);
};
}, [onLoad, dotLottie, onFrame]);

useEffect(() => {
if (!dotLottie) return;
if (segment[0] && segment[1]) {
dotLottie.setSegment(segment[0], segment[1]);
}
}, [segment, dotLottie]);

useEffect(() => {
dotLottie?.setMarker(activeMarker);
}, [activeMarker]);

useEffect(() => {
if (!dotLottie) return;
dotLottie.setUseFrameInterpolation(useFrameInterpolation);
}, [dotLottie, useFrameInterpolation]);

const addEventListeners = useCallback(
(player: DotLottie) => {
player.addEventListener('complete', () => {
dispatch(setCurrentState('stopped'));
});
player.addEventListener('stop', () => {
dispatch(setCurrentState('stopped'));
});
player.addEventListener('play', () => {
dispatch(setCurrentState('playing'));
});
player.addEventListener('pause', () => {
dispatch(setCurrentState('paused'));
});
},
[dispatch],
);

useEffect(() => {
if (!dotLottie) return;
startTime = performance.now();
dotLottie?.loadAnimation(activeAnimationId);
}, [activeAnimationId, dotLottie]);

useEffect(() => {
if (!dotLottie) return;
dotLottie?.setTheme(activeThemeId);
}, [activeThemeId, dotLottie]);
}, [dotLottie, onLoad, onRender, onStop, onPlay, onPause]);

useEffect(() => {
if (!dotLottie) return;
dispatch(setAnimations(dotLottie?.manifest?.animations?.map((item) => item.id) || []));
dispatch(setThemes(dotLottie?.manifest?.themes || []));
}, [dotLottie, dispatch]);

useEffect(() => {
startTime = performance.now();
}, [src, dotLottie]);

return (
<>
<div className="h-full flex-grow flex justify-between items-center flex-col gap-4">
<div className="flex justify-center h-full">
<div className="flex flex-col dotlottie-player">
<LoadTime
version={dotLottieWebPkg.version}
rendererVersion="[email protected]"
className="mb-4"
title="dotLottie Web"
loadTime={parseFloat(loadTime.dotLottie.toFixed(2))}
/>
<LoadTime version={dotLottieWebPkg.version} className="mb-4" title="dotLottie Web" />
<div className="flex justify-center items-center p-4 flex-grow">
<div style={{ width: '350px', height: '350px' }}>
<DotLottieNew
<DotLottieReact
backgroundColor={backgroundColor}
width={350}
height={350}
autoplay={autoplay}
useFrameInterpolation={true}
useFrameInterpolation={useFrameInterpolation}
loop={loop}
mode={mode}
speed={speed}
dotLottieRefCallback={(ref) => {
if (ref) {
addEventListeners(ref);
setDotLottie(ref);
}
}}
themeId={activeThemeId}
animationId={activeAnimationId}
segment={segment as [number, number]}
marker={activeMarker}
dotLottieRefCallback={setDotLottie}
src={src}
/>
</div>
</div>
</div>
{isJson ? (
<div className="flex flex-col lottie-web">
<LoadTime
version="v5.12.2"
rendererVersion="[email protected]"
className="mb-4"
title="Lottie Web"
loadTime={parseFloat(loadTime.lottieWeb.toFixed(2))}
/>
<LoadTime version="v5.12.2" className="mb-4" title="Lottie Web" />
<div className="flex justify-center items-center p-4 flex-grow">
<div style={{ width: '350px', height: '350px' }}>
<DotLottiePlayer
Expand All @@ -200,12 +161,6 @@ export default function Players() {
autoplay={autoplay}
loop={loop}
speed={speed}
onEvent={(event) => {
if (event === 'ready') {
const endTime = performance.now();
dispatch(setLoadTimeLottieWeb(endTime - startTime));
}
}}
src={src}
/>
</div>
Expand Down

0 comments on commit 66f7ef4

Please sign in to comment.