1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00

made nextjs-ready config

This commit is contained in:
Fedor Katurov 2022-01-13 12:37:15 +07:00
parent 28b8242b4d
commit 8bac6bb2f7
8 changed files with 45 additions and 40 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -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 || '',
};

View file

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

View file

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

1
tsconfig.tsbuildinfo Normal file

File diff suppressed because one or more lines are too long