DEV Community

loading...
Cover image for Spotify Chrome Extension: Music Controller | Phase 3

Spotify Chrome Extension: Music Controller | Phase 3

anobjectisa profile image an-object-is-a Updated on ・3 min read

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.

How to make a Chrome Extension in-depth course? Try our Teachable

We have a course for completely-new-to-web-dev'rs and for experienced web dev's who want a more curated experience.

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.

Foreground component state

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'
]
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

...then wrap our entire app in that context...
Using React Context for Global State


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

Discussion

pic
Editor guide