made nextjs-ready config

src/constants/api.ts

@@ -1,12 +1,12 @@
 import { IComment, INode, ITag } from '~/types';
 import { OAuthProvider } from '~/types/auth';
+import { CONFIG } from '~/utils/config';
 
 export const API = {
-  BASE: process.env.REACT_APP_API_HOST,
+  BASE: CONFIG.API_HOST,
   USER: {
     LOGIN: '/user/login',
-    OAUTH_WINDOW: (provider: OAuthProvider) =>
-      `${process.env.REACT_APP_API_HOST}oauth/${provider}/redirect`,
+    OAUTH_WINDOW: (provider: OAuthProvider) => `${CONFIG.API_HOST}oauth/${provider}/redirect`,
     ME: '/user/',
     PROFILE: (username: string) => `/user/user/${username}/profile`,
     MESSAGES: (username: string) => `/user/user/${username}/messages`,

src/containers/main/MainLayout/index.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import styles from './styles.module.scss';
 import { Header } from '~/containers/main/Header';
+import { SidebarRouter } from '~/containers/main/SidebarRouter';
 
 export const MainLayout = ({ children }) => (
   <div className={styles.wrapper}>
     <div className={styles.content}>
       <Header />
       {children}
+      <SidebarRouter />
     </div>
   </div>
 );

src/containers/main/SidebarRouter/index.tsx

@@ -1,5 +1,4 @@
 import React, { FC } from 'react';
-import { createPortal } from 'react-dom';
 import { Authorized } from '~/components/containers/Authorized';
 import { SubmitBar } from '~/components/bars/SubmitBar';
 
@@ -8,17 +7,10 @@ interface IProps {
   isLab?: boolean;
 }
 
-const SidebarRouter: FC<IProps> = ({ isLab }) => {
-  if (typeof document === 'undefined') {
-    return null;
-  }
-
-  return createPortal(
+const SidebarRouter: FC<IProps> = ({ isLab }) => (
   <Authorized>
     <SubmitBar isLab={isLab} />
-    </Authorized>,
-    document.body
+  </Authorized>
 );
-};
 
 export { SidebarRouter };

src/store/auth/AuthStore.ts

@@ -2,6 +2,7 @@ import { IUser } from '~/types/auth';
 import { EMPTY_USER } from '~/constants/auth';
 import { makeAutoObservable } from 'mobx';
 import { isHydrated, makePersistable } from 'mobx-persist-store';
+import { CONFIG } from '~/utils/config';
 
 export class AuthStore {
   token: string = '';
@@ -12,7 +13,7 @@ export class AuthStore {
     makeAutoObservable(this);
 
     void makePersistable(this, {
-      name: `vault48_auth_${process.env.REACT_APP_API_URL}`,
+      name: `vault48_auth_${CONFIG.API_HOST}`,
       properties: ['token', 'user', 'isTesterInternal'],
       storage: typeof window !== 'undefined' ? window.localStorage : undefined,
     });

src/utils/config/index.ts

@@ -0,0 +1,5 @@
+export const CONFIG = {
+  API_HOST: process.env.REACT_APP_API_HOST || process.env.NEXT_PUBLIC_API_HOST || '',
+  REMOTE_CURRENT:
+    process.env.REACT_APP_REMOTE_CURRENT || process.env.NEXT_PUBLIC_REMOTE_CURRENT || '',
+};

src/utils/dom.ts

@@ -19,6 +19,7 @@ import {
   formatTextTodos,
 } from '~/utils/formatText';
 import { splitTextByYoutube, splitTextOmitEmpty } from '~/utils/splitText';
+import { CONFIG } from '~/utils/config';
 
 function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
   const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
@@ -67,13 +68,10 @@ export const getURLFromString = (
   size?: typeof PRESETS[keyof typeof PRESETS]
 ): string => {
   if (size) {
-    return (url || '').replace(
-      'REMOTE_CURRENT://',
-      `${process.env.REACT_APP_REMOTE_CURRENT}cache/${size}/`
-    );
+    return (url || '').replace('REMOTE_CURRENT://', `${CONFIG.REMOTE_CURRENT}cache/${size}/`);
   }
 
-  return (url || '').replace('REMOTE_CURRENT://', process.env.REACT_APP_REMOTE_CURRENT);
+  return (url || '').replace('REMOTE_CURRENT://', CONFIG.REMOTE_CURRENT);
 };
 
 export const getURL = (

src/utils/providers/AudioPlayerProvider.tsx

@@ -42,23 +42,27 @@ const PlayerContext = createContext<AudioPlayerProps>({
 });
 
 export const AudioPlayerProvider: FC = ({ children }) => {
-  const audio = useRef(new Audio()).current;
+  const audio = useRef(typeof Audio !== 'undefined' ? new Audio() : undefined).current;
   const [status, setStatus] = useState(PlayerState.UNSET);
   const [file, setFile] = useState<IFile | undefined>();
   const [progress, setProgress] = useState<PlayerProgress>({ progress: 0, current: 0, total: 0 });
 
   /** controls */
-  const play = audio.play.bind(audio);
-  const pause = audio.pause.bind(audio);
+  const play = async () => audio?.play();
+  const pause = () => audio?.pause();
   const stop = useCallback(() => {
-    audio.pause();
-    audio.dispatchEvent(new CustomEvent('stop'));
+    audio?.pause();
+    audio?.dispatchEvent(new CustomEvent('stop'));
     setFile(undefined);
     setStatus(PlayerState.UNSET);
   }, [audio, setFile]);
 
   const toTime = useCallback(
     (time: number) => {
+      if (!audio) {
+        return;
+      }
+
       audio.currentTime = time;
     },
     [audio]
@@ -66,18 +70,18 @@ export const AudioPlayerProvider: FC = ({ children }) => {
 
   const toPercent = useCallback(
     (percent: number) => {
-      audio.currentTime = (progress.total * percent) / 100;
+      toTime((progress.total * percent) / 100);
     },
-    [progress, audio]
+    [progress, toTime]
   );
 
   /** handles progress update */
   useEffect(() => {
     const onProgress = () => {
       setProgress({
-        total: audio.duration,
-        current: audio.currentTime,
-        progress: (audio.currentTime / audio.duration) * 100,
+        total: audio?.duration ?? 0,
+        current: audio?.currentTime ?? 0,
+        progress: audio ? (audio.currentTime / audio.duration) * 100 : 0,
       });
     };
 
@@ -89,21 +93,23 @@ export const AudioPlayerProvider: FC = ({ children }) => {
       setStatus(PlayerState.PLAYING);
     };
 
-    audio.addEventListener('playprogress', onProgress);
-    audio.addEventListener('timeupdate', onProgress);
-    audio.addEventListener('pause', onPause);
-    audio.addEventListener('playing', onPlay);
+    audio?.addEventListener('playprogress', onProgress);
+    audio?.addEventListener('timeupdate', onProgress);
+    audio?.addEventListener('pause', onPause);
+    audio?.addEventListener('playing', onPlay);
 
     return () => {
-      audio.removeEventListener('playprogress', onProgress);
-      audio.removeEventListener('timeupdate', onProgress);
-      audio.removeEventListener('pause', onPause);
-      audio.removeEventListener('playing', onPlay);
+      audio?.removeEventListener('playprogress', onProgress);
+      audio?.removeEventListener('timeupdate', onProgress);
+      audio?.removeEventListener('pause', onPause);
+      audio?.removeEventListener('playing', onPlay);
     };
   }, [audio]);
 
   /** update audio src */
   useEffect(() => {
+    if (!audio) return;
+
     audio.src = file ? getURL(file) : '';
   }, [file, audio]);