diff --git a/src/extension/typescript/background.ts b/src/extension/typescript/background.ts index 746724f..9f97afe 100644 --- a/src/extension/typescript/background.ts +++ b/src/extension/typescript/background.ts @@ -1,4 +1,24 @@ -function onRuntimeMessage(message: any) {} +import type { Track, Artist } from "./modules/SpotifyAPI"; + +function onRuntimeMessage(message: Track) { + const artist = message.artist; + + console.log(message.coverArt); + + browser.notifications + .create({ + title: message.title, + message: message.artist.name, + iconUrl: message.coverArt, + type: "basic", + }) + .then(() => { + console.log("OK"); + }) + .catch((err) => { + console.error(err); + }); +} browser.runtime.onMessage.addListener(onRuntimeMessage); diff --git a/src/extension/typescript/content.ts b/src/extension/typescript/content.ts index a9d2e62..ea8ec7d 100644 --- a/src/extension/typescript/content.ts +++ b/src/extension/typescript/content.ts @@ -4,4 +4,7 @@ const API = new SpotifyAPI(); // use the API -API.getCurrentTrack(); +const data = API.getCurrentTrack(); + +browser.runtime.sendMessage(data); + diff --git a/src/extension/typescript/modules/SpotifyAPI.ts b/src/extension/typescript/modules/SpotifyAPI.ts index f50f45d..2b0fd0c 100644 --- a/src/extension/typescript/modules/SpotifyAPI.ts +++ b/src/extension/typescript/modules/SpotifyAPI.ts @@ -6,20 +6,14 @@ export type Artist = { }; export type Track = { - track: { - title: string; - URL: string; - coverArt: string; + title: string; + URL: string; + coverArt: string; - artist: Artist | Artist[]; - }; - - playing: boolean; + artist: Artist; }; -export type Playstate = { - track: Track; - +export type PlayState = { isPlaying: boolean; }; @@ -36,27 +30,47 @@ export default class SpotifyAPI { * @example `/album/` -> `https://open.spotify.com/album/` */ private generateFullURL(relativeURL: string) { - return `${window.location.host}${relativeURL}`; + return `${window.location.protocol}//${window.location.host}${relativeURL}`; } - getCurrentTrack() { + getCurrentTrack(): Track { const titleElement = this.scraper.getBarElement("title")!; const trackURL = `${titleElement.getAttribute("href")}`; const artistElement = this.scraper.getBarElement("artist")!; - const artistName = artistElement.textContent; - const artistURL = artistElement.getAttribute("href"); + const artistName = artistElement.textContent!; + const artistURL = artistElement.getAttribute("href")!; - // console.log(trackElement.textContent); + const coverArtImage = this.scraper + .getBarElement("coverArtImage")! + .getAttribute("src")!; - console.log( - `Now playing: ${ - titleElement.textContent - } by ${artistName} (${this.generateFullURL(trackURL)})` - ); + return { + title: titleElement.textContent!, + URL: this.generateFullURL(trackURL), + + coverArt: coverArtImage, + + artist: { + name: artistName, + URL: this.generateFullURL(artistURL), + }, + }; } - getPlaystate() {} + getPlaystate() { + const playbackControlButton = this.scraper.getBarElement( + "playbackControlButton" + )!; + + /* The button's aria-label attribute contains the action that it will perform once clicked + not its current playstate */ + return playbackControlButton.getAttribute("aria-label") === "Play" + ? false + : true; + } + + getPlayback() {} // TODO: Implement events: onPlay, onPause (?), trackChanged, playstateChanged