67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { useTypedSelector } from 'store';
|
||
|
|
import CloudIcon from 'assets/cloud.svg';
|
||
|
|
import CloudExclamationMarkIcon from 'assets/cloud-exclamation-mark.svg';
|
||
|
|
import InternalDriveIcon from 'assets/internal-drive.svg';
|
||
|
|
import useDefaultStyles from './Colors';
|
||
|
|
import { EntityId } from '@reduxjs/toolkit';
|
||
|
|
import Svg, { Circle } from 'react-native-svg';
|
||
|
|
|
||
|
|
interface DownloadIconProps {
|
||
|
|
trackId: EntityId;
|
||
|
|
size?: number;
|
||
|
|
fill?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
function DownloadIcon({ trackId, size = 16, fill }: DownloadIconProps) {
|
||
|
|
const defaultStyles = useDefaultStyles();
|
||
|
|
const entity = useTypedSelector((state) => state.downloads.entities[trackId]);
|
||
|
|
const iconFill = fill || defaultStyles.textHalfOpacity.color;
|
||
|
|
|
||
|
|
|
||
|
|
if (!entity) {
|
||
|
|
return (
|
||
|
|
<CloudIcon width={size} height={size} fill={iconFill} />
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const { isComplete, isFailed, progress } = entity;
|
||
|
|
|
||
|
|
if (isComplete) {
|
||
|
|
return (
|
||
|
|
<InternalDriveIcon width={size} height={size} fill={iconFill} />
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (isFailed) {
|
||
|
|
return (
|
||
|
|
<CloudExclamationMarkIcon width={size} height={size} fill={iconFill} />
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!isComplete && !isFailed) {
|
||
|
|
const radius = size / 2;
|
||
|
|
const circumference = radius * 2 * Math.PI;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Svg width={size} height={size} transform={[{ rotate: '-90deg' }]}>
|
||
|
|
<Circle
|
||
|
|
cx={radius}
|
||
|
|
cy={radius}
|
||
|
|
r={radius - 1}
|
||
|
|
stroke={iconFill}
|
||
|
|
strokeWidth={1.5}
|
||
|
|
strokeDasharray={[ circumference, circumference ]}
|
||
|
|
strokeDashoffset={circumference * (1 - progress)}
|
||
|
|
strokeLinecap='round'
|
||
|
|
fill='transparent'
|
||
|
|
/>
|
||
|
|
</Svg>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default DownloadIcon;
|