Merge pull request #8609 from brave/disable-autoplay

Disable autoplay

app/extensions/brave/locales/en-US/bravery.properties

@@ -26,3 +26,4 @@ httpReroutes={[plural(httpsUpgradeCount)]}
 httpReroutes[one]=HTTPS Upgrade
 httpReroutes[other]=HTTPS Upgrades
 editBraveryGlobalSettings=Edit default shield  settings…
+allowAutoplay=Allow Autoplay Media

js/about/preferences.js

@@ -49,6 +49,7 @@ const adInsertion = appConfig.resourceNames.AD_INSERTION
 const trackingProtection = appConfig.resourceNames.TRACKING_PROTECTION
 const httpsEverywhere = appConfig.resourceNames.HTTPS_EVERYWHERE
 const safeBrowsing = appConfig.resourceNames.SAFE_BROWSING
+const autoplay = appConfig.resourceNames.AUTOPLAY
 const noScript = appConfig.resourceNames.NOSCRIPT
 const flash = appConfig.resourceNames.FLASH
 
@@ -496,6 +497,7 @@ class ShieldsTab extends ImmutableComponent {
     this.onChangeAdControl = this.onChangeAdControl.bind(this)
     this.onToggleHTTPSE = this.onToggleSetting.bind(this, httpsEverywhere)
     this.onToggleSafeBrowsing = this.onToggleSetting.bind(this, safeBrowsing)
+    this.onToggleAutoplay = this.onToggleSetting.bind(this, autoplay)
     this.onToggleNoScript = this.onToggleSetting.bind(this, noScript)
   }
   onChangeAdControl (e) {
@@ -546,6 +548,7 @@ class ShieldsTab extends ImmutableComponent {
         <SettingCheckbox checked={this.props.braveryDefaults.get('safeBrowsing')} dataL10nId='safeBrowsing' onChange={this.onToggleSafeBrowsing} />
         <SettingCheckbox checked={this.props.braveryDefaults.get('noScript')} dataL10nId='noScriptPref' onChange={this.onToggleNoScript} />
         <SettingCheckbox dataL10nId='blockCanvasFingerprinting' prefKey={settings.BLOCK_CANVAS_FINGERPRINTING} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
+        <SettingCheckbox checked={this.props.braveryDefaults.get('autoplay')} dataL10nId='allowAutoplay' onChange={this.onToggleAutoplay} />
         <Button l10nId='manageAdblockSettings' className='primaryButton manageAdblockSettings'
           onClick={aboutActions.createTabRequested.bind(null, {
             url: 'about:adblock'

js/components/braveryPanel.js

@@ -31,6 +31,7 @@ class BraveryPanel extends ImmutableComponent {
     this.onToggleCookieControl = this.onToggleSiteSetting.bind(this, 'cookieControl')
     this.onToggleHTTPSE = this.onToggleSiteSetting.bind(this, 'httpsEverywhere')
     this.onToggleFp = this.onToggleSiteSetting.bind(this, 'fingerprintingProtection')
+    this.onToggleAutoplay = this.onToggleSiteSetting.bind(this, 'autoplay')
     this.onReload = this.onReload.bind(this)
     this.onEditGlobal = this.onEditGlobal.bind(this)
     this.onInfoClick = this.onInfoClick.bind(this)
@@ -164,6 +165,7 @@ class BraveryPanel extends ImmutableComponent {
     const shieldsUp = this.props.braverySettings.shieldsUp
     const noScriptEnabled = this.props.braverySettings.noScript
     const httpseEnabled = this.props.braverySettings.httpsEverywhere
+    const autoplayEnabled = this.props.braverySettings.autoplay
     const adControl = this.props.braverySettings.adControl
     const fpEnabled = this.props.braverySettings.fingerprintingProtection
     const adsBlockedStat = (this.blockedAds ? this.blockedAds.size : 0) + (this.blockedByTrackingList ? this.blockedByTrackingList.size : 0)
@@ -297,6 +299,7 @@ class BraveryPanel extends ImmutableComponent {
                   </FormDropdown>
                   <SwitchControl onClick={this.onToggleHTTPSE} rightl10nId='httpsEverywhere' checkedOn={httpseEnabled} disabled={!shieldsUp} className='httpsEverywhereSwitch' />
                   <SwitchControl onClick={this.onToggleNoScript} rightl10nId='noScript' checkedOn={noScriptEnabled} disabled={!shieldsUp} className='noScriptSwitch' />
+                  <SwitchControl onClick={this.onToggleAutoplay} rightl10nId='allowAutoplay' checkedOn={autoplayEnabled} disabled={!shieldsUp} className='allowAutoplay' />
                 </div>
                 <div className='braveryControlGroup'>
                   <div className={cx({

js/constants/appConfig.js

@@ -19,6 +19,7 @@ module.exports = {
   quitTimeout: 10 * 1000,
   resourceNames: {
     ADBLOCK: 'adblock',
+    AUTOPLAY: 'autoplay',
     SAFE_BROWSING: 'safeBrowsing',
     HTTPS_EVERYWHERE: 'httpsEverywhere',
     TRACKING_PROTECTION: 'trackingProtection',
@@ -35,6 +36,9 @@ module.exports = {
   cookieblock: {
     enabled: true
   },
+  autoplay: {
+    enabled: false
+  },
   cookieblockAll: {
     enabled: false
   },

js/state/contentSettings.js

@@ -63,6 +63,10 @@ const getDefaultHostContentSettings = (braveryDefaults, appSettings, appConfig)
 const getDefaultUserPrefContentSettings = (braveryDefaults, appSettings, appConfig) => {
   braveryDefaults = makeImmutable(braveryDefaults)
   return Immutable.fromJS({
+    autoplay: [{
+      setting: braveryDefaults.get('autoplay') ? 'allow' : 'block',
+      primaryPattern: '*'
+    }],
     cookies: getDefault3rdPartyStorageSettings(braveryDefaults, appSettings, appConfig),
     referer: [{
       setting: braveryDefaults.get('cookieControl') !== 'allowAllCookies' ? 'block' : 'allow',
@@ -277,6 +281,9 @@ const siteSettingsToContentSettings = (currentSiteSettings, defaultContentSettin
     if (typeof siteSetting.get('widevine') === 'number' && braveryDefaults.get('widevine')) {
       contentSettings = addContentSettings(contentSettings, 'plugins', primaryPattern, '*', 'allow', appConfig.widevine.resourceId)
     }
+    if (typeof siteSetting.get('autoplay') === 'boolean') {
+      contentSettings = addContentSettings(contentSettings, 'autoplay', primaryPattern, '*', siteSetting.get('autoplay') ? 'allow' : 'block')
+    }
   })
   // On the second pass we consider only shieldsUp === false settings since we want those to take precedence.
   currentSiteSettings.forEach((siteSetting, hostPattern) => {
@@ -289,6 +296,7 @@ const siteSettingsToContentSettings = (currentSiteSettings, defaultContentSettin
       contentSettings = addContentSettings(contentSettings, 'javascript', primaryPattern, '*', 'allow')
       contentSettings = addContentSettings(contentSettings, 'referer', primaryPattern, '*', 'allow')
       contentSettings = addContentSettings(contentSettings, 'plugins', primaryPattern, '*', 'allow')
+      contentSettings = addContentSettings(contentSettings, 'autoplay', primaryPattern, '*', 'allow')
     }
   })
   return contentSettings

test/bravery-components/braveryPanelTest.js

@@ -1,7 +1,7 @@
 /* global describe, it, beforeEach */
 
 const Brave = require('../lib/brave')
-const {cookieControl, allowAllCookiesOption, blockAllCookiesOption, urlInput, braveMenu, braveMenuDisabled, adsBlockedStat, adsBlockedControl, showAdsOption, blockAdsOption, braveryPanel, httpsEverywhereStat, noScriptStat, noScriptSwitch, fpSwitch, fpStat, noScriptNavButton, customFiltersInput} = require('../lib/selectors')
+const {cookieControl, allowAllCookiesOption, blockAllCookiesOption, urlInput, braveMenu, braveMenuDisabled, adsBlockedStat, adsBlockedControl, showAdsOption, blockAdsOption, braveryPanel, httpsEverywhereStat, noScriptStat, noScriptSwitch, fpSwitch, autoplaySwitch, fpStat, noScriptNavButton, customFiltersInput} = require('../lib/selectors')
 const {getTargetAboutUrl} = require('../../js/lib/appUrlUtil')
 
 describe('Bravery Panel', function () {
@@ -500,4 +500,70 @@ describe('Bravery Panel', function () {
         .waitForTextValue(fpStat, '0')
     })
   })
+
+  describe('Autoplay test', function () {
+    Brave.beforeEach(this)
+    beforeEach(function * () {
+      yield setup(this.app.client)
+    })
+
+    it('default block', function * () {
+      const url = Brave.server.url('autoplay.html')
+      yield this.app.client
+        .tabByIndex(0)
+        .loadUrl(url)
+        .waitUntil(function () {
+          return this.getText('div[id="status"]')
+            .then((status) => {
+              return status === ''
+            })
+        })
+    })
+
+    it('allow autoplay in regular tab', function * () {
+      const url = Brave.server.url('autoplay.html')
+      yield this.app.client
+        .tabByIndex(0)
+        .loadUrl(url)
+        .waitUntil(function () {
+          return this.getText('div[id="status"]')
+            .then((status) => {
+              return status === ''
+            })
+        })
+        .openBraveMenu(braveMenu, braveryPanel)
+        .click(autoplaySwitch)
+        .keys(Brave.keys.ESCAPE)
+        .tabByUrl(url)
+        .waitUntil(function () {
+          return this.getText('div[id="status"]')
+            .then((status) => {
+              return status === 'Autoplay playing'
+            })
+        })
+    })
+
+    it('allow autoplay in private tab', function * () {
+      const url = Brave.server.url('autoplay.html')
+      yield this.app.client
+        .newTab({ url, isPrivate: true })
+        .waitForUrl(url)
+        .waitUntil(function () {
+          return this.getText('div[id="status"]')
+            .then((status) => {
+              return status === ''
+            })
+        })
+        .openBraveMenu(braveMenu, braveryPanel)
+        .click(autoplaySwitch)
+        .keys(Brave.keys.ESCAPE)
+        .tabByUrl(url)
+        .waitUntil(function () {
+          return this.getText('div[id="status"]')
+            .then((status) => {
+              return status === 'Autoplay playing'
+            })
+        })
+    })
+  })
 })

test/fixtures/autoplay.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Autoplay</title>
+  </head>
+  <body>
+
+    <video width="320" height="240" controls autoplay onplay="playing()">
+      <source src="video/autoplay.mp4" type="video/mp4">
+    </video>
+
+    <div id='status'></div>
+
+    <script>
+      function playing () {
+        let status = document.getElementById('status')
+        status.textContent = 'Autoplay playing'
+      }
+    </script>
+
+  </body>
+</html>

test/lib/selectors.js

@@ -58,6 +58,7 @@ module.exports = {
   noScriptAllowOnceButton: '[data-l10n-id="allowScriptsOnce"]',
   noScriptAllowButton: '[data-l10n-id="allowScripts"]',
   safeBrowsingSwitch: '.safeBrowsingSwitch .switchMiddle',
+  autoplaySwitch: '.allowAutoplay .switchMiddle',
   backButton: '.backforward .backButton',
   forwardButton: '.backforward .forwardButton',
   reloadButton: '.reloadButton',