Merge pull request 'Release v0.4.0: Add possibility to disable platforms' (#106) from v0.4.0/add-plaform-disabling-support into develop

Reviewed-on: #106

.env.example

@@ -13,3 +13,8 @@ REDIS_URL='redis://127.0.0.1:6379'
 # uncomment variable below and add generated value
 
 # ENCODING_KEY=''
+
+# this key can be use to disable specific platforms
+# please add platforms list (comma separated, eg: 'pornhub,youporn,xnxx')
+# list of platform values can be found in Platforms enum inside src/meta/settings.ts
+# DISABLED_PLATFORMS=''

README.md

@@ -111,4 +111,17 @@ You can deploy the app on Vercel by cloning this repo on your GitHub/Gitlab and
 Due to Vercel's *serverless* nature (which makes every request to XVideos and other platforms come from a different IP) it becomes very hard for *web application firewalls* to ban addresses effectively.
 
 ## Self-host
+
 You can self host the project on your local server via docker-compose and reverse-proxy exposed port to nginx.
+
+### Disabling platforms (both Vercel / Self-host)
+
+For several reason you might want to disable some platforms. You can do it by adding `DISABLED_PLATFORMS` environment variable.
+
+List of platform values can be found in Platforms enum inside `src/meta/settings.ts`
+
+Please add platforms list comma separated. Example:
+
+```
+DISABLED_PLATFORMS='pornhub, xnxx'
+```

src/components/Layout/Header/Menu/Settings/Modal/Platform/index.tsx

@@ -11,6 +11,7 @@ import { useCookies } from 'react-cookie';
 
 interface Props {
     handleClose(): void
+    enabledPlatforms: string[]
     labels: {
         title: string,
     }
@@ -38,7 +39,7 @@ const mapOrientationToPlatform = (platform: string, orientation: string): string
 
 const Platform: React.FC<Props> = (props) => {
 
-    const { labels, handleClose } = props
+    const { labels, handleClose, enabledPlatforms } = props
 
     const [cookies] = useCookies([Cookies.platform, Cookies.orientation]);
 
@@ -60,6 +61,10 @@ const Platform: React.FC<Props> = (props) => {
             <div className={css.title}>{labels.title}</div>
             <select defaultValue={cookies.platform ?? Platforms.xvideos} onChange={handleChange} name={'platform'} aria-label={labels.title}>
                 {Object.keys(Platforms).map((elem, key) => {
+                    if (!enabledPlatforms.includes(elem)) {
+                        return null
+                    }
+
                     return <option className={css.option} key={key} value={elem}>{elem.toUpperCase()}</option>
                 })}
             </select>

src/components/Layout/Header/Menu/Settings/Modal/index.tsx

@@ -10,6 +10,7 @@ import Orientation from './Orientation';
 
 interface Props {
   handleClose(): void
+  enabledPlatforms: string[]
   labels: {
     title: string
     platform: any
@@ -19,7 +20,7 @@ interface Props {
 
 const LangSwitcher: React.FC<Props> = (props) => {
 
-  const { labels, handleClose } = props
+  const { labels, handleClose, enabledPlatforms } = props
 
   return (
     <dialog open>
@@ -29,7 +30,7 @@ const LangSwitcher: React.FC<Props> = (props) => {
           <div className={style.close} onClick={() => { handleClose() }}><IoCloseCircleOutline size={24} /></div>
         </header>
         <div className={style.content}>
-          <Platform handleClose={handleClose} labels={{ title: labels.platform.title }} />
+          <Platform enabledPlatforms={enabledPlatforms} handleClose={handleClose} labels={{ title: labels.platform.title }} />
           <Orientation handleClose={handleClose} labels={{ title: labels.orientation.title }} />
         </div>
       </article>

src/components/Layout/Header/Menu/Settings/index.tsx

@@ -9,11 +9,12 @@ import Modal from './Modal';
 
 interface Props {
     labels: any
+    enabledPlatforms: string[]
 }
 
 const Settings: React.FC<Props> = (props) => {
 
-    const { labels } = props
+    const { labels, enabledPlatforms } = props
 
     const [showModal, setShowModal] = useState<boolean>(false)
 
@@ -23,7 +24,7 @@ const Settings: React.FC<Props> = (props) => {
                 {<IoSettingsOutline size={24} />}
             </Icon>
 
-            {showModal && <Modal handleClose={() => setShowModal(false)} labels={labels} />}
+            {showModal && <Modal enabledPlatforms={enabledPlatforms} handleClose={() => setShowModal(false)} labels={labels} />}
         </>
     );
 };

src/components/Layout/Header/Menu/index.tsx

@@ -9,6 +9,7 @@ import Repo from './Repo';
 import Language from './Language';
 import { LangOption } from '@/meta/settings';
 import Settings from './Settings';
+import { getEnabledPlatforms } from '@/utils/platforms';
 
 const Menu: React.FC = () => {
 
@@ -34,12 +35,14 @@ const Menu: React.FC = () => {
         }
     }
 
+    const enabledPlatforms = getEnabledPlatforms()
+
     return (
         <div className={style.container}>
             <Repo />
             <Language labels={languageLabels} />
             <Theme />
-            <Settings labels={settingsLabels} />
+            <Settings enabledPlatforms={enabledPlatforms} labels={settingsLabels} />
         </div>
     );
 };

src/utils/platforms.ts

@@ -0,0 +1,11 @@
+import { Platforms } from "@/meta/settings";
+
+export const getEnabledPlatforms = ():string[] => {
+    if (process.env.DISABLED_PLATFORMS) {
+        const disabledPlatforms: string[] = String(process.env.DISABLED_PLATFORMS).replace(/\s/g, "").split(',')
+
+        return [...Object.values(Platforms)].filter(p => !disabledPlatforms.includes(p))
+    } else {
+        return [...Object.values(Platforms)]
+    }
+}