Skip to content

Commit

Permalink
Merge pull request #97 from vannizhang/master
Browse files Browse the repository at this point in the history 
2024 March Release
  • Loading branch information
@vannizhang
vannizhang authored Mar 28, 2024
2 parents d0cd836 + 7a88300 commit eb46e43
Show file tree
Hide file tree
Showing 257 changed files with 3,656 additions and 3,795 deletions.
25 changes: 18 additions & 7 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,8 @@
"@esri/arcgis-rest-feature-service": "^4.0.4",
"@esri/arcgis-rest-request": "^4.2.0",
"@reduxjs/toolkit": "^1.9.5",
"@vannizhang/wayback-core": "^1.0.5",
"@vannizhang/images-to-video-converter-client": "^1.1.10",
"@vannizhang/wayback-core": "^1.0.6",
"axios": "^1.6.2",
"classnames": "^2.2.6",
"d3": "^7.8.5",
Expand Down
4 changes: 2 additions & 2 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
<meta property="og:image" content="https://livingatlas.arcgis.com/wayback/public/thumbnail.png" />
<link rel="icon" href="public/favicon.ico">

<script type="module" src="https://js.arcgis.com/calcite-components/1.4.0/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.4.0/calcite.css" />
<script type="module" src="https://js.arcgis.com/calcite-components/2.6.0/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.6.0/calcite.css" />
</head>
<body class="calcite-mode-dark">
<div id='appRootDiv'></div>
Expand Down
115 changes: 55 additions & 60 deletions src/components/AnimationControls/AnimationControls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,67 +26,72 @@ import {
} from '@store/Wayback/reducer';

import {
waybackItems4AnimationLoaded,
// waybackItems4AnimationLoaded,
// rNum4AnimationFramesSelector,
rNum2ExcludeSelector,
toggleAnimationFrame,
rNum2ExcludeReset,
// toggleAnimationFrame,
// rNum2ExcludeReset,
// animationSpeedChanged,
animationSpeedSelector,
isAnimationPlayingToggled,
isAnimationPlayingSelector,
startAnimation,
stopAnimation,
updateAnimationSpeed,
indexOfCurrentAnimationFrameSelector,
waybackItem4CurrentAnimationFrameSelector,
setActiveFrameByReleaseNum,
// isAnimationPlayingToggled,
// isAnimationPlayingSelector,
// startAnimation,
// stopAnimation,
// updateAnimationSpeed,
// indexOfCurrentAnimationFrameSelector,
// waybackItem4CurrentAnimationFrameSelector,
animationSpeedChanged,
selectAnimationStatus,
animationStatusChanged,
// indexOfActiveAnimationFrameChanged,
selectReleaseNumberOfActiveAnimationFrame,
rNum2ExcludeToggled,
releaseNumberOfActiveAnimationFrameChanged,
// releaseNumberOfActiveAnimationFrameChanged,
// setActiveFrameByReleaseNum,
} from '@store/AnimationMode/reducer';

import { IWaybackItem } from '@typings/index';

import DonwloadGifButton from './DonwloadGifButton';
import { DonwloadAnimationButton } from './DonwloadAnimationButton';
import FramesSeletor from './FramesSeletor';
import SpeedSelector from './SpeedSelector';
import PlayPauseBtn from './PlayPauseBtn';
import { usePrevious } from '@hooks/usePrevious';
import { saveFrames2ExcludeInURLQueryParam } from '@utils/UrlSearchParam';
// import { usePrevious } from '@hooks/usePrevious';
import {
saveAnimationSpeedInURLQueryParam,
saveFrames2ExcludeInURLQueryParam,
} from '@utils/UrlSearchParam';

const AnimationControls = () => {
const dispatch = useDispatch();

const rNum2ExcludeFromAnimation: number[] =
useSelector(rNum2ExcludeSelector);

// const activeItem:IWaybackItem = useSelector(activeWaybackItemSelector);

const waybackItemsWithLocalChanges: IWaybackItem[] = useSelector(
waybackItemsWithLocalChangesSelector
);

const prevWaybackItemsWithLocalChanges = usePrevious<IWaybackItem[]>(
waybackItemsWithLocalChanges
);

const animationSpeed = useSelector(animationSpeedSelector);

const isPlaying = useSelector(isAnimationPlayingSelector);
const animationStatus = useSelector(selectAnimationStatus);

const waybackItem4CurrentAnimationFrame = useSelector(
waybackItem4CurrentAnimationFrameSelector
const releaseNum4ActiveFrame = useSelector(
selectReleaseNumberOfActiveAnimationFrame
);

const speedOnChange = useCallback((speed: number) => {
dispatch(updateAnimationSpeed(speed));
dispatch(animationSpeedChanged(speed));
}, []);

const playPauseBtnOnClick = useCallback(() => {
if (isPlaying) {
dispatch(stopAnimation());
if (animationStatus === 'playing') {
dispatch(animationStatusChanged('pausing'));
} else {
dispatch(startAnimation());
dispatch(animationStatusChanged('playing'));
}
}, [isPlaying]);
}, [animationStatus]);

const getContent = () => {
if (
Expand All @@ -95,7 +100,7 @@ const AnimationControls = () => {
) {
return (
<div className="text-center">
<p className="leader-1 font-size--2">
<p className="mt-4 text-sm">
Loading versions with local changes.
</p>
</div>
Expand All @@ -104,10 +109,10 @@ const AnimationControls = () => {

return (
<>
<DonwloadGifButton />
<DonwloadAnimationButton />

<div className="leader-half">
<span className="font-size--3">Animation Speed</span>
<div className=" mt-2">
<span className=" text-xs">Animation Speed</span>
</div>

<div
Expand All @@ -117,7 +122,8 @@ const AnimationControls = () => {
}}
>
<PlayPauseBtn
isPlaying={isPlaying}
isPlaying={animationStatus === 'playing'}
isLoading={animationStatus === 'loading'}
onClick={playPauseBtnOnClick}
/>

Expand All @@ -129,39 +135,27 @@ const AnimationControls = () => {

<FramesSeletor
waybackItemsWithLocalChanges={waybackItemsWithLocalChanges}
// activeItem={activeItem}
// rNum4AnimationFrames={rNum4AnimationFrames}
rNum2Exclude={rNum2ExcludeFromAnimation}
setActiveFrame={(rNum) => {
dispatch(setActiveFrameByReleaseNum(rNum));
if (animationStatus !== 'pausing') {
return;
}

dispatch(
releaseNumberOfActiveAnimationFrameChanged(rNum)
);
// console.log(rNum);
}}
toggleFrame={(rNum) => {
dispatch(toggleAnimationFrame(rNum));
dispatch(rNum2ExcludeToggled(rNum));
}}
waybackItem4CurrentAnimationFrame={
waybackItem4CurrentAnimationFrame
}
isButtonDisabled={isPlaying}
releaseNum4ActiveFrame={releaseNum4ActiveFrame}
isButtonDisabled={animationStatus === 'playing'}
/>
</>
);
};

useEffect(() => {
batch(() => {
dispatch(
waybackItems4AnimationLoaded(waybackItemsWithLocalChanges)
);

if (
prevWaybackItemsWithLocalChanges &&
prevWaybackItemsWithLocalChanges.length
) {
dispatch(rNum2ExcludeReset());
}
});
}, [waybackItemsWithLocalChanges]);

useEffect(() => {
// console.log(rNum2ExcludeFromAnimation)
saveFrames2ExcludeInURLQueryParam(rNum2ExcludeFromAnimation);
Expand All @@ -170,10 +164,11 @@ const AnimationControls = () => {
return (
<>
<div
style={{
padding: '0 1rem',
marginTop: '.5rem',
}}
className="px-4 py-0 mt-2"
// style={{
// padding: '0 1rem',
// marginTop: '.5rem',
// }}
>
{getContent()}
</div>
Expand Down
37 changes: 25 additions & 12 deletions ...s/AnimationControls/DonwloadGifButton.tsx → ...ationControls/DonwloadAnimationButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,28 +17,41 @@ import React, { useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import classnames from 'classnames';
import {
isDownloadGIFDialogOnToggled,
isLoadingFrameDataSelector,
showDownloadAnimationPanelToggled,
selectAnimationStatus,
// isLoadingFrameDataSelector,
} from '@store/AnimationMode/reducer';

const DonwloadGifButton = () => {
export const DonwloadAnimationButton = () => {
const dispatch = useDispatch();

const isLoadingFrameData = useSelector(isLoadingFrameDataSelector);
// const isLoadingFrameData = useSelector(isLoadingFrameDataSelector);

const animationStatus = useSelector(selectAnimationStatus);

const onClickHandler = useCallback(() => {
dispatch(isDownloadGIFDialogOnToggled());
dispatch(showDownloadAnimationPanelToggled(true));
}, []);

const classNames = classnames('btn btn-fill', {
'btn-disabled': isLoadingFrameData,
});
// const classNames = classnames('btn btn-fill', {
// 'btn-disabled': animationStatus === 'loading',
// });

return (
<div className={classNames} onClick={onClickHandler}>
Download GIF
<div
className={classnames({
disabled: animationStatus === 'loading',
})}
>
<calcite-button
width="full"
onClick={onClickHandler}
style={{
'--calcite-color-text-inverse': '#efefef',
}}
>
Download Animation
</calcite-button>
</div>
);
};

export default DonwloadGifButton;
27 changes: 13 additions & 14 deletions src/components/AnimationControls/FramesSeletor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ type Props = {
// rNum4AnimationFrames: number[];
waybackItemsWithLocalChanges: IWaybackItem[];
rNum2Exclude: number[];
waybackItem4CurrentAnimationFrame: IWaybackItem;
releaseNum4ActiveFrame: number;
// activeItem: IWaybackItem;
isButtonDisabled: boolean;
setActiveFrame: (rNum: number) => void;
Expand All @@ -36,7 +36,7 @@ const FramesSeletor: React.FC<Props> = ({
// rNum4AnimationFrames,
waybackItemsWithLocalChanges,
rNum2Exclude,
waybackItem4CurrentAnimationFrame,
releaseNum4ActiveFrame,
// activeItem,
isButtonDisabled,
setActiveFrame,
Expand Down Expand Up @@ -95,9 +95,7 @@ const FramesSeletor: React.FC<Props> = ({
// onClick={onSelect.bind(this, d)}
onClick={setActiveFrame.bind(this, releaseNum)}
showBoarderOnLeft={
waybackItem4CurrentAnimationFrame &&
waybackItem4CurrentAnimationFrame.releaseNum ===
releaseNum
releaseNum4ActiveFrame === releaseNum
}
disableCursorPointer={isButtonDisabled}
>
Expand All @@ -108,11 +106,11 @@ const FramesSeletor: React.FC<Props> = ({
}}
>
<div
className="margin-right-half cursor-pointer"
style={{
display: 'flex',
alignItems: 'center',
}}
className="flex items-center mr-2 cursor-pointer"
// style={{
// display: 'flex',
// alignItems: 'center',
// }}
onClick={(evt) => {
evt.stopPropagation();
toggleFrame(releaseNum);
Expand All @@ -129,10 +127,11 @@ const FramesSeletor: React.FC<Props> = ({

return (
<div
style={{
width: '100%',
marginTop: '.5rem',
}}
// style={{
// width: '100%',
// marginTop: '.5rem',
// }}
className="w-full mt-2"
>
{/* <div>
<span className="font-size--3">
Expand Down
Loading

0 comments on commit eb46e43

Please sign in to comment.