From 88c770f09950a29c4152ef0cd0ce834efe665fe2 Mon Sep 17 00:00:00 2001
From: Santhosh C <csesanthosh15@gmail.com>
Date: Tue, 4 Oct 2022 22:34:43 +0530
Subject: Feature: Indication Icon which service is playing media (#655)

---
 src/components/services/tabs/TabItem.js |  7 ++++++-
 src/models/Service.ts                   | 20 ++++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

(limited to 'src')

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);
-- 
cgit v1.2.3-54-g00ecf