vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

add external song indicator for queue

Browse Source
This commit is contained in:
jeffvli
2026-02-07 02:14:24 -08:00
parent 86537a8d1e
commit 7cb7dfb62b
9 changed files with 76 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-list/item-table-list/columns/title-artist-column.module.css
+1 -3
View File
@@ -5,8 +5,6 @@
height: 100%;
}
.text-container {
display: grid;
grid-template-rows: 1fr 1fr;
@@ -43,7 +41,6 @@ a.title {
width: auto;
}
.artists {
display: block;
width: 100%;
@@ -65,3 +62,4 @@ a.title {
.active {
color: var(--theme-colors-primary);
}
src/renderer/components/item-list/item-table-list/columns/title-artist-column.tsx
+10 -1
View File
@@ -14,9 +14,10 @@ import {
import { useIsActiveRow } from '/@/renderer/components/item-list/item-table-list/item-table-list-context';
import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
import { ExternalSongIndicator } from '/@/shared/components/external-song-indicator/external-song-indicator';
import { Icon } from '/@/shared/components/icon/icon';
import { Text } from '/@/shared/components/text/text';
import { Folder, LibraryItem, QueueSong } from '/@/shared/types/domain-types';
import { Folder, LibraryItem, QueueSong, ServerType } from '/@/shared/types/domain-types';
export const DefaultTitleArtistColumn = (props: ItemTableListInnerColumn) => {
const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
@@ -54,6 +55,10 @@ export const DefaultTitleArtistColumn = (props: ItemTableListInnerColumn) => {
>
<Text className={styles.title} isNoSelect size="md" {...titleLinkProps}>
<ExplicitIndicator explicitStatus={item?.explicitStatus} />
<ExternalSongIndicator
isExternal={item?._serverType === ServerType.EXTERNAL}
size="sm"
/>
{item.name as string}
</Text>
<div className={styles.artists}>
@@ -123,6 +128,10 @@ export const QueueSongTitleArtistColumn = (props: ItemTableListInnerColumn) => {
{...titleLinkProps}
>
<ExplicitIndicator explicitStatus={song?.explicitStatus} />
<ExternalSongIndicator
isExternal={song?._serverType === ServerType.EXTERNAL}
size="sm"
/>
{row.name as string}
{song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
<Text
src/renderer/components/item-list/item-table-list/columns/title-column.module.css
+1
View File
@@ -23,3 +23,4 @@ a.name-container {
.active {
color: var(--theme-colors-primary);
}
src/renderer/components/item-list/item-table-list/columns/title-column.tsx
+7 -1
View File
@@ -12,8 +12,9 @@ import {
} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
import { useIsActiveRow } from '/@/renderer/components/item-list/item-table-list/item-table-list-context';
import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
import { ExternalSongIndicator } from '/@/shared/components/external-song-indicator/external-song-indicator';
import { Text } from '/@/shared/components/text/text';
import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
import { LibraryItem, QueueSong, ServerType } from '/@/shared/types/domain-types';
const TitleColumnBase = (props: ItemTableListInnerColumn) => {
const { itemType } = props;
@@ -60,6 +61,10 @@ function DefaultTitleColumn(props: ItemTableListInnerColumn) {
{...titleLinkProps}
>
<ExplicitIndicator explicitStatus={item?.explicitStatus} />
<ExternalSongIndicator
isExternal={item?._serverType === ServerType.EXTERNAL}
size="sm"
/>
{row}
</Text>
</TableColumnContainer>
@@ -106,6 +111,7 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) {
{...titleLinkProps}
>
<ExplicitIndicator explicitStatus={song?.explicitStatus} />
<ExternalSongIndicator isExternal={song?._serverType === ServerType.EXTERNAL} />
{row}
{song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
<Text
src/renderer/components/item-list/item-table-list/columns/title-combined-column.module.css
+1 -1
View File
@@ -42,7 +42,6 @@ a.title {
width: auto;
}
.artists {
display: block;
width: 100%;
@@ -94,3 +93,4 @@ a.title {
.active {
color: var(--theme-colors-primary);
}
src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
+10 -1
View File
@@ -21,9 +21,10 @@ import {
} from '/@/renderer/features/shared/components/play-button-group';
import { usePlayButtonBehavior } from '/@/renderer/store';
import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
import { ExternalSongIndicator } from '/@/shared/components/external-song-indicator/external-song-indicator';
import { Icon } from '/@/shared/components/icon/icon';
import { Text } from '/@/shared/components/text/text';
import { Folder, LibraryItem, QueueSong } from '/@/shared/types/domain-types';
import { Folder, LibraryItem, QueueSong, ServerType } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
@@ -143,6 +144,10 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
>
<Text className={styles.title} isNoSelect size="md" {...titleLinkProps}>
<ExplicitIndicator explicitStatus={item?.explicitStatus} />
<ExternalSongIndicator
isExternal={item?._serverType === ServerType.EXTERNAL}
size="sm"
/>
{item.name as string}
</Text>
<div className={styles.artists}>
@@ -294,6 +299,10 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
{...titleLinkProps}
>
<ExplicitIndicator explicitStatus={song?.explicitStatus} />
<ExternalSongIndicator
isExternal={song?._serverType === ServerType.EXTERNAL}
size="sm"
/>
{row.name as string}
{song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
<Text
src/shared/components/external-song-indicator/external-song-indicator.module.css
+9
View File
@@ -0,0 +1,9 @@
.root {
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.with-space {
margin-right: var(--theme-spacing-xs);
}
src/shared/components/external-song-indicator/external-song-indicator.tsx
+35
View File
@@ -0,0 +1,35 @@
import clsx from 'clsx';
import { ComponentPropsWithoutRef } from 'react';
import styles from './external-song-indicator.module.css';
import { Icon } from '/@/shared/components/icon/icon';
export interface ExternalSongIndicatorProps extends ComponentPropsWithoutRef<'span'> {
isExternal: boolean | null | undefined;
size?: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
withSpace?: boolean;
}
export const ExternalSongIndicator = ({
className,
isExternal,
size = 'lg',
withSpace = true,
...rest
}: ExternalSongIndicatorProps) => {
if (!isExternal) {
return null;
}
return (
<span
className={clsx(styles.root, className, {
[styles.withSpace]: withSpace,
})}
{...rest}
>
<Icon icon="externalSong" size={size} />
</span>
);
};
src/shared/components/icon/icon.tsx
+2
View File
@@ -115,6 +115,7 @@ import {
LuWifi,
LuWifiOff,
LuX,
LuYoutube,
} from 'react-icons/lu';
import { MdOutlineVisibility, MdOutlineVisibilityOff } from 'react-icons/md';
import { PiMouseLeftClickFill, PiMouseRightClickFill } from 'react-icons/pi';
@@ -173,6 +174,7 @@ export const AppIcon = {
error: LuShieldAlert,
expand: LuExpand,
externalLink: LuExternalLink,
externalSong: LuYoutube,
favorite: LuHeart,
fileJson: LuFileJson,
filter: LuListFilter,