Adjust min threshold for play button

app/renderer/components/styles/global.js

@@ -6,6 +6,7 @@ const globalStyles = {
     breakpointSmallWin32: '650px',
     breakpointTinyWin32: '500px',
     tab: {
+      large: '120px',
       largeMedium: '83px',
       medium: '66px',
       mediumSmall: '53px',

app/renderer/components/styles/tab.js

@@ -43,11 +43,7 @@ const styles = StyleSheet.create({
   narrowViewPlayIndicator: {
     borderWidth: '2px 1px 0',
     borderStyle: 'solid',
-    borderColor: 'lightskyblue transparent transparent'
-  },
-
-  activeTabNarrowViewPlayIndicator: {
-    borderColor: `lightskyblue ${globalStyles.color.chromeControlsBackground} ${globalStyles.color.chromeControlsBackground}`
+    borderColor: `lightskyblue ${globalStyles.color.chromeControlsBackground} transparent transparent`
   },
 
   tabNarrowestView: {

app/renderer/components/tabContent.js

@@ -92,6 +92,11 @@ class AudioTabIcon extends ImmutableComponent {
     return this.props.tabProps.get('audioPlaybackActive') || this.props.tabProps.get('audioMuted')
   }
 
+  get mediumView () {
+    const sizes = ['large', 'largeMedium']
+    return sizes.includes(this.props.tabProps.get('breakpoint'))
+  }
+
   get narrowView () {
     const sizes = ['medium', 'mediumSmall', 'small', 'extraSmall', 'smallest']
     return sizes.includes(this.props.tabProps.get('breakpoint'))
@@ -116,7 +121,7 @@ class AudioTabIcon extends ImmutableComponent {
   }
 
   render () {
-    return this.pageCanPlayAudio && !this.narrowView
+    return this.pageCanPlayAudio && !this.mediumView && !this.narrowView
       ? <TabIcon className={css(styles.icon, styles.audioIcon)} symbol={this.audioIcon} onClick={this.props.onClick} />
       : null
   }
@@ -186,18 +191,13 @@ class TabTitle extends ImmutableComponent {
     return !!this.props.tabProps.get('pinnedLocation')
   }
 
-  get pageCanPlayAudio () {
-    return this.props.tabProps.get('audioPlaybackActive') || this.props.tabProps.get('audioMuted')
-  }
-
   get hoveredOnNarrowView () {
     const sizes = ['mediumSmall', 'small', 'extraSmall', 'smallest']
     return this.props.tabProps.get('hoverState') && sizes.includes(this.props.tabProps.get('breakpoint'))
   }
 
   get shouldHideTitle () {
-    return (this.props.tabProps.get('breakpoint') === 'largeMedium' && this.pageCanPlayAudio && this.locationHasSecondaryIcon) ||
-      (this.props.tabProps.get('breakpoint') === 'mediumSmall' && this.locationHasSecondaryIcon) ||
+    return (this.props.tabProps.get('breakpoint') === 'mediumSmall' && this.locationHasSecondaryIcon) ||
       this.props.tabProps.get('breakpoint') === 'extraSmall' || this.props.tabProps.get('breakpoint') === 'smallest' ||
       this.hoveredOnNarrowView
   }

app/renderer/lib/tabUtil.js

@@ -10,7 +10,7 @@ const styles = require('../components/styles/global')
  * @returns {String} The matching breakpoint.
  */
 module.exports.getTabBreakpoint = (tabWidth) => {
-  const sizes = ['largeMedium', 'medium', 'mediumSmall', 'small', 'extraSmall', 'smallest']
+  const sizes = ['large', 'largeMedium', 'medium', 'mediumSmall', 'small', 'extraSmall', 'smallest']
   let currentSize
 
   sizes.map(size => {

js/components/tab.js

@@ -177,6 +177,11 @@ class Tab extends ImmutableComponent {
     return tab && !this.isPinned ? tab.getBoundingClientRect().width : null
   }
 
+  get mediumView () {
+    const sizes = ['large', 'largeMedium']
+    return sizes.includes(this.props.tab.get('breakpoint'))
+  }
+
   get narrowView () {
     const sizes = ['medium', 'mediumSmall', 'small', 'extraSmall', 'smallest']
     return sizes.includes(this.props.tab.get('breakpoint'))
@@ -224,6 +229,7 @@ class Tab extends ImmutableComponent {
   }
 
   render () {
+    const playIndicatorBreakpoint = this.mediumView || this.narrowView
     const perPageStyles = StyleSheet.create({
       themeColor: {
         color: this.themeColor ? getTextColorForBackground(this.themeColor) : 'inherit',
@@ -254,8 +260,7 @@ class Tab extends ImmutableComponent {
         this.props.isActive && styles.active,
         this.props.tab.get('isPrivate') && styles.private,
         this.props.isActive && this.props.tab.get('isPrivate') && styles.activePrivateTab,
-        this.narrowView && this.canPlayAudio && styles.narrowViewPlayIndicator,
-        this.props.isActive && this.narrowView && this.canPlayAudio && styles.activeTabNarrowViewPlayIndicator,
+        playIndicatorBreakpoint && this.canPlayAudio && styles.narrowViewPlayIndicator,
         this.props.isActive && this.themeColor && perPageStyles.themeColor,
         !this.isPinned && this.narrowView && styles.tabNarrowView,
         !this.isPinned && this.narrowestView && styles.tabNarrowestView,

test/unit/app/renderer/tabContentTest.js

@@ -305,22 +305,6 @@ describe('tabContent components', function () {
       )
       assert.notEqual(wrapper.text(), pageTitle1)
     })
-    it('should not show text if size is largeMedium and location has audio and a secondary icon', function () {
-      const wrapper = shallow(
-        <TabTitle
-          tabProps={
-            Immutable.Map({
-              location: url1,
-              title: pageTitle1,
-              breakpoint: 'largeMedium',
-              audioPlaybackActive: true,
-              isPrivate: true
-            })}
-          pageTitle={pageTitle1}
-        />
-      )
-      assert.notEqual(wrapper.text(), pageTitle1)
-    })
     it('should not show text if size is mediumSmall and location has a secondary icon', function () {
       const wrapper = shallow(
         <TabTitle