diff --git a/src/store/reducers/videos.ts b/src/store/reducers/videos.ts index ae2b917..98186cf 100644 --- a/src/store/reducers/videos.ts +++ b/src/store/reducers/videos.ts @@ -2,7 +2,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { elapsedDays } from 'helpers/utils'; import { isWebExtension } from 'helpers/webext'; import { VideoCache, Video, VideoFlags, VideoFlag } from 'types'; -import { defaults as channelCheckerDefaults } from 'ui/components/webext/Background/ChannelChecker'; +import { config as channelCheckerConfig } from 'ui/components/webext/Background/ChannelChecker'; type AddVideoPayload = Video | Omit; type RemoveVideoPayload = Video | Pick; @@ -180,7 +180,7 @@ export const videosSlice = createSlice({ flags.viewed || flags.toWatchLater || ((flags.notified || flags.recent) && - elapsedDays(publishedAt) <= channelCheckerDefaults.videosSeniority) + elapsedDays(publishedAt) <= channelCheckerConfig.videosSeniority) ); }, }, diff --git a/src/store/selectors/settings.ts b/src/store/selectors/settings.ts index 4e62af4..c42b806 100644 --- a/src/store/selectors/settings.ts +++ b/src/store/selectors/settings.ts @@ -24,3 +24,8 @@ export const selectHomeDisplayOptions = createSelector( selectSettings, (settings) => settings.homeDisplayOptions ); + +export const selectRecentVideosSeniority = createSelector( + selectSettings, + (settings) => settings.recentVideosSeniority +); diff --git a/src/ui/components/pages/Home/TabActions/RecentViewActions/RecentVideosSeniority.tsx b/src/ui/components/pages/Home/TabActions/RecentViewActions/RecentVideosSeniority.tsx new file mode 100644 index 0000000..299a766 --- /dev/null +++ b/src/ui/components/pages/Home/TabActions/RecentViewActions/RecentVideosSeniority.tsx @@ -0,0 +1,93 @@ +import React, { useState } from 'react'; +import { IconButton } from '@mui/material'; +import { StyledMenu, CheckableMenuItem } from 'ui/components/shared'; +import { useAppDispatch, useAppSelector } from 'store'; +import HistoryIcon from '@mui/icons-material/History'; +import { selectRecentVideosSeniority } from 'store/selectors/settings'; +import { setSettings } from 'store/reducers/settings'; +import { Nullable, VideosSeniority } from 'types'; + +interface RecentVideosSeniorityProps {} + +const options = [ + { + label: '1 day', + value: VideosSeniority.OneDay, + }, + { + label: '3 days', + value: VideosSeniority.ThreeDays, + }, + { + label: '7 days', + value: VideosSeniority.SevenDays, + }, + { + label: '2 weeks', + value: VideosSeniority.TwoWeeks, + }, + { + label: '1 month', + value: VideosSeniority.OneMonth, + }, +]; + +function RecentVideosSeniority(props: RecentVideosSeniorityProps) { + const seniority = useAppSelector(selectRecentVideosSeniority); + const dispatch = useAppDispatch(); + const [anchorEl, setAnchorEl] = useState>(null); + const open = Boolean(anchorEl); + + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const handleChange = (recentVideosSeniority: VideosSeniority) => { + dispatch(setSettings({ recentVideosSeniority })); + }; + + return ( + <> + + + + + {options.map(({ label, value }) => ( + handleChange(value)} + > + {label} + + ))} + + + ); +} + +export default RecentVideosSeniority; diff --git a/src/ui/components/pages/Home/TabActions/RecentViewActions.tsx b/src/ui/components/pages/Home/TabActions/RecentViewActions/RecentViewFilters.tsx similarity index 95% rename from src/ui/components/pages/Home/TabActions/RecentViewActions.tsx rename to src/ui/components/pages/Home/TabActions/RecentViewActions/RecentViewFilters.tsx index 70b9b87..5dfd7fd 100644 --- a/src/ui/components/pages/Home/TabActions/RecentViewActions.tsx +++ b/src/ui/components/pages/Home/TabActions/RecentViewActions/RecentViewFilters.tsx @@ -7,9 +7,9 @@ import { selectViewFilters } from 'store/selectors/settings'; import { setViewFilters } from 'store/reducers/settings'; import { HomeView, Nullable } from 'types'; -interface RecentViewActionsProps {} +interface RecentViewFiltersProps {} -function RecentViewActions(props: RecentViewActionsProps) { +function RecentViewFilters(props: RecentViewFiltersProps) { const filters = useAppSelector(selectViewFilters(HomeView.Recent)); const dispatch = useAppDispatch(); const [anchorEl, setAnchorEl] = useState>(null); @@ -103,4 +103,4 @@ function RecentViewActions(props: RecentViewActionsProps) { ); } -export default RecentViewActions; +export default RecentViewFilters; diff --git a/src/ui/components/pages/Home/TabActions/RecentViewActions/index.tsx b/src/ui/components/pages/Home/TabActions/RecentViewActions/index.tsx new file mode 100644 index 0000000..b94214a --- /dev/null +++ b/src/ui/components/pages/Home/TabActions/RecentViewActions/index.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Box } from '@mui/material'; +import RecentViewFilters from './RecentViewFilters'; +import RecentVideosSeniority from './RecentVideosSeniority'; + +interface RecentViewActionsProps {} + +function RecentViewActions(props: RecentViewActionsProps) { + return ( + + + + + ); +} + +export default RecentViewActions; diff --git a/src/ui/components/pages/Settings/index.tsx b/src/ui/components/pages/Settings/index.tsx index b822e9e..1381dd5 100644 --- a/src/ui/components/pages/Settings/index.tsx +++ b/src/ui/components/pages/Settings/index.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect, useMemo } from 'react'; import { Stack, Divider, Link } from '@mui/material'; import { Layout } from 'ui/components/shared'; -import { HomeView, QueryTimeout, SettingType, VideosSeniority } from 'types'; +import { HomeView, QueryTimeout, SettingType } from 'types'; import { ControlledField, CustomField } from './Field'; import { useAppDispatch, useAppSelector } from 'store'; import { selectSettings } from 'store/selectors/settings'; @@ -14,7 +14,7 @@ import { memorySizeOf, formatByteSize, } from 'helpers/utils'; -import { defaults as channelCheckerDefaults } from 'ui/components/webext/Background/ChannelChecker'; +import { config as channelCheckerConfig } from 'ui/components/webext/Background/ChannelChecker'; import { selectVideos } from 'store/selectors/videos'; import SavedVideosOptions from './SavedVideosOptions'; @@ -74,36 +74,6 @@ export function Settings(props: SettingsProps) { options={activeViews} type={SettingType.List} /> - { - dispatch(setSettings({ recentVideosSeniority })); - }} - options={[ - { - label: '1 day', - value: VideosSeniority.OneDay, - }, - { - label: '3 days', - value: VideosSeniority.ThreeDays, - }, - { - label: '7 days', - value: VideosSeniority.SevenDays, - }, - { - label: '2 weeks', - value: VideosSeniority.TwoWeeks, - }, - { - label: '1 month', - value: VideosSeniority.OneMonth, - }, - ]} - type={SettingType.List} - /> ( }} {...props} /> -))(({ theme }) => ({ +))(({ theme, style }) => ({ '& .MuiPaper-root': { borderRadius: 6, marginTop: theme.spacing(1), - minWidth: 180, + minWidth: style?.minWidth || 180, color: theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' diff --git a/src/ui/components/webext/Background/ChannelChecker.tsx b/src/ui/components/webext/Background/ChannelChecker.tsx index e41c5d6..2fec039 100644 --- a/src/ui/components/webext/Background/ChannelChecker.tsx +++ b/src/ui/components/webext/Background/ChannelChecker.tsx @@ -17,7 +17,7 @@ interface ChannelCheckerProps { onCheckEnd: (data: CheckEndData) => void; } -export const defaults = { +export const config = { checkInterval: 30, // minute(s) videosSeniority: 1, // day(s) }; @@ -26,8 +26,8 @@ export default function ChannelChecker(props: ChannelCheckerProps) { const { channel, onCheckEnd } = props; const [ready, setReady] = useState(false); const cachedVideos = useAppSelector(selectChannelVideos(channel)); - const publishedAfter = getDateBefore(defaults.videosSeniority).toISOString(); - const pollingInterval = defaults.checkInterval * 60000; // convert minutes to milliseconds + const publishedAfter = getDateBefore(config.videosSeniority).toISOString(); + const pollingInterval = config.checkInterval * 60000; // convert minutes to milliseconds const { data, isFetching, refetch } = useGetChannelVideosQuery( { channel,