diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 3b4c2d5..87cb388 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -2,12 +2,11 @@ name: CI on: push: - branches: - - main + branches: [main] tags: - - 'v*' + - "v*" pull_request: - branches: ['*'] + branches: ["*"] workflow_dispatch: @@ -35,13 +34,13 @@ jobs: - name: Setup Node uses: actions/setup-node@v4 with: - node-version: 20 - registry-url: 'https://registry.npmjs.org' + node-version: 22 + registry-url: "https://registry.npmjs.org" - name: Install pnpm - uses: pnpm/action-setup@v2 + uses: pnpm/action-setup@v3 with: - version: 8 + version: 9 run_install: false - name: Get pnpm store directory @@ -53,7 +52,7 @@ jobs: uses: actions/cache@v4 with: path: ${{ env.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} + key: "${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}" restore-keys: | ${{ runner.os }}-pnpm-store- diff --git a/README.md b/README.md index 9df2d1d..ddd967a 100644 --- a/README.md +++ b/README.md @@ -219,6 +219,9 @@ Save the device selection. **play** `boolean` Control the player's status. +**preloadData** `boolean` +Preload the track data before playing. + **showSaveIcon** `boolean` ▶︎ false Display a Favorite button. It needs additional scopes in your token. @@ -226,7 +229,7 @@ Display a Favorite button. It needs additional scopes in your token. Customize the player's appearance. Check `StylesOptions` in the [types](src/types/common.ts). **syncExternalDevice** `boolean` ▶︎ false -If there are no URIs and an external device is playing, use the external player context. +Use the external player context if there are no URIs and an external device is playing. **syncExternalDeviceInterval** `number` ▶︎ 5 The time in seconds that the player will sync with external devices. @@ -252,12 +255,24 @@ import { spotifyApi } from 'react-spotify-web-playback'; **checkTracksStatus(token: string, tracks: string | string[]): Promise\** +**getAlbumTracks(token: string, id: string): Promise\** + +**getArtistTopTracks(token: string, id: string): Promise\** + **getDevices(token: string): Promise\** **getPlaybackState(token: string): Promise\** +**getPlaylistTracks(token: string, id: string): Promise\** + **getQueue(token: string): Promise\** +**getShow(token: string, id: string): Promise\** + +**getShowEpisodes(token: string, id: string, offset = 0): Promise\** + +**getTrack(token: string, id: string): Promise\** + **pause(token: string, deviceId?: string): Promise\** **play(token: string, options: SpotifyPlayOptions): Promise\** @@ -293,7 +308,7 @@ interface SpotifyPlayOptions { You can customize the UI with a `styles` prop. If you want a transparent player, you can use `bgColor: 'transparent'`. -Check all the available options [here](src/types/common.ts#L188). +Check all the available options [here](src/types/common.ts#L195). ```tsx ``` -![rswp-styles](https://gilbarbara.com/files/rswp-styles-e4060ddf.png) +![rswp-styles](https://files.gilbarbara.dev/media/rswp-v2.png) + ## Issues diff --git a/demo/package.json b/demo/package.json index 1808252..abcac63 100644 --- a/demo/package.json +++ b/demo/package.json @@ -5,24 +5,24 @@ "keywords": [], "main": "src/index.tsx", "dependencies": { - "@emotion/react": "^11.11.4", - "@emotion/styled": "^11.11.0", - "@gilbarbara/components": "^0.11.4", + "@emotion/react": "^11.13.3", + "@emotion/styled": "^11.13.0", + "@gilbarbara/hooks": "^0.8.2", + "@gilbarbara/components": "^0.14.5", "@gilbarbara/cookies": "^1.0.1", - "@gilbarbara/eslint-config": "^0.7.5", - "@gilbarbara/helpers": "^0.9.2", + "@gilbarbara/eslint-config": "^0.8.2", + "@gilbarbara/helpers": "^0.9.4", "@gilbarbara/prettier-config": "^1.0.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", "react-scripts": "^5.0.1", - "react-spotify-web-playback": "latest", - "react-use": "^17.5.0" + "react-spotify-web-playback": "latest" }, "devDependencies": { - "@types/node": "20.11.30", - "@types/react": "18.2.73", - "@types/react-dom": "18.2.22", - "typescript": "5.4.3" + "@types/node": "^22.9.0", + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", + "typescript": "5.6.3" }, "scripts": { "start": "react-scripts start", diff --git a/demo/public/favicon.ico b/demo/public/favicon.ico index a11777c..38f6611 100644 Binary files a/demo/public/favicon.ico and b/demo/public/favicon.ico differ diff --git a/demo/src/App.tsx b/demo/src/App.tsx index 18b250e..45e4de4 100644 --- a/demo/src/App.tsx +++ b/demo/src/App.tsx @@ -8,14 +8,15 @@ import SpotifyWebPlayer, { STATUS, StylesProps, TYPE, + Type, } from 'react-spotify-web-playback'; -import { useEffectOnce, useSetState } from 'react-use'; import { Anchor, Box, Button, - ComponentWrapper, Container, + Flex, + FormElementWrapper, Grid, H1, H4, @@ -28,6 +29,7 @@ import { Toggle, } from '@gilbarbara/components'; import { request } from '@gilbarbara/helpers'; +import { useEffectOnce, useSetState } from '@gilbarbara/hooks'; import GlobalStyles from './components/GlobalStyles'; import Player from './components/Player'; @@ -64,6 +66,7 @@ const baseURIs = { album: 'spotify:album:0WLIcGHr0nLyKJpMirAS17', artist: 'spotify:artist:4oLeXFyACqeem2VImYeBFe', playlist: 'spotify:playlist:1Zr2FUPeD5hYJTGbTDSQs4', + show: 'spotify:show:4kYCRYJ3yK5DQbP5tbfZby', tracks: [ // Boogie // 'spotify:track:3zYpRGnnoegSpt3SguSo3W', @@ -97,6 +100,7 @@ function App() { const code = new URLSearchParams(window.location.search).get('code'); const credentials = getCredentials(); + const [ { accessToken, @@ -159,7 +163,7 @@ function App() { (event: FormEvent) => { event.preventDefault(); - if (URIsInput && URIsInput.current) { + if (URIsInput?.current) { setState({ URIs: parseURIs(URIsInput.current.value) }); } }, @@ -178,7 +182,7 @@ function App() { setState({ isPlaying: true, URIs: parseURIs(uris) }); - if (URIsInput && URIsInput.current) { + if (URIsInput?.current) { URIsInput.current.value = uris; } }, @@ -202,7 +206,7 @@ function App() { }); } - if (type === TYPE.TRACK) { + if (([TYPE.PRELOAD, TYPE.TRACK] as Array).includes(type)) { const trackStyles = await request( `https://scripts.gilbarbara.dev/api/getImagePlayerStyles?url=${track.image}`, ); @@ -238,14 +242,14 @@ function App() { const content: Record = { connect: ( - + - + ), }; @@ -262,8 +266,8 @@ function App() { content.main = ( <> - - +