Spotify Chrome 확장 프로그램: 음악 컨트롤러 | 3단계

Spotify Chrome 확장 프로그램 - 상태 정의

이것은 사용자의 Spotify 세션을 제어할 수 있는 ReactJS로 구동되는 Spotify Chrome 확장 프로그램을 구축하는 다단계 프로젝트의 3단계입니다.

1단계를 찾을 수 있습니다.

이 튜토리얼에서는 사용자가 Google 크롬 확장 프로그램의 작동 방식을 알고 있다고 가정합니다. 여기에서 자세히 알아보세요.

이 전체 앱의 상태부터 시작하겠습니다.

두 가지 방법으로 상태를 처리할 것입니다.

컨텍스트 또는 "전역"상태

소품 전달

먼저 'Foreground' 생성자에서 상태를 처리합니다.

메모:

데크와 카세트는 별도의 images_ledger.js 파일에서 가져옵니다.

loaded는 표시하기 전에 전체 앱이 로드되었는지 확인하는 데 사용됩니다

.

shouldResize는 앱을 반응형으로 만드는 데 사용됩니다.

isClosed, isPlaying, newTrack, current_track 및 current_deck은 모두 카세트 플레이어의 실제 영상에 사용됩니다

.

Load 및 Direction은 모두 Options.js 구성 요소에 사용됩니다. Foreground.js에는 필요하지 않지만 어쨌든 여기에 둡니다

.

container.main/width/height는 모두 응답 코딩에 사용됩니다

.

이미지 원장을 빠르게 설명하겠습니다.

이것이 우리가 gif 인벤토리를 구성하는 방법입니다.

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'
]

메모:
모든 유형의 데크에는 기본 이미지가 있으며 해당 카세트 gif에는 재생, 일시 중지 및 로드의 세 가지 상태가 있습니다.

전역 컨텍스트를 설정해 보겠습니다.

매우 간단합니다.

새 파일을 만들고 컨텍스트를 내보냅니다...

import React from 'react';

const MyContext = React.createContext();

export default MyContext;

...그런 다음 해당 컨텍스트에서 전체 앱을 래핑합니다...

우리 주가 설정되었습니다.

React-Chrome 확장 프로그램 전체에서 이 상태를 사용하여 다음을 수행하는 방법을 보려면 다음을 수행하십시오.

앱을 반응형으로 만들기

티커에 노래 이름 표시

플레이어가 특정 gif를 표시하도록 합니다.
그런 다음 이 글의 맨 아래에 있는 비디오 자습서를 시청하십시오.

이 단계here에 대한 소스 파일을 찾을 수 있습니다.

보다 심층적인 가이드를 원하시면 YouTube에서 전체 비디오 자습서를 확인하십시오.

사이버펑크 2077에서 영감을 받은 Spotify 컨트롤러 구축 - 3단계