2 files changed, 26 insertions, 1 deletions

diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index a996990b5..5b901f3bf 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -9,7 +9,7 @@ import injectSheet from 'react-jss';
 import ms from 'ms';
 
 import { observable, autorun, reaction, makeObservable } from 'mobx';
-import { mdiExclamation } from '@mdi/js';
+import { mdiExclamation, mdiVolumeSource } from '@mdi/js';
 import ServiceModel from '../../../models/Service';
 import { cmdOrCtrlShortcutKey, shiftKey, altKey } from '../../../environment';
 import globalMessages from '../../../i18n/globalMessages';
@@ -350,6 +350,10 @@ class TabItem extends Component {
       );
     }
 
+    const mediaBadge = service.isMediaPlaying ? (
+      <Icon icon={mdiVolumeSource} className="tab-item__icon" />
+    ) : null;
+
     return (
       <li
         className={classnames({
@@ -375,6 +379,7 @@ class TabItem extends Component {
         )}
         {notificationBadge}
         {errorBadge}
+        {mediaBadge}
         {IS_SERVICE_DEBUGGING_ENABLED && (
           <>
             <div
diff --git a/src/models/Service.ts b/src/models/Service.ts
index fb594a6f4..b44e081b7 100644
--- a/src/models/Service.ts
+++ b/src/models/Service.ts
@@ -124,6 +124,8 @@ export default class Service {
 
   @observable proxy: string | null = null;
 
+  @observable isMediaPlaying: boolean = false;
+
   @action _setAutoRun() {
     if (!this.isEnabled) {
       this.webview = null;
@@ -261,6 +263,14 @@ export default class Service {
     this.hasCrashed = true;
   }
 
+  @action _didMediaPlaying(): void {
+    this.isMediaPlaying = true;
+  }
+
+  @action _didMediaPaused(): void {
+    this.isMediaPlaying = false;
+  }
+
   @computed get shareWithWebview(): object {
     return {
       id: this.id,
@@ -494,6 +504,16 @@ export default class Service {
       this.webview.send('found-in-page', result);
     });
 
+    this.webview.addEventListener('media-started-playing', event => {
+      debug('Started Playing media', this.name, event);
+      this._didMediaPlaying();
+    });
+
+    this.webview.addEventListener('media-paused', event => {
+      debug('Stopped Playing media', this.name, event);
+      this._didMediaPaused();
+    });
+
     webviewWebContents.on('login', (event, _, authInfo, callback) => {
       // const authCallback = callback;
       debug('browser login event', authInfo);