Как създадох персонализиран Spotify плейър
въведение
В моята първа публикация от тази серия обясних как управлявах процеса на удостоверяване с ReactNative и Spotify. В тази статия точно тук ще обясня как създадох свой собствен Spotify плейър с анимации за плъзгане на карти. За бърза демонстрация гледайте това видео.
Разглеждате репото тук
Началния екран
Ако погледнете импортирането, можете да видите, че импортираме три персонализирани компонента: CustomHeader, Player и MainSwiper. Това са най-интересните части от приложението. Но първо нека да разгледаме останалата част от началния екран!
Ние дефинираме променливата “index”, която ще се променя при всяко извикване на функцията “onSwiped”. Тази функция е част от компонента MainSwiper и осигурява проследяване на текущия индекс, когато дадена карта бъде изтрита.
Индексът е необходим и за показване на текущата позиция на текущата песен в топ 20 песни на вашия акаунт в spotify. Така че първата песен, която се показва и възпроизвежда, ще бъде текущата ви топ 1 песен. Освен това индексът също е необходим, за да каже на API на spotify в компонента Player коя песен трябва да бъде възпроизведена.
Това наистина беше всичко за началния екран. Нека да преминем към по-интересните части на това приложение.
Компонентът Player
Както можете да разберете от вноса, тук не говоря директно с Spotify Api. Вместо това използвам Spotify Web Api Node, което улеснява комуникацията с Spotify Api.
Първо трябва да създадем екземпляр на API като в първия кодов ред по-горе. Второ, трябва да предоставим API на spotify с токена за достъп, който получихме от процеса на удостоверяване. Тогава сме готови да използваме API!
В тази кука useEffect имаме предвид данните за topSong, които също получихме от процеса на удостоверяване. За да възпроизведем песен чрез API, трябва да предоставим song_uri, който е включен в данните за topSong. Така че всеки път, когато индексът в компонента Home се промени, API на spotify също ще възпроизвежда различна песен. В крайна сметка нашите данни за topSong са масив от обекти за песни, които итерираме. props.index казва на API кой обект от масива трябва да бъде избран.
Тези две API извиквания (spotifyApi.pause() spotifyApi.play() )са обвити в две TouchableOpacities, които представляват бутона за възпроизвеждане и пауза. В зависимост от състоянието на „възпроизвеждане“ един от тях се показва и може да се докосне и след това възпроизвеждането ще бъде поставено на пауза или продължено.
Компонентът Swiper
В компонента swiper ние използваме пакета react-native-deck-swiper, което прави доста лесно внедряването на анимациите на swipecard!
След това просто трябва да предоставите някои данни на този компонент Swiper, които в този случай са нашите топ песни. Ние картографираме всички обекти от този масив topSongs и за всяка песен показваме изглед с фона, действителното изображение на корицата, името на песента и изпълнителя. За фоновите стилове използвам компонента BlurView от expo-blur, който изглежда доста готин, нали?
Чувствайте се свободни да проверите останалата част от кода тук, според мен не е останало нищо грандиозно.
Заключение
Ето колко лесно можете да създадете свой собствен Spotify плейър с няколко реда код. Надявам се тази статия да ви е харесала. Ако сте го направили, моля, оставете харесване и коментар тук.
Приятен ден!
Повече съдържание в plainenglish.io
