feat: add setting to disable on-screen celebration effects

src/constants.js

@@ -64,6 +64,7 @@ export const SettingIds = {
   CHATBOT_COMMAND_AUTOCOMPLETE: 'chatbotCommandAutocomplete',
   SELF_BOT: 'selfBot',
   SELF_BOT_COMMANDS_LIST: 'selfBotCommandsList',
+  CELEBRATIONS: 'celebrations',
 };
 
 export const CategoryTypes = {
@@ -128,6 +129,11 @@ export const ChannelPointsFlags = {
   MESSAGE_HIGHLIGHTS: 1 << 2,
 };
 
+export const CelebrationFlags = {
+  CELEBRATIONS: 1 << 0,
+  CHEER_EFFECTS: 1 << 1,
+};
+
 export const AutoPlayFlags = {
   FP_VIDEO: 1 << 0,
   // HOST_MODE: 1 << 1,
@@ -307,6 +313,7 @@ export const SettingDefaultValues = {
   ],
   [SettingIds.CHANNEL_POINTS]: [ChannelPointsFlags.CHANNEL_POINTS | ChannelPointsFlags.MESSAGE_HIGHLIGHTS, 0],
   [SettingIds.AUTO_CLAIM]: [0, 0],
+  [SettingIds.CELEBRATIONS]: [CelebrationFlags.CELEBRATIONS | CelebrationFlags.CHEER_EFFECTS, 0],
   [SettingIds.LIVE_CHAT_VIEW]: false,
   [SettingIds.EMOTE_MENU_WIDTH]: 498,
   [SettingIds.HYPE_CHAT]: true,
@@ -324,6 +331,7 @@ export const FlagSettings = [
   SettingIds.USERNAMES,
   SettingIds.CHANNEL_POINTS,
   SettingIds.AUTO_CLAIM,
+  SettingIds.CELEBRATIONS,
 ];
 
 export const PlatformTypes = {

src/modules/hide_celebrations/index.js

@@ -0,0 +1,19 @@
+import {CelebrationFlags, PlatformTypes, SettingIds} from '@/constants';
+import settings from '@/settings';
+import {hasFlag} from '@/utils/flags';
+import {loadModuleForPlatforms} from '@/utils/modules';
+
+class HideCelebrationsModule {
+  constructor() {
+    settings.on(`changed.${SettingIds.CELEBRATIONS}`, () => this.load());
+    this.load();
+  }
+
+  load() {
+    const celebrations = settings.get(SettingIds.CELEBRATIONS);
+    document.body.classList.toggle('bttv-hide-celebrations', !hasFlag(celebrations, CelebrationFlags.CELEBRATIONS));
+    document.body.classList.toggle('bttv-hide-cheer-effects', !hasFlag(celebrations, CelebrationFlags.CHEER_EFFECTS));
+  }
+}
+
+export default loadModuleForPlatforms([PlatformTypes.TWITCH, () => new HideCelebrationsModule()]);

src/modules/hide_celebrations/style.css

@@ -0,0 +1,11 @@
+.bttv-hide-celebrations {
+  .celebration__overlay {
+    display: none !important;
+  }
+}
+
+.bttv-hide-cheer-effects {
+  .particle-canvas {
+    display: none !important;
+  }
+}

src/modules/settings/settings/twitch/Celebrations.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import useStorageState from '@/common/hooks/StorageState';
+import {SettingIds, CelebrationFlags} from '@/constants';
+import formatMessage from '@/i18n/index';
+import SettingCheckbox from '@/modules/settings/components/SettingCheckbox';
+import SettingCheckboxGroup from '@/modules/settings/components/SettingCheckboxGroup';
+import SettingStore, {SettingCategoryIds, SettingPanelIds} from '@/modules/settings/stores/setting-store';
+
+const SETTING_NAME = formatMessage({defaultMessage: 'Celebrations'});
+
+function Celebrations({ref, ...props}) {
+  const [celebrations, setCelebrations] = useStorageState(SettingIds.CELEBRATIONS);
+
+  return (
+    <SettingCheckboxGroup
+      ref={ref}
+      {...props}
+      name={SETTING_NAME}
+      value={celebrations}
+      onChange={setCelebrations}
+      flags={Object.values(CelebrationFlags)}>
+      <SettingCheckbox
+        value={CelebrationFlags.CELEBRATIONS}
+        name={formatMessage({defaultMessage: 'Celebrations'})}
+        description={formatMessage({
+          defaultMessage: 'Show on-screen channel celebration overlays, such as when a milestone is reached.',
+        })}
+      />
+      <SettingCheckbox
+        value={CelebrationFlags.CHEER_EFFECTS}
+        name={formatMessage({defaultMessage: 'Cheer Effects'})}
+        description={formatMessage({
+          defaultMessage: 'Show on-screen confetti and particle effects from cheers and Power-ups.',
+        })}
+      />
+    </SettingCheckboxGroup>
+  );
+}
+
+SettingStore.registerSetting(Celebrations, {
+  settingPanelId: SettingPanelIds.CELEBRATIONS,
+  settingCategoryId: SettingCategoryIds.CHANNEL,
+  name: SETTING_NAME,
+  supportsStandaloneWindow: true,
+});
+
+export default Celebrations;

src/modules/settings/stores/setting-store.js

@@ -33,6 +33,7 @@ export const SettingPanelIds = {
   SELF_BOT: 'selfBot',
   SUBSCRIPTION_BADGE: 'subscriptionBadge',
   USERNAME_EFFECT: 'usernameEffect',
+  CELEBRATIONS: 'celebrations',
 };
 
 export const SettingCategoryIds = {