Add audio-playing and audio-muted indicators to tabs (close #711)

beakerbrowser · Jan 30, 2019 · c008a37 · c008a37
1 parent ebaf942
commit c008a37
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 9 deletions.
diff --git a/app/shell-window/pages.js b/app/shell-window/pages.js
@@ -134,6 +134,8 @@ export function create (opts) {
     isReceivingAssets: false, // has the webview started receiving assets, in the current load-cycle?
     isActive: false, // is the active page?
     isInpageFinding: false, // showing the inpage find ctrl?
+    isCurrentlyAudible: false, // is the page currently playing music?
+    isAudioMuted: false, // is the page muted?
     inpageFindInfo: null, // any info available on the inpage find {activeMatchOrdinal, matches}
     liveReloadEvents: false, // live-reload event stream
     zoom: 0, // what's the current zoom level?
@@ -389,6 +391,8 @@ export function create (opts) {
   page.webviewEl.addEventListener('found-in-page', onFoundInPage)
   page.webviewEl.addEventListener('enter-html-full-screen', onEnterHtmlFullScreen)
   page.webviewEl.addEventListener('leave-html-full-screen', onLeaveHtmlFullScreen)
+  page.webviewEl.addEventListener('media-started-playing', onMediaChange)
+  page.webviewEl.addEventListener('media-paused', onMediaChange)
   page.webviewEl.addEventListener('close', onClose)
   page.webviewEl.addEventListener('crashed', onCrashed)
   page.webviewEl.addEventListener('gpu-crashed', onCrashed)
@@ -1001,6 +1005,13 @@ function onLeaveHtmlFullScreen (e) {
   document.body.classList.remove('page-fullscreen')
 }
 
+async function onMediaChange (e) {
+  var page = getByWebview(e.target)
+  await new Promise(r => setTimeout(r, 1e3)) // the event consistently precedes the audible check by at most 1s
+  page.isCurrentlyAudible = await page.isCurrentlyAudibleAsync()
+  events.emit('media-change', page)
+}
+
 function onClose (e) {
   var page = getByWebview(e.target)
   if (page) {

diff --git a/app/shell-window/ui/tabs.js b/app/shell-window/ui/tabs.js
@@ -48,6 +48,7 @@ export function setup () {
   pages.on('did-stop-loading', onUpdateTab)
   pages.on('page-title-updated', onUpdateTab)
   pages.on('page-favicon-updated', onUpdateTab)
+  pages.on('media-change', onUpdateTab)
   window.addEventListener('resize', debounce(onWindowResize, 500))
 }
 
@@ -57,6 +58,8 @@ export function setup () {
 function drawTab (page) {
   const isActive = page.isActive
   const isTabDragging = page.isTabDragging && (page.tabDragOffset !== 0)
+  const isAudioMuted = page.isAudioMuted
+  const isCurrentlyAudible = page.isCurrentlyAudible
 
   // pick a favicon
   var favicon
@@ -102,7 +105,11 @@ function drawTab (page) {
   }
 
   // normal rendering:
-
+  const audioIcon = isAudioMuted
+    ? yo`<span class="fas fa-volume-mute"></span>`
+    : isCurrentlyAudible
+      ? yo`<span class="fas fa-volume-up"></span>`
+      : ''
   return yo`
   <div class=${'chrome-tab' + cls}
       data-id=${page.id}
@@ -113,7 +120,7 @@ function drawTab (page) {
       title=${getNiceTitle(page)}>
     <div class="chrome-tab-bg"></div>
     <div class="chrome-tab-favicon">${favicon}</div>
-    <div class="chrome-tab-title">${getNiceTitle(page) || 'New Tab'}</div>
+    <div class="chrome-tab-title">${audioIcon}${getNiceTitle(page) || 'New Tab'}</div>
     <div class="chrome-tab-close" title="Close tab" onclick=${onClickTabClose(page)}></div>
   </div>`
 }
@@ -219,8 +226,9 @@ function onToggleMuted (page) {
   return () => {
     if (page.webviewEl) {
       const wc = page.webviewEl.getWebContents()
-      const isMuted = wc.isAudioMuted()
-      wc.setAudioMuted(!isMuted)
+      page.isAudioMuted = !wc.isAudioMuted()
+      wc.setAudioMuted(page.isAudioMuted)
+      onUpdateTab(page)
     }
   }
 }
@@ -272,16 +280,12 @@ function onClickReopenClosedTab () {
 function onContextMenuTab (page) {
   return e => {
     const { Menu } = remote
-    var isMuted = false
-    if (page.webviewEl) {
-      isMuted = page.webviewEl.getWebContents().isAudioMuted()
-    }
     var menu = Menu.buildFromTemplate([
       { label: 'New Tab', click: onClickNew },
       { type: 'separator' },
       { label: 'Duplicate', click: onClickDuplicate(page) },
       { label: (page.isPinned) ? 'Unpin Tab' : 'Pin Tab', click: onClickPin(page) },
-      { label: (isMuted) ? 'Unmute Tab' : 'Mute Tab', click: onToggleMuted(page) },
+      { label: (page.isAudioMuted) ? 'Unmute Tab' : 'Mute Tab', click: onToggleMuted(page) },
       { type: 'separator' },
       { label: 'Close Tab', click: onClickTabClose(page) },
       { label: 'Close Other Tabs', click: onClickCloseOtherTabs(page) },

diff --git a/app/shell-window/webview-async.js b/app/shell-window/webview-async.js
@@ -38,6 +38,7 @@ const methods = [
   'inspectElement',
   'setAudioMuted',
   'isAudioMuted',
+  'isCurrentlyAudible',
   'undo',
   'redo',
   'cut',

diff --git a/app/stylesheets/shell-window/chrome-tabs.less b/app/stylesheets/shell-window/chrome-tabs.less
@@ -88,6 +88,11 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+
+      .fa-volume-up,
+      .fa-volume-mute {
+        margin-right: 4px;
+      }
     }
 
     &.chrome-tab-nofavicon .chrome-tab-title {