7 files changed, 27 insertions, 3 deletions

diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index ccf4e8d18..0aab82a6f 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -350,7 +350,10 @@ class TabItem extends Component {
       );
     }
 
-    const showMediaBadge = service.isMediaPlaying && service.isEnabled;
+    const showMediaBadge =
+      service.isMediaBadgeEnabled &&
+      service.isMediaPlaying &&
+      service.isEnabled;
     const mediaBadge = (
       <Icon icon={mdiVolumeSource} className="tab-item__icon" />
     );
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index ab43bace9..069b6643c 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -347,6 +347,7 @@ class EditServiceForm extends Component {
                   <p className="settings__help indented__help">
                     {intl.formatMessage(messages.isMutedInfo)}
                   </p>
+                  <Toggle field={form.$('isMediaBadgeEnabled')} />
                 </div>
 
                 <div className="settings__settings-group">
diff --git a/src/config.ts b/src/config.ts
index 1261d900f..4bd1ca155 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -441,6 +441,7 @@ export const DEFAULT_SERVICE_SETTINGS = {
   isWakeUpEnabled: true,
   isNotificationEnabled: true,
   isBadgeEnabled: true,
+  isMediaBadgeEnabled: false,
   trapLinkClicks: false,
   isMuted: false,
   customIcon: false,
diff --git a/src/containers/settings/EditServiceScreen.tsx b/src/containers/settings/EditServiceScreen.tsx
index 0c7e3aa07..d0f0c779d 100644
--- a/src/containers/settings/EditServiceScreen.tsx
+++ b/src/containers/settings/EditServiceScreen.tsx
@@ -49,6 +49,10 @@ const messages = defineMessages({
     id: 'settings.service.form.enableBadge',
     defaultMessage: 'Show unread message badges',
   },
+  enableMediaBadge: {
+    id: 'settings.service.form.enableMediaBadge',
+    defaultMessage: 'Enable Media Play Indicator',
+  },
   enableAudio: {
     id: 'settings.service.form.enableAudio',
     defaultMessage: 'Enable audio',
@@ -206,6 +210,11 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
           value: service?.isBadgeEnabled,
           default: DEFAULT_SERVICE_SETTINGS.isBadgeEnabled,
         },
+        isMediaBadgeEnabled: {
+          label: intl.formatMessage(messages.enableMediaBadge),
+          value: service?.isMediaBadgeEnabled,
+          default: DEFAULT_SERVICE_SETTINGS.isMediaBadgeEnabled,
+        },
         trapLinkClicks: {
           label: intl.formatMessage(messages.trapLinkClicks),
           value: service?.trapLinkClicks,
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 80ad855c3..58aaebc69 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -344,6 +344,7 @@
   "settings.service.form.editServiceHeadline": "Edit {name}",
   "settings.service.form.enableAudio": "Enable audio",
   "settings.service.form.enableBadge": "Show unread message badges",
+  "settings.service.form.enableMediaBadge": "Enable Media Play Indicator",
   "settings.service.form.enableDarkMode": "Enable Dark Mode",
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Enable notifications",
@@ -491,4 +492,4 @@
   "workspaceDrawer.workspaceFeatureInfo": "<p>Ferdium Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
   "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
\ No newline at end of file
+}
diff --git a/src/models/Service.ts b/src/models/Service.ts
index f33d30695..e45909631 100644
--- a/src/models/Service.ts
+++ b/src/models/Service.ts
@@ -8,7 +8,7 @@ import ElectronWebView from 'react-electron-web-view';
 import { todosStore } from '../features/todos';
 import { isValidExternalURL } from '../helpers/url-helpers';
 import UserAgent from './UserAgent';
-import { DEFAULT_SERVICE_ORDER } from '../config';
+import { DEFAULT_SERVICE_ORDER, DEFAULT_SERVICE_SETTINGS } from '../config';
 import { ifUndefined } from '../jsUtils';
 import { IRecipe } from './Recipe';
 import { needsToken } from '../api/apiBase';
@@ -59,6 +59,9 @@ export default class Service {
 
   @observable isBadgeEnabled: boolean = true;
 
+  @observable isMediaBadgeEnabled: boolean =
+    DEFAULT_SERVICE_SETTINGS.isMediaBadgeEnabled;
+
   @observable trapLinkClicks: boolean = false;
 
   @observable isIndirectMessageBadgeEnabled: boolean = true;
@@ -169,6 +172,11 @@ export default class Service {
       data.isBadgeEnabled,
       this.isBadgeEnabled,
     );
+
+    this.isMediaBadgeEnabled = ifUndefined<boolean>(
+      data.isMediaBadgeEnabled,
+      this.isMediaBadgeEnabled,
+    );
     this.trapLinkClicks = ifUndefined<boolean>(
       data.trapLinkClicks,
       this.trapLinkClicks,
diff --git a/src/stores/ServicesStore.ts b/src/stores/ServicesStore.ts
index 00cf33b17..c8faf2e5c 100644
--- a/src/stores/ServicesStore.ts
+++ b/src/stores/ServicesStore.ts
@@ -460,6 +460,7 @@ export default class ServicesStore extends TypedStore {
       isWakeUpEnabled: DEFAULT_SERVICE_SETTINGS.isWakeUpEnabled,
       isNotificationEnabled: DEFAULT_SERVICE_SETTINGS.isNotificationEnabled,
       isBadgeEnabled: DEFAULT_SERVICE_SETTINGS.isBadgeEnabled,
+      isMediaBadgeEnabled: DEFAULT_SERVICE_SETTINGS.isMediaBadgeEnabled,
       trapLinkClicks: DEFAULT_SERVICE_SETTINGS.trapLinkClicks,
       isMuted: DEFAULT_SERVICE_SETTINGS.isMuted,
       customIcon: DEFAULT_SERVICE_SETTINGS.customIcon,