support #20

Author: lxieyang

CHANGELOG.md

@@ -12,6 +12,11 @@ All notable changes to this project will be documented in this file.
 
 # v1.x (official releases)
 
+### [1.6.0](https://github.com/lxieyang/vertical-tabs-chrome-extension/releases/tag/v1.6.0) (2020-01-06)
+
+- **Mute** tabs with a single click.
+- Fixed a bug regarding the context menu
+
 ### [1.5.1](https://github.com/lxieyang/vertical-tabs-chrome-extension/releases/tag/v1.5.1) (2019-12-29)
 
 - Fixed a bug where the `new URL()` API returns invalid.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vertical-tabs-chrome-extension",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "A chrome extension that presents your tabs vertically.",
   "license": "MIT",
   "repository": {

src/pages/Sidebar/containers/TabsList/Tab/Tab.jsx

@@ -9,7 +9,7 @@ import { ContextMenu, MenuItem, ContextMenuTrigger } from 'react-contextmenu';
 
 import { MdClose } from 'react-icons/md';
 import { MdRefresh } from 'react-icons/md';
-import { MdVolumeOff } from 'react-icons/md';
+import { MdVolumeOff, MdVolumeUp } from 'react-icons/md';
 import { FaThumbtack } from 'react-icons/fa';
 
 import './Tab.css';
@@ -108,9 +108,10 @@ const Tab = ({
     chrome.tabs.update(id, { pinned: !pinned });
   };
 
-  // const muteTabClickedHandler = (e, tabId) => {
-  //   chrome.tabs.update(id, { muted: !muted });
-  // };
+  const muteTabClickedHandler = (e, tabId) => {
+    e.stopPropagation();
+    chrome.tabs.update(id, { muted: mutedInfo.muted ? false : true });
+  };
 
   const closeTabClickedHandler = (e, tabId) => {
     e.stopPropagation();
@@ -233,10 +234,22 @@ const Tab = ({
                         'MutedIconContainer',
                         isDark ? 'Dark' : null,
                       ].join(' ')}
+                      onClick={(e) => muteTabClickedHandler(e, id)}
                     >
                       <MdVolumeOff size={'16px'} />
                     </div>
                   )}
+                  {!mutedInfo.muted && audible && (
+                    <div
+                      className={[
+                        'MutedIconContainer',
+                        isDark ? 'Dark' : null,
+                      ].join(' ')}
+                      onClick={(e) => muteTabClickedHandler(e, id)}
+                    >
+                      <MdVolumeUp size={'16px'} />
+                    </div>
+                  )}
                 </div>
 
                 <div
@@ -321,10 +334,9 @@ const Tab = ({
             <MenuItem onClick={(e) => pinTabClickedHandler(e, id)}>
               {pinned ? 'Unpin' : 'Pin'} Tab
             </MenuItem>
-            {/* 
             <MenuItem onClick={(e) => muteTabClickedHandler(e, id)}>
-              {muted ? 'Unmute' : 'Mute'} Tab
-            </MenuItem> */}
+              {mutedInfo.muted ? 'Unmute' : 'Mute'} This Tab
+            </MenuItem>
 
             <MenuItem divider className={[isDark ? 'Dark' : null].join(' ')} />
 

src/pages/Sidebar/context/audio-context.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const audioContext = React.createContext({
+  mutedHostnames: [],
+  muteHostname: () => {},
+  unmuteHostname: () => {},
+});
+
+export default audioContext;