pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove current song list index animation (#783)

Browse source
This commit is contained in:
jeffvli 2024-10-09 18:27:48 -07:00
parent a8b3944c66
commit 18027d4292
1 changed files with 91 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

187
src/renderer/components/virtual-table/cells/row-index-cell.tsx
View file

@ -2,95 +2,95 @@ import type { ICellRendererParams } from '@ag-grid-community/core';
import { Text } from '/@/renderer/components/text'; import { Text } from '/@/renderer/components/text';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell'; import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
const AnimatedSvg = () => { // const AnimatedSvg = () => {
return ( // return (
<div style={{ height: '1rem', transform: 'rotate(180deg)', width: '1rem' }}> // <div style={{ height: '1rem', transform: 'rotate(180deg)', width: '1rem' }}>
<svg // <svg
viewBox="100 130 57 80" // viewBox="100 130 57 80"
xmlns="http://www.w3.org/2000/svg" // xmlns="http://www.w3.org/2000/svg"
> // >
<g> // <g>
<rect // <rect
fill="var(--primary-color)" // fill="var(--primary-color)"
height="80" // height="80"
id="bar-1" // id="bar-1"
width="12" // width="12"
x="100" // x="100"
y="130" // y="130"
> // >
<animate // <animate
attributeName="height" // attributeName="height"
begin="0.1s" // begin="0.1s"
calcMode="spline" // calcMode="spline"
dur="0.95s" // dur="0.95s"
keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" // keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
keyTimes="0; 0.47368; 1" // keyTimes="0; 0.47368; 1"
repeatCount="indefinite" // repeatCount="indefinite"
values="80;15;80" // values="80;15;80"
/> // />
</rect> // </rect>
<rect // <rect
fill="var(--primary-color)" // fill="var(--primary-color)"
height="80" // height="80"
id="bar-2" // id="bar-2"
width="12" // width="12"
x="115" // x="115"
y="130" // y="130"
> // >
<animate // <animate
attributeName="height" // attributeName="height"
begin="0.1s" // begin="0.1s"
calcMode="spline" // calcMode="spline"
dur="0.95s" // dur="0.95s"
keySplines="0.45 0 0.55 1; 0.45 0 0.55 1" // keySplines="0.45 0 0.55 1; 0.45 0 0.55 1"
keyTimes="0; 0.44444; 1" // keyTimes="0; 0.44444; 1"
repeatCount="indefinite" // repeatCount="indefinite"
values="25;80;25" // values="25;80;25"
/> // />
</rect> // </rect>
<rect // <rect
fill="var(--primary-color)" // fill="var(--primary-color)"
height="80" // height="80"
id="bar-3" // id="bar-3"
width="12" // width="12"
x="130" // x="130"
y="130" // y="130"
> // >
<animate // <animate
attributeName="height" // attributeName="height"
begin="0.1s" // begin="0.1s"
calcMode="spline" // calcMode="spline"
dur="0.85s" // dur="0.85s"
keySplines="0.65 0 0.35 1; 0.65 0 0.35 1" // keySplines="0.65 0 0.35 1; 0.65 0 0.35 1"
keyTimes="0; 0.42105; 1" // keyTimes="0; 0.42105; 1"
repeatCount="indefinite" // repeatCount="indefinite"
values="80;10;80" // values="80;10;80"
/> // />
</rect> // </rect>
<rect // <rect
fill="var(--primary-color)" // fill="var(--primary-color)"
height="80" // height="80"
id="bar-4" // id="bar-4"
width="12" // width="12"
x="145" // x="145"
y="130" // y="130"
> // >
<animate // <animate
attributeName="height" // attributeName="height"
begin="0.1s" // begin="0.1s"
calcMode="spline" // calcMode="spline"
dur="1.05s" // dur="1.05s"
keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" // keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
keyTimes="0; 0.31579; 1" // keyTimes="0; 0.31579; 1"
repeatCount="indefinite" // repeatCount="indefinite"
values="30;80;30" // values="30;80;30"
/> // />
</rect> // </rect>
</g> // </g>
</svg> // </svg>
</div> // </div>
); // );
}; // };
const StaticSvg = () => { const StaticSvg = () => {
return ( return (
@ -134,19 +134,14 @@ const StaticSvg = () => {
export const RowIndexCell = ({ value, eGridCell }: ICellRendererParams) => { export const RowIndexCell = ({ value, eGridCell }: ICellRendererParams) => {
const classList = eGridCell.classList; const classList = eGridCell.classList;
const isFocused = classList.contains('focused'); // const isFocused = classList.contains('focused');
const isPlaying = classList.contains('playing'); const isPlaying = classList.contains('playing');
const isCurrentSong = const isCurrentSong =
classList.contains('current-song-cell') || classList.contains('current-playlist-song-cell'); classList.contains('current-song-cell') || classList.contains('current-playlist-song-cell');
return ( return (
<CellContainer $position="right"> <CellContainer $position="right">
{isPlaying && {isPlaying && (isCurrentSong ? <StaticSvg /> : null)}
(isFocused && isCurrentSong ? (
<AnimatedSvg />
) : isCurrentSong ? (
<StaticSvg />
) : null)}
<Text <Text
$secondary $secondary
align="right" align="right"