From 351f3f06d76d7a98fd9e376509b205ac05710757 Mon Sep 17 00:00:00 2001 From: Bamdad Sabbagh Date: Thu, 11 Jul 2024 23:51:43 +0200 Subject: [PATCH] feat: update styling + apply linting rules --- src/animations/fade/fade.animation.test.tsx | 3 +- src/animations/fade/fade.animation.tsx | 2 +- .../with-time-loop/with-time-loop.tsx | 4 +- src/app/hooks/use-app/use-app.test.ts | 1 + .../use-google-analytics.test.ts | 3 +- .../use-google-analytics.ts | 3 +- src/app/shared.styles.ts | 53 ++++++++++-- src/app/styles/global.js | 3 +- src/app/styles/styles.ts | 18 ----- src/components/audio/audio.component.tsx | 3 +- .../audio/hooks/use-audio-component.ts | 17 ++-- .../audio/hooks/use-audio-load.test.ts | 3 +- src/components/audio/hooks/use-audio-load.ts | 2 +- .../audio/hooks/use-audio-loop.test.ts | 3 +- src/components/audio/hooks/use-audio-loop.ts | 2 +- .../audio/hooks/use-audio-pitch.test.ts | 3 +- .../audio/hooks/use-audio-play-pause.test.ts | 3 +- .../audio/hooks/use-audio-play-pause.ts | 2 +- .../hooks/use-audio-playback-rate.test.ts | 3 +- .../audio/hooks/use-audio-playback-rate.ts | 2 +- .../audio/hooks/use-audio-progress.ts | 4 +- .../audio/hooks/use-audio-seek.test.ts | 3 +- src/components/audio/hooks/use-audio-seek.ts | 2 +- .../audio/hooks/use-audio-volume.test.ts | 3 +- .../audio/hooks/use-audio-volume.ts | 2 +- .../audio/hooks/use-keyboard-toggle.test.ts | 1 + .../audio/hooks/use-keyboard-toggle.ts | 3 +- src/components/form/form.component.styles.ts | 8 +- src/components/form/form.component.test.tsx | 5 +- src/components/form/form.component.tsx | 3 +- .../form/hooks/use-form-component.ts | 2 +- src/components/form/hooks/use-form-submit.ts | 5 +- .../form/hooks/use-input-refocus.test.ts | 3 +- src/components/form/hooks/use-input.test.ts | 1 + .../header/header.component.styles.ts | 12 +-- .../header/header.component.test.tsx | 3 +- .../indicator/indicator.component.tsx | 1 + .../hooks/use-indicators-component.test.ts | 1 + .../hooks/use-indicators-component.ts | 3 +- .../indicators/indicators.component.test.tsx | 5 +- .../indicators/indicators.component.tsx | 5 +- src/components/link.component.tsx | 2 +- .../components/dots/dots.component.test.tsx | 3 +- .../components/dots/dots.component.tsx | 1 + .../dots/hooks/use-dots-component.test.ts | 1 + .../dots/hooks/use-dots-component.ts | 1 + .../loading/loading.component.styles.ts | 2 - .../loading/loading.component.test.tsx | 3 +- src/components/loading/loading.component.tsx | 12 ++- src/components/meta/meta.component.test.js | 3 +- src/components/meta/meta.component.tsx | 2 +- .../screw-texture/screw-texture.component.tsx | 3 +- .../screw-texture/screw-texture.node.tsx | 3 +- .../screw-texture/screw-texture.shaders.ts | 1 + .../slider/slider.component.styles.ts | 80 +++++++++++-------- src/components/slider/slider.component.tsx | 16 ++-- .../table/components/cell/cell.component.tsx | 18 ++--- .../table/hooks/use-table-component.ts | 2 +- .../table/table.component.styles.ts | 9 +-- src/components/table/table.component.tsx | 49 ++++++------ .../text-link/text-link.component.styles.ts | 1 + .../text-link/text-link.component.tsx | 1 + .../title/title.component.styles.ts | 6 +- src/components/title/title.component.test.tsx | 3 +- src/components/title/title.component.tsx | 1 + src/hooks/use-autoplay.test.ts | 1 + src/hooks/use-cache.ts | 1 + src/hooks/use-redirect-auto.ts | 2 +- src/layouts/default/default.layout.styles.ts | 49 +++--------- src/layouts/default/default.layout.test.tsx | 5 +- src/layouts/default/default.layout.tsx | 4 +- src/layouts/player/hooks/use-player-layout.ts | 13 +-- .../player/hooks/use-player-loading.ts | 5 +- src/layouts/player/player.layout.tsx | 32 +++----- .../artwork/artwork.component.styles.ts | 5 +- .../components/artwork/artwork.component.tsx | 3 +- .../components/native/native.component.tsx | 7 +- .../components/web-gl/web-gl.component.tsx | 7 +- .../play-pause-button.component.tsx | 7 +- .../repeat-button/repeat-button.component.tsx | 7 +- .../player/components/seek/seek.component.tsx | 12 +-- .../speed/hooks/use-speed-component.test.ts | 1 + .../speed/hooks/use-speed-component.ts | 3 +- .../components/speed/speed.component.test.tsx | 5 +- .../components/speed/speed.component.tsx | 3 +- .../player/components/time/time.component.tsx | 9 ++- .../components/title/title.component.tsx | 5 +- .../volume-button/volume-button.component.tsx | 9 ++- .../volume-slider/volume-slider.component.tsx | 6 +- src/modules/player/player.module.styles.ts | 6 +- src/modules/player/player.module.test.tsx | 5 +- src/modules/player/player.module.tsx | 31 +++---- src/pages-lib/404.test.tsx | 5 +- src/pages-lib/about.styles.ts | 11 +-- src/pages-lib/about.test.tsx | 5 +- src/pages-lib/index.test.tsx | 5 +- src/pages-lib/latest.test.tsx | 5 +- src/pages-lib/top.test.tsx | 5 +- src/pages-lib/youtube/[id].test.tsx | 5 +- src/pages/404.tsx | 5 +- src/pages/about.tsx | 10 +-- .../bandcamp/[artist]/[name]/[speed].tsx | 3 +- .../[username]/[trackName]/[speed].tsx | 4 +- src/pages/top.tsx | 9 ++- src/pages/youtube/[id].tsx | 2 +- src/pages/youtube/[id]/[speed].tsx | 2 +- 106 files changed, 395 insertions(+), 355 deletions(-) delete mode 100644 src/app/styles/styles.ts diff --git a/src/animations/fade/fade.animation.test.tsx b/src/animations/fade/fade.animation.test.tsx index 0133f66f..a5d7415a 100644 --- a/src/animations/fade/fade.animation.test.tsx +++ b/src/animations/fade/fade.animation.test.tsx @@ -1,5 +1,6 @@ -import React from 'react'; import {render} from '@testing-library/react'; +import React from 'react'; + import {FadeAnimation} from './fade.animation'; function Children() { diff --git a/src/animations/fade/fade.animation.tsx b/src/animations/fade/fade.animation.tsx index 02935873..1414e100 100644 --- a/src/animations/fade/fade.animation.tsx +++ b/src/animations/fade/fade.animation.tsx @@ -1,5 +1,5 @@ -import React, {ReactElement} from 'react'; import {animated, useSpring} from '@react-spring/web'; +import React, {ReactElement} from 'react'; interface FadeAnimationProps { children: string | ReactElement; diff --git a/src/app/components/with-time-loop/with-time-loop.tsx b/src/app/components/with-time-loop/with-time-loop.tsx index ad7ea7d8..f8962f74 100644 --- a/src/app/components/with-time-loop/with-time-loop.tsx +++ b/src/app/components/with-time-loop/with-time-loop.tsx @@ -1,4 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ +import hoistNonReactStatics from 'hoist-non-react-statics'; +import raf from 'raf'; import React, { JSXElementConstructor, ReactElement, @@ -6,8 +8,6 @@ import React, { useRef, useState, } from 'react'; -import raf from 'raf'; -import hoistNonReactStatics from 'hoist-non-react-statics'; /** * @param C diff --git a/src/app/hooks/use-app/use-app.test.ts b/src/app/hooks/use-app/use-app.test.ts index 2e1c4152..16fa43b4 100644 --- a/src/app/hooks/use-app/use-app.test.ts +++ b/src/app/hooks/use-app/use-app.test.ts @@ -1,4 +1,5 @@ import {renderHook} from '@testing-library/react-hooks'; + import {useApp} from './use-app'; describe('useApp', () => { diff --git a/src/app/hooks/use-google-analytics/use-google-analytics.test.ts b/src/app/hooks/use-google-analytics/use-google-analytics.test.ts index 8a0f7648..39264861 100644 --- a/src/app/hooks/use-google-analytics/use-google-analytics.test.ts +++ b/src/app/hooks/use-google-analytics/use-google-analytics.test.ts @@ -1,7 +1,8 @@ /* eslint-disable react-hooks/rules-of-hooks */ import {renderHook} from '@testing-library/react-hooks'; -import {useGoogleAnalytics} from './use-google-analytics'; + import {useRouter} from '../../../../__mocks__/next-router'; +import {useGoogleAnalytics} from './use-google-analytics'; const MOCK_EVENTS_ON = useRouter().events.on; const MOCK_EVENTS_OFF = useRouter().events.off; diff --git a/src/app/hooks/use-google-analytics/use-google-analytics.ts b/src/app/hooks/use-google-analytics/use-google-analytics.ts index 990cbf78..f6d690fd 100644 --- a/src/app/hooks/use-google-analytics/use-google-analytics.ts +++ b/src/app/hooks/use-google-analytics/use-google-analytics.ts @@ -1,5 +1,6 @@ -import {useEffect} from 'react'; import {useRouter} from 'next/router'; +import {useEffect} from 'react'; + import {GA_TRACKING_ID} from './use-google-analytics.constants'; declare global { diff --git a/src/app/shared.styles.ts b/src/app/shared.styles.ts index 49127a26..2bb7d703 100644 --- a/src/app/shared.styles.ts +++ b/src/app/shared.styles.ts @@ -1,5 +1,5 @@ import {mediaQueries} from 'src/app/styles/breakpoints'; -import {css} from 'styled-components'; +import styled, {css} from 'styled-components'; export const centerFlex = css` display: flex; @@ -7,22 +7,46 @@ export const centerFlex = css` align-items: center; `; +export const CenteredDiv = styled.div` + ${centerFlex}; +`; + const p = 14; -export const addPadding = css` - padding: ${p - 4}px ${p}px; +export const addMargins = css` + margin: ${p - 4}px ${p}px; +`; + +export const addFontSizeSmall = css` + font-size: 16px; +`; + +export const addFontSizeMedium = css` + font-size: 18px; +`; + +export const addFontSizeBig = css` + font-size: 20px; +`; + +export const addFontSizeGiant = css` + font-size: 22px; `; export const addFontSizes = css` ${mediaQueries.below.tablet} { - font-size: 20px; + ${addFontSizeSmall}; } ${mediaQueries.above.tablet} { - font-size: 24px; + ${addFontSizeMedium}; } ${mediaQueries.above.desktop} { - font-size: 28px; + ${addFontSizeBig}; + } + + ${mediaQueries.above.fullhd} { + ${addFontSizeGiant}; } `; @@ -30,3 +54,20 @@ export const addColorsDefault = css` color: ${(props) => props.theme.primary}; background: ${(props) => props.theme.background.primary}; `; + +export const addVerticalScroll = css` + overflow-x: hidden; + overflow-y: auto; + padding-right: ${p}px; +`; + +export const addHoverLink = css` + a { + transition: color 200ms ease-in-out; + + &:hover { + cursor: pointer; + color: ${(props) => props.theme.highlight}; + } + } +`; diff --git a/src/app/styles/global.js b/src/app/styles/global.js index d842468f..c45681d7 100644 --- a/src/app/styles/global.js +++ b/src/app/styles/global.js @@ -1,6 +1,7 @@ -import {createGlobalStyle} from 'styled-components'; import '@fontsource/noto-sans'; +import {createGlobalStyle} from 'styled-components'; + // noinspection CssUnusedSymbol export const Global = createGlobalStyle` html { diff --git a/src/app/styles/styles.ts b/src/app/styles/styles.ts deleted file mode 100644 index 38ce7832..00000000 --- a/src/app/styles/styles.ts +++ /dev/null @@ -1,18 +0,0 @@ -import {css} from 'styled-components'; - -export const flexCenter = css` - display: flex; - justify-content: center; - align-items: center; -`; - -export const hoverLink = css` - a { - transition: color 200ms ease-in-out; - - &:hover { - cursor: pointer; - color: ${(props) => props.theme.highlight}; - } - } -`; diff --git a/src/components/audio/audio.component.tsx b/src/components/audio/audio.component.tsx index 7008edf5..6962e680 100644 --- a/src/components/audio/audio.component.tsx +++ b/src/components/audio/audio.component.tsx @@ -1,6 +1,7 @@ import React, {ReactElement} from 'react'; -import {useAudioModule} from './hooks/use-audio-component'; + import {Invisible} from './audio.component.styles'; +import {useAudioModule} from './hooks/use-audio-component'; interface Props { url: string; diff --git a/src/components/audio/hooks/use-audio-component.ts b/src/components/audio/hooks/use-audio-component.ts index 91ec564c..29e83652 100644 --- a/src/components/audio/hooks/use-audio-component.ts +++ b/src/components/audio/hooks/use-audio-component.ts @@ -1,21 +1,22 @@ -import {RefObject, useRef} from 'react'; -import {useRouter} from 'next/router'; import {useAtom} from 'jotai'; +import {useRouter} from 'next/router'; import {useNextReplaceUrl} from 'next-replace-url'; -import {useCache} from 'src/hooks/use-cache'; -import {speedAtom} from 'src/atoms/speed.atoms'; +import {RefObject, useRef} from 'react'; import {audioTitleAtom} from 'src/atoms/audio-title.atoms'; +import {speedAtom} from 'src/atoms/speed.atoms'; +import {useCache} from 'src/hooks/use-cache'; import {getProviderFromRouter} from 'src/utils/get-provider/get-provider-from-router'; -import {useKeyboardToggle} from './use-keyboard-toggle'; + +import {useAudioBuffered} from './use-audio-buffered'; import {useAudioLoad} from './use-audio-load'; import {useAudioLoop} from './use-audio-loop'; import {useAudioPitch} from './use-audio-pitch'; -import {useAudioPlaybackRate} from './use-audio-playback-rate'; -import {useAudioVolume} from './use-audio-volume'; import {useAudioPlayPause} from './use-audio-play-pause'; +import {useAudioPlaybackRate} from './use-audio-playback-rate'; import {useAudioProgress} from './use-audio-progress'; import {useAudioSeek} from './use-audio-seek'; -import {useAudioBuffered} from './use-audio-buffered'; +import {useAudioVolume} from './use-audio-volume'; +import {useKeyboardToggle} from './use-keyboard-toggle'; interface UseAudioComponent { ref: RefObject; diff --git a/src/components/audio/hooks/use-audio-load.test.ts b/src/components/audio/hooks/use-audio-load.test.ts index 88c7f360..57dcbb9a 100644 --- a/src/components/audio/hooks/use-audio-load.test.ts +++ b/src/components/audio/hooks/use-audio-load.test.ts @@ -1,10 +1,11 @@ import {renderHook} from '@testing-library/react-hooks'; -import {useAudioLoad} from './use-audio-load'; + import { MOCK_AUDIO, MOCK_URL, SPY_AUDIO, } from './use-audio-component.test.mock'; +import {useAudioLoad} from './use-audio-load'; afterEach(() => jest.resetAllMocks()); diff --git a/src/components/audio/hooks/use-audio-load.ts b/src/components/audio/hooks/use-audio-load.ts index bb893b26..aebece28 100644 --- a/src/components/audio/hooks/use-audio-load.ts +++ b/src/components/audio/hooks/use-audio-load.ts @@ -1,5 +1,5 @@ -import {useCallback, useEffect, useState} from 'react'; import {useAtom} from 'jotai'; +import {useCallback, useEffect, useState} from 'react'; import {setDurationAtom} from 'src/atoms/duration.atoms'; import {setLoadedAtom} from 'src/atoms/load.atoms'; diff --git a/src/components/audio/hooks/use-audio-loop.test.ts b/src/components/audio/hooks/use-audio-loop.test.ts index 3bc6a7ad..b0f7e04d 100644 --- a/src/components/audio/hooks/use-audio-loop.test.ts +++ b/src/components/audio/hooks/use-audio-loop.test.ts @@ -1,6 +1,7 @@ import {renderHook} from '@testing-library/react-hooks'; -import {useAudioLoop} from './use-audio-loop'; + import {MOCK_AUDIO} from './use-audio-component.test.mock'; +import {useAudioLoop} from './use-audio-loop'; afterEach(() => jest.resetAllMocks()); diff --git a/src/components/audio/hooks/use-audio-loop.ts b/src/components/audio/hooks/use-audio-loop.ts index 7f35f031..ec77929c 100644 --- a/src/components/audio/hooks/use-audio-loop.ts +++ b/src/components/audio/hooks/use-audio-loop.ts @@ -1,5 +1,5 @@ -import {useEffect} from 'react'; import {useAtom} from 'jotai'; +import {useEffect} from 'react'; import {isRepeatingAtom} from 'src/atoms/repeat.atoms'; /** diff --git a/src/components/audio/hooks/use-audio-pitch.test.ts b/src/components/audio/hooks/use-audio-pitch.test.ts index 2550c3c6..bec40591 100644 --- a/src/components/audio/hooks/use-audio-pitch.test.ts +++ b/src/components/audio/hooks/use-audio-pitch.test.ts @@ -1,6 +1,7 @@ import {renderHook} from '@testing-library/react-hooks'; -import {useAudioPitch} from './use-audio-pitch'; + import {MOCK_AUDIO} from './use-audio-component.test.mock'; +import {useAudioPitch} from './use-audio-pitch'; declare global { interface HTMLAudioElement { diff --git a/src/components/audio/hooks/use-audio-play-pause.test.ts b/src/components/audio/hooks/use-audio-play-pause.test.ts index 88542da7..d1aa3ebc 100644 --- a/src/components/audio/hooks/use-audio-play-pause.test.ts +++ b/src/components/audio/hooks/use-audio-play-pause.test.ts @@ -1,6 +1,7 @@ import {renderHook} from '@testing-library/react-hooks'; -import {useAudioPlayPause} from './use-audio-play-pause'; + import {MOCK_AUDIO, SPY_AUDIO} from './use-audio-component.test.mock'; +import {useAudioPlayPause} from './use-audio-play-pause'; afterEach(() => jest.resetAllMocks()); diff --git a/src/components/audio/hooks/use-audio-play-pause.ts b/src/components/audio/hooks/use-audio-play-pause.ts index 1d88b155..b7d47c64 100644 --- a/src/components/audio/hooks/use-audio-play-pause.ts +++ b/src/components/audio/hooks/use-audio-play-pause.ts @@ -1,5 +1,5 @@ -import {useEffect} from 'react'; import {useAtom} from 'jotai'; +import {useEffect} from 'react'; import {isPlayingAtom} from 'src/atoms/play-pause.atoms'; /** diff --git a/src/components/audio/hooks/use-audio-playback-rate.test.ts b/src/components/audio/hooks/use-audio-playback-rate.test.ts index b58a88ae..1177014a 100644 --- a/src/components/audio/hooks/use-audio-playback-rate.test.ts +++ b/src/components/audio/hooks/use-audio-playback-rate.test.ts @@ -1,6 +1,7 @@ import {renderHook} from '@testing-library/react-hooks'; -import {useAudioPlaybackRate} from './use-audio-playback-rate'; + import {MOCK_AUDIO} from './use-audio-component.test.mock'; +import {useAudioPlaybackRate} from './use-audio-playback-rate'; afterEach(() => jest.resetAllMocks()); diff --git a/src/components/audio/hooks/use-audio-playback-rate.ts b/src/components/audio/hooks/use-audio-playback-rate.ts index 43575cdc..77437c6b 100644 --- a/src/components/audio/hooks/use-audio-playback-rate.ts +++ b/src/components/audio/hooks/use-audio-playback-rate.ts @@ -1,5 +1,5 @@ -import {useEffect} from 'react'; import {useAtom} from 'jotai'; +import {useEffect} from 'react'; import {speedAtom} from 'src/atoms/speed.atoms'; /** diff --git a/src/components/audio/hooks/use-audio-progress.ts b/src/components/audio/hooks/use-audio-progress.ts index c4edccd6..cc61b329 100644 --- a/src/components/audio/hooks/use-audio-progress.ts +++ b/src/components/audio/hooks/use-audio-progress.ts @@ -1,7 +1,7 @@ -import {useEffect} from 'react'; import {useAtom} from 'jotai'; -import {setProgressAtom} from 'src/atoms/progress.atoms'; +import {useEffect} from 'react'; import {isPlayingAtom} from 'src/atoms/play-pause.atoms'; +import {setProgressAtom} from 'src/atoms/progress.atoms'; /** * Hook to set the progress of audio element diff --git a/src/components/audio/hooks/use-audio-seek.test.ts b/src/components/audio/hooks/use-audio-seek.test.ts index 069e55b6..6011f763 100644 --- a/src/components/audio/hooks/use-audio-seek.test.ts +++ b/src/components/audio/hooks/use-audio-seek.test.ts @@ -1,6 +1,7 @@ import {renderHook} from '@testing-library/react-hooks'; -import {useAudioSeek} from './use-audio-seek'; + import {MOCK_AUDIO} from './use-audio-component.test.mock'; +import {useAudioSeek} from './use-audio-seek'; afterEach(() => jest.resetAllMocks()); diff --git a/src/components/audio/hooks/use-audio-seek.ts b/src/components/audio/hooks/use-audio-seek.ts index 1822450b..b0fa0017 100644 --- a/src/components/audio/hooks/use-audio-seek.ts +++ b/src/components/audio/hooks/use-audio-seek.ts @@ -1,5 +1,5 @@ -import {useEffect} from 'react'; import {useAtom} from 'jotai'; +import {useEffect} from 'react'; import {seekAtom} from 'src/atoms/seek.atoms'; /** diff --git a/src/components/audio/hooks/use-audio-volume.test.ts b/src/components/audio/hooks/use-audio-volume.test.ts index 75270f5b..ad1971d5 100644 --- a/src/components/audio/hooks/use-audio-volume.test.ts +++ b/src/components/audio/hooks/use-audio-volume.test.ts @@ -1,6 +1,7 @@ import {renderHook} from '@testing-library/react-hooks'; -import {useAudioVolume} from './use-audio-volume'; + import {MOCK_AUDIO, SPY_AUDIO} from './use-audio-component.test.mock'; +import {useAudioVolume} from './use-audio-volume'; afterEach(() => jest.resetAllMocks()); diff --git a/src/components/audio/hooks/use-audio-volume.ts b/src/components/audio/hooks/use-audio-volume.ts index 00f273bd..115f0166 100644 --- a/src/components/audio/hooks/use-audio-volume.ts +++ b/src/components/audio/hooks/use-audio-volume.ts @@ -1,5 +1,5 @@ -import {useEffect} from 'react'; import {useAtom} from 'jotai'; +import {useEffect} from 'react'; import {setVolumeAtom, volumeAtom} from 'src/atoms/volume.atoms'; /** diff --git a/src/components/audio/hooks/use-keyboard-toggle.test.ts b/src/components/audio/hooks/use-keyboard-toggle.test.ts index adcea879..cbb1ac07 100644 --- a/src/components/audio/hooks/use-keyboard-toggle.test.ts +++ b/src/components/audio/hooks/use-keyboard-toggle.test.ts @@ -1,4 +1,5 @@ import {renderHook} from '@testing-library/react-hooks'; + import {useKeyboardToggle} from './use-keyboard-toggle'; import {MOCK_DOCUMENT} from './use-keyboard-toggle.mock'; diff --git a/src/components/audio/hooks/use-keyboard-toggle.ts b/src/components/audio/hooks/use-keyboard-toggle.ts index fe953aab..8638d16b 100644 --- a/src/components/audio/hooks/use-keyboard-toggle.ts +++ b/src/components/audio/hooks/use-keyboard-toggle.ts @@ -1,5 +1,6 @@ -import {useEffect} from 'react'; import {useAtom} from 'jotai'; +import {useEffect} from 'react'; + import { isPlayingAtom, setPauseAtom, diff --git a/src/components/form/form.component.styles.ts b/src/components/form/form.component.styles.ts index 1f5f958c..b690f40e 100644 --- a/src/components/form/form.component.styles.ts +++ b/src/components/form/form.component.styles.ts @@ -1,11 +1,11 @@ -import {addPadding, centerFlex} from 'src/app/shared.styles'; +import {addMargins, centerFlex} from 'src/app/shared.styles'; import styled, {css} from 'styled-components'; export const Form = styled.form` - ${centerFlex} - ${addPadding} + ${centerFlex}; + ${addMargins}; flex-direction: column; - gap: 1em; + gap: 14px; `; const formElement = css` diff --git a/src/components/form/form.component.test.tsx b/src/components/form/form.component.test.tsx index ea7fe338..cb7919bf 100644 --- a/src/components/form/form.component.test.tsx +++ b/src/components/form/form.component.test.tsx @@ -1,9 +1,10 @@ -import React from 'react'; import {render as defaultRender, screen} from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import React from 'react'; + +import {ThemeWrapper} from '../../app/components/theme-wrapper/theme-wrapper'; import {FormComponent} from './form.component'; import {MOCK_STATE} from './form.component.test.mock'; -import {ThemeWrapper} from '../../app/components/theme-wrapper/theme-wrapper'; const render = () => { const {link, handleSubmit} = MOCK_STATE(); diff --git a/src/components/form/form.component.tsx b/src/components/form/form.component.tsx index 65fb900a..3b8f9874 100644 --- a/src/components/form/form.component.tsx +++ b/src/components/form/form.component.tsx @@ -1,5 +1,6 @@ +import Image from 'next/legacy/image'; import React, {ReactElement} from 'react'; -import Image from "next/legacy/image"; + import {Form, GoogleContainer, ImageContainer, Input, Submit} from './form.component.styles'; import {useFormComponent} from './hooks/use-form-component'; diff --git a/src/components/form/hooks/use-form-component.ts b/src/components/form/hooks/use-form-component.ts index 6787a039..13eb1e33 100644 --- a/src/components/form/hooks/use-form-component.ts +++ b/src/components/form/hooks/use-form-component.ts @@ -1,5 +1,5 @@ -import {UseInput, useInput} from './use-input'; import {UseFormSubmit, useFormSubmit} from './use-form-submit'; +import {UseInput, useInput} from './use-input'; interface UseFormComponent { link: UseInput; diff --git a/src/components/form/hooks/use-form-submit.ts b/src/components/form/hooks/use-form-submit.ts index f7a0dfe3..34b32473 100644 --- a/src/components/form/hooks/use-form-submit.ts +++ b/src/components/form/hooks/use-form-submit.ts @@ -1,9 +1,10 @@ -import {FormEvent, useCallback} from 'react'; import {useRouter} from 'next/router'; +import {FormEvent, useCallback} from 'react'; + import {validateForm} from '../utils/validate-form'; -import {UseInput} from './use-input'; import {getClientToken} from './get-client-token'; import {queryTokenApi} from './query-token-api'; +import {UseInput} from './use-input'; interface UseFormSubmitOptions { link: UseInput; diff --git a/src/components/form/hooks/use-input-refocus.test.ts b/src/components/form/hooks/use-input-refocus.test.ts index 1c219d38..9c3bf2ff 100644 --- a/src/components/form/hooks/use-input-refocus.test.ts +++ b/src/components/form/hooks/use-input-refocus.test.ts @@ -1,6 +1,7 @@ import {renderHook} from '@testing-library/react-hooks'; -import {useInputRefocus} from './use-input-refocus'; + import {MOCK_LINK, SPY_LINK} from './use-form-component.test.mock'; +import {useInputRefocus} from './use-input-refocus'; describe('useInputRefocus', () => { describe('events', () => { diff --git a/src/components/form/hooks/use-input.test.ts b/src/components/form/hooks/use-input.test.ts index 08c7c475..6dc62eb6 100644 --- a/src/components/form/hooks/use-input.test.ts +++ b/src/components/form/hooks/use-input.test.ts @@ -1,4 +1,5 @@ import {act, renderHook} from '@testing-library/react-hooks'; + import {useInput} from './use-input'; describe('useInput', () => { diff --git a/src/components/header/header.component.styles.ts b/src/components/header/header.component.styles.ts index b3c7cdff..f7df45d6 100644 --- a/src/components/header/header.component.styles.ts +++ b/src/components/header/header.component.styles.ts @@ -1,21 +1,21 @@ import {Icon} from '@iconify/react'; -import {addPadding, centerFlex} from 'src/app/shared.styles'; -import {hoverLink} from 'src/app/styles/styles'; +import {addHoverLink, addMargins, centerFlex} from 'src/app/shared.styles'; import styled from 'styled-components'; const p = 14; export const Container = styled.div` ${centerFlex}; - ${addPadding}; + ${addMargins}; `; const Side = styled.div` + position: fixed; ${centerFlex}; - gap: 3px; + gap: 0.1em; - position: fixed; - ${hoverLink}; + ${addHoverLink}; + font-size: 120%; `; export const Left = styled(Side)` diff --git a/src/components/header/header.component.test.tsx b/src/components/header/header.component.test.tsx index 7ca8f48d..10bbc666 100644 --- a/src/components/header/header.component.test.tsx +++ b/src/components/header/header.component.test.tsx @@ -1,5 +1,6 @@ -import React from 'react'; import {render as defaultRender, screen} from '@testing-library/react'; +import React from 'react'; + import {HeaderComponent} from './header.component'; const render = () => { diff --git a/src/components/indicators/components/indicator/indicator.component.tsx b/src/components/indicators/components/indicator/indicator.component.tsx index 527fa33b..8168a99e 100644 --- a/src/components/indicators/components/indicator/indicator.component.tsx +++ b/src/components/indicators/components/indicator/indicator.component.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import {InputTitle, InputValue, Wrapper} from './indicator.component.styles'; interface IndicatorComponentProps { diff --git a/src/components/indicators/hooks/use-indicators-component.test.ts b/src/components/indicators/hooks/use-indicators-component.test.ts index 7bdfaa50..cba6571b 100644 --- a/src/components/indicators/hooks/use-indicators-component.test.ts +++ b/src/components/indicators/hooks/use-indicators-component.test.ts @@ -1,4 +1,5 @@ import {renderHook} from '@testing-library/react-hooks'; + import {useIndicatorsComponent} from './use-indicators-component'; describe('useIndicatorsComponent', () => { diff --git a/src/components/indicators/hooks/use-indicators-component.ts b/src/components/indicators/hooks/use-indicators-component.ts index 58e13c4d..42944b1e 100644 --- a/src/components/indicators/hooks/use-indicators-component.ts +++ b/src/components/indicators/hooks/use-indicators-component.ts @@ -1,7 +1,8 @@ +import {useAtom} from 'jotai'; import {useMemo} from 'react'; import speedToPercentage from 'speed-to-percentage'; import speedToSemitones from 'speed-to-semitones'; -import {useAtom} from 'jotai'; + import {speedAtom} from '../../../atoms/speed.atoms'; interface UseIndicatorsComponent { diff --git a/src/components/indicators/indicators.component.test.tsx b/src/components/indicators/indicators.component.test.tsx index 3bb4c899..59269336 100644 --- a/src/components/indicators/indicators.component.test.tsx +++ b/src/components/indicators/indicators.component.test.tsx @@ -1,7 +1,8 @@ -import React from 'react'; import {render as defaultRender, screen} from '@testing-library/react'; -import {IndicatorsComponent} from './indicators.component'; +import React from 'react'; + import {ThemeWrapper} from '../../app/components/theme-wrapper/theme-wrapper'; +import {IndicatorsComponent} from './indicators.component'; const render = () => { const {container} = defaultRender( diff --git a/src/components/indicators/indicators.component.tsx b/src/components/indicators/indicators.component.tsx index 1a5866ab..c834042e 100644 --- a/src/components/indicators/indicators.component.tsx +++ b/src/components/indicators/indicators.component.tsx @@ -1,7 +1,8 @@ import React, {ReactElement} from 'react'; -import {Container} from './indicators.component.styles'; -import {useIndicatorsComponent} from './hooks/use-indicators-component'; + import {IndicatorComponent} from './components/indicator/indicator.component'; +import {useIndicatorsComponent} from './hooks/use-indicators-component'; +import {Container} from './indicators.component.styles'; /** * Component for the indicators diff --git a/src/components/link.component.tsx b/src/components/link.component.tsx index 7a9f2d89..50652826 100644 --- a/src/components/link.component.tsx +++ b/src/components/link.component.tsx @@ -1,5 +1,5 @@ -import React, {ReactElement} from 'react'; import Link from 'next/link'; +import React, {ReactElement} from 'react'; import styled from 'styled-components'; interface Props { diff --git a/src/components/loading/components/dots/dots.component.test.tsx b/src/components/loading/components/dots/dots.component.test.tsx index 5c735961..3c17c55e 100644 --- a/src/components/loading/components/dots/dots.component.test.tsx +++ b/src/components/loading/components/dots/dots.component.test.tsx @@ -1,5 +1,6 @@ -import React from 'react'; import {act, render as defaultRender, waitFor} from '@testing-library/react'; +import React from 'react'; + import {DotsComponent} from './dots.component'; const render = () => { diff --git a/src/components/loading/components/dots/dots.component.tsx b/src/components/loading/components/dots/dots.component.tsx index 641f22a5..31c1a0f0 100644 --- a/src/components/loading/components/dots/dots.component.tsx +++ b/src/components/loading/components/dots/dots.component.tsx @@ -1,4 +1,5 @@ import React, {ReactElement} from 'react'; + import {useDotsComponent} from './hooks/use-dots-component'; /** diff --git a/src/components/loading/components/dots/hooks/use-dots-component.test.ts b/src/components/loading/components/dots/hooks/use-dots-component.test.ts index a0e2f7ed..84b519d2 100644 --- a/src/components/loading/components/dots/hooks/use-dots-component.test.ts +++ b/src/components/loading/components/dots/hooks/use-dots-component.test.ts @@ -1,4 +1,5 @@ import {act, renderHook} from '@testing-library/react-hooks'; + import {useDotsComponent} from './use-dots-component'; beforeAll(() => { diff --git a/src/components/loading/components/dots/hooks/use-dots-component.ts b/src/components/loading/components/dots/hooks/use-dots-component.ts index 4624a0b5..8814cdfa 100644 --- a/src/components/loading/components/dots/hooks/use-dots-component.ts +++ b/src/components/loading/components/dots/hooks/use-dots-component.ts @@ -1,4 +1,5 @@ import {useState} from 'react'; + import {useInterval} from '../../../../../hooks/use-interval'; interface UseDotsComponent { diff --git a/src/components/loading/loading.component.styles.ts b/src/components/loading/loading.component.styles.ts index 09b6ac22..1204a059 100644 --- a/src/components/loading/loading.component.styles.ts +++ b/src/components/loading/loading.component.styles.ts @@ -7,8 +7,6 @@ export const Container = styled.div` grid-template-columns: 1fr 1fr; grid-gap: 1em; - width: 100%; - transform: translateX(0.5em); `; diff --git a/src/components/loading/loading.component.test.tsx b/src/components/loading/loading.component.test.tsx index e5988d0d..4571507d 100644 --- a/src/components/loading/loading.component.test.tsx +++ b/src/components/loading/loading.component.test.tsx @@ -1,9 +1,10 @@ -import React from 'react'; import { cleanup, render as defaultRender, screen, } from '@testing-library/react'; +import React from 'react'; + import {LoadingComponent} from './loading.component'; const render = () => { diff --git a/src/components/loading/loading.component.tsx b/src/components/loading/loading.component.tsx index c79b51db..91c870ad 100644 --- a/src/components/loading/loading.component.tsx +++ b/src/components/loading/loading.component.tsx @@ -1,11 +1,8 @@ +import Image from 'next/legacy/image'; import React, {ReactElement} from 'react'; -import Image from "next/legacy/image"; -import { - Container, - ImageContainer, - TextContainer, -} from './loading.component.styles'; + import {DotsComponent} from './components/dots/dots.component'; +import {Container, ImageContainer, TextContainer} from './loading.component.styles'; /** * Component for the loading screen @@ -23,7 +20,8 @@ export function LoadingComponent(): ReactElement {

- loading + loading +

diff --git a/src/components/meta/meta.component.test.js b/src/components/meta/meta.component.test.js index 50ca02ed..a20eee4c 100644 --- a/src/components/meta/meta.component.test.js +++ b/src/components/meta/meta.component.test.js @@ -1,5 +1,6 @@ -import React from 'react'; import {cleanup, render} from '@testing-library/react'; +import React from 'react'; + import {defaultProps, MetaComponent} from './meta.component'; afterEach(cleanup); diff --git a/src/components/meta/meta.component.tsx b/src/components/meta/meta.component.tsx index 8de6fd23..f84ede1d 100644 --- a/src/components/meta/meta.component.tsx +++ b/src/components/meta/meta.component.tsx @@ -1,5 +1,5 @@ -import React, {ReactElement} from 'react'; import Head from 'next/head'; +import React, {ReactElement} from 'react'; interface MetaComponentProps { title?: string; diff --git a/src/components/screw-texture/screw-texture.component.tsx b/src/components/screw-texture/screw-texture.component.tsx index 9afbffee..7c97ce6f 100644 --- a/src/components/screw-texture/screw-texture.component.tsx +++ b/src/components/screw-texture/screw-texture.component.tsx @@ -1,6 +1,7 @@ -import React, {ReactElement} from 'react'; import {Surface} from 'gl-react-dom/lib'; import GLImage from 'gl-react-image'; +import React, {ReactElement} from 'react'; + import {withTimeLoop} from '../../app/components/with-time-loop/with-time-loop'; import {ScrewTextureNode} from './screw-texture.node'; diff --git a/src/components/screw-texture/screw-texture.node.tsx b/src/components/screw-texture/screw-texture.node.tsx index 3c86236f..75010f31 100644 --- a/src/components/screw-texture/screw-texture.node.tsx +++ b/src/components/screw-texture/screw-texture.node.tsx @@ -1,5 +1,6 @@ -import React, {ReactElement} from 'react'; import {Node} from 'gl-react'; +import React, {ReactElement} from 'react'; + import {mapRange} from '../../utils/map-range/map-range'; import {shaders} from './screw-texture.shaders'; diff --git a/src/components/screw-texture/screw-texture.shaders.ts b/src/components/screw-texture/screw-texture.shaders.ts index 14d5eb51..dc18a9b2 100644 --- a/src/components/screw-texture/screw-texture.shaders.ts +++ b/src/components/screw-texture/screw-texture.shaders.ts @@ -1,4 +1,5 @@ import {GLSL, Shaders} from 'gl-react'; + import fragmentShader from './screw-texture.shaders.fragment.glsl'; export const shaders = Shaders.create({ diff --git a/src/components/slider/slider.component.styles.ts b/src/components/slider/slider.component.styles.ts index 6dc06e70..bd907c02 100644 --- a/src/components/slider/slider.component.styles.ts +++ b/src/components/slider/slider.component.styles.ts @@ -1,11 +1,12 @@ +import {type SliderComponentProps} from 'src/components/slider/slider.component'; import styled, {css} from 'styled-components'; const config = { - 'trackW': '100%', + trackW: '100%', // 'trackH': '7px', - 'trackH': '0.5em', - 'thumbD': '1.5em', - 'thumbDV': 1.5, + trackH: '0.5em', + thumbD: '1.5em', + thumbDV: 1.5, }; const track = css` @@ -31,25 +32,27 @@ const handle = css` border-radius: 50%; border: 3px solid; background: ${(props) => props.theme.background.primary}; - box-shadow: 1px 1px 1px ${(props) => props.theme.background.primary}, - 0 0 1px ${(props) => props.theme.background.highlight}; + box-shadow: + 1px 1px 1px ${(props) => props.theme.background.primary}, + 0 0 1px ${(props) => props.theme.background.highlight}; `; -const getProgress = (props) => (props.value - props.min) / (props.max - props.min); -const getBuffered = (props) => (props.buffered - props.min) / (props.max - props.min); +const getProgress = (props: SliderComponentProps) => + (props.value - props.min) / (props.max - props.min); +const getBuffered = (props: SliderComponentProps) => + (props?.buffered ?? 0 - props.min) / (props.max - props.min); -/** - * @param {object} props react component props - * @see https://codepen.io/thebabydino/pen/goYYrN - * @returns {object} styled component - */ +// @see https://codepen.io/thebabydino/pen/goYYrN +// @ts-expect-error dumb +// noinspection CssUnresolvedCustomProperty export const Input = styled.input.attrs((props) => ({ - 'style': { - '--progress': getProgress(props), - '--buffered': getBuffered(props), + style: { + '--progress': getProgress(props as SliderComponentProps), + '--buffered': getBuffered(props as SliderComponentProps), }, -}))<{buffered?: number;}>` - &, &::-webkit-slider-thumb { +}))` + &, + &::-webkit-slider-thumb { -webkit-appearance: none; } @@ -58,9 +61,13 @@ export const Input = styled.input.attrs((props) => ({ width: ${config.trackW}; height: ${config.thumbD}; background: transparent; - font: 1em/1 arial, sans-serif; + font: + 1em/1 arial, + sans-serif; - --progress-width: calc(.5 * ${config.thumbD} + var(--progress) * (100% - ${config.thumbD})); + --progress-width: calc( + 0.5 * ${config.thumbD} + var(--progress) * (100% - ${config.thumbD}) + ); --buffered-width: calc(var(--buffered) * 100%); &:hover { @@ -68,26 +75,31 @@ export const Input = styled.input.attrs((props) => ({ } // track + &::-webkit-slider-runnable-track { ${track}; - background: linear-gradient(to right, - ${(props) => props.theme.highlight} 0, - ${(props) => props.theme.highlight} var(--progress-width), - ${(props) => props.theme.buffered} var(--progress-width), - ${(props) => props.theme.buffered} var(--buffered-width), - ${(props) => props.theme.background.highlight} var(--buffered-width), - ${(props) => props.theme.background.highlight} 100%); + background: linear-gradient( + to right, + ${(props) => props.theme.highlight} 0, + ${(props) => props.theme.highlight} var(--progress-width), + ${(props) => props.theme.buffered} var(--progress-width), + ${(props) => props.theme.buffered} var(--buffered-width), + ${(props) => props.theme.background.highlight} var(--buffered-width), + ${(props) => props.theme.background.highlight} 100% + ); } &::-moz-range-track { ${track}; - background: linear-gradient(to right, - ${(props) => props.theme.buffered} 0, - ${(props) => props.theme.buffered} var(--buffered-width), - ${(props) => props.theme.background.highlight} var(--buffered-width), - ${(props) => props.theme.background.highlight} 100%); + background: linear-gradient( + to right, + ${(props) => props.theme.buffered} 0, + ${(props) => props.theme.buffered} var(--buffered-width), + ${(props) => props.theme.background.highlight} var(--buffered-width), + ${(props) => props.theme.background.highlight} 100% + ); } &::-ms-track { @@ -95,6 +107,7 @@ export const Input = styled.input.attrs((props) => ({ } // progress + &::-moz-range-progress { ${progress}; } @@ -104,8 +117,9 @@ export const Input = styled.input.attrs((props) => ({ } // handle + &::-webkit-slider-thumb { - margin-top: calc(.5 * (${config.trackH} - ${config.thumbD})); + margin-top: calc(0.5 * (${config.trackH} - ${config.thumbD})); ${handle}; } diff --git a/src/components/slider/slider.component.tsx b/src/components/slider/slider.component.tsx index de3f1bde..a76a43dd 100644 --- a/src/components/slider/slider.component.tsx +++ b/src/components/slider/slider.component.tsx @@ -1,7 +1,8 @@ import React, {ChangeEvent, ReactElement} from 'react'; + import {Input} from './slider.component.styles'; -interface SliderComponentProps { +export interface SliderComponentProps { min: number; max: number; step: number; @@ -13,26 +14,19 @@ interface SliderComponentProps { /** * Component for a slider - * @param root0 - * @param root0.min - * @param root0.max - * @param root0.step - * @param root0.value - * @param root0.buffered - * @param root0.onChange - * @param root0.name */ export function SliderComponent({ min, max, step, value, - buffered, + buffered = 0, onChange, name, }: SliderComponentProps): ReactElement { return ( ); diff --git a/src/components/table/components/cell/cell.component.tsx b/src/components/table/components/cell/cell.component.tsx index 08b2afa5..6647f105 100644 --- a/src/components/table/components/cell/cell.component.tsx +++ b/src/components/table/components/cell/cell.component.tsx @@ -1,6 +1,8 @@ -import React, {ReactElement} from 'react'; import {Icon, IconifyIcon} from '@iconify/react'; -import Image from "next/legacy/image"; +import Image from 'next/legacy/image'; +import React, {ReactElement} from 'react'; +import {CenteredDiv} from 'src/app/shared.styles'; + import {Button, Item} from '../../table.component.styles'; export interface CellComponentProps { @@ -13,12 +15,6 @@ export interface CellComponentProps { /** * Table Cell Component - * @param root0 - * @param root0.id - * @param root0.image - * @param root0.title - * @param root0.icon - * @param root0.onClick */ export function CellComponent({ id, @@ -40,15 +36,15 @@ export function CellComponent({ layout="fixed" objectFit="cover" /> - {title} - + {title} + - + ); } diff --git a/src/components/table/hooks/use-table-component.ts b/src/components/table/hooks/use-table-component.ts index caf0b082..8cac67e5 100644 --- a/src/components/table/hooks/use-table-component.ts +++ b/src/components/table/hooks/use-table-component.ts @@ -1,5 +1,5 @@ -import {useCallback} from 'react'; import {useRouter} from 'next/router'; +import {useCallback} from 'react'; interface UseTableComponent { onClick: (type: string, id: string) => void; diff --git a/src/components/table/table.component.styles.ts b/src/components/table/table.component.styles.ts index d70ad421..22f9e680 100644 --- a/src/components/table/table.component.styles.ts +++ b/src/components/table/table.component.styles.ts @@ -1,13 +1,8 @@ +import {addVerticalScroll} from 'src/app/shared.styles'; import styled from 'styled-components'; export const Container = styled.div` - display: grid; - grid-gap: 7px; - - height: 80%; - width: 100%; - - overflow-y: scroll; + ${addVerticalScroll}; `; export const Item = styled.div` diff --git a/src/components/table/table.component.tsx b/src/components/table/table.component.tsx index 25723a3f..9a0020ee 100644 --- a/src/components/table/table.component.tsx +++ b/src/components/table/table.component.tsx @@ -1,13 +1,14 @@ -import React, {ReactElement} from 'react'; -import youtube from '@iconify/icons-mdi/youtube'; -import soundcloud from '@iconify/icons-mdi/soundcloud'; import bandcamp from '@iconify/icons-mdi/bandcamp'; -import {useTableComponent} from './hooks/use-table-component'; -import {Container} from './table.component.styles'; +import soundcloud from '@iconify/icons-mdi/soundcloud'; +import youtube from '@iconify/icons-mdi/youtube'; +import React, {ReactElement} from 'react'; + import { CellComponent, CellComponentProps, } from './components/cell/cell.component'; +import {useTableComponent} from './hooks/use-table-component'; +import {Container} from './table.component.styles'; export type TableComponentItem = CellComponentProps & { type: 'youtube' | 'soundcloud' | 'bandcamp'; @@ -22,26 +23,28 @@ export function TableComponent({table}: TableComponentProps): ReactElement { return ( - {table.map((item) => { - let icon = youtube; +
+ {table.map((item) => { + let icon = youtube; - if (item.type === 'soundcloud') { - icon = soundcloud; - } else if (item.type === 'bandcamp') { - icon = bandcamp; - } + if (item.type === 'soundcloud') { + icon = soundcloud; + } else if (item.type === 'bandcamp') { + icon = bandcamp; + } - return ( - onClick(item.type, item.id)} - /> - ); - })} + return ( + onClick(item.type, item.id)} + /> + ); + })} +
); } diff --git a/src/components/text-link/text-link.component.styles.ts b/src/components/text-link/text-link.component.styles.ts index 3ab577f9..8ba2d6cb 100644 --- a/src/components/text-link/text-link.component.styles.ts +++ b/src/components/text-link/text-link.component.styles.ts @@ -1,4 +1,5 @@ import styled from 'styled-components'; + import {AnchorOptions} from './text-link.component'; const getBorder = (c) => `0.15em solid ${c}`; diff --git a/src/components/text-link/text-link.component.tsx b/src/components/text-link/text-link.component.tsx index 7bea4d65..47b6a4ba 100644 --- a/src/components/text-link/text-link.component.tsx +++ b/src/components/text-link/text-link.component.tsx @@ -1,4 +1,5 @@ import React, {ReactElement} from 'react'; + import {TextLink} from './text-link.component.styles'; interface TextLinkComponentProps { diff --git a/src/components/title/title.component.styles.ts b/src/components/title/title.component.styles.ts index f0b3411c..a14988e8 100644 --- a/src/components/title/title.component.styles.ts +++ b/src/components/title/title.component.styles.ts @@ -1,8 +1,8 @@ +import {addHoverLink, centerFlex} from 'src/app/shared.styles'; import styled from 'styled-components'; -import {flexCenter, hoverLink} from 'src/app/styles/styles'; export const Title = styled.h1` - ${flexCenter}; - ${hoverLink}; + ${centerFlex}; + ${addHoverLink}; font-weight: 900; `; diff --git a/src/components/title/title.component.test.tsx b/src/components/title/title.component.test.tsx index 646634e8..d81164ce 100644 --- a/src/components/title/title.component.test.tsx +++ b/src/components/title/title.component.test.tsx @@ -1,5 +1,6 @@ -import React from 'react'; import {render, screen} from '@testing-library/react'; +import React from 'react'; + import {TitleComponent} from './title.component'; describe('TitleComponent', () => { diff --git a/src/components/title/title.component.tsx b/src/components/title/title.component.tsx index eceea155..20b65768 100644 --- a/src/components/title/title.component.tsx +++ b/src/components/title/title.component.tsx @@ -1,5 +1,6 @@ import React, {ReactElement} from 'react'; import {LinkComponent} from 'src/components/link.component'; + import {Title} from './title.component.styles'; /** diff --git a/src/hooks/use-autoplay.test.ts b/src/hooks/use-autoplay.test.ts index 95441cc3..861bc7bc 100644 --- a/src/hooks/use-autoplay.test.ts +++ b/src/hooks/use-autoplay.test.ts @@ -1,4 +1,5 @@ import {renderHook} from '@testing-library/react-hooks'; + import {useAutoplay} from './use-autoplay'; describe('useAutoplay', () => { diff --git a/src/hooks/use-cache.ts b/src/hooks/use-cache.ts index 984cb03b..00a417c8 100644 --- a/src/hooks/use-cache.ts +++ b/src/hooks/use-cache.ts @@ -1,4 +1,5 @@ import {useEffect, useState} from 'react'; + import {useInterval} from './use-interval'; /** diff --git a/src/hooks/use-redirect-auto.ts b/src/hooks/use-redirect-auto.ts index 7b8189ba..bcd49c40 100644 --- a/src/hooks/use-redirect-auto.ts +++ b/src/hooks/use-redirect-auto.ts @@ -1,5 +1,5 @@ -import {useEffect} from 'react'; import {useRouter} from 'next/router'; +import {useEffect} from 'react'; /** * Hook to redirect automatically to a given path diff --git a/src/layouts/default/default.layout.styles.ts b/src/layouts/default/default.layout.styles.ts index 3db70157..89923c71 100644 --- a/src/layouts/default/default.layout.styles.ts +++ b/src/layouts/default/default.layout.styles.ts @@ -1,6 +1,10 @@ -import {addColorsDefault, addFontSizes} from 'src/app/shared.styles'; -import {mediaQueries} from 'src/app/styles/breakpoints'; -import {widths} from 'src/app/styles/widths'; +import { + addColorsDefault, + addFontSizes, + addMargins, + addVerticalScroll, + centerFlex, +} from 'src/app/shared.styles'; import styled from 'styled-components'; export const DefaultLayoutContainer = styled.div` @@ -10,39 +14,12 @@ export const DefaultLayoutContainer = styled.div` display: grid; grid-template-rows: auto 1fr; - - ${addColorsDefault} - ${addFontSizes} -} + ${addColorsDefault}; + ${addFontSizes}; `; -export const Wrapper = styled.div` - display: flex; - justify-content: center; - align-items: center; - - height: 100%; - - text-align: center; - font-size: 1.1em; - - ${mediaQueries.below.tablet} { - width: ${widths.mobile}; - } - - ${mediaQueries.above.tablet} { - width: ${widths.tablet}; - } - - ${mediaQueries.above.desktop} { - width: ${widths.desktop}; - } - - ${mediaQueries.above.widescreen} { - width: ${widths.widescreen}; - } - - ${mediaQueries.above.fullhd} { - width: ${widths.fullhd}; - } +export const NewWrapper = styled.div` + ${centerFlex}; + ${addMargins}; + ${addVerticalScroll}; `; diff --git a/src/layouts/default/default.layout.test.tsx b/src/layouts/default/default.layout.test.tsx index 535701fe..02d4d62e 100644 --- a/src/layouts/default/default.layout.test.tsx +++ b/src/layouts/default/default.layout.test.tsx @@ -1,7 +1,8 @@ -import React from 'react'; import {render as defaultRender} from '@testing-library/react'; -import {DefaultLayout} from './default.layout'; +import React from 'react'; + import {ThemeWrapper} from '../../app/components/theme-wrapper/theme-wrapper'; +import {DefaultLayout} from './default.layout'; const render = () => { function Children() { diff --git a/src/layouts/default/default.layout.tsx b/src/layouts/default/default.layout.tsx index 7398bb7e..6c3fccc4 100644 --- a/src/layouts/default/default.layout.tsx +++ b/src/layouts/default/default.layout.tsx @@ -2,7 +2,7 @@ import React, {ReactElement} from 'react'; import {HeaderComponent} from 'src/components/header/header.component'; import {MetaComponent} from 'src/components/meta/meta.component'; -import {DefaultLayoutContainer} from './default.layout.styles'; +import {DefaultLayoutContainer, NewWrapper} from './default.layout.styles'; interface DefaultLayoutProps { children: ReactElement | ReactElement[]; @@ -24,7 +24,7 @@ export function DefaultLayout({ {/* */} - {children} + {children} ); diff --git a/src/layouts/player/hooks/use-player-layout.ts b/src/layouts/player/hooks/use-player-layout.ts index 955dbdaa..c4e4c0c3 100644 --- a/src/layouts/player/hooks/use-player-layout.ts +++ b/src/layouts/player/hooks/use-player-layout.ts @@ -1,15 +1,16 @@ -import {useEffect, useState} from 'react'; -import {useRouter} from 'next/router'; import {useAtom} from 'jotai'; -import {isLoadedAtom} from '../../../atoms/load.atoms'; -import {setSpeedAtom} from '../../../atoms/speed.atoms'; -import {setAudioTitleAtom} from '../../../atoms/audio-title.atoms'; -import {usePlayerLoading} from './use-player-loading'; +import {useRouter} from 'next/router'; +import {useEffect, useState} from 'react'; + import {setArtworkAtom} from '../../../atoms/artwork.atoms'; +import {setAudioTitleAtom} from '../../../atoms/audio-title.atoms'; +import {isLoadedAtom} from '../../../atoms/load.atoms'; import {setPauseAtom} from '../../../atoms/play-pause.atoms'; +import {setSpeedAtom} from '../../../atoms/speed.atoms'; import { getProviderFromRouter, } from '../../../utils/get-provider/get-provider-from-router'; +import {usePlayerLoading} from './use-player-loading'; interface UsePlayerLayoutOptions { title: string; diff --git a/src/layouts/player/hooks/use-player-loading.ts b/src/layouts/player/hooks/use-player-loading.ts index f13c31d3..03a8ef7e 100644 --- a/src/layouts/player/hooks/use-player-loading.ts +++ b/src/layouts/player/hooks/use-player-loading.ts @@ -1,8 +1,9 @@ -import {useEffect} from 'react'; import {useAtom} from 'jotai'; +import {useEffect} from 'react'; + import {setLoadedAtom} from '../../../atoms/load.atoms'; -import {setSeekAtom} from '../../../atoms/seek.atoms'; import {setProgressAtom} from '../../../atoms/progress.atoms'; +import {setSeekAtom} from '../../../atoms/seek.atoms'; /** * Hook to set the player loading state diff --git a/src/layouts/player/player.layout.tsx b/src/layouts/player/player.layout.tsx index ceb9c9b5..54756f5c 100644 --- a/src/layouts/player/player.layout.tsx +++ b/src/layouts/player/player.layout.tsx @@ -1,10 +1,11 @@ import React, {ReactElement} from 'react'; -import {MetaComponent} from '../../components/meta/meta.component'; -import {DefaultLayout} from '../default/default.layout'; -import {AudioComponent} from '../../components/audio/audio.component'; -import {PlayerModule} from '../../modules/player/player.module'; +import {AudioComponent} from 'src/components/audio/audio.component'; +import {LoadingComponent} from 'src/components/loading/loading.component'; +import {MetaComponent} from 'src/components/meta/meta.component'; +import {DefaultLayout} from 'src/layouts/default/default.layout'; +import {PlayerModule} from 'src/modules/player/player.module'; + import {usePlayerLayout} from './hooks/use-player-layout'; -import {LoadingComponent} from '../../components/loading/loading.component'; export interface PlayerLayoutProps { title: string; @@ -15,11 +16,6 @@ export interface PlayerLayoutProps { /** * Layout for the player page - * @param root0 - * @param root0.title - * @param root0.image - * @param root0.audio - * @param root0.speed */ export function PlayerLayout({ title, @@ -27,11 +23,11 @@ export function PlayerLayout({ audio, speed, }: PlayerLayoutProps): ReactElement { - const { - metaDescription, - metaUrl, - isLoaded, - } = usePlayerLayout({title, speed, image}); + const {metaDescription, metaUrl, isLoaded} = usePlayerLayout({ + title, + speed, + image, + }); return ( <> @@ -42,11 +38,7 @@ export function PlayerLayout({ /> - { - !isLoaded - ? - : - } + {!isLoaded ? : } ); diff --git a/src/modules/player/components/artwork/artwork.component.styles.ts b/src/modules/player/components/artwork/artwork.component.styles.ts index 031e8edf..fe88c516 100644 --- a/src/modules/player/components/artwork/artwork.component.styles.ts +++ b/src/modules/player/components/artwork/artwork.component.styles.ts @@ -1,7 +1,8 @@ import styled from 'styled-components'; -import {mapRange} from '../../../../utils/map-range/map-range'; -import {widths} from '../../../../app/styles/widths'; + import {mediaQueries} from '../../../../app/styles/breakpoints'; +import {widths} from '../../../../app/styles/widths'; +import {mapRange} from '../../../../utils/map-range/map-range'; const getFilter = ({sepia, hueRotate, saturate, blur}) => ` sepia(${sepia}%) diff --git a/src/modules/player/components/artwork/artwork.component.tsx b/src/modules/player/components/artwork/artwork.component.tsx index 7cdc480c..e5367975 100644 --- a/src/modules/player/components/artwork/artwork.component.tsx +++ b/src/modules/player/components/artwork/artwork.component.tsx @@ -1,7 +1,8 @@ import React, {ReactElement} from 'react'; import {isDesktop} from 'react-device-detect'; -import {WebGlComponent} from './components/web-gl/web-gl.component'; + import {NativeComponent} from './components/native/native.component'; +import {WebGlComponent} from './components/web-gl/web-gl.component'; export function ArtworkComponent(): ReactElement { return
{isDesktop ? : }
; diff --git a/src/modules/player/components/artwork/components/native/native.component.tsx b/src/modules/player/components/artwork/components/native/native.component.tsx index b9171a5d..e7bc4bc2 100644 --- a/src/modules/player/components/artwork/components/native/native.component.tsx +++ b/src/modules/player/components/artwork/components/native/native.component.tsx @@ -1,8 +1,9 @@ -import React, {ReactElement} from 'react'; -import Image from "next/legacy/image"; +import {ResizeObserver} from '@juggle/resize-observer'; import {useAtom} from 'jotai'; +import Image from 'next/legacy/image'; +import React, {ReactElement} from 'react'; import useMeasure from 'react-use-measure'; -import {ResizeObserver} from '@juggle/resize-observer'; + import {artworkAtom} from '../../../../../../atoms/artwork.atoms'; import {speedAtom} from '../../../../../../atoms/speed.atoms'; import {Container} from '../../artwork.component.styles'; diff --git a/src/modules/player/components/artwork/components/web-gl/web-gl.component.tsx b/src/modules/player/components/artwork/components/web-gl/web-gl.component.tsx index 4ee4defc..8325660d 100644 --- a/src/modules/player/components/artwork/components/web-gl/web-gl.component.tsx +++ b/src/modules/player/components/artwork/components/web-gl/web-gl.component.tsx @@ -1,13 +1,14 @@ -import React, {ReactElement} from 'react'; +import {ResizeObserver} from '@juggle/resize-observer'; import {useAtom} from 'jotai'; +import React, {ReactElement} from 'react'; import useMeasure from 'react-use-measure'; -import {ResizeObserver} from '@juggle/resize-observer'; + import {artworkAtom} from '../../../../../../atoms/artwork.atoms'; import {speedAtom} from '../../../../../../atoms/speed.atoms'; -import {Container} from '../../artwork.component.styles'; import { ScrewTextureComponent, } from '../../../../../../components/screw-texture/screw-texture.component'; +import {Container} from '../../artwork.component.styles'; export function WebGlComponent(): ReactElement { const [artwork] = useAtom(artworkAtom); diff --git a/src/modules/player/components/play-pause-button/play-pause-button.component.tsx b/src/modules/player/components/play-pause-button/play-pause-button.component.tsx index c1eeacf9..0b58d302 100644 --- a/src/modules/player/components/play-pause-button/play-pause-button.component.tsx +++ b/src/modules/player/components/play-pause-button/play-pause-button.component.tsx @@ -1,13 +1,14 @@ -import React, {ReactElement} from 'react'; -import {Icon} from '@iconify/react'; import pause from '@iconify/icons-mdi/pause'; import play from '@iconify/icons-mdi/play'; +import {Icon} from '@iconify/react'; import {useAtom} from 'jotai'; -import {Button} from '../../player.module.styles'; +import React, {ReactElement} from 'react'; + import { isPlayingAtom, togglePlayingAtom, } from '../../../../atoms/play-pause.atoms'; +import {Button} from '../../player.module.styles'; /** * Component to render the play/pause button diff --git a/src/modules/player/components/repeat-button/repeat-button.component.tsx b/src/modules/player/components/repeat-button/repeat-button.component.tsx index dc79f6b4..318b4599 100644 --- a/src/modules/player/components/repeat-button/repeat-button.component.tsx +++ b/src/modules/player/components/repeat-button/repeat-button.component.tsx @@ -1,13 +1,14 @@ -import React, {ReactElement} from 'react'; -import {Icon} from '@iconify/react'; import repeat from '@iconify/icons-mdi/repeat'; import repeatOff from '@iconify/icons-mdi/repeat-off'; +import {Icon} from '@iconify/react'; import {useAtom} from 'jotai'; -import {Button} from '../../player.module.styles'; +import React, {ReactElement} from 'react'; + import { isRepeatingAtom, toggleRepeatingAtom, } from '../../../../atoms/repeat.atoms'; +import {Button} from '../../player.module.styles'; /** * Component to toggle repeat mode diff --git a/src/modules/player/components/seek/seek.component.tsx b/src/modules/player/components/seek/seek.component.tsx index 7f70385f..8128d867 100644 --- a/src/modules/player/components/seek/seek.component.tsx +++ b/src/modules/player/components/seek/seek.component.tsx @@ -1,10 +1,10 @@ -import React, {ReactElement} from 'react'; import {useAtom} from 'jotai'; -import {SliderComponent} from '../../../../components/slider/slider.component'; -import {progressAtom} from '../../../../atoms/progress.atoms'; -import {durationAtom} from '../../../../atoms/duration.atoms'; -import {setSeekAtom} from '../../../../atoms/seek.atoms'; -import {bufferedAtom} from '../../../../atoms/buffered.atoms'; +import React, {ReactElement} from 'react'; +import {bufferedAtom} from 'src/atoms/buffered.atoms'; +import {durationAtom} from 'src/atoms/duration.atoms'; +import {progressAtom} from 'src/atoms/progress.atoms'; +import {setSeekAtom} from 'src/atoms/seek.atoms'; +import {SliderComponent} from 'src/components/slider/slider.component'; /** * Component to seek in the audio diff --git a/src/modules/player/components/speed/hooks/use-speed-component.test.ts b/src/modules/player/components/speed/hooks/use-speed-component.test.ts index 24ead864..9b5e1828 100644 --- a/src/modules/player/components/speed/hooks/use-speed-component.test.ts +++ b/src/modules/player/components/speed/hooks/use-speed-component.test.ts @@ -1,5 +1,6 @@ import {act, renderHook} from '@testing-library/react-hooks'; import {ChangeEvent} from 'react'; + import {useSpeedComponent} from './use-speed-component'; describe('useSpeedComponent', () => { diff --git a/src/modules/player/components/speed/hooks/use-speed-component.ts b/src/modules/player/components/speed/hooks/use-speed-component.ts index e9945615..15d56ca2 100644 --- a/src/modules/player/components/speed/hooks/use-speed-component.ts +++ b/src/modules/player/components/speed/hooks/use-speed-component.ts @@ -1,5 +1,6 @@ -import {ChangeEvent, useCallback} from 'react'; import {useAtom} from 'jotai'; +import {ChangeEvent, useCallback} from 'react'; + import {setSpeedAtom, speedAtom} from '../../../../../atoms/speed.atoms'; interface UseSpeedComponent { diff --git a/src/modules/player/components/speed/speed.component.test.tsx b/src/modules/player/components/speed/speed.component.test.tsx index 42a259c6..304e055a 100644 --- a/src/modules/player/components/speed/speed.component.test.tsx +++ b/src/modules/player/components/speed/speed.component.test.tsx @@ -1,13 +1,14 @@ -import React from 'react'; import { fireEvent, render as defaultRender, screen, } from '@testing-library/react'; -import {SpeedComponent} from './speed.component'; +import React from 'react'; + import { ThemeWrapper, } from '../../../../app/components/theme-wrapper/theme-wrapper'; +import {SpeedComponent} from './speed.component'; import {MOCK_STATE} from './speed.component.test.mock'; const render = () => { diff --git a/src/modules/player/components/speed/speed.component.tsx b/src/modules/player/components/speed/speed.component.tsx index e816be9a..b20b17e5 100644 --- a/src/modules/player/components/speed/speed.component.tsx +++ b/src/modules/player/components/speed/speed.component.tsx @@ -1,6 +1,7 @@ import React, {ReactElement} from 'react'; +import {SliderComponent} from 'src/components/slider/slider.component'; + import {useSpeedComponent} from './hooks/use-speed-component'; -import {SliderComponent} from '../../../../components/slider/slider.component'; /** * Component for the player speed diff --git a/src/modules/player/components/time/time.component.tsx b/src/modules/player/components/time/time.component.tsx index 090382ca..a8dc4e03 100644 --- a/src/modules/player/components/time/time.component.tsx +++ b/src/modules/player/components/time/time.component.tsx @@ -1,11 +1,12 @@ -import React, {ReactElement} from 'react'; import {useAtom} from 'jotai'; -import {Container} from './time.component.styles'; +import React, {ReactElement} from 'react'; + +import {durationAtom} from '../../../../atoms/duration.atoms'; +import {progressAtom} from '../../../../atoms/progress.atoms'; import { calculateMinutes, } from '../../../../utils/calculate-minutes/calculate-minutes'; -import {progressAtom} from '../../../../atoms/progress.atoms'; -import {durationAtom} from '../../../../atoms/duration.atoms'; +import {Container} from './time.component.styles'; /** * Component to display the current time and the duration of the video diff --git a/src/modules/player/components/title/title.component.tsx b/src/modules/player/components/title/title.component.tsx index 9cda8dcb..d283b1e1 100644 --- a/src/modules/player/components/title/title.component.tsx +++ b/src/modules/player/components/title/title.component.tsx @@ -1,7 +1,8 @@ -import React, {ReactElement} from 'react'; import {useAtom} from 'jotai'; -import {H2} from './title.component.styles'; +import React, {ReactElement} from 'react'; + import {audioTitleAtom} from '../../../../atoms/audio-title.atoms'; +import {H2} from './title.component.styles'; /** * Component to display the title of the audio diff --git a/src/modules/player/components/volume-button/volume-button.component.tsx b/src/modules/player/components/volume-button/volume-button.component.tsx index ce03ed97..a2d66a41 100644 --- a/src/modules/player/components/volume-button/volume-button.component.tsx +++ b/src/modules/player/components/volume-button/volume-button.component.tsx @@ -1,11 +1,12 @@ -import React, {ReactElement} from 'react'; -import {Icon} from '@iconify/react'; -import volumeOff from '@iconify/icons-mdi/volume-off'; import volumeHigh from '@iconify/icons-mdi/volume-high'; +import volumeOff from '@iconify/icons-mdi/volume-off'; +import {Icon} from '@iconify/react'; import {useAtom} from 'jotai'; -import {Button} from '../../player.module.styles'; +import React, {ReactElement} from 'react'; + import {isMutedAtom} from '../../../../atoms/mute.atoms'; import {volumeAtom} from '../../../../atoms/volume.atoms'; +import {Button} from '../../player.module.styles'; /** * Component to toggle the volume diff --git a/src/modules/player/components/volume-slider/volume-slider.component.tsx b/src/modules/player/components/volume-slider/volume-slider.component.tsx index d157a824..b2d8ea4a 100644 --- a/src/modules/player/components/volume-slider/volume-slider.component.tsx +++ b/src/modules/player/components/volume-slider/volume-slider.component.tsx @@ -1,7 +1,7 @@ -import React, {ReactElement} from 'react'; import {useAtom} from 'jotai'; -import {SliderComponent} from '../../../../components/slider/slider.component'; -import {setVolumeAtom, volumeAtom} from '../../../../atoms/volume.atoms'; +import React, {ReactElement} from 'react'; +import {setVolumeAtom, volumeAtom} from 'src/atoms/volume.atoms'; +import {SliderComponent} from 'src/components/slider/slider.component'; /** * Component to control the volume of the player diff --git a/src/modules/player/player.module.styles.ts b/src/modules/player/player.module.styles.ts index 53e41a30..e1ee94f7 100644 --- a/src/modules/player/player.module.styles.ts +++ b/src/modules/player/player.module.styles.ts @@ -1,5 +1,5 @@ +import {mediaQueries} from 'src/app/styles/breakpoints'; import styled from 'styled-components'; -import {mediaQueries} from '../../app/styles/breakpoints'; export const Container = styled.div` width: 100%; @@ -7,7 +7,7 @@ export const Container = styled.div` export const Button = styled.button` touch-action: manipulation; - transition: background .3s ease; + transition: background 0.3s ease; &:hover { background: ${({theme}) => theme.shadow.opacity}; @@ -47,7 +47,7 @@ export const TitleWrapper = styled.span` grid-column-start: 1; grid-row-start: 1; white-space: nowrap; - transform: translate3d(.3em, .45em, 0); + transform: translate3d(0.3em, 0.45em, 0); `; export const VolumeButtonWrapper = styled.span` diff --git a/src/modules/player/player.module.test.tsx b/src/modules/player/player.module.test.tsx index 3dc30273..e2cb04aa 100644 --- a/src/modules/player/player.module.test.tsx +++ b/src/modules/player/player.module.test.tsx @@ -1,7 +1,8 @@ -import React from 'react'; import {render as defaultRender} from '@testing-library/react'; -import {PlayerModule} from './player.module'; +import React from 'react'; + import {ThemeWrapper} from '../../app/components/theme-wrapper/theme-wrapper'; +import {PlayerModule} from './player.module'; const render = () => { const {container} = defaultRender( diff --git a/src/modules/player/player.module.tsx b/src/modules/player/player.module.tsx index 67e92aac..03c11fc5 100644 --- a/src/modules/player/player.module.tsx +++ b/src/modules/player/player.module.tsx @@ -1,4 +1,15 @@ import React, {ReactElement} from 'react'; +import {IndicatorsComponent} from 'src/components/indicators/indicators.component'; + +import {ArtworkComponent} from './components/artwork/artwork.component'; +import {PlayPauseButtonComponent} from './components/play-pause-button/play-pause-button.component'; +import {RepeatButtonComponent} from './components/repeat-button/repeat-button.component'; +import {SeekComponent} from './components/seek/seek.component'; +import {SpeedComponent} from './components/speed/speed.component'; +import {TimeComponent} from './components/time/time.component'; +import {TitleComponent} from './components/title/title.component'; +import {VolumeButtonComponent} from './components/volume-button/volume-button.component'; +import {VolumeSliderComponent} from './components/volume-slider/volume-slider.component'; import { Container, PlayerWrapper, @@ -10,26 +21,6 @@ import { VolumeButtonWrapper, VolumeSliderWrapper, } from './player.module.styles'; -import {TitleComponent} from './components/title/title.component'; -import { - RepeatButtonComponent, -} from './components/repeat-button/repeat-button.component'; -import { - PlayPauseButtonComponent, -} from './components/play-pause-button/play-pause-button.component'; -import {SeekComponent} from './components/seek/seek.component'; -import {TimeComponent} from './components/time/time.component'; -import { - VolumeButtonComponent, -} from './components/volume-button/volume-button.component'; -import { - VolumeSliderComponent, -} from './components/volume-slider/volume-slider.component'; -import {ArtworkComponent} from './components/artwork/artwork.component'; -import { - IndicatorsComponent, -} from '../../components/indicators/indicators.component'; -import {SpeedComponent} from './components/speed/speed.component'; /** * Component to render the player. diff --git a/src/pages-lib/404.test.tsx b/src/pages-lib/404.test.tsx index 5a590486..721f2181 100644 --- a/src/pages-lib/404.test.tsx +++ b/src/pages-lib/404.test.tsx @@ -1,7 +1,8 @@ -import React from 'react'; import {render as defaultRender} from '@testing-library/react'; -import NotFoundPage from '../pages/404'; +import React from 'react'; + import {ThemeWrapper} from '../app/components/theme-wrapper/theme-wrapper'; +import NotFoundPage from '../pages/404'; const render = () => { const {container} = defaultRender( diff --git a/src/pages-lib/about.styles.ts b/src/pages-lib/about.styles.ts index 1283f122..0cac3328 100644 --- a/src/pages-lib/about.styles.ts +++ b/src/pages-lib/about.styles.ts @@ -1,16 +1,7 @@ import styled, {css} from 'styled-components'; -export const Container = styled.div` - text-align: left; - overflow-y: scroll; - overflow-x: hidden; - height: 80%; - width: 100%; - padding: 0 0.5em; -`; - export const Spacer = styled.div` - margin-bottom: 1em; + padding-bottom: 1em; `; const Title = css` diff --git a/src/pages-lib/about.test.tsx b/src/pages-lib/about.test.tsx index d058fe9f..b9497a31 100644 --- a/src/pages-lib/about.test.tsx +++ b/src/pages-lib/about.test.tsx @@ -1,7 +1,8 @@ -import React from 'react'; import {render as defaultRender} from '@testing-library/react'; -import AboutPage from '../pages/about'; +import React from 'react'; + import {ThemeWrapper} from '../app/components/theme-wrapper/theme-wrapper'; +import AboutPage from '../pages/about'; const render = () => { const {container} = defaultRender( diff --git a/src/pages-lib/index.test.tsx b/src/pages-lib/index.test.tsx index c36659fb..067a5a71 100644 --- a/src/pages-lib/index.test.tsx +++ b/src/pages-lib/index.test.tsx @@ -1,7 +1,8 @@ -import React from 'react'; import {render as defaultRender} from '@testing-library/react'; -import IndexPage from '../pages'; +import React from 'react'; + import {ThemeWrapper} from '../app/components/theme-wrapper/theme-wrapper'; +import IndexPage from '../pages'; const render = () => { const {container} = defaultRender( diff --git a/src/pages-lib/latest.test.tsx b/src/pages-lib/latest.test.tsx index 2b5dc243..f37136d1 100644 --- a/src/pages-lib/latest.test.tsx +++ b/src/pages-lib/latest.test.tsx @@ -1,7 +1,8 @@ -import React from 'react'; import {render as defaultRender} from '@testing-library/react'; -import LatestPage from '../pages/latest'; +import React from 'react'; + import {ThemeWrapper} from '../app/components/theme-wrapper/theme-wrapper'; +import LatestPage from '../pages/latest'; const render = () => { const {container} = defaultRender( diff --git a/src/pages-lib/top.test.tsx b/src/pages-lib/top.test.tsx index 0bb97a20..97576e09 100644 --- a/src/pages-lib/top.test.tsx +++ b/src/pages-lib/top.test.tsx @@ -1,7 +1,8 @@ -import React from 'react'; import {render as defaultRender} from '@testing-library/react'; -import TopPage from '../pages/top'; +import React from 'react'; + import {ThemeWrapper} from '../app/components/theme-wrapper/theme-wrapper'; +import TopPage from '../pages/top'; const render = () => { const {container} = defaultRender( diff --git a/src/pages-lib/youtube/[id].test.tsx b/src/pages-lib/youtube/[id].test.tsx index 7a04a0fd..d892c7da 100644 --- a/src/pages-lib/youtube/[id].test.tsx +++ b/src/pages-lib/youtube/[id].test.tsx @@ -1,8 +1,9 @@ -import React from 'react'; import {render as defaultRender} from '@testing-library/react'; import {GetServerSidePropsContext} from 'next'; -import OldYoutubePage, {getServerSideProps} from '../../pages/youtube/[id]'; +import React from 'react'; + import {ThemeWrapper} from '../../app/components/theme-wrapper/theme-wrapper'; +import OldYoutubePage, {getServerSideProps} from '../../pages/youtube/[id]'; const render = () => { const {container} = defaultRender( diff --git a/src/pages/404.tsx b/src/pages/404.tsx index bb8f00ff..60dec51b 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,7 +1,8 @@ import React, {ReactElement} from 'react'; -import {DefaultLayout} from '../layouts/default/default.layout'; -import {useRedirectAuto} from '../hooks/use-redirect-auto'; + import {MetaComponent} from '../components/meta/meta.component'; +import {useRedirectAuto} from '../hooks/use-redirect-auto'; +import {DefaultLayout} from '../layouts/default/default.layout'; /** * 404 page diff --git a/src/pages/about.tsx b/src/pages/about.tsx index 8e93d59f..271b8326 100644 --- a/src/pages/about.tsx +++ b/src/pages/about.tsx @@ -1,9 +1,10 @@ import React, {ReactElement} from 'react'; -import {DefaultLayout} from '../layouts/default/default.layout'; + +import {MetaComponent} from '../components/meta/meta.component'; import {TextLinkComponent} from '../components/text-link/text-link.component'; +import {DefaultLayout} from '../layouts/default/default.layout'; import { Blue, - Container, Content, List, Spacer, @@ -11,7 +12,6 @@ import { TitleH2, TitleH3, } from '../pages-lib/about.styles'; -import {MetaComponent} from '../components/meta/meta.component'; function Prefix({spacing = false}) { return iscrew; @@ -26,7 +26,7 @@ export default function AboutPage(): ReactElement { <> - +
Pitch control for YouTube and Soundcloud. @@ -103,7 +103,7 @@ export default function AboutPage(): ReactElement { .

- +
); diff --git a/src/pages/bandcamp/[artist]/[name]/[speed].tsx b/src/pages/bandcamp/[artist]/[name]/[speed].tsx index 19e33acc..af7786fb 100644 --- a/src/pages/bandcamp/[artist]/[name]/[speed].tsx +++ b/src/pages/bandcamp/[artist]/[name]/[speed].tsx @@ -1,10 +1,11 @@ import {GetServerSidePropsContext, GetServerSidePropsResult} from 'next'; + import { PlayerLayout, PlayerLayoutProps, } from '../../../../layouts/player/player.layout'; -import {invokeRedirection} from '../../../../utils/invoke-redirection/invoke-redirection'; import {apiQuery} from '../../../../utils/api-query/api-query'; +import {invokeRedirection} from '../../../../utils/invoke-redirection/invoke-redirection'; import {validateBandcampId} from '../../../../utils/validate-bandcamp-id/validate-bandcamp-id'; export default PlayerLayout; diff --git a/src/pages/soundcloud/[username]/[trackName]/[speed].tsx b/src/pages/soundcloud/[username]/[trackName]/[speed].tsx index c337e148..243cfa57 100644 --- a/src/pages/soundcloud/[username]/[trackName]/[speed].tsx +++ b/src/pages/soundcloud/[username]/[trackName]/[speed].tsx @@ -1,8 +1,8 @@ import {GetServerSidePropsContext, GetServerSidePropsResult} from 'next'; import {PlayerLayout, PlayerLayoutProps} from 'src/layouts/player/player.layout'; -import {validateSoundcloudId} from 'src/utils/validate-soundcloud-id/validate-soundcloud-id'; -import {invokeRedirection} from 'src/utils/invoke-redirection/invoke-redirection'; import {apiQuery} from 'src/utils/api-query/api-query'; +import {invokeRedirection} from 'src/utils/invoke-redirection/invoke-redirection'; +import {validateSoundcloudId} from 'src/utils/validate-soundcloud-id/validate-soundcloud-id'; /** * SoundCloud page diff --git a/src/pages/top.tsx b/src/pages/top.tsx index 40a9a467..c0348120 100644 --- a/src/pages/top.tsx +++ b/src/pages/top.tsx @@ -1,13 +1,14 @@ -import React, {ReactElement} from 'react'; import {GetStaticPropsResult} from 'next'; -import {DefaultLayout} from '../layouts/default/default.layout'; +import React, {ReactElement} from 'react'; + +import {MetaComponent} from '../components/meta/meta.component'; import { TableComponent, TableComponentItem, } from '../components/table/table.component'; -import {apiQuery} from '../utils/api-query/api-query'; -import {MetaComponent} from '../components/meta/meta.component'; import {REVALIDATE} from '../constants'; +import {DefaultLayout} from '../layouts/default/default.layout'; +import {apiQuery} from '../utils/api-query/api-query'; interface TopPageProps { top: TableComponentItem[]; diff --git a/src/pages/youtube/[id].tsx b/src/pages/youtube/[id].tsx index b909d7b7..d2bc0d68 100644 --- a/src/pages/youtube/[id].tsx +++ b/src/pages/youtube/[id].tsx @@ -1,5 +1,5 @@ -import React, {ReactElement} from 'react'; import {GetServerSidePropsContext, GetServerSidePropsResult} from 'next'; +import React, {ReactElement} from 'react'; /** * Old YouTube page diff --git a/src/pages/youtube/[id]/[speed].tsx b/src/pages/youtube/[id]/[speed].tsx index 5d3057b8..3f96a71e 100644 --- a/src/pages/youtube/[id]/[speed].tsx +++ b/src/pages/youtube/[id]/[speed].tsx @@ -1,7 +1,7 @@ import {GetServerSidePropsContext, GetServerSidePropsResult} from 'next'; import {PlayerLayout, PlayerLayoutProps} from 'src/layouts/player/player.layout'; -import {invokeRedirection} from 'src/utils/invoke-redirection/invoke-redirection'; import {apiQuery} from 'src/utils/api-query/api-query'; +import {invokeRedirection} from 'src/utils/invoke-redirection/invoke-redirection'; import {validateYoutubeId} from 'src/utils/validate-youtube-id/validate-youtube-id'; /**