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