fix: lastfm integration
This commit is contained in:
parent
35e5039dc5
commit
ed5b9df009
|
@ -1,6 +1,6 @@
|
|||
import { Page500Style } from "./500Page.style";
|
||||
|
||||
function Page500() {
|
||||
function Page500(error = null) {
|
||||
return (
|
||||
<Page500Style>
|
||||
<div className="container">
|
||||
|
@ -10,6 +10,8 @@ function Page500() {
|
|||
<span>500</span> <br />
|
||||
Internal server error
|
||||
</h1>
|
||||
<p className="info">{JSON.stringify(error)}</p>
|
||||
<br/>
|
||||
<p>I might be currently trying to fix the problem.</p>
|
||||
<p className="info">Maybe try again in a few minutes ...</p>
|
||||
</div>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import { Component } from "react"
|
||||
import Page500 from "./500Page"
|
||||
|
||||
class ErrorBoundary extends Component {
|
||||
constructor(props) {
|
||||
|
@ -20,6 +21,7 @@ class ErrorBoundary extends Component {
|
|||
// You can render any custom fallback UI
|
||||
return (
|
||||
<div>
|
||||
<Page500 />
|
||||
<h2>Oops, there is an error!</h2>
|
||||
<button
|
||||
type="button"
|
||||
|
|
|
@ -93,4 +93,8 @@ export default styled.div`
|
|||
background-color: var(--color7);
|
||||
}
|
||||
}
|
||||
.albumart {
|
||||
padding-top: 5px;
|
||||
width: 97%;
|
||||
}
|
||||
`;
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
import React from "react";
|
||||
import SkillCard from "../skillCard";
|
||||
import SkillCardStyle from "../skillCard.styled";
|
||||
import { format, parse } from "date-format-parse";
|
||||
import { useLastFM } from "use-last-fm";
|
||||
import useLastFM from "hooks/useLastFM";
|
||||
|
||||
function LastFMCurrentSkillCard({
|
||||
title,
|
||||
|
@ -13,9 +11,9 @@ function LastFMCurrentSkillCard({
|
|||
name,
|
||||
url,
|
||||
}) {
|
||||
const lastFM = useLastFM(3);
|
||||
const {status,song} = useLastFM();
|
||||
|
||||
if (lastFM.status !== "playing") {
|
||||
if (status !== "playing") {
|
||||
return (
|
||||
<SkillCard title={title} image={image} url={url}>
|
||||
Not listening to anything
|
||||
|
@ -25,10 +23,10 @@ function LastFMCurrentSkillCard({
|
|||
return (
|
||||
<SkillCard title={title} image={image} url={url}>
|
||||
<div className="description">
|
||||
{empty ? "No recent tracks" : `${artist} - ${name}`}
|
||||
{empty ? "No recent tracks" : `${song.artist} - ${song.name}`}
|
||||
</div>
|
||||
<div className="description">
|
||||
{empty ? "" : <img src={albumImg} alt={`${artist} - ${name}`} />}
|
||||
{empty ? "" : <img src={song.art} alt={`${song.artist} - ${song.name}`} className="albumart"/>}
|
||||
</div>
|
||||
</SkillCard>
|
||||
);
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import axios from "axios";
|
||||
|
||||
export default axios.create({
|
||||
baseURL: "https://api.b68.dev",
|
||||
// baseURL: "http://localhost:9000",
|
||||
// baseURL: "https://api.b68.dev",
|
||||
baseURL: "http://localhost:9000",
|
||||
});
|
||||
|
|
|
@ -0,0 +1,68 @@
|
|||
import {useEffect,useState} from "react"
|
||||
import axios from "../handlers/axios"
|
||||
|
||||
const parseSong = (
|
||||
body,
|
||||
imageSize,
|
||||
) => {
|
||||
if (!body) {
|
||||
return {
|
||||
status: 'connecting',
|
||||
song: null,
|
||||
};
|
||||
}
|
||||
|
||||
const lastSong = body.recenttracks.track?.[0];
|
||||
|
||||
if (!lastSong || !lastSong['@attr']?.nowplaying) {
|
||||
return {
|
||||
status: 'idle',
|
||||
song: null,
|
||||
};
|
||||
}
|
||||
|
||||
const image = lastSong.image.find(i => {
|
||||
return i.size === imageSize;
|
||||
});
|
||||
|
||||
return {
|
||||
status: 'playing',
|
||||
song: {
|
||||
name: lastSong.name,
|
||||
artist: lastSong.artist['#text'],
|
||||
art: image?.['#text'] ?? lastSong.image[0]['#text'],
|
||||
url: lastSong.url,
|
||||
album: lastSong.album['#text'],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
const useLastFM = () =>{
|
||||
const [status,setStatus] = useState("idle")
|
||||
const [song,setSong] = useState();
|
||||
|
||||
const getStatus = async () =>{
|
||||
|
||||
axios.get("/me/lastfm/current").then((res)=>{
|
||||
const {status, song}=
|
||||
parseSong(res.data, "extralarge")
|
||||
setSong(song)
|
||||
setStatus(status)
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
|
||||
const interval = setInterval(()=>{
|
||||
getStatus()
|
||||
}, 3000)
|
||||
|
||||
return () => clearInterval(interval)
|
||||
|
||||
},[])
|
||||
|
||||
return {status,song}
|
||||
}
|
||||
|
||||
export default useLastFM
|
|
@ -39,8 +39,7 @@
|
|||
"react-dom": "^18.2.0",
|
||||
"react-use-lanyard": "^0.1.1",
|
||||
"sitemap": "^7.1.1",
|
||||
"styled-components": "^5.3.7",
|
||||
"use-last-fm": "BRAVO68WEB/use-last-fm"
|
||||
"styled-components": "^5.3.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^7.32.0",
|
||||
|
|
|
@ -18,3 +18,13 @@ export default function Home() {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// export const getServerSideProps = async () => {
|
||||
|
||||
// throw new Error("Internal server error")
|
||||
|
||||
// return {
|
||||
// props:[]
|
||||
// }
|
||||
// }
|
||||
|
18
yarn.lock
18
yarn.lock
|
@ -1077,11 +1077,6 @@ define-properties@^1.1.3, define-properties@^1.1.4:
|
|||
has-property-descriptors "^1.0.0"
|
||||
object-keys "^1.1.1"
|
||||
|
||||
dequal@2.0.2:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
|
||||
integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
|
||||
|
||||
dir-glob@^3.0.1:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
|
||||
|
@ -2895,13 +2890,6 @@ supports-preserve-symlinks-flag@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
|
||||
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
|
||||
|
||||
swr@^0.4.0:
|
||||
version "0.4.2"
|
||||
resolved "https://registry.yarnpkg.com/swr/-/swr-0.4.2.tgz#4a9ed5e9948088af145c79d716d294cb99712a29"
|
||||
integrity sha512-SKGxcAfyijj/lE5ja5zVMDqJNudASH3WZPRUakDVOePTM18FnsXgugndjl9BSRwj+jokFCulMDe7F2pQL+VhEw==
|
||||
dependencies:
|
||||
dequal "2.0.2"
|
||||
|
||||
swr@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/swr/-/swr-1.3.0.tgz#c6531866a35b4db37b38b72c45a63171faf9f4e8"
|
||||
|
@ -3038,12 +3026,6 @@ uri-js@^4.2.2:
|
|||
dependencies:
|
||||
punycode "^2.1.0"
|
||||
|
||||
use-last-fm@BRAVO68WEB/use-last-fm:
|
||||
version "0.6.2"
|
||||
resolved "https://codeload.github.com/BRAVO68WEB/use-last-fm/tar.gz/9d2ce5424e8259ae91d2a0e00d8efdb41971c7ce"
|
||||
dependencies:
|
||||
swr "^0.4.0"
|
||||
|
||||
v8-compile-cache@^2.0.3:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
|
||||
|
|
Loading…
Reference in New Issue