This PR refactors the project to make the UI developed so far portable to both the popup and the sidebar. It also implements a good portion of the sidebar. The chain of PRs was getting too long and didn't want a crazy merge conflict scenario like I had last time, so the consequence is this is a massive PR. I'm happy to walk you through any of it.
The following changes were needed to implement this:
Components
The first step was to pull out all of the standardized components into the /player-ui directory. These components can then be used in the sidebar and the mini player to construct the player views from a high level.
Contexts
The player UI components rely on several contexts that provide data about the player state. The implementations of the data retrieval and listeners were built into the contexts before, but that relied on chrome APIs, some of which the sidebar does not have access to because it is a main world content script, which is less privileged. To fix this, I removed the implementations and just have pass-through contexts, allowing the popup and sidebar to create their own implementations. The popup implementation uses chrome APIs and the sidebar implementation uses window events.
Finally, I created a new context called MusicServiceContext that provides both the specific music service currently being used (YouTube Music, Spotify, etc) and a function to be able to send messages to the music service's controller, as this also requires different implementations.
Sidebar
Setting up the sidebar required a few things. First thing was changing the content script we had for the autoplay popup to now work with the Sidebar as well. Then I setup the /sidebar directory along with a router and screens. I then implemented the main, queue, and search screens. The fast-marquee lib we're using for scrolling text requires special styles that weren't getting applied because of how that lib adds styles to the page, so I had to create a MarqueeStylesProvider component that provides those styles.
The search screen also required implementing the search function on the MusicController for each service.
Other Changes
I refactored names and types organization across many of the files as well.
Overview
This PR refactors the project to make the UI developed so far portable to both the popup and the sidebar. It also implements a good portion of the sidebar. The chain of PRs was getting too long and didn't want a crazy merge conflict scenario like I had last time, so the consequence is this is a massive PR. I'm happy to walk you through any of it.
The following changes were needed to implement this:
Components
The first step was to pull out all of the standardized components into the /player-ui directory. These components can then be used in the sidebar and the mini player to construct the player views from a high level.
Contexts
The player UI components rely on several contexts that provide data about the player state. The implementations of the data retrieval and listeners were built into the contexts before, but that relied on
chromeAPIs, some of which the sidebar does not have access to because it is a main world content script, which is less privileged. To fix this, I removed the implementations and just have pass-through contexts, allowing the popup and sidebar to create their own implementations. The popup implementation uses chrome APIs and the sidebar implementation uses window events.Finally, I created a new context called MusicServiceContext that provides both the specific music service currently being used (YouTube Music, Spotify, etc) and a function to be able to send messages to the music service's controller, as this also requires different implementations.
Sidebar
Setting up the sidebar required a few things. First thing was changing the content script we had for the autoplay popup to now work with the Sidebar as well. Then I setup the
/sidebardirectory along with a router and screens. I then implemented the main, queue, and search screens. Thefast-marqueelib we're using for scrolling text requires special styles that weren't getting applied because of how that lib adds styles to the page, so I had to create a MarqueeStylesProvider component that provides those styles.The search screen also required implementing the search function on the MusicController for each service.
Other Changes
I refactored names and types organization across many of the files as well.