mirror of
https://github.com/Mastermindzh/tidal-hifi.git
synced 2025-04-29 07:52:53 +02:00
349 lines
10 KiB
TypeScript
349 lines
10 KiB
TypeScript
import { convertDurationToSeconds } from "../../features/time/parse";
|
|
import { MediaInfo } from "../../models/mediaInfo";
|
|
import { MediaStatus } from "../../models/mediaStatus";
|
|
import { RepeatState } from "../../models/repeatState";
|
|
import { TidalController } from "../TidalController";
|
|
import { DomControllerOptions } from "./DomControllerOptions";
|
|
|
|
export class DomTidalController implements TidalController<DomControllerOptions> {
|
|
private updateSubscriber: (state: Partial<MediaInfo>) => void;
|
|
private currentlyPlaying = MediaStatus.paused;
|
|
private currentRepeatState: RepeatState = RepeatState.off;
|
|
private currentShuffleState = false;
|
|
|
|
private readonly elements = {
|
|
play: '*[data-test="play"]',
|
|
pause: '*[data-test="pause"]',
|
|
next: '*[data-test="next"]',
|
|
previous: 'button[data-test="previous"]',
|
|
title: '*[data-test^="footer-track-title"]',
|
|
artists: '*[data-test^="grid-item-detail-text-title-artist"]',
|
|
home: '*[data-test="menu--home"]',
|
|
back: '[title^="Back"]',
|
|
forward: '[title^="Next"]',
|
|
search: '[class^="searchField"]',
|
|
shuffle: '*[data-test="shuffle"]',
|
|
repeat: '*[data-test="repeat"]',
|
|
account: '*[data-test^="profile-image-button"]',
|
|
settings: '*[data-test^="sidebar-menu-button"]',
|
|
openSettings: '*[data-test^="open-settings"]',
|
|
media: '*[data-test="current-media-imagery"]',
|
|
image: "img",
|
|
current: '*[data-test="current-time"]',
|
|
duration: '*[class^=_playbackControlsContainer] *[data-test="duration"]',
|
|
bar: '*[data-test="progress-bar"]',
|
|
footer: "#footerPlayer",
|
|
mediaItem: "[data-type='mediaItem']",
|
|
album_header_title: '*[class^="playingFrom"] span:nth-child(2)',
|
|
playing_from: '*[class^="playingFrom"] span:nth-child(2)',
|
|
queue_album: "*[class^=playQueueItemsContainer] *[class^=groupTitle] span:nth-child(2)",
|
|
currentlyPlaying: "[class^='isPlayingIcon'], [data-test-is-playing='true']",
|
|
album_name_cell: '[class^="album"]',
|
|
tracklist_row: '[data-test="tracklist-row"]',
|
|
volume: '*[data-test="volume"]',
|
|
favorite: '*[data-test="footer-favorite-button"]',
|
|
/**
|
|
* Get an element from the dom
|
|
* @param {*} key key in elements object to fetch
|
|
*/
|
|
get: function (key: string) {
|
|
return globalThis.document.querySelector(this[key.toLowerCase()]) ?? "";
|
|
},
|
|
|
|
/**
|
|
* Get the icon of the current media
|
|
*/
|
|
getSongIcon: function () {
|
|
const figure = this.get("media");
|
|
|
|
if (figure) {
|
|
const mediaElement = figure.querySelector(this["image"]);
|
|
if (mediaElement) {
|
|
return mediaElement.src.replace("80x80", "640x640");
|
|
}
|
|
}
|
|
|
|
return "";
|
|
},
|
|
|
|
/**
|
|
* returns an array of all artists in the current media
|
|
* @returns {Array} artists
|
|
*/
|
|
getArtistsArray: function () {
|
|
const footer = this.get("footer");
|
|
|
|
if (footer) {
|
|
const artists = footer.querySelectorAll(this.artists);
|
|
if (artists)
|
|
return Array.from(artists).map((artist) => (artist as HTMLElement).textContent);
|
|
}
|
|
return [];
|
|
},
|
|
|
|
/**
|
|
* unify the artists array into a string separated by commas
|
|
* @param {Array} artistsArray
|
|
* @returns {String} artists
|
|
*/
|
|
getArtistsString: function (artistsArray: string[]) {
|
|
if (artistsArray.length > 0) return artistsArray.join(", ");
|
|
return "unknown artist(s)";
|
|
},
|
|
|
|
getAlbumName: function () {
|
|
//If listening to an album, get its name from the header title
|
|
if (globalThis.location.href.includes("/album/")) {
|
|
const albumName = globalThis.document.querySelector(this.album_header_title);
|
|
if (albumName) {
|
|
return albumName.textContent;
|
|
}
|
|
//If listening to a playlist or a mix, get album name from the list
|
|
} else if (
|
|
globalThis.location.href.includes("/playlist/") ||
|
|
globalThis.location.href.includes("/mix/")
|
|
) {
|
|
if (this.currentlyPlaying === MediaStatus.playing) {
|
|
// find the currently playing element from the list (which might be in an album icon), traverse back up to the mediaItem (row) and select the album cell.
|
|
// document.querySelector("[class^='isPlayingIcon'], [data-test-is-playing='true']").closest('[data-type="mediaItem"]').querySelector('[class^="album"]').textContent
|
|
const row = window.document.querySelector(this.currentlyPlaying).closest(this.mediaItem);
|
|
if (row) {
|
|
return row.querySelector(this.album_name_cell).textContent;
|
|
}
|
|
}
|
|
}
|
|
|
|
// see whether we're on the queue page and get it from there
|
|
const queueAlbumName = this.getText("queue_album");
|
|
if (queueAlbumName) {
|
|
return queueAlbumName;
|
|
}
|
|
|
|
return "";
|
|
},
|
|
|
|
isMuted: function () {
|
|
return this.get("volume").getAttribute("aria-checked") === "false"; // it's muted if aria-checked is false
|
|
},
|
|
|
|
isFavorite: function () {
|
|
return this.get("favorite").getAttribute("aria-checked") === "true";
|
|
},
|
|
|
|
/**
|
|
* Shorthand function to get the text of a dom element
|
|
* @param {*} key key in elements object to fetch
|
|
*/
|
|
getText: function (key: string) {
|
|
const element = this.get(key);
|
|
return element ? element.textContent : "";
|
|
},
|
|
|
|
/**
|
|
* Shorthand function to click a dom element
|
|
* @param {*} key key in elements object to fetch
|
|
*/
|
|
click: function (key: string) {
|
|
this.get(key).click();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Shorthand function to focus a dom element
|
|
* @param {*} key key in elements object to fetch
|
|
*/
|
|
focus: function (key: string) {
|
|
return this.get(key).focus();
|
|
},
|
|
};
|
|
|
|
onMediaInfoUpdate(callback: (state: Partial<MediaInfo>) => void): void {
|
|
this.updateSubscriber = callback;
|
|
}
|
|
|
|
bootstrap(options: DomControllerOptions): void {
|
|
/**
|
|
* Checks if Tidal is playing a video or song by grabbing the "a" element from the title.
|
|
* If it's a song it returns the track URL, if not it will return undefined
|
|
*/
|
|
const getTrackURL = () => {
|
|
const id = this.getTrackId();
|
|
return `https://tidal.com/browse/track/${id}`;
|
|
};
|
|
|
|
setInterval(async () => {
|
|
const title = this.getTitle();
|
|
const artistsArray = this.getArtists();
|
|
const artistsString = this.getArtistsString();
|
|
|
|
const current = this.getCurrentTime();
|
|
const currentStatus = this.getCurrentlyPlayingStatus();
|
|
const shuffleState = this.getCurrentShuffleState();
|
|
const repeatState = this.getCurrentRepeatState();
|
|
|
|
const playStateChanged = currentStatus != this.currentlyPlaying;
|
|
const shuffleStateChanged = shuffleState != this.currentShuffleState;
|
|
const repeatStateChanged = repeatState != this.currentRepeatState;
|
|
|
|
if (playStateChanged) this.currentlyPlaying = currentStatus;
|
|
if (shuffleStateChanged) this.currentShuffleState = shuffleState;
|
|
if (repeatStateChanged) this.currentRepeatState = repeatState;
|
|
|
|
const album = this.getAlbumName();
|
|
const duration = this.getDuration();
|
|
const updatedInfo = {
|
|
title,
|
|
artists: artistsString,
|
|
artistsArray,
|
|
album: album,
|
|
playingFrom: this.getPlayingFrom(),
|
|
status: currentStatus,
|
|
url: getTrackURL(),
|
|
current,
|
|
currentInSeconds: convertDurationToSeconds(current),
|
|
duration,
|
|
durationInSeconds: convertDurationToSeconds(duration),
|
|
image: this.getSongIcon(),
|
|
favorite: this.isFavorite(),
|
|
player: {
|
|
status: currentStatus,
|
|
shuffle: shuffleState,
|
|
repeat: repeatState,
|
|
},
|
|
};
|
|
|
|
this.updateSubscriber(updatedInfo);
|
|
}, options.refreshInterval);
|
|
}
|
|
|
|
playPause = (): void => {
|
|
const play = this.elements.get("play");
|
|
|
|
if (play) {
|
|
this.elements.click("play");
|
|
} else {
|
|
this.elements.click("pause");
|
|
}
|
|
};
|
|
|
|
goToHome(): void {
|
|
this.elements.click("home");
|
|
}
|
|
|
|
openSettings(): void {
|
|
this.elements.click("settings");
|
|
setTimeout(() => {
|
|
this.elements.click("openSettings");
|
|
}, 100);
|
|
}
|
|
|
|
toggleFavorite(): void {
|
|
this.elements.click("favorite");
|
|
}
|
|
|
|
back(): void {
|
|
this.elements.click("back");
|
|
}
|
|
forward(): void {
|
|
this.elements.click("forward");
|
|
}
|
|
repeat(): void {
|
|
this.elements.click("repeat");
|
|
}
|
|
|
|
next(): void {
|
|
this.elements.click("next");
|
|
}
|
|
previous(): void {
|
|
this.elements.click("previous");
|
|
}
|
|
toggleShuffle(): void {
|
|
this.elements.click("shuffle");
|
|
}
|
|
getCurrentlyPlayingStatus() {
|
|
const pause = this.elements.get("pause");
|
|
|
|
// if pause button is visible tidal is playing
|
|
if (pause) {
|
|
return MediaStatus.playing;
|
|
} else {
|
|
return MediaStatus.paused;
|
|
}
|
|
}
|
|
|
|
getCurrentShuffleState() {
|
|
const shuffle = this.elements.get("shuffle");
|
|
return shuffle?.getAttribute("aria-checked") === "true";
|
|
}
|
|
|
|
getCurrentRepeatState() {
|
|
const repeat = this.elements.get("repeat");
|
|
switch (repeat?.getAttribute("data-type")) {
|
|
case "button__repeatAll":
|
|
return RepeatState.all;
|
|
case "button__repeatSingle":
|
|
return RepeatState.single;
|
|
default:
|
|
return RepeatState.off;
|
|
}
|
|
}
|
|
|
|
play(): void {
|
|
this.playPause();
|
|
}
|
|
pause(): void {
|
|
this.playPause();
|
|
}
|
|
stop(): void {
|
|
this.playPause();
|
|
}
|
|
|
|
getCurrentPosition() {
|
|
return this.elements.getText("current");
|
|
}
|
|
getCurrentPositionInSeconds(): number {
|
|
return convertDurationToSeconds(this.getCurrentPosition());
|
|
}
|
|
|
|
getTrackId(): string {
|
|
const URLelement = this.elements.get("title").querySelector("a");
|
|
if (URLelement !== null) {
|
|
const id = URLelement.href.replace(/\D/g, "");
|
|
return id;
|
|
}
|
|
|
|
return window.location.toString();
|
|
}
|
|
|
|
getCurrentTime(): string {
|
|
return this.elements.getText("current");
|
|
}
|
|
getDuration(): string {
|
|
return this.elements.getText("duration");
|
|
}
|
|
|
|
getAlbumName(): string {
|
|
return this.elements.getAlbumName();
|
|
}
|
|
getTitle(): string {
|
|
return this.elements.getText("title");
|
|
}
|
|
getArtists(): string[] {
|
|
return this.elements.getArtistsArray();
|
|
}
|
|
|
|
getArtistsString(): string {
|
|
return this.elements.getArtistsString(this.getArtists());
|
|
}
|
|
getPlayingFrom(): string {
|
|
return this.elements.getText("playing_from");
|
|
}
|
|
|
|
isFavorite(): boolean {
|
|
return this.elements.isFavorite();
|
|
}
|
|
getSongIcon(): string {
|
|
return this.elements.getSongIcon();
|
|
}
|
|
}
|