Merge pull request #699 from bamdadfr/next/bamdad

.eslintrc.js

@@ -192,5 +192,6 @@ module.exports = {
         ],
       },
     ],
+    'import/consistent-type-specifier-style': ['error', 'prefer-inline'],
   },
 };

next.config.js → next.config.mjs

@@ -1,4 +1,5 @@
-const {withSentryConfig} = require('@sentry/nextjs');
+import {withSentryConfig} from '@sentry/nextjs';
+
 const isEnvProduction = process.env.NODE_ENV === 'production';
 
 const configuration = {
@@ -7,7 +8,14 @@ const configuration = {
     styledComponents: true,
   },
   images: {
-    domains: ['api.screwmycode.in'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'api.screwmycode.in',
+        port: '',
+        pathname: '/**',
+      },
+    ],
   },
   webpack: (config) => {
     config = {
@@ -28,8 +36,13 @@ const configuration = {
 };
 
 if (!isEnvProduction) {
-  configuration.images.domains = [...configuration.images.domains, 'localhost'];
+  configuration.images.remotePatterns.push({
+    protocol: 'http',
+    hostname: 'localhost',
+    port: '8000',
+    pathname: '/**',
+  });
 }
 
 const SentryWebpackPluginOptions = {};
-module.exports = withSentryConfig(configuration, SentryWebpackPluginOptions);
+export default withSentryConfig(configuration, SentryWebpackPluginOptions);

package.json

@@ -42,6 +42,8 @@
     "jotai": "^2.10.0",
     "next": "^14.2.14",
     "next-replace-url": "^1.0.3",
+    "next-seo": "^6.6.0",
+    "next-sitemap": "^4.2.3",
     "raf": "^3.4.1",
     "react": "^18.3.1",
     "react-device-detect": "^2.2.3",
@@ -98,7 +100,6 @@
     "eslint-plugin-testing-library": "^6.3.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "next-sitemap": "^4.2.3",
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
     "sass": "^1.79.4",

src/animations/fade/fade.animation.tsx

@@ -1,5 +1,5 @@
 import {animated, useSpring} from '@react-spring/web';
-import React, {ReactElement} from 'react';
+import React, {type ReactElement} from 'react';
 
 interface FadeAnimationProps {
   children: string | ReactElement;

src/app/components/theme-wrapper/theme-wrapper.tsx

@@ -1,4 +1,4 @@
-import React, {ReactElement} from 'react';
+import React, {type ReactElement} from 'react';
 import {Global} from 'src/app/styles/global';
 import {theme} from 'src/app/styles/theme';
 import {ThemeProvider} from 'styled-components';

src/components/audio/audio.component.tsx

@@ -1,4 +1,4 @@
-import React, {ReactElement} from 'react';
+import React, {type ReactElement} from 'react';
 
 import {Invisible} from './audio.component.styles';
 import {useAudioModule} from './hooks/use-audio-component';
@@ -11,14 +11,16 @@ export function AudioComponent({url}: Props): ReactElement {
   const {ref} = useAudioModule(url);
 
   return (
-    <Invisible>
-      <audio
-        ref={ref}
-        aria-label="player"
-        // controls
-      >
-        <track kind="captions" />
-      </audio>
-    </Invisible>
+    <>
+      <Invisible>
+        <audio
+          ref={ref}
+          aria-label="player"
+          // controls
+        >
+          <track kind="captions" />
+        </audio>
+      </Invisible>
+    </>
   );
 }

src/components/audio/hooks/use-audio-component.ts

@@ -1,11 +1,4 @@
-import {useAtom} from 'jotai';
-import {useRouter} from 'next/router';
-import {useNextReplaceUrl} from 'next-replace-url';
-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 {type RefObject, useRef} from 'react';
 
 import {useAudioBuffered} from './use-audio-buffered';
 import {useAudioLoad} from './use-audio-load';
@@ -22,23 +15,9 @@ interface UseAudioComponent {
   ref: RefObject<HTMLAudioElement>;
 }
 
-/**
- * Entry hook for the audio module
- */
 export function useAudioModule(url: string): UseAudioComponent {
-  const router = useRouter();
-  const [speed] = useAtom(speedAtom);
-  const [audioTitle] = useAtom(audioTitleAtom);
-  const cachedSpeed = useCache(speed, 350);
-
   useKeyboardToggle('Space');
 
-  useNextReplaceUrl('speed', cachedSpeed.toString());
-
-  if (audioTitle) {
-    document.title = `${audioTitle} - ${cachedSpeed} - ${getProviderFromRouter(router)}`;
-  }
-
   const ref = useRef<HTMLAudioElement>(null);
 
   useAudioLoad(ref.current, url);

src/components/form/form.component.tsx

@@ -1,7 +1,13 @@
 import Image from 'next/legacy/image';
-import React, {ReactElement} from 'react';
+import React, {type ReactElement} from 'react';
 
-import {Form, GoogleContainer, ImageContainer, Input, Submit} from './form.component.styles';
+import {
+  Form,
+  GoogleContainer,
+  ImageContainer,
+  Input,
+  Submit,
+} from './form.component.styles';
 import {useFormComponent} from './hooks/use-form-component';
 
 /**

src/components/indicators/indicators.component.tsx

@@ -1,4 +1,4 @@
-import React, {ReactElement} from 'react';
+import React, {type ReactElement} from 'react';
 
 import {IndicatorComponent} from './components/indicator/indicator.component';
 import {useIndicatorsComponent} from './hooks/use-indicators-component';

src/components/loading/components/dots/dots.component.tsx

@@ -1,4 +1,4 @@
-import React, {ReactElement} from 'react';
+import React, {type ReactElement} from 'react';
 
 import {useDotsComponent} from './hooks/use-dots-component';
 

src/components/loading/loading.component.styles.ts

@@ -18,6 +18,7 @@ export const ImageContainer = styled.div`
   height: 10em;
 
   transform: translate3d(-${p}px, -${p * 4}px, 0);
+  position: relative;
 `;
 
 export const Text = styled.span`

src/components/loading/loading.component.tsx

@@ -1,12 +1,9 @@
 import Image from 'next/legacy/image';
-import React, {ReactElement} from 'react';
+import React, {type ReactElement} from 'react';
 
 import {DotsComponent} from './components/dots/dots.component';
 import {Container, ImageContainer, Text} from './loading.component.styles';
 
-/**
- * Component for the loading screen
- */
 export function LoadingComponent(): ReactElement {
   return (
     <Container>
@@ -16,6 +13,7 @@ export function LoadingComponent(): ReactElement {
           alt="filling glass"
           layout="fill"
           objectFit="contain"
+          priority
         />
       </ImageContainer>