Spotify Chrome Extension: Music Controller | Phase 3

Spotify Chrome Extension - Defining our State

This is Phase Three of a multi-phase project where we build a Spotify Chrome Extension powered by ReactJS that allows us to control the user's Spotify session

Phase One can be found here.

This tutorial assumes you know how Google Chrome Extensions work. Learn more here.

Let's start with the state of this whole app.

We're going to handle state in 2 ways:

1. a context or "global" state
2. prop-passing

We'll handle the state in our 'Foreground' constructor first.

Note:

1. Decks and Cassettes come from a separate images_ledger.js file.
2. loaded is used to make sure the entire app is loaded before displaying
3. shouldResize is used to make the app responsive
4. isClosed, isPlaying, newTrack, current_track, and current_deck are all used for the actual visuals of our cassette player
5. load and direction are both used for the Options.js component; Foreground.js doesn't need these, but we leave them here anyways
6. container.main/width/height are all used for responsive coding

Let me quickly explain the images ledger.

This is how we're organizing our inventory of gifs.

export const decks = {
    'orange': {
        default: 'default-deck(orange).gif',
        '70s-retro-light': {
            play: 'play-deck(orange)-cassette(70s-retro-light).gif',
            pause: 'pause-deck(orange)-cassette(70s-retro-light).gif',
            load: 'load-deck(orange)-cassette(70s-retro-light).gif'
        },
        'punk-dark': {
            play: 'play-deck(orange)-cassette(punk-dark).gif',
            pause: 'pause-deck(orange)-cassette(punk-dark).gif',
            load: 'load-deck(orange)-cassette(punk-dark).gif'
        }
    },
    'cyberpunk': {
        default: 'default-deck(cyberpunk).gif',
        '70s-retro-light': {
            play: 'play-deck(cyberpunk)-cassette(70s-retro-light).gif',
            pause: 'pause-deck(cyberpunk)-cassette(70s-retro-light).gif',
            load: 'load-deck(cyberpunk)-cassette(70s-retro-light).gif'
        },
        'punk-dark': {
            play: 'play-deck(cyberpunk)-cassette(punk-dark).gif',
            pause: 'pause-deck(cyberpunk)-cassette(punk-dark).gif',
            load: 'load-deck(cyberpunk)-cassette(punk-dark).gif'
        }
    }
}

export const cassettes = [
    'punk-dark',
    '70s-retro-light'
]

Note:
Every type of deck has a default image and it's corresponding cassette gifs have three states: play, pause, and load.

Let's set up a global context.

Very simple.

We just create a new file and export a context...

import React from 'react';

const MyContext = React.createContext();

export default MyContext;

...then wrap our entire app in that context...

Our state is set up.

If you want to see how we use this state throughout our React-Chrome Extension to:

• make our app responsive
• have our ticker display a song name
• have our player display specific gifs then please watch the video tutorial at the bottom of this write-up.

You can find the source files for this Phase here.

If you want a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

Build a Cyberpunk 2077-inspired Spotify Controller - Phase 3