Merge pull request #2 from aberigle/add-lastfm

Add nowlistening

src/index.pug

@@ -9,6 +9,15 @@ section#main
     a(href="https://linkedin.com/in/aberigle" target="_blank").icon.linkedin
     a(href="mailto:aberigle@uhurus.com").icon.mail
 
+section#lastfm
+  a(target="_blank", href="https://www.last.fm/user/Jayle23")
+    img.art
+
+  .info
+    strong.song
+    small.artist
+
+  img(src="equalizer.gif").eq
 
 footer
   a(target="_blank")#copyright

src/lib/apis/image.ts

@@ -2,7 +2,7 @@ const url : string = "https://image-api-chi.vercel.app/api/image"
 
 const example : string = '{ "startdate": "20231103", "fullstartdate": "202311032300", "enddate": "20231104", "url": "/th?id=OHR.BisonSnow_ES-ES4930036956_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp", "urlbase": "/th?id=OHR.BisonSnow_ES-ES4930036956", "copyright": "Bisonte americano, Parque Nacional de Yellowstone, Wyoming, EE.UU. (© Gary Gray/Getty Images)", "copyrightlink": "https://www.bing.com/search?q=Bisonte+americano&form=hpcapt&filters=HpDate%3a%2220231103_2300%22", "title": "Diseñados para el frío", "quiz": "/search?q=Bing+homepage+quiz&filters=WQOskey:%22HPQuiz_20231103_BisonSnow%22&FORM=HPQUIZ", "wp": true, "hsh": "9be7486cd3645e3c9e7b3d346653c21e", "drk": 1, "top": 1, "bot": 1, "hs": [] }'
 
-export default async function getImage() {
+export async function getImage() {
   if (!import.meta.env.PROD) return JSON.parse(example)
 
   const response = await fetch(url)

src/lib/apis/last-fm.ts

@@ -0,0 +1,18 @@
+const url : string = "https://ws.audioscrobbler.com/2.0/"
+const example: string = '{"artist":{"mbid":"5a85c140-dcf9-4dd2-b2c8-aff0471549f3","#text":"Sam Smith"},"streamable":"0","image":[{"size":"small","#text":"https://lastfm.freetls.fastly.net/i/u/34s/649956aa44ebfbb5b6153edbd70b0da0.jpg"},{"size":"medium","#text":"https://lastfm.freetls.fastly.net/i/u/64s/649956aa44ebfbb5b6153edbd70b0da0.jpg"},{"size":"large","#text":"https://lastfm.freetls.fastly.net/i/u/174s/649956aa44ebfbb5b6153edbd70b0da0.jpg"},{"size":"extralarge","#text":"https://lastfm.freetls.fastly.net/i/u/300x300/649956aa44ebfbb5b6153edbd70b0da0.jpg"}],"mbid":"a2cded0a-6216-41f1-b9da-dc90738e5d46","album":{"mbid":"","#text":"Gloria"},"name":"How to Cry","@attr":{"nowplaying":"true"},"url":"https://www.last.fm/music/Sam+Smith/_/How+to+Cry"}'
+
+export async function getNowPlaying(user: string) {
+  if (!import.meta.env.PROD) return JSON.parse(example)
+
+  const uri : URL = new URL(url)
+
+  uri.searchParams.append("format", "json")
+  uri.searchParams.append("method", "user.getrecenttracks")
+  uri.searchParams.append("user", user)
+  uri.searchParams.append("limit", "1")
+  uri.searchParams.append("api_key", "9ad1ebab368b74b48c4fbd6cf095087e")
+
+  const response  = await fetch(uri)
+  const body = await response.json()
+  return body.recenttracks?.track?.find((track : any) => track["@attr"]?.nowplaying)
+}

src/main.ts

@@ -1,6 +1,7 @@
-import getImage from './lib/apis/image'
+import { getImage } from './lib/apis/image'
+import { getNowPlaying } from './lib/apis/last-fm'
 import { getSVGIcon } from './lib/icons'
-import './style.css'
+import './styles/'
 
 document.querySelectorAll<HTMLElement>(".icon")
 .forEach(async (element: HTMLElement) => {
@@ -11,7 +12,20 @@ document.querySelectorAll<HTMLElement>(".icon")
 })
 
 async function checkListening() {
+  const track = await getNowPlaying("jayle23")
+  const element : HTMLElement = document.querySelector<HTMLElement>("#lastfm")!
 
+  if (!track) return element.classList.remove("show")
+
+  const img    : HTMLImageElement      = element.querySelector<HTMLImageElement>(".art")!
+  const artist : HTMLElement = element.querySelector<HTMLElement>(".artist")!
+  const song   : HTMLElement = element.querySelector<HTMLElement>(".song")!
+
+  img.src          = track.image[track.image.length -1]["#text"]
+  song.innerText   = track.name
+  artist.innerText = track.artist["#text"]
+
+  return element.classList.add("show")
 }
 
 async function checkBackground() {
@@ -20,11 +34,13 @@ async function checkBackground() {
   const copyright : HTMLAnchorElement = document.querySelector<HTMLAnchorElement>("#copyright")!
 
   element.style.backgroundImage = `url('https://bing.com${image.url}}')`
-  copyright.href = image.copyrightlink
+  copyright.href        = image.copyrightlink
   copyright.textContent = image.copyright
-  
+
   copyright.onmouseenter = () => document.body.classList.add("clean")
   copyright.onmouseleave = () => document.body.classList.remove("clean")
+
+  return true
 }
 
 checkListening()

src/styles/base.css

@@ -0,0 +1,50 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  justify-content: space-around;
+  min-height: 100vh;
+}
+
+#overlay {
+  background-color: rgba(0, 0, 0, .4);
+  z-index: 0;
+  transition: all 300ms;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+#background {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  z-index: -1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+@media screen and (max-width: 480px) {
+  :root {
+    font-size: .8em;
+  }
+
+}

src/styles/footer.css

@@ -0,0 +1,59 @@
+
+footer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 2;
+  transition: all 300ms;
+  position: absolute;
+  bottom: 0;
+  color: white;
+}
+
+#copyright {
+  margin-left: 1em;
+  color: white;
+  text-decoration: none;
+}
+
+.uhurus {
+  margin-right: 1em;
+}
+
+.uhurus .icon {
+  display: inline-block;
+  width: 1em;
+}
+
+.uhurus a {
+  background-color: #00a362;
+  color: white;
+  font-weight: 400;
+
+  text-decoration: none;
+  padding: 0;
+  transition: all 300ms;
+}
+
+.uhurus a:hover {
+  background-color: #00a362;
+  color:white;
+  border-radius: 10%;
+  padding: .2em 0;
+  box-shadow: 0 0 .3em #00a362;
+}
+
+.clean #main {
+  margin-top: -2em;
+  opacity: 0;
+}
+
+.clean #overlay {
+  background-color: transparent;
+}
+
+.clean footer {
+  background-color: rgba(0, 0, 0, .4);
+  box-shadow: 0 0 2em 2em rgba(0, 0, 0, .4);
+}

src/styles/index.ts

@@ -0,0 +1,4 @@
+import "./base.css"
+import "./main.css"
+import "./footer.css"
+import "./lastfm.css"