playing media indication nsand#38

shapkarin · Jan 26, 2020 · b1e397a · b1e397a
1 parent 39c86a0
commit b1e397a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/src/components/tab-item/tab-item.jsx b/src/components/tab-item/tab-item.jsx
@@ -58,7 +58,14 @@ export default class TabItem extends React.Component {
     const pinClasses = `${styles.pin} ${isPinned ? styles['pin--active'] : ''}`;
     return (
       <li className={`${tab.selected ? activeStyles[cls] : styles[cls]} ${isPinned ? styles['tabItem--pinned'] : ''}`} onClick={this.focus.bind(this)}>
-        <img src={tab.favIconUrl}></img>
+        <div className={styles.favicon}>
+          <img src={tab.favIconUrl}></img>
+          { tab.audible && 
+            <svg className={styles.audible} viewBox="0 0 24 24" title="some title">
+              <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/><path d="M0 0h24v24H0z" fill="none"/>
+            </svg>
+          }
+        </div>
         <div className={styles.tabDetails}>
           <div className={styles.tabTitle}>{tab.title}</div>
           {additionalDetails}

diff --git a/src/components/tab-item/tab-item.scss b/src/components/tab-item/tab-item.scss
@@ -131,3 +131,16 @@
   display: flex;
   align-items: center;
 }
+
+.favicon {
+  position: relative;
+}
+
+.audible {
+  fill: #9E9E9E;
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  bottom: -7px;
+  right: -10px;
+}