feat(context-menu): add flag for disable context menu

README.md

@@ -16,12 +16,14 @@ The main idea is to gather the most annoying features of modern websites in one
   - [ ] Push elements to navigation stack so that when the user tries to navigate back it will stay on the page
   - [ ] Add flashing animation to flaim phone
   - [ ] Adblocker detection
+  - [ ] Add advertisement content to clipboard when copying text
 
 </details>
 
 <details>
   <summary>Completed</summary>
 
+  - [x] Prevent rightclick
   - [x] Fake advertisements (free phone)
   - [x] Add disabled mandatory experience checkboxes to settings
   - [x] DILF advertisement and landing page

public/locales/en/common.json

@@ -205,6 +205,7 @@
       },
       "contentPaywall": "Content paywall",
       "deadPixel": "Dead pixel",
+      "disableContextMenu": "Disable context (right click) menu",
       "exitPrompt": "Exit prompt",
       "mockChat": "Bubble chat",
       "newsletterModal": "Newsletter popup modal",
@@ -501,5 +502,8 @@
     "diamondColorB": "Diamond Color B",
     "width": "Width",
     "height": "Height"
+  },
+  "contextMenu": {
+    "disabled": "Hey, you can't right click here!"
   }
 }

src/features/context_menu/hooks/useContextMenu.tsx

@@ -0,0 +1,28 @@
+import { useTranslation } from 'next-i18next';
+import { useCallback, useEffect } from 'react';
+
+import { useExperienceFlagsStore } from '@/lib/state/experience_flags';
+
+const useContextMenu = () => {
+  const { t } = useTranslation('common');
+  const isDisabled = useExperienceFlagsStore(
+    (state) => state.disableContextMenu,
+  );
+  const handleContextMenu = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      alert(t('contextMenu.disabled'));
+    },
+    [t],
+  );
+
+  useEffect(() => {
+    if (!isDisabled) return;
+
+    document.addEventListener('contextmenu', handleContextMenu);
+
+    return () => document.removeEventListener('contextmenu', handleContextMenu);
+  }, [handleContextMenu, isDisabled]);
+};
+
+export default useContextMenu;

src/features/context_menu/index.ts

@@ -0,0 +1 @@
+export { default as useContextMenu } from './hooks/useContextMenu';

src/features/settings/components/ExperienceSettings.tsx

@@ -57,6 +57,14 @@ const ExperienceSettings: FunctionComponent<ExperienceSettingsProps> = ({
             onValueChange={experience.setDeadPixel}
           />
         </LabeledChild>
+        <LabeledChild
+          label={t('settings.optionalExperienceFlags.disableContextMenu')}>
+          <FormCheckbox
+            name="disable_context"
+            checked={experience.disableContextMenu}
+            onValueChange={experience.setDisableContextMenu}
+          />
+        </LabeledChild>
         <LabeledChild label={t('settings.optionalExperienceFlags.exitPrompt')}>
           <FormCheckbox
             name="exit_prompt"

src/lib/providers/ExperienceProvider.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from 'next-i18next';
 import { FunctionComponent, PropsWithChildren, useEffect } from 'react';
 import { useBeforeUnload } from 'react-use';
 
+import { useContextMenu } from '@/features/context_menu';
 import { NewsletterModalExperienceHost } from '@/features/newsletter';
 import { NotificationPermissionExperienceHost } from '@/features/notification';
 import { PageTitleExperienceHost } from '@/features/page_title';
@@ -21,6 +22,7 @@ const ExperienceProvider: FunctionComponent<PropsWithChildren> = ({
   useFirstInteractionListener();
   useDocumentVisibilityListener();
   useNavigationStats();
+  useContextMenu();
   useBeforeUnload(exitPrompt, t('app.exitPrompt'));
 
   useEffect(() => {

src/lib/state/experience_flags.ts

@@ -8,6 +8,7 @@ export interface ExperienceFlagsState {
   };
   contentPaywall: boolean;
   deadPixel: boolean;
+  disableContextMenu: boolean;
   exitPrompt: boolean;
   mockChat: boolean;
   newsletterModal: boolean;
@@ -26,6 +27,7 @@ export interface ExperienceFlagsStateActions {
   setGifts: (gifts: Partial<ExperienceFlagsState['gifts']>) => void;
   setContentPaywall: (contentPaywall: boolean) => void;
   setDeadPixel: (deadPixel: boolean) => void;
+  setDisableContextMenu: (disableContextMenu: boolean) => void;
   setExitPrompt: (exitPrompt: boolean) => void;
   setMockChat: (mockChat: boolean) => void;
   setNewsletterModal: (newsletterModal: boolean) => void;
@@ -49,6 +51,7 @@ const initialState: ExperienceFlagsState = {
   },
   contentPaywall: true,
   deadPixel: true,
+  disableContextMenu: true,
   exitPrompt: true,
   mockChat: true,
   newsletterModal: true,
@@ -73,6 +76,8 @@ export const useExperienceFlagsStore = create(
         set((state) => ({ gifts: { ...state.gifts, ...gifts } })),
       setContentPaywall: (contentPaywall) => set({ contentPaywall }),
       setDeadPixel: (deadPixel) => set({ deadPixel }),
+      setDisableContextMenu: (disableContextMenu) =>
+        set({ disableContextMenu: disableContextMenu }),
       setExitPrompt: (exitPrompt) => set({ exitPrompt }),
       setMockChat: (mockChat) => set({ mockChat }),
       setNewsletterModal: (newsletterModal) => set({ newsletterModal }),
@@ -96,6 +101,7 @@ export const useExperienceFlagsStore = create(
           },
           contentPaywall: false,
           deadPixel: false,
+          disableContextMenu: false,
           exitPrompt: false,
           mockChat: false,
           newsletterModal: false,
@@ -113,7 +119,7 @@ export const useExperienceFlagsStore = create(
     {
       name: 'zustand-experience-flags-storage',
       storage: createJSONStorage(() => localStorage),
-      version: 7,
+      version: 8,
       migrate: (_persistedState, _version) => {
         // Versions are supersets atm, don't need to juggle too much with
         // type states
@@ -122,10 +128,22 @@ export const useExperienceFlagsStore = create(
         return {
           ...persistedState,
           gifts: {
-            flaps: persistedState.gifts.flaps ?? true,
-            oneByOne: persistedState.gifts.oneByOne ?? true,
+            flaps: persistedState.gifts?.flaps ?? initialState.gifts.flaps,
+            oneByOne:
+              persistedState.gifts?.oneByOne ?? initialState.gifts.oneByOne,
           },
-          version: 7,
+          pageTitle: {
+            inactiveMarquee:
+              persistedState.pageTitle?.inactiveMarquee ??
+              initialState.pageTitle.inactiveMarquee,
+            randomGlitch:
+              persistedState.pageTitle?.randomGlitch ??
+              initialState.pageTitle.randomGlitch,
+            inactiveArrayPaged:
+              persistedState.pageTitle?.inactiveArrayPaged ??
+              initialState.pageTitle.inactiveArrayPaged,
+          },
+          version: 8,
         };
       },
     },