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

Author: darkdh

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

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}) => {

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
    */

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 */

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),