156 lines
5.6 KiB
XML
156 lines
5.6 KiB
XML
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 StaticSvg = () => {
|
|
return (
|
|
<div style={{ height: '1rem', transform: 'rotate(180deg)', width: '1rem' }}>
|
|
<svg
|
|
viewBox="100 130 57 80"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect
|
|
fill="var(--primary-color)"
|
|
height="20"
|
|
width="12"
|
|
x="100"
|
|
y="130"
|
|
/>
|
|
<rect
|
|
fill="var(--primary-color)"
|
|
height="60"
|
|
width="12"
|
|
x="115"
|
|
y="130"
|
|
/>
|
|
<rect
|
|
fill="var(--primary-color)"
|
|
height="80"
|
|
width="12"
|
|
x="130"
|
|
y="130"
|
|
/>
|
|
<rect
|
|
fill="var(--primary-color)"
|
|
height="45"
|
|
width="12"
|
|
x="145"
|
|
y="130"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const RowIndexCell = ({ value, eGridCell }: ICellRendererParams) => {
|
|
const classList = eGridCell.classList;
|
|
// 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 && (isCurrentSong ? <StaticSvg /> : null)}
|
|
<Text
|
|
$secondary
|
|
align="right"
|
|
className="current-song-child current-song-index"
|
|
overflow="hidden"
|
|
size="md"
|
|
>
|
|
{value}
|
|
</Text>
|
|
</CellContainer>
|
|
);
|
|
};
|