diff --git a/CustomApps/playlist-tags/package.json b/CustomApps/playlist-tags/package.json index c3f4ec7..2ed4c9b 100644 --- a/CustomApps/playlist-tags/package.json +++ b/CustomApps/playlist-tags/package.json @@ -1,6 +1,6 @@ { "name": "playlist-tags", - "version": "1.6.5", + "version": "1.6.6", "private": true, "scripts": { "build": "spicetify-creator", diff --git a/CustomApps/playlist-tags/src/app.tsx b/CustomApps/playlist-tags/src/app.tsx index 96f4510..b39d4ad 100644 --- a/CustomApps/playlist-tags/src/app.tsx +++ b/CustomApps/playlist-tags/src/app.tsx @@ -31,17 +31,24 @@ const App = () => { const SpotifyChip: any = Spicetify.ReactComponent.Chip; // React State Hooks - const [tagList, setTags] = useState(getAllTags('A-Z')); - const [shuffleState, setIsEnabled] = useState(false); - const [selectedSortingOption, setSortingOption] = useState('Title: A-Z'); - const [selectedFilterOption, setFilterOption] = useState('Match Any Tag (OR)'); - const [playlistData, setPlaylistData] = useState>([]); - const [navBar, activeLink, setActiveLink] = useNavigationBar(navbar_items); - const [isLoading, setIsLoading] = useState(false); - const [inputFocused, setIsFocused] = useState(false); const [filterQuery, setFilterQuery] = useState(''); + const [inputFocused, setIsFocused] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const [navBar, activeLink, setActiveLink] = useNavigationBar(navbar_items); + const [navBarValue, setNavBarValue] = useState(''); + const [playlistData, setPlaylistData] = useState>([]); + const [selectedFilterOption, setFilterOption] = useState('Match Any Tag (OR)'); + const [selectedSortingOption, setSortingOption] = useState('Title: A-Z'); + const [shuffleState, setIsEnabled] = useState(false); + const [tagList, setTags] = useState(getAllTags('A-Z')); const [timeoutID, setTimeoutID] = useState(null); + useEffect(() => { + const expFeatures = JSON.parse(localStorage.getItem('spicetify-exp-features') || '{}'); + const navBarValue = expFeatures.enableGlobalNavBar?.value; + setNavBarValue(navBarValue); + }, []); + // Updates playlist data when the active navigation bar tab changes. useEffect(() => { if (activeLink === 'Search') { @@ -115,6 +122,11 @@ const App = () => { setTags(getAllTags('A-Z')); }; + // Styles the top spacing based on the "Show global nav bar with home button, search input and user avatar" experimental feature value. + const topSpacingStyle = { + marginTop: navBarValue !== 'control' ? '60px' : '0px', + }; + // Renders different pages based on the active navigation bar tab. switch (activeLink) { case "Search": @@ -186,6 +198,7 @@ const App = () => { } `} +
{addPlaylistsToQueue(playlistData, shuffleState)}} /> @@ -282,6 +295,7 @@ const App = () => { } `} +
{ tagList.map((tag) => ( @@ -317,6 +331,7 @@ const App = () => { } `} +
{ setSortingOption(value) }} selected={selectedSortingOption} />
@@ -329,6 +344,7 @@ const App = () => { case "README": return ( <> +
{navBar}