Autoplay refactoring

fixes #9143 fixes #9008 fixes #9171 Auditors: @bsclifton, @bridiver, @cezaraugusto Test Plan: Covered by automatic test Specific STR for #9171: 1. Turn on autoplay to `always ask` and make sure there is no any allow autoplay permissions 2. Go to https://youtu.be/g_6yBZKj-eo and don't click on notification bar 3. Open another tab and go to https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay and still don't click on notification bar 4. Go back the youtube tab you will find out the notification bar is non clickable 5. Go to the w3schools tab and it will also be non clickable
brave · Jul 27, 2017 · a0b5d9d · a0b5d9d
1 parent 18acc2a
commit a0b5d9d
Show file tree

Hide file tree

Showing 8 changed files with 750 additions and 227 deletions.
diff --git a/app/browser/reducers/autoplayReducer.js b/app/browser/reducers/autoplayReducer.js
@@ -7,31 +7,26 @@
 const appConstants = require('../../../js/constants/appConstants')
 const {makeImmutable} = require('../../common/state/immutableUtil')
 const {ipcMain, webContents} = require('electron')
-const AppStore = require('../../../js/stores/appStore')
 const siteSettings = require('../../../js/state/siteSettings')
-const settings = require('../../../js/constants/settings')
 const appActions = require('../../../js/actions/appActions')
 const {getOrigin} = require('../../../js/state/siteUtil')
 const locale = require('../../locale')
 const messages = require('../../../js/constants/messages')
-const getSetting = require('../../../js/settings').getSetting
-const {autoplayOption} = require('../../common/constants/settingsEnums')
 
-const showAutoplayMessageBox = (tabId) => {
+let notificationCallbacks = []
+
+const showAutoplayMessageBox = (state, tabId) => {
  const tab = webContents.fromTabID(tabId)
  if (!tab || tab.isDestroyed()) {
  return
  }
  const location = tab.getURL()
  const origin = getOrigin(location)
- if (getSetting(settings.AUTOPLAY_MEDIA) === autoplayOption.ALWAYS_ALLOW) {
- appActions.changeSiteSetting(origin, 'autoplay', true)
- return
- }
- const originSettings = siteSettings.getSiteSettingsForURL(AppStore.getState().get('siteSettings'), origin)
+ const originSettings = siteSettings.getSiteSettingsForURL(state.get('siteSettings'), origin)
  if (originSettings && originSettings.get('autoplay') === false) {
  return
  }
+
  const message = locale.translation('allowAutoplay', {origin})
 
  appActions.showNotification({
@@ -46,33 +41,60 @@ const showAutoplayMessageBox = (tabId) => {
  }
  })
 
- ipcMain.once(messages.NOTIFICATION_RESPONSE, (e, msg, buttonIndex, persist) => {
- if (msg === message) {
- appActions.hideNotification(message)
- if (buttonIndex === 0) {
- appActions.changeSiteSetting(origin, 'autoplay', true)
- if (tab && !tab.isDestroyed()) {
- tab.reload()
- tab.on('destroyed', function temporaryAllow (e) {
- if (!persist) {
- appActions.removeSiteSetting(origin, 'autoplay')
+ if (!notificationCallbacks[tabId]) {
+ notificationCallbacks[tabId] = (e, msg, buttonIndex, persist) => {
+ if (msg === message) {
+ appActions.hideNotification(message)
+ if (buttonIndex === 0) {
+ appActions.changeSiteSetting(origin, 'autoplay', true)
+ if (tab && !tab.isDestroyed()) {
+ tab.reload()
+ const temporaryAllow = (e) => {
+ tab.removeListener('media-started-playing', temporaryAllow)
+ if (!persist) {
+ appActions.removeSiteSetting(origin, 'autoplay')
+ }
  }
- })
+ tab.on('media-started-playing', temporaryAllow)
+ }
+ } else {
+ if (persist) {
+ appActions.changeSiteSetting(origin, 'autoplay', false)
+ }
  }
- } else {
- if (persist) {
- appActions.changeSiteSetting(origin, 'autoplay', false)
+  if (notificationCallbacks[tabId]) {
+  ipcMain.removeListener(messages.NOTIFICATION_RESPONSE, notificationCallbacks[tabId])
+ delete notificationCallbacks[tabId]
  }
  }
  }
- })
+ ipcMain.on(messages.NOTIFICATION_RESPONSE, notificationCallbacks[tabId])
+ }
+}
+
+const hideAutoplayMessageBox = (tabId) => {
+ const tab = webContents.fromTabID(tabId)
+ if (!tab || tab.isDestroyed()) {
+ return
+ }
+ const location = tab.getURL()
+ const origin = getOrigin(location)
+ const message = locale.translation('allowAutoplay', {origin})
+ appActions.hideNotification(message)
+ if (notificationCallbacks[tabId]) {
+ ipcMain.removeListener(messages.NOTIFICATION_RESPONSE, notificationCallbacks[tabId])
+ delete notificationCallbacks[tabId]
+ }
 }
 
 const autoplayReducer = (state, action, immutableAction) => {
  action = immutableAction || makeImmutable(action)
  switch (action.get('actionType')) {
  case appConstants.APP_AUTOPLAY_BLOCKED:
- showAutoplayMessageBox(action.get('tabId'))
+ showAutoplayMessageBox(state, action.get('tabId'))
+ break
+ case appConstants.APP_AUTOPLAY_DISMISSED:
+ hideAutoplayMessageBox(action.get('tabId'))
  break
  }
  return state

diff --git a/app/renderer/components/frame/frame.js b/app/renderer/components/frame/frame.js
@@ -779,6 +779,7 @@ class Frame extends React.Component {
  if (this.frame.isEmpty()) {
  return
  }
+ appActions.autoplayDismissed(this.props.tabId)
  windowActions.setAudioPlaybackActive(this.frame, true)
  })
  this.webview.addEventListener('media-paused', ({title}) => {

diff --git a/js/actions/appActions.js b/js/actions/appActions.js
@@ -1292,6 +1292,17 @@ const appActions = {
  })
  },
 
+ /**
+ * Notifies autoplay notification can be dismissed
+ * @param {number} tabId - Tab id of current frame
+ */
+ autoplayDismissed: function (tabId) {
+ dispatch({
+ actionType: appConstants.APP_AUTOPLAY_DISMISSED,
+ tabId
+ })
+ },
+
  /**
  * Handle 'save-password' event from muon
  */

diff --git a/js/constants/appConstants.js b/js/constants/appConstants.js
@@ -125,6 +125,7 @@ const appConstants = {
  APP_ON_GO_BACK_LONG: _,
  APP_ON_GO_FORWARD_LONG: _,
  APP_AUTOPLAY_BLOCKED: _,
+ APP_AUTOPLAY_DISMISSED: _,
  APP_SAVE_PASSWORD: _,
  APP_UPDATE_PASSWORD: _,
  APP_ADD_PASSWORD: _, /** @param {Object} passwordDetail */

diff --git a/js/state/contentSettings.js b/js/state/contentSettings.js
@@ -17,6 +17,7 @@ const urlParse = require('../../app/common/urlParse')
 const siteSettings = require('./siteSettings')
 const {registerUserPrefs} = require('./userPrefs')
 const {getSetting} = require('../settings')
+const {autoplayOption} = require('../../app/common/constants/settingsEnums')
 const {getFlashResourceId} = require('../flash')
 const net = require('net')
 
@@ -70,7 +71,7 @@ const getDefaultUserPrefContentSettings = (braveryDefaults, appSettings, appConf
  braveryDefaults = makeImmutable(braveryDefaults)
  return Immutable.fromJS({
  autoplay: [{
- setting: 'block',
+ setting: getSetting(settings.AUTOPLAY_MEDIA) === autoplayOption.ALWAYS_ALLOW ? 'allow' : 'block',
  primaryPattern: '*'
  }],
  cookies: getDefault3rdPartyStorageSettings(braveryDefaults, appSettings, appConfig),