mirror of
https://github.com/jeffvli/feishin.git
synced 2024-11-20 06:27:09 +01:00
Remove current song list index animation (#783)
This commit is contained in:
parent
a8b3944c66
commit
18027d4292
@ -2,95 +2,95 @@ import type { ICellRendererParams } from '@ag-grid-community/core';
|
||||
import { Text } from '/@/renderer/components/text';
|
||||
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
|
||||
|
||||
const AnimatedSvg = () => {
|
||||
return (
|
||||
<div style={{ height: '1rem', transform: 'rotate(180deg)', width: '1rem' }}>
|
||||
<svg
|
||||
viewBox="100 130 57 80"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g>
|
||||
<rect
|
||||
fill="var(--primary-color)"
|
||||
height="80"
|
||||
id="bar-1"
|
||||
width="12"
|
||||
x="100"
|
||||
y="130"
|
||||
>
|
||||
<animate
|
||||
attributeName="height"
|
||||
begin="0.1s"
|
||||
calcMode="spline"
|
||||
dur="0.95s"
|
||||
keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
|
||||
keyTimes="0; 0.47368; 1"
|
||||
repeatCount="indefinite"
|
||||
values="80;15;80"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
fill="var(--primary-color)"
|
||||
height="80"
|
||||
id="bar-2"
|
||||
width="12"
|
||||
x="115"
|
||||
y="130"
|
||||
>
|
||||
<animate
|
||||
attributeName="height"
|
||||
begin="0.1s"
|
||||
calcMode="spline"
|
||||
dur="0.95s"
|
||||
keySplines="0.45 0 0.55 1; 0.45 0 0.55 1"
|
||||
keyTimes="0; 0.44444; 1"
|
||||
repeatCount="indefinite"
|
||||
values="25;80;25"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
fill="var(--primary-color)"
|
||||
height="80"
|
||||
id="bar-3"
|
||||
width="12"
|
||||
x="130"
|
||||
y="130"
|
||||
>
|
||||
<animate
|
||||
attributeName="height"
|
||||
begin="0.1s"
|
||||
calcMode="spline"
|
||||
dur="0.85s"
|
||||
keySplines="0.65 0 0.35 1; 0.65 0 0.35 1"
|
||||
keyTimes="0; 0.42105; 1"
|
||||
repeatCount="indefinite"
|
||||
values="80;10;80"
|
||||
/>
|
||||
</rect>
|
||||
<rect
|
||||
fill="var(--primary-color)"
|
||||
height="80"
|
||||
id="bar-4"
|
||||
width="12"
|
||||
x="145"
|
||||
y="130"
|
||||
>
|
||||
<animate
|
||||
attributeName="height"
|
||||
begin="0.1s"
|
||||
calcMode="spline"
|
||||
dur="1.05s"
|
||||
keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
|
||||
keyTimes="0; 0.31579; 1"
|
||||
repeatCount="indefinite"
|
||||
values="30;80;30"
|
||||
/>
|
||||
</rect>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
// const AnimatedSvg = () => {
|
||||
// return (
|
||||
// <div style={{ height: '1rem', transform: 'rotate(180deg)', width: '1rem' }}>
|
||||
// <svg
|
||||
// viewBox="100 130 57 80"
|
||||
// xmlns="http://www.w3.org/2000/svg"
|
||||
// >
|
||||
// <g>
|
||||
// <rect
|
||||
// fill="var(--primary-color)"
|
||||
// height="80"
|
||||
// id="bar-1"
|
||||
// width="12"
|
||||
// x="100"
|
||||
// y="130"
|
||||
// >
|
||||
// <animate
|
||||
// attributeName="height"
|
||||
// begin="0.1s"
|
||||
// calcMode="spline"
|
||||
// dur="0.95s"
|
||||
// keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
|
||||
// keyTimes="0; 0.47368; 1"
|
||||
// repeatCount="indefinite"
|
||||
// values="80;15;80"
|
||||
// />
|
||||
// </rect>
|
||||
// <rect
|
||||
// fill="var(--primary-color)"
|
||||
// height="80"
|
||||
// id="bar-2"
|
||||
// width="12"
|
||||
// x="115"
|
||||
// y="130"
|
||||
// >
|
||||
// <animate
|
||||
// attributeName="height"
|
||||
// begin="0.1s"
|
||||
// calcMode="spline"
|
||||
// dur="0.95s"
|
||||
// keySplines="0.45 0 0.55 1; 0.45 0 0.55 1"
|
||||
// keyTimes="0; 0.44444; 1"
|
||||
// repeatCount="indefinite"
|
||||
// values="25;80;25"
|
||||
// />
|
||||
// </rect>
|
||||
// <rect
|
||||
// fill="var(--primary-color)"
|
||||
// height="80"
|
||||
// id="bar-3"
|
||||
// width="12"
|
||||
// x="130"
|
||||
// y="130"
|
||||
// >
|
||||
// <animate
|
||||
// attributeName="height"
|
||||
// begin="0.1s"
|
||||
// calcMode="spline"
|
||||
// dur="0.85s"
|
||||
// keySplines="0.65 0 0.35 1; 0.65 0 0.35 1"
|
||||
// keyTimes="0; 0.42105; 1"
|
||||
// repeatCount="indefinite"
|
||||
// values="80;10;80"
|
||||
// />
|
||||
// </rect>
|
||||
// <rect
|
||||
// fill="var(--primary-color)"
|
||||
// height="80"
|
||||
// id="bar-4"
|
||||
// width="12"
|
||||
// x="145"
|
||||
// y="130"
|
||||
// >
|
||||
// <animate
|
||||
// attributeName="height"
|
||||
// begin="0.1s"
|
||||
// calcMode="spline"
|
||||
// dur="1.05s"
|
||||
// keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
|
||||
// keyTimes="0; 0.31579; 1"
|
||||
// repeatCount="indefinite"
|
||||
// values="30;80;30"
|
||||
// />
|
||||
// </rect>
|
||||
// </g>
|
||||
// </svg>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
const StaticSvg = () => {
|
||||
return (
|
||||
@ -134,19 +134,14 @@ const StaticSvg = () => {
|
||||
|
||||
export const RowIndexCell = ({ value, eGridCell }: ICellRendererParams) => {
|
||||
const classList = eGridCell.classList;
|
||||
const isFocused = classList.contains('focused');
|
||||
// const isFocused = classList.contains('focused');
|
||||
const isPlaying = classList.contains('playing');
|
||||
const isCurrentSong =
|
||||
classList.contains('current-song-cell') || classList.contains('current-playlist-song-cell');
|
||||
|
||||
return (
|
||||
<CellContainer $position="right">
|
||||
{isPlaying &&
|
||||
(isFocused && isCurrentSong ? (
|
||||
<AnimatedSvg />
|
||||
) : isCurrentSong ? (
|
||||
<StaticSvg />
|
||||
) : null)}
|
||||
{isPlaying && (isCurrentSong ? <StaticSvg /> : null)}
|
||||
<Text
|
||||
$secondary
|
||||
align="right"
|
||||
|
Loading…
Reference in New Issue
Block a user