This PR implements the tab selection screen on the popup which is needed when there is more than one music service tab open at a time, as we cannot automatically know which tab the user would like to use. Implementing this screen required quite a bit of work not because of the screen itself but because, up til this point, the extension assumed one tab was open and didn't need to differentiate how it sent messages to tabs or which tab to utilize for updating the player state.
State
With the change to Redux and persisted state, I made the following changes to handle the state of the tabs:
Implement updateMusicServiceTabs, which first clears the Redux persisted tabs and then tells each tab connected to the hub to update their state in the store
Use updateMusicServiceTabs anytime the browser is opened or when a tab is added or removed to create strong accuracy
Implement UPDATE_TAB handler that listenes for the message from the background script and updates the Redux state
Implement SET_SELECTED_TAB handler that updates the Observers to ensure they only update state when they are the currently-selected tab
Commands
In addition to ensuring only one tab gets to update state at a time, only one tab should be able to listen to messages at a time. To accomplish that, I enhanced the broadcast function provided by Plasmo to allow a specific tab to be specified. With that, the sendMessage util can now specify a tab. This allows both the popup and the sidebar to determine which tab to select and to send messages to.
Overview
This PR implements the tab selection screen on the popup which is needed when there is more than one music service tab open at a time, as we cannot automatically know which tab the user would like to use. Implementing this screen required quite a bit of work not because of the screen itself but because, up til this point, the extension assumed one tab was open and didn't need to differentiate how it sent messages to tabs or which tab to utilize for updating the player state.
State
With the change to Redux and persisted state, I made the following changes to handle the state of the tabs:
updateMusicServiceTabs, which first clears the Redux persisted tabs and then tells each tab connected to the hub to update their state in the storeupdateMusicServiceTabsanytime the browser is opened or when a tab is added or removed to create strong accuracyObservers to ensure they only update state when they are the currently-selected tabCommands
In addition to ensuring only one tab gets to update state at a time, only one tab should be able to listen to messages at a time. To accomplish that, I enhanced the
broadcastfunction provided by Plasmo to allow a specific tab to be specified. With that, thesendMessageutil can now specify a tab. This allows both the popup and the sidebar to determine which tab to select and to send messages to.