2d:null 2e:["$","title",null,{"children":"Spotify Playback Sandbox | computron | Observable"}] 33:T5e1,playerListeners = { if (player) { player.addListener('initialization_error', err => console.error(err)); player.addListener('authentication_error', err => console.error(err)); player.addListener('account_error', err => console.error(err)); player.addListener('playback_error', err => console.error(err)); var deviceIds = new Set(); const listeners = { // initialization_error: Generators.observe(next => { // player.addListener('initialization_error', message => next(message)); // }), // authentication_error: Generators.observe(next => { // player.addListener('authentication_error', message => next(message)); // }), // account_error: Generators.observe(next => { // player.addListener('account_error', message => next(message)); // }), // playback_error: Generators.observe(next => { // player.addListener('playback_error', message => next(message)); // }), changes: Generators.observe(next => { player.addListener('player_state_changed', state => next(state)); }), ready: Generators.observe(next => { player.addListener('ready', device_id => { deviceIds.add(device_id); next(deviceIds); }); player.addListener('not_ready', device_id => { deviceIds.delete(device_id); next(deviceIds); }); }) }; await player.connect(); return listeners; } else { return undefined; } }34:T57d,setMediaSession = (session, state, player) => { if (!session) return; if (state && player) { session.metadata = new MediaMetadata( getMetadata(state.track_window.current_track) ); session.setActionHandler( 'play', state.disallows.resuming ? null : player.resume ); session.setActionHandler( 'pause', state.disallows.pausing ? null : player.pause ); session.setActionHandler( 'previoustrack', state.disallows.skipping_prev ? null : player.previousTrack ); session.setActionHandler( 'nexttrack', state.disallows.skipping_next ? null : player.nextTrack ); session.setActionHandler( 'seekbackward', state.disallows.seeking ? null : () => { player.seek(player.getCurrentState().position - 10 * 1000); } ); session.setActionHandler( 'seekforward', state.disallows.seeking ? null : () => { player.seek(player.getCurrentState().position + 10 * 1000); } ); } else { session.metadata = null; session.setActionHandler('play', null); session.setActionHandler('pause', null); session.setActionHandler('seekbackward', null); session.setActionHandler('seekforward', null); session.setActionHandler('previoustrack', null); session.setActionHandler('nexttrack', null); } }35:[] 31:{"id":"c4c7da4ff0a3093a","slug":"spotify-playback-sandbox","title":"Spotify Playback Sandbox","thumbnail":"cfe95d74aa227c62b02773bc2b8841e781b68ac760a3f6e5f8eb0c3349011932","access_level":"public","create_time":"$D2020-03-13T22:37:11.258Z","update_time":"$D2021-01-03T20:09:13.126Z","view_time":null,"first_public_time":"$D2020-03-14T22:58:25.453Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"57191c6037fb99f5","login":"computron","name":"","avatar_url":"https://avatars-next.observableusercontent.com/bfc975114d01d44e8a92b705ba44f202557c9e7796b245627272834d4815da49","tier":"starter_2024"},"version":1076,"publish_version":1076,"role":null,"authored":false,"authors":[{"type":"individual","id":"af80f9bafe3162d2","login":"computron","name":"","avatar_url":"https://avatars-next.observableusercontent.com/bfc975114d01d44e8a92b705ba44f202557c9e7796b245627272834d4815da49","tier":null}],"members":[{"type":"individual","id":"af80f9bafe3162d2","login":"computron","name":"","avatar_url":"https://avatars-next.observableusercontent.com/bfc975114d01d44e8a92b705ba44f202557c9e7796b245627272834d4815da49","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Spotify Playback Sandbox","cells":[{"id":0,"value":"md`# Spotify Playback Sandbox\nIn order to use the player, you will need to authorize with an access token.\nGet a token from the Spotify dev console: \n \n Get Your Web Playback SDK Access Token \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"authorizationUrl = (\n permissionsArray,\n redirect = \"https://developer.spotify.com/documentation/web-playback-sdk/quick-start/\",\n clientId = 'adaaf209fb064dfab873a71817029e0d'\n) => {\n const permissionString = Object.values(permissionsArray)\n .flat()\n .join(\"+\");\n\n const encodedRedirectUri = encodeURIComponent(redirect);\n\n return (\n `https://accounts.spotify.com/en/authorize?response_type=token` +\n `&client_id=${clientId}` +\n `&redirect_uri=${encodedRedirectUri}` +\n `&scope=${permissionString}` +\n `&show_dialog=true`\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"permissions = ({\n Images: [\"ugc-image-upload\"],\n Playlists: [\n \"playlist-read-private\",\n \"playlist-modify-public\",\n \"playlist-read-collaborative\",\n \"playlist-modify-private\"\n ],\n SpotifyConnect: [\n \"user-read-currently-playing\",\n \"user-modify-playback-state\",\n \"user-read-playback-state\"\n ],\n ListeningHistory: [\"user-read-recently-played\", \"user-top-read\"],\n Follow: [\"user-follow-read\", \"user-follow-modify\"],\n Playback: [\"app-remote-control\", \"streaming\"],\n Users: [\"user-read-private\", \"user-read-email\"],\n Library: [\"user-library-modify\", \"user-library-read\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"viewof token = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"getSpotifyPlayer = options => {\n import(`https://sdk.scdn.co/spotify-player.js`);\n return new Promise((resolve, reject) => {\n window.onSpotifyWebPlaybackSDKReady = () => {\n resolve(new window.Spotify.Player(options));\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"player = token\n ? getSpotifyPlayer({\n name: \"ObservableHQ Player\",\n getOAuthToken: cb => {\n console.log(`Getting OAuthToken`);\n cb(token);\n }\n })\n : undefined","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"state = playerListeners.changes\n ? playerListeners.changes\n : player.getCurrentState()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"{\n const renderedTracks = () => {\n const renderTrack = (heading, track, imageSize) => {\n const image = track && track.album.images[imageSize];\n return track\n ? html`\n

${heading}

\n $\"Album$ \n

${track.name}

${track.album.name}

${track.artists.map(x => x.name).join(\" & \")}

\n `\n : html``;\n };\n return {\n prev: renderTrack(\"Previous\", state.track_window.previous_tracks[0], 1),\n curr: renderTrack(\"Current Track\", state.track_window.current_track, 0),\n next: renderTrack(\"Next\", state.track_window.next_tracks[0], 1)\n };\n };\n const tracks = renderedTracks();\n return html`\n ${tracks.prev}\n ${tracks.curr}\n ${tracks.next}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"paused = state.paused","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"state.timestamp - Date.now()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":"serverLag = state.timestamp - Date.now()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"paused\n ? renderScrubber(state.position, state.duration)\n : renderScrubber(\n state.position + now - state.timestamp - serverLag,\n state.duration\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1000,"value":"state.position","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"renderScrubber = (curr, max) =>\n html`Position: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"metadata = getMetadata(state.track_window.current_track)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"getMetadata = track => ({\n title: track.name,\n artist: track.artists.map(x => x.name).join(\" & \"),\n album: track.album.name,\n artwork: track.album.images.map(img => ({\n src: img.url,\n sizes: `${img.height}x${img.width}`,\n type: `image/jpeg`\n }))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"setMediaSession(window.navigator.mediaSession, state, player)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"