+ 
+
+ Chrome extension which inform you about recently uploaded videos to youtube,
+ only from keywords/titles which you want to.
+
+
+ You can 'subscribe' a word, and get videos which title contain that word.
+
+ 
+
+ 
+
{message}
, { + icon:})
,
+ ...restProps,
+ });
+
+export const errorToast = (t: TFunction, message: string, restProps?: ToastOptions) =>
+ customToast(t, message, { ...restProps, style: { backgroundColor: '#f60633' } });
diff --git a/react-app/src/pages/content/components/home/app.tsx b/react-app/src/pages/content/components/home/app.tsx
new file mode 100644
index 00000000..77d4d654
--- /dev/null
+++ b/react-app/src/pages/content/components/home/app.tsx
@@ -0,0 +1,83 @@
+import { i18n, useTranslation } from '@internationalization';
+import { Portal } from '@mui/base';
+import { ThemeProvider } from '@mui/system';
+import { customToast, errorToast } from '@pages/content/components/error-toast';
+import { StyledToastContainer } from '@pages/content/components/toast-container';
+import GlobalStyles from '@utils/data/global-styles';
+import theme from '@utils/data/themes/dark-theme';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { injectStyle } from 'react-toastify/dist/inject-style';
+
+injectStyle();
+
+function App() {
+ const { t } = useTranslation();
+ const [shouldFetch, setShouldFetch] = useState(true);
+
+ chrome.runtime.onMessage.addListener(
+ ({
+ loadedVideosAmount,
+ videosFetchingError,
+ closeNotification,
+ contentMenuValidationError,
+ contentMenuErrorCause,
+ contentMenuSuccess,
+ }) => {
+ i18n.changeLanguage(navigator.language);
+ if (loadedVideosAmount) {
+ customToast(t, t('videosLoaded', { loadedVideosAmount }), {
+ toastId: 'notification',
+ onClose: () => setShouldFetch(false),
+ autoClose: 5000,
+ });
+ } else if (videosFetchingError) {
+ const message = t([
+ videosFetchingError === 'unauthorized' ? videosFetchingError : `playlistErrors.${videosFetchingError}`,
+ 'fallbackError',
+ ]);
+
+ errorToast(t, message, {
+ toastId: 'notificationError',
+ onClose: () => setShouldFetch(false),
+ autoClose: 5000,
+ });
+ } else if (closeNotification) {
+ toast.dismiss('notification');
+ toast.dismiss('notificationError');
+ } else if (contentMenuValidationError) {
+ errorToast(t, t('validation'), { toastId: 'validation' });
+ } else if (contentMenuErrorCause) {
+ const message = t([
+ contentMenuErrorCause === 'unauthorized' ? contentMenuErrorCause : `keywordErrors.${contentMenuErrorCause}`,
+ 'fallbackError',
+ ]);
+ errorToast(t, message, { toastId: 'loginError' });
+ } else if (contentMenuSuccess) {
+ customToast(t, t('createdKeyword'), { toastId: 'createdKeyword' });
+ }
+ },
+ );
+
+ useEffect(() => {
+ chrome.runtime.sendMessage({ shouldFetch });
+ }, [shouldFetch]);
+
+ return (
+ {t('validation')}
: null; +})(({ theme }) => + theme.unstable_sx({ + p: 1, + + color: 'color.danger', + + fontWeight: 'bold', + }), +); diff --git a/react-app/src/pages/popup/components/shared/errorSnackbar/error-snackbar.tsx b/react-app/src/pages/popup/components/shared/errorSnackbar/error-snackbar.tsx new file mode 100644 index 00000000..b9ba79a2 --- /dev/null +++ b/react-app/src/pages/popup/components/shared/errorSnackbar/error-snackbar.tsx @@ -0,0 +1,31 @@ +import { styled } from '@mui/system'; + +export const StyledSnackbar = styled('div')(({ theme }) => + theme.unstable_sx({ + position: 'absolute', + zIndex: 5500, + + bottom: 16, + left: 'auto', + right: 16, + + display: 'flex', + alignItems: 'center', + justifyContent: 'start', + gap: '0.5rem', + + width: 256, + + padding: '0.75rem', + + backgroundColor: theme.palette.background.snackbarBackground, + color: theme.palette.color.snackbarContent, + + fontSize: '0.875rem', + wordBreak: 'break-word', + + transition: 'transform 0.2s ease-out', + + borderRadius: 2, + }), +); diff --git a/react-app/src/pages/popup/components/shared/errorSnackbar/use-error-snackbar.tsx b/react-app/src/pages/popup/components/shared/errorSnackbar/use-error-snackbar.tsx new file mode 100644 index 00000000..674944a6 --- /dev/null +++ b/react-app/src/pages/popup/components/shared/errorSnackbar/use-error-snackbar.tsx @@ -0,0 +1,49 @@ +import exclamationOctagonIcon from '@assets/img/exclamation-octagon-icon.svg'; +import { useTranslation } from '@internationalization'; +import { useSnackbar } from '@mui/base/useSnackbar'; +import { StyledSnackbar } from '@pages/popup/components/shared/errorSnackbar/error-snackbar'; +import { StyledIcon } from '@pages/popup/components/shared/icon'; +import { useCallback, useState } from 'react'; +import { useUpdateEffect } from 'usehooks-ts'; + +const useErrorSnackbar = () => { + const [open, setOpen] = useState(false); + const [errorMessage, setErrorMessage] = useState(''); + + const handleClose = useCallback(() => { + setOpen(false); + setErrorMessage(''); + }, []); + + const { getRootProps } = useSnackbar({ + onClose: handleClose, + open, + autoHideDuration: 4000, + }); + + const { t } = useTranslation(); + + const handleErrorMessage = (message: string) => { + setErrorMessage(message); + }; + + useUpdateEffect(() => { + errorMessage && setOpen(true); + }, [errorMessage]); + + return { + StyledErrorSnackbar: ( + <> + {open && ( +{t('fallbackError')}
+