diff --git a/src/frontend/screens/Library/components/GameCard/index.css b/src/frontend/screens/Library/components/GameCard/index.css index 10fb24593a..24a82dc87e 100644 --- a/src/frontend/screens/Library/components/GameCard/index.css +++ b/src/frontend/screens/Library/components/GameCard/index.css @@ -126,6 +126,10 @@ grid-template-areas: 'update gap settings play'; } +.gameCard.justPlayed.hidden .justPlayedImg { + opacity: 0.2; +} + .gameCard.gamepad > .icons { display: none; } diff --git a/src/frontend/screens/Library/components/RecentlyPlayed/index.tsx b/src/frontend/screens/Library/components/RecentlyPlayed/index.tsx index 3b0428e0a6..c95acd7fa0 100644 --- a/src/frontend/screens/Library/components/RecentlyPlayed/index.tsx +++ b/src/frontend/screens/Library/components/RecentlyPlayed/index.tsx @@ -8,6 +8,7 @@ import { configStore } from 'frontend/helpers/electronStores' interface Props { handleModal: (appName: string, runner: Runner, gameInfo: GameInfo) => void onlyInstalled: boolean + showHidden: boolean } function getRecentGames( @@ -34,15 +35,19 @@ function getRecentGames( export default React.memo(function RecentlyPlayed({ handleModal, - onlyInstalled + onlyInstalled, + showHidden }: Props) { const { t } = useTranslation() const { epic, gog, sideloadedLibrary, amazon } = useContext(ContextProvider) const [recentGames, setRecentGames] = useState([]) + const hiddenGames = useContext(ContextProvider).hiddenGames + const loadRecentGames = async () => { + const hiddenAppNames = hiddenGames.list.map((game) => game.appName) const { maxRecentGames } = await window.api.requestAppSettings() - const newRecentGames = getRecentGames( + let newRecentGames = getRecentGames( [ ...epic.library, ...gog.library, @@ -52,7 +57,11 @@ export default React.memo(function RecentlyPlayed({ maxRecentGames, onlyInstalled ) - + if (!showHidden) { + newRecentGames = newRecentGames.filter( + (game: GameInfo) => !hiddenAppNames.includes(game.app_name) + ) + } setRecentGames(newRecentGames) } @@ -69,7 +78,14 @@ export default React.memo(function RecentlyPlayed({ return () => { recentGamesChangedRemoveListener() } - }, [epic.library, gog.library, amazon.library, sideloadedLibrary]) + }, [ + epic.library, + gog.library, + amazon.library, + sideloadedLibrary, + hiddenGames, + showHidden + ]) if (!recentGames.length) { return null diff --git a/src/frontend/screens/Library/index.tsx b/src/frontend/screens/Library/index.tsx index 6af28d3bed..263e1c61eb 100644 --- a/src/frontend/screens/Library/index.tsx +++ b/src/frontend/screens/Library/index.tsx @@ -306,13 +306,27 @@ export default React.memo(function Library(): JSX.Element { // top section const showRecentGames = libraryTopSection.startsWith('recently_played') + const favouriteGamesList = useMemo(() => { + if (showHidden) { + return favouriteGames.list + } + + const hiddenAppNames = hiddenGames.list.map( + (hidden: HiddenGame) => hidden.appName + ) + + return favouriteGames.list.filter( + (game) => !hiddenAppNames.includes(game.appName) + ) + }, [favouriteGames, showHidden, hiddenGames]) + const showFavourites = - libraryTopSection === 'favourites' && !!favouriteGames.list.length + libraryTopSection === 'favourites' && !!favouriteGamesList.length const favourites = useMemo(() => { const tempArray: GameInfo[] = [] if (showFavourites || showFavouritesLibrary) { - const favouriteAppNames = favouriteGames.list.map( + const favouriteAppNames = favouriteGamesList.map( (favourite: FavouriteGame) => favourite.appName ) epic.library.forEach((game) => { @@ -333,7 +347,14 @@ export default React.memo(function Library(): JSX.Element { const gameB = b.title.toUpperCase().replace('THE ', '') return gameA.localeCompare(gameB) }) - }, [showFavourites, showFavouritesLibrary, favouriteGames, epic, gog, amazon]) + }, [ + showFavourites, + showFavouritesLibrary, + favouriteGamesList, + epic, + gog, + amazon + ]) const favouritesIds = useMemo(() => { return favourites.map((game) => `${game.app_name}_${game.runner}`) @@ -591,6 +612,7 @@ export default React.memo(function Library(): JSX.Element { )}