antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 10:23:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Lint files based on updated rules

Browse source
This commit is contained in:
jeffvli 2023-09-15 20:42:38 -07:00
parent d45b01625b
commit ec457d5125
57 changed files with 153 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/renderer/features/action-required/components/action-required-container.tsx
View file

@ -1,9 +1,10 @@
import { Stack, Group } from '@mantine/core';
import { RiAlertFill } from 'react-icons/ri';
import { Text } from '/@/renderer/components';
import { ReactNode } from 'react';
interface ActionRequiredContainerProps {
children: React.ReactNode;
children: ReactNode;
title: string;
}

2
src/renderer/features/artists/components/album-artist-detail-content.tsx
View file

@ -50,7 +50,7 @@ const DetailContainer = styled.div`
overflow: hidden;
.ag-theme-alpine-dark {
--ag-header-background-color: rgba(0, 0, 0, 0%) !important;
--ag-header-background-color: rgb(0 0 0 / 0%) !important;
}
`;

2
src/renderer/features/lyrics/components/lyrics-search-form.tsx
View file

@ -17,8 +17,8 @@ const SearchItem = styled.button`
all: unset;
box-sizing: border-box !important;
padding: 0.5rem;
border-radius: 5px;
cursor: pointer;
border-radius: 5px;
&:hover,
&:focus-visible {

14
src/renderer/features/lyrics/lyric-line.tsx
View file

@ -10,12 +10,14 @@ interface LyricLineProps extends ComponentPropsWithoutRef<'div'> {
}
const StyledText = styled(TextTitle)<TitleProps & { $alignment: string; $fontSize: number }>`
color: var(--main-fg);
font-weight: 600;
text-align: ${(props) => props.$alignment};
font-size: ${(props) => props.$fontSize}px;
opacity: 0.5;
padding: 0 1rem;
font-size: ${(props) => props.$fontSize}px;
font-weight: 600;
color: var(--main-fg);
text-align: ${(props) => props.$alignment};
opacity: 0.5;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
&.active {
opacity: 1;
@ -24,8 +26,6 @@ const StyledText = styled(TextTitle)<TitleProps & { $alignment: string; $fontSiz
&.unsynchronized {
opacity: 1;
}
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
`;
export const LyricLine = ({ text, alignment, fontSize, ...props }: LyricLineProps) => {

4
src/renderer/features/lyrics/lyrics.tsx
View file

@ -65,8 +65,8 @@ const ScrollContainer = styled(motion.div)`
mask-image: linear-gradient(
180deg,
transparent 5%,
rgba(0, 0, 0, 100%) 20%,
rgba(0, 0, 0, 100%) 85%,
rgb(0 0 0 / 100%) 20%,
rgb(0 0 0 / 100%) 85%,
transparent 95%
);

6
src/renderer/features/lyrics/synchronized-lyrics.tsx
View file

@ -28,12 +28,12 @@ const SynchronizedLyricsContainer = styled.div<{ $gap: number }>`
mask-image: linear-gradient(
180deg,
transparent 5%,
rgba(0, 0, 0, 100%) 20%,
rgba(0, 0, 0, 100%) 85%,
rgb(0 0 0 / 100%) 20%,
rgb(0 0 0 / 100%) 85%,
transparent 95%
);
@media screen and (max-width: 768px) {
@media screen and (width <= 768px) {
padding: 5vh 0;
}
`;

6
src/renderer/features/lyrics/unsynchronized-lyrics.tsx
View file

@ -21,12 +21,12 @@ const UnsynchronizedLyricsContainer = styled.div<{ $gap: number }>`
mask-image: linear-gradient(
180deg,
transparent 5%,
rgba(0, 0, 0, 100%) 20%,
rgba(0, 0, 0, 100%) 85%,
rgb(0 0 0 / 100%) 20%,
rgb(0 0 0 / 100%) 85%,
transparent 95%
);
@media screen and (max-width: 768px) {
@media screen and (width <= 768px) {
padding: 5vh 0;
}
`;

4
src/renderer/features/player/components/center-controls.tsx
View file

@ -62,7 +62,7 @@ const SliderValueWrapper = styled.div<{ position: 'left' | 'right' }>`
justify-content: center;
max-width: 50px;
@media (max-width: 768px) {
@media (width <= 768px) {
display: none;
}
`;
@ -80,7 +80,7 @@ const ControlsContainer = styled.div`
justify-content: center;
height: 35px;
@media (max-width: 768px) {
@media (width <= 768px) {
${ButtonsContainer} {
gap: 0;
}

19
src/renderer/features/player/components/full-screen-player-image.tsx
View file

@ -18,13 +18,12 @@ import {
} from '/@/renderer/store';
const Image = styled(motion.img)<{ $useAspectRatio: boolean }>`
position: absolute;
width: 100%;
height: 100%;
object-fit: ${({ $useAspectRatio }) => ($useAspectRatio ? 'contain' : 'cover')}};
object-position: 50% 100%;
border-radius: 5px;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 40%)) drop-shadow(0 0 5px rgba(0, 0, 0, 40%));
position: absolute;
height: 100%;
object-fit: ${({ $useAspectRatio }) => ($useAspectRatio ? 'contain' : 'cover')};
object-position: 50% 100%;
filter: drop-shadow(0 0 5px rgb(0 0 0 / 40%)) drop-shadow(0 0 5px rgb(0 0 0 / 40%));
border-radius: 5px;
`;
const ImageContainer = styled(motion.div)`
@ -32,8 +31,8 @@ const ImageContainer = styled(motion.div)`
display: flex;
align-items: flex-end;
max-width: 100%;
aspect-ratio: 1/1;
height: 65%;
aspect-ratio: 1/1;
margin-bottom: 1rem;
`;
@ -42,8 +41,8 @@ interface TransparentMetadataContainer {
}
const MetadataContainer = styled(Stack)<TransparentMetadataContainer>`
background: rgba(var(--main-bg-transparent), ${({ opacity }) => opacity}%);
padding: 1rem;
background: rgb(var(--main-bg-transparent) ${({ opacity }) => opacity}%);
border-radius: 5px;
h1 {
@ -52,7 +51,7 @@ const MetadataContainer = styled(Stack)<TransparentMetadataContainer>`
`;
const PlayerContainer = styled(Flex)`
@media screen and (max-height: 640px) {
@media screen and (height <= 640px) {
.full-screen-player-image-metadata {
display: none;
height: 100%;

10
src/renderer/features/player/components/full-screen-player-queue.tsx
View file

@ -17,9 +17,9 @@ const QueueContainer = styled.div`
height: 100%;
.ag-theme-alpine-dark {
--ag-header-background-color: rgba(0, 0, 0, 0%) !important;
--ag-background-color: rgba(0, 0, 0, 0%) !important;
--ag-odd-row-background-color: rgba(0, 0, 0, 0%) !important;
--ag-header-background-color: rgb(0 0 0 / 0%) !important;
--ag-background-color: rgb(0 0 0 / 0%) !important;
--ag-odd-row-background-color: rgb(0 0 0 / 0%) !important;
}
.ag-header {
@ -46,11 +46,11 @@ interface TransparendGridContainerProps {
}
const GridContainer = styled.div<TransparendGridContainerProps>`
padding: 1rem;
background: rgba(var(--main-bg-transparent), ${({ opacity }) => opacity}%);
display: grid;
grid-template-rows: auto minmax(0, 1fr);
grid-template-columns: 1fr;
padding: 1rem;
background: rgb(var(--main-bg-transparent) ${({ opacity }) => opacity}%);
border-radius: 5px;
`;

4
src/renderer/features/player/components/full-screen-player.tsx
View file

@ -38,7 +38,7 @@ const Container = styled(motion.div)`
justify-content: center;
padding: 2rem;
@media screen and (max-width: 768px) {
@media screen and (width <= 768px) {
padding: 2rem 2rem 1rem;
}
`;
@ -52,7 +52,7 @@ const ResponsiveContainer = styled.div`
max-width: 2560px;
margin-top: 5rem;
@media screen and (max-width: 768px) {
@media screen and (width <= 768px) {
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
grid-template-columns: minmax(0, 1fr);
margin-top: 0;

10
src/renderer/features/player/components/left-controls.tsx
View file

@ -41,9 +41,9 @@ const Image = styled(motion.div)`
position: relative;
width: 60px;
height: 60px;
background-color: var(--placeholder-bg);
cursor: pointer;
filter: drop-shadow(0 5px 6px rgb(0, 0, 0, 50%));
background-color: var(--placeholder-bg);
filter: drop-shadow(0 5px 6px rgb(0 0 0 / 50%));
${fadeIn};
animation: fadein 0.2s ease-in-out;
@ -68,10 +68,10 @@ const LineItem = styled.div<{ $secondary?: boolean }>`
width: 95%;
max-width: 20vw;
overflow: hidden;
color: ${(props) => props.$secondary && 'var(--main-fg-secondary)'};
line-height: 1.3;
white-space: nowrap;
color: ${(props) => props.$secondary && 'var(--main-fg-secondary)'};
text-overflow: ellipsis;
white-space: nowrap;
a {
color: ${(props) => props.$secondary && 'var(--text-secondary)'};
@ -84,7 +84,7 @@ const LeftControlsContainer = styled.div`
height: 100%;
padding-left: 1rem;
@media (max-width: 640px) {
@media (width <= 640px) {
${ImageWrapper} {
display: none;
}

4
src/renderer/features/player/components/player-button.tsx
View file

@ -73,14 +73,14 @@ const ButtonTertiaryVariant = css`
type StyledPlayerButtonProps = Omit<PlayerButtonProps, 'icon'>;
const StyledPlayerButton = styled(UnstyledButton)<StyledPlayerButtonProps>`
all: unset;
display: flex;
align-items: center;
width: 100%;
padding: 0.5rem;
overflow: visible;
background: var(--playerbar-btn-bg-hover);
all: unset;
cursor: default;
background: var(--playerbar-btn-bg-hover);
button {
display: flex;

2
src/renderer/features/player/components/playerbar.tsx
View file

@ -30,7 +30,7 @@ const PlayerbarControlsGrid = styled.div`
gap: 1rem;
height: 100%;
@media (max-width: 768px) {
@media (width <= 768px) {
grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 0.5fr);
}
`;

2
src/renderer/features/playlists/components/playlist-detail-content.tsx
View file

@ -36,7 +36,7 @@ const ContentContainer = styled.div`
overflow: hidden;
.ag-theme-alpine-dark {
--ag-header-background-color: rgba(0, 0, 0, 0%) !important;
--ag-header-background-color: rgb(0 0 0 / 0%) !important;
}
`;

3
src/renderer/features/playlists/components/playlist-list-table-view.tsx
View file

@ -1,3 +1,4 @@
import { MutableRefObject } from 'react';
import { RowDoubleClickedEvent } from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { generatePath, useNavigate } from 'react-router';
@ -11,7 +12,7 @@ import { useCurrentServer, useGeneralSettings } from '/@/renderer/store';
interface PlaylistListTableViewProps {
itemCount?: number;
tableRef: React.MutableRefObject<AgGridReactType | null>;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const PlaylistListTableView = ({ tableRef, itemCount }: PlaylistListTableViewProps) => {

8
src/renderer/features/search/components/command.tsx
View file

@ -15,10 +15,10 @@ export const Command = styled(Cmdk)`
input[cmdk-input] {
width: 100%;
height: 1.5rem;
margin-bottom: 1rem;
padding: 1.3rem 0.5rem;
color: var(--input-fg);
margin-bottom: 1rem;
font-family: var(--content-font-family);
color: var(--input-fg);
background: var(--input-bg);
border: none;
border-radius: 5px;
@ -45,11 +45,11 @@ export const Command = styled(Cmdk)`
gap: 0.5rem;
align-items: center;
padding: 0.5rem;
color: var(--btn-default-fg);
font-family: var(--content-font-family);
color: var(--btn-default-fg);
cursor: pointer;
background: var(--btn-default-bg);
border-radius: 5px;
cursor: pointer;
svg {
width: 1.2rem;

2
src/renderer/features/search/components/library-command-item.tsx
View file

@ -17,10 +17,10 @@ const Item = styled(Flex)``;
const ItemGrid = styled.div<{ height: number }>`
display: grid;
grid-auto-columns: 1fr;
grid-template-areas: 'image info';
grid-template-rows: 1fr;
grid-template-columns: ${(props) => props.height}px minmax(0, 1fr);
grid-auto-columns: 1fr;
gap: 0.5rem;
width: 100%;
max-width: 100%;

1
src/renderer/features/servers/components/server-list.tsx
View file

@ -18,6 +18,7 @@ export const ServerList = () => {
const handleAddServerModal = () => {
openContextModal({
innerProps: {
// eslint-disable-next-line react/no-unstable-nested-components
modalBody: (vars: ContextModalVars) => (
<AddServerForm onCancel={() => vars.context.closeModal(vars.id)} />
),

6
src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx
View file

@ -1,4 +1,4 @@
import { useCallback, useMemo, useState } from 'react';
import { useCallback, useMemo, useState, KeyboardEvent, ChangeEvent } from 'react';
import { Group } from '@mantine/core';
import isElectron from 'is-electron';
import debounce from 'lodash/debounce';
@ -50,7 +50,7 @@ export const HotkeyManagerSettings = () => {
const [selected, setSelected] = useState<BindingActions | null>(null);
const debouncedSetHotkey = debounce(
(binding: BindingActions, e: React.KeyboardEvent<HTMLInputElement>) => {
(binding: BindingActions, e: KeyboardEvent<HTMLInputElement>) => {
e.preventDefault();
const IGNORED_KEYS = ['Control', 'Alt', 'Shift', 'Meta', ' ', 'Escape'];
const keys = [];
@ -101,7 +101,7 @@ export const HotkeyManagerSettings = () => {
]);
const handleSetGlobalHotkey = useCallback(
(binding: BindingActions, e: React.ChangeEvent<HTMLInputElement>) => {
(binding: BindingActions, e: ChangeEvent<HTMLInputElement>) => {
const updatedBindings = {
...bindings,
[binding]: { ...bindings[binding], isGlobal: e.currentTarget.checked },

5
src/renderer/features/settings/components/settings-section.tsx
View file

@ -1,8 +1,9 @@
import { ReactNode } from 'react';
import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
export type SettingOption = {
control: JSX.Element;
description: string | JSX.Element;
control: ReactNode;
description: string | ReactNode;
isHidden?: boolean;
note?: string;
title: string;

2
src/renderer/features/shared/components/filter-bar.tsx
View file

@ -5,7 +5,7 @@ import { Paper } from '/@/renderer/components';
const StyledFilterBar = styled(Paper)`
z-index: 1;
padding: 1rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 65%);
box-shadow: 0 5px 15px rgb(0 0 0 / 65%);
`;
export const FilterBar = ({ children, ...props }: PaperProps) => {

4
src/renderer/features/shared/components/library-background-overlay.tsx
View file

@ -6,9 +6,9 @@ export const LibraryBackgroundOverlay = styled.div<{ backgroundColor?: string }>
width: 100%;
height: 20vh;
min-height: 200px;
pointer-events: none;
user-select: none;
background: ${(props) => props.backgroundColor};
background-image: var(--bg-subheader-overlay);
opacity: 0.3;
user-select: none;
pointer-events: none;
`;

2
src/renderer/features/shared/components/resize-handle.tsx
View file

@ -27,7 +27,7 @@ export const ResizeHandle = styled.div<{
left: ${(props) => props.placement === 'left' && 0};
width: 1px;
height: 100%;
background-color: var(--sidebar-handle-bg);
content: '';
background-color: var(--sidebar-handle-bg);
}
`;

16
src/renderer/features/sidebar/components/collapsed-sidebar-item.tsx
View file

@ -1,6 +1,6 @@
import { createPolymorphicComponent, Flex } from '@mantine/core';
import { motion } from 'framer-motion';
import { forwardRef } from 'react';
import { forwardRef, ReactNode } from 'react';
import { useMatch } from 'react-router';
import styled from 'styled-components';
import { Text } from '/@/renderer/components';
@ -9,11 +9,11 @@ const Container = styled(Flex)<{ $active?: boolean; $disabled?: boolean }>`
position: relative;
width: 100%;
padding: 0.9rem 0.3rem;
border-right: var(--sidebar-border);
cursor: ${(props) => (props.$disabled ? 'default' : 'pointer')};
opacity: ${(props) => props.$disabled && 0.6};
user-select: ${(props) => (props.$disabled ? 'none' : 'initial')};
pointer-events: ${(props) => (props.$disabled ? 'none' : 'all')};
cursor: ${(props) => (props.$disabled ? 'default' : 'pointer')};
user-select: ${(props) => (props.$disabled ? 'none' : 'initial')};
border-right: var(--sidebar-border);
opacity: ${(props) => props.$disabled && 0.6};
svg {
fill: ${(props) => (props.$active ? 'var(--primary-color)' : 'var(--sidebar-fg)')};
@ -44,9 +44,9 @@ const Container = styled(Flex)<{ $active?: boolean; $disabled?: boolean }>`
const TextWrapper = styled.div`
width: 100%;
overflow: hidden;
white-space: nowrap;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
`;
const ActiveTabIndicator = styled(motion.div)`
@ -63,9 +63,9 @@ const ActiveTabIndicator = styled(motion.div)`
`;
interface CollapsedSidebarItemProps {
activeIcon: React.ReactNode;
activeIcon: ReactNode;
disabled?: boolean;
icon: React.ReactNode;
icon: ReactNode;
label: string;
route?: string;
}

2
src/renderer/features/sidebar/components/collapsed-sidebar.tsx
View file

@ -42,7 +42,7 @@ const SidebarContainer = styled(motion.div)<{ windowBarStyle: Platform }>`
max-height: ${(props) =>
props.windowBarStyle === Platform.WEB || props.windowBarStyle === Platform.LINUX
? 'calc(100vh - 149px)'
: 'calc(100vh - 119px)'}; // Playerbar (90px), titlebar (65px), windowbar (30px)
: 'calc(100vh - 119px)'};
user-select: none;
`;

4
src/renderer/features/sidebar/components/sidebar-item.tsx
View file

@ -12,8 +12,8 @@ interface ListItemProps extends FlexProps {
const StyledItem = styled(Flex)`
width: 100%;
font-weight: 600;
font-family: var(--content-font-family);
font-weight: 600;
&:focus-visible {
border: 1px solid var(--primary-color);
@ -34,8 +34,8 @@ const ItemStyle = css`
`;
const _ItemLink = styled(StyledItem)<LinkProps & { disabled?: boolean }>`
opacity: ${(props) => props.disabled && 0.6};
pointer-events: ${(props) => props.disabled && 'none'};
opacity: ${(props) => props.disabled && 0.6};
&:focus-visible {
border: 1px solid var(--primary-color);