feat: 18+ filter for airing schedule (akuse-app#159)

ch0nker · Sep 27, 2024 · dec3958 · dec3958
1 parent 9aa51e8
commit dec3958
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 19 deletions.
diff --git a/src/modules/anilist/anilistApi.ts b/src/modules/anilist/anilistApi.ts
@@ -218,6 +218,9 @@ const MEDIA_DATA: string = `
         ${RECOMMEND_DATA}
     `;
 
+const filterAdultMedia = (media?: Media) =>
+  media && !media.isAdult;
+
 /**
  * Retrieves the access token for the api
  *
@@ -581,6 +584,10 @@ export const getAiredAnime = async (
 
   pageData.airingSchedules = pageData.airingSchedules.reverse();
 
+  const adultContent = STORE.get('adult_content') as boolean;
+  if (!adultContent)
+    pageData.airingSchedules = pageData.airingSchedules.filter((value) => filterAdultMedia(value.media));
+
   return pageData
 };
 
@@ -627,8 +634,13 @@ export const getAiringSchedule = async (
 
   const options = getOptions(query);
   const respData = await makeRequest(METHOD, GRAPH_QL_URL, headers, options);
+  const pageData = respData.data.Page as AiringPage;
+
+  const adultContent = STORE.get('adult_content') as boolean;
+  if (!adultContent)
+    pageData.airingSchedules = pageData.airingSchedules.filter((value) => filterAdultMedia(value.media));
 
-  return respData.data.Page.airingSchedules as AiringSchedule[];
+  return pageData.airingSchedules as AiringSchedule[];
 };
 
 /**

diff --git a/src/modules/storeVariables.ts b/src/modules/storeVariables.ts
@@ -12,7 +12,8 @@ const defaultValues = {
   trailer_volume_on: false,
   volume: 1,
   episodes_per_page: 30,
-  history: { entries: {} }
+  history: { entries: {} },
+  adult_content: true
 }
 
 export const setDefaultStoreVariables = () => {

diff --git a/src/renderer/components/AnimeSections.tsx b/src/renderer/components/AnimeSections.tsx
@@ -31,10 +31,10 @@ const AnimeSections: React.FC<AnimeSectionsProps> = ({
   const [enableButtons, setEnableButtons] = useState<boolean>(false);
   const [showButtons, setShowButtons] = useState<boolean>(false);
   // const [selectedSection, setSelectedAnime] = useState<ListAnimeData>();
-  options = options.filter((value) => value.value.length > 0)
-  const selected = options.find((value) => value.label === selectedLabel);
+  options = options.filter((value) => value.value.length > 0);
+  const selected = options.find((value) => value.label === selectedLabel) || options[0];
   const [animeData, setAnimeData] = useState<ListAnimeData[]>(
-    selected && selected.value || options[0].value
+    selected.value
   );
 
   const hideButtons = () => {

diff --git a/src/renderer/components/Heading.tsx b/src/renderer/components/Heading.tsx
@@ -1,12 +1,13 @@
 import './styles/Heading.css'
 
 interface HeadingProps {
-  text: string
+  text: string;
+  children?: React.ReactNode;
 }
 
-const Heading:React.FC<HeadingProps> = ({ text }) => {
+const Heading:React.FC<HeadingProps> = ({ text, children }) => {
   return (
-    <h1 className='heading'>{text}</h1>
+    <h1 className='heading'>{text}{children}</h1>
   )
 }
 

diff --git a/src/renderer/components/modals/AnimeModal.tsx b/src/renderer/components/modals/AnimeModal.tsx
@@ -434,16 +434,17 @@ const AnimeModal: React.FC<AnimeModalProps> = ({
               loading={loading}
               onPlay={playEpisode}
             />
-            {(recommendedAnime || relatedAnime) && <AnimeSections
+            {(relatedAnime && relatedAnime.length > 0 ||
+              recommendedAnime && recommendedAnime.length > 0) && <AnimeSections
               id={'recommended'}
               selectedLabel={relatedAnime && 'Related' || 'Recommended'}
               onClick={() => {
                 setOnScreen(false);
                 closeModal(false);
               }}
               options={[
-                {label: 'Related', value: relatedAnime || []},
-                {label: 'Recommended', value: recommendedAnime || []},
+                {label: 'Related', value: relatedAnime === undefined ? [] : relatedAnime},
+                {label: 'Recommended', value: recommendedAnime === undefined ? [] : recommendedAnime},
               ]}
             />}
           </div>

diff --git a/src/renderer/tabs/Tab3.tsx b/src/renderer/tabs/Tab3.tsx
@@ -21,7 +21,9 @@ import AnimeEntry from '../components/AnimeEntry';
 import Heading from '../components/Heading';
 import { faTrashCan } from '@fortawesome/free-regular-svg-icons';
 import { PageInfo } from '../../types/anilistGraphQLTypes';
+import Store from 'electron-store'
 
+const store = new Store();
 
 const Tab3: React.FC = () => {
   const viewerId = useContext(ViewerIdContext);

diff --git a/src/renderer/tabs/Tab4.tsx b/src/renderer/tabs/Tab4.tsx
@@ -133,6 +133,9 @@ const Tab4: React.FC = () => {
   const [skipTime, setSkipTime] = useState<number>(
     STORE.get('key_press_skip') as number
   );
+  const [adultContent, setAdultContent] = useState<boolean>(
+    STORE.get('adult_content') as boolean
+  );
 
   const [clearHistory, setClearHistory] = useState<boolean>(false);
 
@@ -147,6 +150,11 @@ const Tab4: React.FC = () => {
     setClearHistory(!clearHistory);
   };
 
+  const handleAdultContent = () => {
+    STORE.set('adult_content', !adultContent);
+    setAdultContent(!adultContent);
+  };
+
   const handleUpdateProgressChange = () => {
     STORE.set('update_progress', !updateProgress);
     setUpdateProgress(!updateProgress);
@@ -222,6 +230,16 @@ const Tab4: React.FC = () => {
         <div className="settings-page">
           <Heading text="Settings" />
 
+          <h1>General</h1>
+
+          <CheckboxElement
+            label="Show 18+ content (only applies to 'Recently Aired')"
+            checked={adultContent}
+            onChange={handleAdultContent}
+          />
+
+          <br/>
+
           <h1>Playback</h1>
 
           <CheckboxElement
@@ -260,6 +278,8 @@ const Tab4: React.FC = () => {
             onChange={handleLanguageChange}
           />
 
+          <br/>
+
           <h1>Appearance</h1>
 
           <CheckboxElement
@@ -276,6 +296,8 @@ const Tab4: React.FC = () => {
             onChange={handleEpisodesPerPage}
           />
 
+          <br/>
+
           <h1>Sync & Storage</h1>
 
           {logged && (

diff --git a/src/renderer/tabs/Tab5.tsx b/src/renderer/tabs/Tab5.tsx
@@ -5,17 +5,13 @@ import { getAiredAnime } from "../../modules/anilist/anilistApi";
 import { airingDataToListAnimeData } from "../../modules/utils";
 import { Dots } from "react-activity";
 import AnimeEntry from "../components/AnimeEntry";
+import Store from "electron-store";
 
 interface Tab5Props {
   viewerId: number | null;
 }
 
-// interface Option {
-//   label: string;
-//   value: ListAnimeData[];
-// }
-
-// const store = new Store();
+const store = new Store();
 
 const Tab5: React.FC<Tab5Props> = ({ viewerId }) => {
   const pageRef = useRef<number>(1);
@@ -32,6 +28,11 @@ const Tab5: React.FC<Tab5Props> = ({ viewerId }) => {
   // time constants
   const timeOffset = 86400;
 
+  //other
+  const [adultContent, setAdultContent] = useState<boolean>(
+    store.get('adult_content') as boolean
+  );
+
   useEffect(() => {
     const current = Date.now() / 1000;
 
@@ -98,9 +99,15 @@ const Tab5: React.FC<Tab5Props> = ({ viewerId }) => {
     populateAiredAnime();
   };
 
+  const handleAdultContent = () => {
+    store.set('adult_content', !adultContent);
+    setAdultContent(!adultContent);
+  };
+
+
   return (
     <div className="body-container show-tab" onScroll={handleScroll}>
-      <div className="main-container lifted">
+      <div className="main-container lifted schedule-page">
         <main>
           {/* <Slideshow listAnimeData={todayAnime} maxAmount={todayAnime.length}/>
           <AnimeSection
@@ -113,7 +120,7 @@ const Tab5: React.FC<Tab5Props> = ({ viewerId }) => {
             selectedLabel={getDayName(new Date(), 'en-US')}
             options={weekAnime}
           />} */}
-          <Heading text="Recently Aired" />
+          <Heading text="Recently Aired"/>
           <div className="entries-container">
             {!airedAnime ? (
               <div className="activity-indicator">