Fix multiple songInfo calls

[mesmerx]

in the daily usage of tuna plugin that i created i get that sometimes the songs info are mixed with the currently one and the next one
debuging i get that the handleData are receiving or some reason the info for the currently and the next one, so i fix that setting functions to get currently info for what i can get from document itself

i set some verification for edge cases without info and a song-info crash that happens too

[Araxeus]

Would probably be better at this point to get all the data from the same place instead of executejs on every field (get all song info from song-info-front.js and send it to song-info.js)

maybe something like `onXHR request -> check if XHR.details.title !== document.querySelector(".title.ytmusic-player-bar")?.textContent -> get and send all info from DOM instead of XHR

also am I missing something or songUrl wasn't changed? it should come from the same place as the title to avoid sync issues

	songInfo.url = win.webContents.getURL().split("&")[0]; // or something else from dom

(I actually was planning to do all this #334 (comment) but you beat me to it 😅)

another way to do this would be to use the youtube video api (but that requires injecting script into page and listeners since it needs page context to work - so probably not the most efficient idea lol)

[mesmerx]

onXHR request -> check if XHR.details.title !== document.querySelector(".title.ytmusic-player-bar")?.textContent
thats a good idea
about the url, i didn't step much int his field because for the tuna i only need title and the artist, i just set the other fields that i know the tag where it come from
one thing that i'm currently thinging is about getting a event for update in progress bar, because as it's right now i dont get update for progress at all

[mesmerx]

i believe that this should fix the problem for wring title and then we can upgrade for a better way of getting the info

[mesmerx]

@Araxeus i did the song url too in the
4b0b03b

[Araxeus]

@Araxeus i did the song url too in the 4b0b03b

Sorry my bad but that isn't the most reliable way to get the video url since current page url isn't guaranteed to be the video url (if you browse the app it changes the url)

Needs to be changed to something like this:

// song-info.js 
{...
const currentSrc = win.webContents.getURL().split("&")[0];
songInfo.url = currentSrc.includes('/watch?v=') ? 
	currentSrc :
	getSongUrl(songInfo.imageSrc) ||
	data?.microformat?.microformatDataRenderer?.urlCanonical;
...}

const getSongUrl = (imgSrc) => {
	const regexResult = imgSrc?.match(/\/vi\/(.*)\//);
	return regexResult?.length >= 2 ?
		"https://music.youtube.com/watch?v=" + regexResult[1] :
		'';
}

This checks if currentURL is actually a video url -> if not then grab video id from thumbnail -> if no thumbnail then just use old data from XHR

thumbnail at the playerbar is usually something like https://i.ytimg.com/vi/69fnUZhV8SI/sddefault.jpg?.... which contains the videoID, so it just needs to be extracted from there - which is done with the regex
(regex capture the X's in /vi/XXXXXX/)

(this getSongUrl method will also not always work, if the page is too small and the thumbnail isn't rendered, then the imgSrc will be 'undefined' - and thats why there are 3 fallbacks for this. but anyways this piece of code was tested and should work correctly this time 😋)

[Araxeus]

one thing that i'm currently thinging is about getting a event for update in progress bar, because as it's right now i dont get update for progress at all

Here is an idea for progress updates straight from the browser: (untested but should theoretically work)

In front.js

const { ipcRenderer } = require("electron");

ipcRenderer.once("observe-progressbar", async () => {
	const progressObserver = new MutationObserver(mutations => {
		mutations.forEach(mutation => {
			if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
				ipcRenderer.send('progress-change', mutation.target.value)
			}
		});
	});
	progressObserver.observe($('#progress-bar'), { attributeFilter: ["value"] })
});

In back.js

const { ipcMain } = require("electron");
const secToMilisec = t => Math.round(Number(t) * 1000)
const watchingProgress = false;
const data = {
	cover_url: '',
	title: '',
	artists: '',
	status: '',
	progress: '',
	duration: '',
	album_url: ''
};

module.exports = async (win) => {
	registerCallback(async (songInfo) => {
		if (songInfo.title?.length === 0 && songInfo.artist?.length === 0) {
			return;
		}

		if (!watchingProgress) {
			win.webContents.send("observe-progressbar");
			watchingProgress = true;
		}

		data.duration = secToMilisec(songInfo.songDuration)
		data.progress = secToMilisec(songInfo.elapsedSeconds)
		data.cover_url = songInfo.imageSrc
		data.album_url = songInfo.imageSrc
		data.title = songInfo.title
		data.artists = [songInfo.artist]
		data.status = !songInfo.isPaused ? 'Playing' : 'Paused'
		await post(data);
	})

	ipcMain.on("progress-change", (_event, async newProgress => {
		data.progress = secToMilisec(newProgress)
		await post(data);
	}));
}

[mesmerx]

i'll code this tomorrow, so expect one or twot days commit for that

[mesmerx]

one thing that i'm currently thinging is about getting a event for update in progress bar, because as it's right now i dont get update for progress at all

Here is an idea for progress updates straight from the browser: (untested but should theoretically work)

In front.js

const { ipcRenderer } = require("electron");

ipcRenderer.once("observe-progressbar", async () => {
	const progressObserver = new MutationObserver(mutations => {
		mutations.forEach(mutation => {
			if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
				ipcRenderer.send('progress-change', mutation.target.value)
			}
		});
	});
	progressObserver.observe($('#progress-bar'), { attributeFilter: ["value"] })
});

In back.js

const { ipcMain } = require("electron");
const watchingProgress = false;
const data = {
	cover_url: '',
	title: '',
	artists: '',
	status: '',
	progress: '',
	duration: '',
	album_url: ''
};

module.exports = async (win) => {
	registerCallback(async (songInfo) => {
		if (songInfo.title?.length === 0 && songInfo.artist?.length === 0) {
			return;
		}

		if (!watchingProgress) {
			win.webContents.send("observe-progressbar");
			watchingProgress = true;
		}

		data.duration = Number(songInfo.songDuration) * 1000
		data.progress = Number(songInfo.elapsedSeconds) * 1000
		data.cover_url = songInfo.imageSrc
		data.album_url = songInfo.imageSrc
		data.title = songInfo.title
		data.artists = [songInfo.artist]
		data.status = !songInfo.isPaused ? 'Playing' : 'Paused'
		await post(data);
	})

	ipcMain.on("progress-change", (_event, async newProgress => {
		data.progress = Number(newProgress) * 1000
		await post(data);
	}));
}

seems to be a valid approach, i'll try this with the update for url song
and be free to add your commits in the fork too, it''ll be glad accepted

[Araxeus]

I have found a better and cleaner way for getting all the songInfo stuff and opened a new PR, see #443

Could you rename this PR and delete all changes to songInfo.js and leave only the tuna stuff please? 😄

[mesmerx]

if this PR (#443) fixes the problem i can close this PR entirely and reopen only for progress bar

[Araxeus]

#443 does fix the problem

You can test it yourself 😅

[mesmerx]

pr closed, i'll wait #443

[Araxeus]

@mesmerx you wanna add the live updates yourself? or shall I just add this to my ever expanding list of pr's? 😝