diff --git a/src/constants.js b/src/constants.js index e03c854ad..6deb98099 100644 --- a/src/constants.js +++ b/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 = { diff --git a/src/modules/hide_celebrations/index.js b/src/modules/hide_celebrations/index.js new file mode 100644 index 000000000..c4d2fdbd4 --- /dev/null +++ b/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()]); diff --git a/src/modules/hide_celebrations/style.css b/src/modules/hide_celebrations/style.css new file mode 100644 index 000000000..4ac65b1d2 --- /dev/null +++ b/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; + } +} diff --git a/src/modules/settings/settings/twitch/Celebrations.jsx b/src/modules/settings/settings/twitch/Celebrations.jsx new file mode 100644 index 000000000..224d13cca --- /dev/null +++ b/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 ( + + + + + ); +} + +SettingStore.registerSetting(Celebrations, { + settingPanelId: SettingPanelIds.CELEBRATIONS, + settingCategoryId: SettingCategoryIds.CHANNEL, + name: SETTING_NAME, + supportsStandaloneWindow: true, +}); + +export default Celebrations; diff --git a/src/modules/settings/stores/setting-store.js b/src/modules/settings/stores/setting-store.js index 23fd8cc97..d1f915444 100644 --- a/src/modules/settings/stores/setting-store.js +++ b/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 = {