DEV Community

Cover image for Spotify Chrome Extension: Music Controller | Phase 3
an-object-is-a
an-object-is-a

Posted on • Edited on

1 1

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.

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

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

How to make the most of GitHub Copilot

Not sure how to best use GitHub Copilot for your projects? Come learn some tips and tricks from the GitHub team!

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️