mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-01 02:13:33 +00:00
Convert play icon from base64 to svg
This commit is contained in:
jeffvli
parent
8a53fab751
commit
b28fe4cbc9
8 changed files with 204 additions and 37 deletions
|
|
@ -2,9 +2,145 @@ import type { ICellRendererParams } from '@ag-grid-community/core';
|
|||
import { Text } from '/@/renderer/components/text';
|
||||
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
|
||||
|
||||
export const RowIndexCell = ({ value }: ICellRendererParams) => {
|
||||
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 isFocused = eGridCell.classList.contains('focused');
|
||||
const isCurrentSong =
|
||||
eGridCell.classList.contains('current-song') ||
|
||||
eGridCell.classList.contains('current-playlist-song');
|
||||
|
||||
return (
|
||||
<CellContainer $position="right">
|
||||
{isFocused && isCurrentSong ? <AnimatedSvg /> : isCurrentSong ? <StaticSvg /> : null}
|
||||
<Text
|
||||
$secondary
|
||||
align="right"
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ export type AgGridFetchFn<TResponse, TFilter> = (
|
|||
) => Promise<TResponse>;
|
||||
|
||||
interface UseAgGridProps<TFilter> {
|
||||
columnType?: 'albumDetail' | 'generic';
|
||||
contextMenu: SetContextMenuItems;
|
||||
customFilters?: Partial<TFilter>;
|
||||
isClientSideSort?: boolean;
|
||||
|
|
@ -52,6 +53,7 @@ export const useVirtualTable = <TFilter>({
|
|||
customFilters,
|
||||
isSearchParams,
|
||||
isClientSideSort,
|
||||
columnType,
|
||||
}: UseAgGridProps<TFilter>) => {
|
||||
const queryClient = useQueryClient();
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -75,8 +77,8 @@ export const useVirtualTable = <TFilter>({
|
|||
const isPaginationEnabled = properties.display === ListDisplayType.TABLE_PAGINATED;
|
||||
|
||||
const columnDefs: ColDef[] = useMemo(() => {
|
||||
return getColumnDefs(properties.table.columns, true);
|
||||
}, [properties.table.columns]);
|
||||
return getColumnDefs(properties.table.columns, true, columnType);
|
||||
}, [columnType, properties.table.columns]);
|
||||
|
||||
const defaultColumnDefs: ColDef = useMemo(() => {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ import dayjs from 'dayjs';
|
|||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import formatDuration from 'format-duration';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import isElectron from 'is-electron';
|
||||
import { generatePath } from 'react-router';
|
||||
import styled from 'styled-components';
|
||||
import { AlbumArtistCell } from '/@/renderer/components/virtual-table/cells/album-artist-cell';
|
||||
|
|
@ -268,8 +267,40 @@ const tableColumns: { [key: string]: ColDef } = {
|
|||
rowIndex: {
|
||||
cellClass: 'row-index',
|
||||
cellClassRules: {
|
||||
'current-playlist-song': (params) => {
|
||||
return params.data?.uniqueId === params.context?.currentSong?.uniqueId;
|
||||
},
|
||||
'current-song': (params) => {
|
||||
return params.data?.uniqueId === params.context?.currentSong?.uniqueId;
|
||||
},
|
||||
focused: (params) => {
|
||||
return isElectron() && params.context?.isFocused;
|
||||
return params.context?.isFocused;
|
||||
},
|
||||
playing: (params) => {
|
||||
return params.context?.status === PlayerStatus.PLAYING;
|
||||
},
|
||||
},
|
||||
cellRenderer: RowIndexCell,
|
||||
colId: TableColumn.ROW_INDEX,
|
||||
headerComponent: (params: IHeaderParams) =>
|
||||
GenericTableHeader(params, { position: 'right', preset: 'rowIndex' }),
|
||||
suppressSizeToFit: true,
|
||||
valueGetter: (params) => {
|
||||
return (params.node?.rowIndex || 0) + 1;
|
||||
},
|
||||
width: 65,
|
||||
},
|
||||
rowIndexGeneric: {
|
||||
cellClass: 'row-index',
|
||||
cellClassRules: {
|
||||
'current-song': (params) => {
|
||||
return (
|
||||
params.data?.id === params.context?.currentSong?.id &&
|
||||
params.data?.albumId === params.context?.currentSong?.albumId
|
||||
);
|
||||
},
|
||||
focused: (params) => {
|
||||
return params.context?.isFocused;
|
||||
},
|
||||
playing: (params) => {
|
||||
return params.context?.status === PlayerStatus.PLAYING;
|
||||
|
|
@ -341,8 +372,14 @@ const tableColumns: { [key: string]: ColDef } = {
|
|||
trackNumberDetail: {
|
||||
cellClass: 'row-index',
|
||||
cellClassRules: {
|
||||
'current-song': (params) => {
|
||||
return (
|
||||
params.data?.id === params.context?.currentSong?.id &&
|
||||
params.data?.albumId === params.context?.currentSong?.albumId
|
||||
);
|
||||
},
|
||||
focused: (params) => {
|
||||
return isElectron() && params.context?.isFocused;
|
||||
return params.context?.isFocused;
|
||||
},
|
||||
playing: (params) => {
|
||||
return params.context?.status === PlayerStatus.PLAYING;
|
||||
|
|
@ -394,16 +431,20 @@ export const getColumnDef = (column: TableColumn) => {
|
|||
export const getColumnDefs = (
|
||||
columns: PersistedTableColumn[],
|
||||
useWidth?: boolean,
|
||||
type?: 'albumDetail',
|
||||
type?: 'albumDetail' | 'generic',
|
||||
) => {
|
||||
const columnDefs: ColDef[] = [];
|
||||
for (const column of columns) {
|
||||
let presetColumn = tableColumns[column.column as keyof typeof tableColumns];
|
||||
|
||||
if (type === 'albumDetail' && column.column === TableColumn.TRACK_NUMBER) {
|
||||
if (column.column === TableColumn.TRACK_NUMBER && type === 'albumDetail') {
|
||||
presetColumn = tableColumns['trackNumberDetail' as keyof typeof tableColumns];
|
||||
}
|
||||
|
||||
if (column.column === TableColumn.ROW_INDEX && type === 'generic') {
|
||||
presetColumn = tableColumns['rowIndexGeneric' as keyof typeof tableColumns];
|
||||
}
|
||||
|
||||
if (presetColumn) {
|
||||
columnDefs.push({
|
||||
...presetColumn,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue