smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-11 10:31:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Interactive Notifications v2

Browse Source
This commit is contained in:
Araxeus
2023-01-08 14:50:38 +02:00
parent 027d4ce3f0
commit 70522173b7
13 changed files with 305 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
config/defaults.js
View File

@ -55,8 +55,10 @@ const defaultConfig = {
enabled: false, enabled: false,
unpauseNotification: false, unpauseNotification: false,
urgency: "normal", //has effect only on Linux urgency: "normal", //has effect only on Linux
interactive: true, //has effect only on Windows // the following has effect only on Windows
smallInteractive: false //has effect only on Windows interactive: true,
toastStyle: 1, // see plugins/notifications/utils for more info
hideButtonText: false
}, },
"precise-volume": { "precise-volume": {
enabled: false, enabled: false,

1
index.js
View File

@ -75,6 +75,7 @@ function onClosed() {
mainWindow = null; mainWindow = null;
} }
/** @param {Electron.BrowserWindow} win */
function loadPlugins(win) { function loadPlugins(win) {
injectCSS(win.webContents, path.join(__dirname, "youtube-music.css")); injectCSS(win.webContents, path.join(__dirname, "youtube-music.css"));
// Load user CSS // Load user CSS

17
plugins/notifications/back.js
View File

@ -2,8 +2,9 @@ const { Notification } = require("electron");
const is = require("electron-is"); const is = require("electron-is");
const registerCallback = require("../../providers/song-info"); const registerCallback = require("../../providers/song-info");
const { notificationImage } = require("./utils"); const { notificationImage } = require("./utils");
const config = require("./config");
const notify = (info, options) => { const notify = (info) => {
// Fill the notification with content // Fill the notification with content
const notification = { const notification = {
@ -11,7 +12,7 @@ const notify = (info, options) => {
body: info.artist, body: info.artist,
icon: notificationImage(info), icon: notificationImage(info),
silent: true, silent: true,
urgency: options.urgency, urgency: config.get('urgency'),
}; };
// Send the notification // Send the notification
@ -21,24 +22,26 @@ const notify = (info, options) => {
return currentNotification; return currentNotification;
}; };
const setup = (options) => { const setup = () => {
let oldNotification; let oldNotification;
let currentUrl; let currentUrl;
registerCallback(songInfo => { registerCallback(songInfo => {
if (!songInfo.isPaused && (songInfo.url !== currentUrl || options.unpauseNotification)) { if (!songInfo.isPaused && (songInfo.url !== currentUrl || config.get('unpauseNotification'))) {
// Close the old notification // Close the old notification
oldNotification?.close(); oldNotification?.close();
currentUrl = songInfo.url; currentUrl = songInfo.url;
// This fixes a weird bug that would cause the notification to be updated instead of showing // This fixes a weird bug that would cause the notification to be updated instead of showing
setTimeout(() => { oldNotification = notify(songInfo, options) }, 10); setTimeout(() => { oldNotification = notify(songInfo) }, 10);
} }
}); });
} }
/** @param {Electron.BrowserWindow} win */
module.exports = (win, options) => { module.exports = (win, options) => {
config.init(options);
// Register the callback for new song information // Register the callback for new song information
is.windows() && options.interactive ? is.windows() && options.interactive ?
require("./interactive")(win, options) : require("./interactive")(win) :
setup(options); setup();
}; };

22
plugins/notifications/config.js Normal file
View File

@ -0,0 +1,22 @@
const { setOptions, setMenuOptions } = require("../../config/plugins");
let config;
module.exports.init = (options) => {
config = options;
}
module.exports.setAndMaybeRestart = (option, value) => {
config[option] = value;
setMenuOptions("notifications", config);
}
module.exports.set = (option, value) => {
config[option] = value;
setOptions("notifications", config);
}
module.exports.get = (option) => {
let res = config[option];
return res;
}

291
plugins/notifications/interactive.js
View File

@ -1,31 +1,38 @@
const { notificationImage, icons, save_temp_icons } = require("./utils"); const { notificationImage, icons, save_temp_icons, secondsToMinutes, ToastStyles } = require("./utils");
const getSongControls = require('../../providers/song-controls'); const getSongControls = require('../../providers/song-controls');
const registerCallback = require("../../providers/song-info"); const registerCallback = require("../../providers/song-info");
const { changeProtocolHandler } = require("../../providers/protocol-handler"); const { changeProtocolHandler } = require("../../providers/protocol-handler");
const { Notification, app } = require("electron"); const { Notification, app, ipcMain } = require("electron");
const path = require('path'); const path = require('path');
let songControls; const config = require("./config");
let config;
let savedNotification;
module.exports = (win, _config) => { let songControls;
let savedNotification;
// TODO create banner function
/** @param {Electron.BrowserWindow} win */
module.exports = (win) => {
songControls = getSongControls(win); songControls = getSongControls(win);
config = _config;
if (app.isPackaged && !config.smallInteractive) save_temp_icons(); let currentSeconds = 0;
ipcMain.on('apiLoaded', () => win.webContents.send('setupTimeChangedListener'));
ipcMain.on('timeChanged', (_, t) => currentSeconds = t);
if (app.isPackaged) save_temp_icons();
let lastSongInfo = { url: undefined }; let lastSongInfo = { url: undefined };
// Register songInfoCallback // Register songInfoCallback
registerCallback(songInfo => { registerCallback(songInfo => {
if (!songInfo.isPaused && (songInfo.url !== lastSongInfo.url || config.unpauseNotification)) { if (!songInfo.isPaused && (songInfo.url !== lastSongInfo.url || config.get("unpauseNotification"))) {
lastSongInfo = { ...songInfo }; lastSongInfo = { ...songInfo };
sendXML(songInfo); sendXML(songInfo);
} }
}); });
//TODO on app before close, close notification // TODO on app before close, close notification
app.once("before-quit", () => { app.once("before-quit", () => {
savedNotification?.close(); savedNotification?.close();
}); });
@ -34,9 +41,9 @@ module.exports = (win, _config) => {
(cmd) => { (cmd) => {
if (Object.keys(songControls).includes(cmd)) { if (Object.keys(songControls).includes(cmd)) {
songControls[cmd](); songControls[cmd]();
if (cmd === 'pause' || (cmd === 'play' && !config.unpauseNotification)) { if (cmd === 'pause' || (cmd === 'play' && !config.get("unpauseNotification"))) {
setImmediate(() => setImmediate(() =>
sendXML({ ...lastSongInfo, isPaused: cmd === 'pause' }) sendXML({ ...lastSongInfo, isPaused: cmd === 'pause', elapsedSeconds: currentSeconds })
); );
} }
} }
@ -45,20 +52,20 @@ module.exports = (win, _config) => {
} }
function sendXML(songInfo) { function sendXML(songInfo) {
const imgSrc = notificationImage(songInfo, true); const iconSrc = notificationImage(songInfo);
savedNotification?.close(); savedNotification?.close();
savedNotification = new Notification({ savedNotification = new Notification({
title: songInfo.title || "Playing", title: songInfo.title || "Playing",
body: songInfo.artist, body: songInfo.artist,
icon: imgSrc, icon: iconSrc,
silent: true, silent: true,
// https://learn.microsoft.com/en-us/uwp/schemas/tiles/toastschema/schema-root // https://learn.microsoft.com/en-us/uwp/schemas/tiles/toastschema/schema-root
// https://learn.microsoft.com/en-us/windows/apps/design/shell/tiles-and-notifications/toast-schema // https://learn.microsoft.com/en-us/windows/apps/design/shell/tiles-and-notifications/toast-schema
// https://learn.microsoft.com/en-us/windows/apps/design/shell/tiles-and-notifications/adaptive-interactive-toasts?tabs=xml // https://learn.microsoft.com/en-us/windows/apps/design/shell/tiles-and-notifications/adaptive-interactive-toasts?tabs=xml
// https://learn.microsoft.com/en-us/uwp/api/windows.ui.notifications.toasttemplatetype // https://learn.microsoft.com/en-us/uwp/api/windows.ui.notifications.toasttemplatetype
toastXml: get_xml_custom(), toastXml: get_xml(songInfo, iconSrc),
}); });
savedNotification.on("close", (_) => { savedNotification.on("close", (_) => {
@ -68,209 +75,131 @@ function sendXML(songInfo) {
savedNotification.show(); savedNotification.show();
} }
const get_xml = (songInfo, iconSrc) => {
switch (config.get("style")) {
default:
case ToastStyles.logo:
case ToastStyles.legacy:
return xml_logo(songInfo, iconSrc);
case ToastStyles.banner_top_custom:
return xml_banner_top_custom(songInfo, iconSrc);
case ToastStyles.hero:
return xml_hero(songInfo, iconSrc);
case ToastStyles.banner_bottom:
return xml_banner_bottom(songInfo, iconSrc);
case ToastStyles.banner_centered_bottom:
return xml_banner_centered_bottom(songInfo, iconSrc);
case ToastStyles.banner_centered_top:
return xml_banner_centered_top(songInfo, iconSrc);
};
}
const iconLocation = app.isPackaged ? const iconLocation = app.isPackaged ?
path.resolve(app.getPath("userData"), 'icons') : path.resolve(app.getPath("userData"), 'icons') :
path.resolve(__dirname, '..', '..', 'assets/media-icons-black'); path.resolve(__dirname, '..', '..', 'assets/media-icons-black');
const display = (kind) => {
if (config.get("style") === ToastStyles.legacy ) {
return `content="${icons[kind]}"`;
} else {
return `\
content="${kind.charAt(0).toUpperCase() + kind.slice(1)}"\
imageUri="file:///${path.resolve(__dirname, iconLocation, `${kind}.png`)}"
`;
}
}
const getButton = (kind) => const getButton = (kind) =>
`<action ${display(kind)} activationType="protocol" arguments="youtubemusic://${kind}"/>`; `<action ${display(kind)} activationType="protocol" arguments="youtubemusic://${kind}"/>`;
const display = (kind) => const getButtons = (isPaused) => `\
config.smallInteractive ?
`content="${icons[kind]}"` :
`content="${kind.charAt(0).toUpperCase() + kind.slice(1)}" imageUri="file:///${path.resolve(__dirname, iconLocation, `${kind}.png`)}"`;
const get_xml = (songInfo, options, imgSrc) => `
<toast useButtonStyles="true">
<audio silent="true" />
<visual>
<binding template="ToastImageAndText02">
<image id="1" src="${imgSrc}" name="Image" />
<text id="1">${songInfo.title}</text>
<text id="2">${songInfo.artist}</text>
</binding>
</visual>
<actions> <actions>
${getButton('previous')} ${getButton('previous')}
${songInfo.isPaused ? getButton('play') : getButton('pause')} ${isPaused ? getButton('play') : getButton('pause')}
${getButton('next')} ${getButton('next')}
</actions> </actions>\
</toast>` `;
// **************************************************** // const toast = (content, isPaused) => `\
// PREMADE TEMPLATES FOR TESTING <toast>
// DELETE AFTER TESTING
// **************************************************** //
const get_xml_custom = () => xml_banner_centered_top;
const xml_logo_ascii = `
<toast useButtonStyles="true">
<audio silent="true" /> <audio silent="true" />
<visual> <visual>
<binding template="ToastGeneric"> <binding template="ToastGeneric">
<image id="1" src="file:///C:/Git/test/toasters/assets/surtur_rising_cover.jpg" name="Image" placement="appLogoOverride"/> ${content}
<text id="1">The Last Stand of Frej</text>
<text id="2">Amon Amarth</text>
</binding> </binding>
</visual> </visual>
<actions> ${getButtons(isPaused)}
<action content="ᐸ" activationType="protocol" arguments="youtubemusic://pause}"/> </toast>`;
<action content="‖" activationType="protocol" arguments="youtubemusic://pause}"/>
<action content="ᐳ" activationType="protocol" arguments="youtubemusic://pause}"/>
</actions>
</toast>
`;
const xml_logo = ({title, artist, isPaused}, imgSrc) => toast(`\
<image id="1" src="${imgSrc}" name="Image" placement="appLogoOverride"/>
<text id="1">${title}</text>
<text id="2">${artist}</text>\
`, isPaused);
const xml_logo_icons_notext =` const xml_hero = ({title, artist, isPaused}, imgSrc) => toast(`\
<toast useButtonStyles="true"> <image id="1" src="${imgSrc}" name="Image" placement="hero"/>
<audio silent="true" /> <text id="1">${title}</text>
<visual> <text id="2">${artist}</text>\
<binding template="ToastGeneric"> `, isPaused);
<image id="1" src="file:///C:/Git/test/toasters/assets/surtur_rising_cover.jpg" name="Image" placement="appLogoOverride"/>
<text id="1">The Last Stand of Frej</text>
<text id="2">Amon Amarth</text>
</binding>
</visual>
<actions> const xml_banner_bottom = ({title, artist, isPaused}, imgSrc) => toast(`\
<action content="" <image id="1" src="${imgSrc}" name="Image" />
imageUri="file:///C:/Git/youtube-music/assets/media-icons-black/previous.png" <text id="1">${title}</text>
activationType="protocol" arguments="youtubemusic://pause}" /> <text id="2">${artist}</text>\
<action content="" `, isPaused);
imageUri="file:///C:/Git/youtube-music/assets/media-icons-black/pause.png"
activationType="protocol" arguments="youtubemusic://pause}" />
<action content=""
imageUri="file:///C:/Git/youtube-music/assets/media-icons-black/next.png"
activationType="protocol" arguments="youtubemusic://pause}" />
</actions>
</toast>
`;
const buttons_icons = ` const xml_banner_top_custom = (songInfo, imgSrc) => toast(`\
<actions> <image id="1" src="${imgSrc}" name="Image" />
<action content="Previous"
imageUri="file:///C:/Git/youtube-music/assets/media-icons-black/previous.png"
activationType="protocol" arguments="youtubemusic://pause}" />
<action content="Pause"
imageUri="file:///C:/Git/youtube-music/assets/media-icons-black/pause.png"
activationType="protocol" arguments="youtubemusic://pause}" />
<action content="Next"
imageUri="file:///C:/Git/youtube-music/assets/media-icons-black/next.png"
activationType="protocol" arguments="youtubemusic://pause}" />
</actions>
`;
const xml_logo_icons = `
<toast useButtonStyles="true">
<audio silent="true" />
<visual>
<binding template="ToastGeneric">
<image id="1" src="file:///C:/Git/test/toasters/assets/surtur_rising_cover.jpg" name="Image" placement="appLogoOverride"/>
<text id="1">The Last Stand of Frej</text>
<text id="2">Amon Amarth</text>
</binding>
</visual>
${buttons_icons}
</toast>
`;
const xml_hero = `
<toast useButtonStyles="true">
<audio silent="true" />
<visual>
<binding template="ToastGeneric">
<image id="1" src="file:///C:/Git/test/toasters/assets/surtur_rising_banner.jpg" name="Image" placement="hero"/>
<text id="1">The Last Stand of Frej</text>
<text id="2">Amon Amarth</text>
</binding>
</visual>
${buttons_icons}
</toast>
`;
const xml_banner_bottom = `
<toast useButtonStyles="true">
<audio silent="true" />
<visual>
<binding template="ToastGeneric">
<image id="1" src="file:///C:/Git/test/toasters/assets/surtur_rising_banner.jpg" name="Image" />
<text id="1">The Last Stand of Frej</text>
<text id="2">Amon Amarth</text>
</binding>
</visual>
${buttons_icons}
</toast>
`;
const xml_banner_top_custom = `
<toast useButtonStyles="true">
<audio silent="true" />
<visual>
<binding template="ToastGeneric">
<image id="1" src="file:///C:/Git/test/toasters/assets/surtur_rising_banner.jpg" name="Image" />
<text>ㅤ</text> <text>ㅤ</text>
<group> <group>
<subgroup> <subgroup>
<text hint-style="body">The Last Stand of Frej</text> <text hint-style="body">${songInfo.title}</text>
<text hint-style="captionSubtle">Amon Amarth</text> <text hint-style="captionSubtle">${songInfo.artist}</text>
</subgroup> </subgroup>
<subgroup hint-textStacking="bottom"> ${xml_more_data(songInfo)}
<text hint-style="captionSubtle" hint-wrap="true" hint-align="right">Surtur Rising</text> </group>\
<text hint-style="captionSubtle" hint-wrap="true" hint-align="right">2011</text> `, songInfo.isPaused);
</subgroup>
</group>
</binding>
</visual>
${buttons_icons} const xml_more_data = ({ album, elapsedSeconds, songDuration })=> `\
</toast> <subgroup hint-textStacking="bottom">
${album ?
`<text hint-style="captionSubtle" hint-wrap="true" hint-align="right">${album}</text>` : ''}
<text hint-style="captionSubtle" hint-wrap="true" hint-align="right">${secondsToMinutes(elapsedSeconds)} / ${secondsToMinutes(songDuration)}</text>
</subgroup>\
`; `;
const xml_banner_centered_bottom = ` const xml_banner_centered_bottom = ({title, artist, isPaused}, imgSrc) => toast(`\
<toast useButtonStyles="true">
<audio silent="true" />
<visual>
<binding template="ToastGeneric">
<text>ㅤ</text> <text>ㅤ</text>
<group> <group>
<subgroup hint-weight="1" hint-textStacking="center"> <subgroup hint-weight="1" hint-textStacking="center">
<text hint-align="center" hint-style="subHeader">The Last Stand of Frej</text> <text hint-align="center" hint-style="${titleFontPicker(title)}">${title}</text>
<text hint-align="center" hint-style="SubtitleSubtle">Amon Amarth</text> <text hint-align="center" hint-style="SubtitleSubtle">${artist}</text>
</subgroup> </subgroup>
</group> </group>
<image id="1" src="file:///C:/Git/test/toasters/assets/surtur_rising_banner.jpg" name="Image" hint-removeMargin="true" /> <image id="1" src="${imgSrc}" name="Image" hint-removeMargin="true" />\
</binding> `, isPaused);
</visual>
${buttons_icons} const xml_banner_centered_top = ({title, artist, isPaused}, imgSrc) => toast(`\
</toast> <image id="1" src="${imgSrc}" name="Image" />
`;
const xml_banner_centered_top = `
<toast useButtonStyles="true">
<audio silent="true" />
<visual>
<binding template="ToastGeneric">
<image id="1" src="file:///C:/Git/test/toasters/assets/surtur_rising_banner.jpg" name="Image" />
<text>ㅤ</text> <text>ㅤ</text>
<group> <group>
<subgroup hint-weight="1" hint-textStacking="center"> <subgroup hint-weight="1" hint-textStacking="center">
<text hint-align="center" hint-style="subHeader">The Last Stand of Frej</text> <text hint-align="center" hint-style="${titleFontPicker(title)}">${title}</text>
<text hint-align="center" hint-style="SubtitleSubtle">Amon Amarth</text> <text hint-align="center" hint-style="SubtitleSubtle">${artist}</text>
</subgroup> </subgroup>
</group> </group>\
</binding> `, isPaused);
</visual>
${buttons_icons} const titleFontPicker = (title) => {
</toast> if (title.length <= 13) {
`; return 'Header';
} else if (title.length <= 22) {
return 'Subheader';
} else if (title.length <= 26) {
return 'Title';
} else {
return 'Subtitle';
}
}

39
plugins/notifications/menu.js
View File

@ -1,5 +1,6 @@
const { urgencyLevels, setOption } = require("./utils"); const { urgencyLevels, ToastStyles, snakeToCamel } = require("./utils");
const is = require("electron-is"); const is = require("electron-is");
const config = require("./config");
module.exports = (_win, options) => [ module.exports = (_win, options) => [
...(is.linux() ...(is.linux()
@ -10,7 +11,7 @@ module.exports = (_win, options) => [
label: level.name, label: level.name,
type: "radio", type: "radio",
checked: options.urgency === level.value, checked: options.urgency === level.value,
click: () => setOption(options, "urgency", level.value), click: () => config.set("urgency", level.value),
})), })),
}, },
] ]
@ -21,13 +22,12 @@ module.exports = (_win, options) => [
label: "Interactive Notifications", label: "Interactive Notifications",
type: "checkbox", type: "checkbox",
checked: options.interactive, checked: options.interactive,
click: (item) => setOption(options, "interactive", item.checked), // doesn't update until restart
click: (item) => config.setAndMaybeRestart("interactive", item.checked),
}, },
{ {
label: "Smaller Interactive Notifications", label: "Toast Style",
type: "checkbox", submenu: getToastStyleMenuItems(options)
checked: options.smallInteractive,
click: (item) => setOption(options, "smallInteractive", item.checked),
}, },
] ]
: []), : []),
@ -35,6 +35,29 @@ module.exports = (_win, options) => [
label: "Show notification on unpause", label: "Show notification on unpause",
type: "checkbox", type: "checkbox",
checked: options.unpauseNotification, checked: options.unpauseNotification,
click: (item) => setOption(options, "unpauseNotification", item.checked), click: (item) => config.set("unpauseNotification", item.checked),
}, },
]; ];
function getToastStyleMenuItems(options) {
const arr = new Array(Object.keys(ToastStyles).length + 1);
arr[0] = {
label: "Hide Button Text",
type: "checkbox",
checked: options.hideButtonText,
click: (item) => config.set("hideButtonText", item.checked),
}
// ToastStyles index starts from 1
for (const [name, index] of Object.entries(ToastStyles)) {
arr[index] = {
label: snakeToCamel(name),
type: "radio",
checked: options.style === index,
click: () => config.set("style", index),
};
}
return arr;
}

90
plugins/notifications/utils.js
View File

@ -1,11 +1,22 @@
const { setMenuOptions } = require("../../config/plugins");
const path = require("path"); const path = require("path");
const { app } = require("electron"); const { app } = require("electron");
const fs = require("fs"); const fs = require("fs");
const config = require("./config");
const icon = "assets/youtube-music.png"; const icon = "assets/youtube-music.png";
const userData = app.getPath("userData"); const userData = app.getPath("userData");
const tempIcon = path.join(userData, "tempIcon.png"); const tempIcon = path.join(userData, "tempIcon.png");
const tempBanner = path.join(userData, "tempBanner.png");
module.exports.ToastStyles = {
logo: 1,
banner_centered_top: 2,
hero: 3,
banner_top_custom: 4,
banner_centered_bottom: 5,
banner_bottom: 6,
legacy: 7
}
module.exports.icons = { module.exports.icons = {
play: "\u{1405}", // ᐅ play: "\u{1405}", // ᐅ
@ -14,37 +25,47 @@ module.exports.icons = {
previous: "\u{1438}" // ᐸ previous: "\u{1438}" // ᐸ
} }
module.exports.setOption = (options, option, value) => {
options[option] = value;
setMenuOptions("notifications", options)
}
module.exports.urgencyLevels = [ module.exports.urgencyLevels = [
{ name: "Low", value: "low" }, { name: "Low", value: "low" },
{ name: "Normal", value: "normal" }, { name: "Normal", value: "normal" },
{ name: "High", value: "critical" }, { name: "High", value: "critical" },
]; ];
module.exports.notificationImage = (songInfo, saveIcon = false) => { module.exports.notificationImage = (songInfo) => {
//return local path to temp icon if (!songInfo.image) return icon;
if (saveIcon && !!songInfo.image) { if (!config.get("interactive")) return nativeImageToLogo(songInfo.image);
try {
fs.writeFileSync(tempIcon, switch(config.get("style")) {
centerNativeImage(songInfo.image) case module.exports.ToastStyles.logo:
.toPNG() case module.exports.ToastStyles.legacy:
); return this.saveImage(nativeImageToLogo(songInfo.image), tempIcon);
} catch (err) { default:
console.log(`Error writing song icon to disk:\n${err.toString()}`) return this.saveImage(songInfo.image, tempBanner);
return icon; };
}
return tempIcon;
}
//else: return image
return songInfo.image
? centerNativeImage(songInfo.image)
: icon
}; };
module.exports.saveImage = (img, save_path) => {
try {
fs.writeFileSync(save_path, img.toPNG());
} catch (err) {
console.log(`Error writing song icon to disk:\n${err.toString()}`)
return icon;
}
return save_path;
}
function nativeImageToLogo(nativeImage) {
const tempImage = nativeImage.resize({ height: 256 });
const margin = Math.max((tempImage.getSize().width - 256), 0);
return tempImage.crop({
x: Math.round(margin / 2),
y: 0,
width: 256, height: 256
})
}
module.exports.save_temp_icons = () => { module.exports.save_temp_icons = () => {
for (const kind of Object.keys(module.exports.icons)) { for (const kind of Object.keys(module.exports.icons)) {
const destinationPath = path.join(userData, 'icons', `${kind}.png`); const destinationPath = path.join(userData, 'icons', `${kind}.png`);
@ -55,13 +76,16 @@ module.exports.save_temp_icons = () => {
} }
}; };
function centerNativeImage(nativeImage) { module.exports.snakeToCamel = (str) => {
const tempImage = nativeImage.resize({ height: 256 }); return str.replace(/([-_][a-z]|^[a-z])/g, (group) =>
const margin = Math.max((tempImage.getSize().width - 256), 0); group.toUpperCase()
.replace('-', ' ')
return tempImage.crop({ .replace('_', ' ')
x: Math.round(margin / 2), );
y: 0, }
width: 256, height: 256
}) module.exports.secondsToMinutes = (seconds) => {
const minutes = Math.floor(seconds / 60);
const secondsLeft = seconds % 60;
return `${minutes}:${secondsLeft < 10 ? '0' : ''}${secondsLeft}`;
} }

8
plugins/shortcuts/mpris.js
View File

@ -18,6 +18,7 @@ function setupMPRIS() {
return player; return player;
} }
/** @param {Electron.BrowserWindow} win */
function registerMPRIS(win) { function registerMPRIS(win) {
const songControls = getSongControls(win); const songControls = getSongControls(win);
const { playPause, next, previous, volumeMinus10, volumePlus10 } = songControls; const { playPause, next, previous, volumeMinus10, volumePlus10 } = songControls;
@ -30,6 +31,13 @@ function registerMPRIS(win) {
const player = setupMPRIS(); const player = setupMPRIS();
ipcMain.on("apiLoaded", () => {
win.webContents.send("setupSeekedListener", "mpris");
win.webContents.send("setupTimeChangedListener", "mpris");
win.webContents.send("setupRepeatChangedListener", "mpris");
win.webContents.send("setupVolumeChangedListener", "mpris");
});
ipcMain.on('seeked', (_, t) => player.seeked(secToMicro(t))); ipcMain.on('seeked', (_, t) => player.seeked(secToMicro(t)));
let currentSeconds = 0; let currentSeconds = 0;

2
plugins/tuna-obs/back.js
View File

@ -27,7 +27,9 @@ const post = async (data) => {
fetch(url, { method: 'POST', headers, body: JSON.stringify({ data }) }).catch(e => console.log(`Error: '${e.code || e.errno}' - when trying to access obs-tuna webserver at port ${port}`)); fetch(url, { method: 'POST', headers, body: JSON.stringify({ data }) }).catch(e => console.log(`Error: '${e.code || e.errno}' - when trying to access obs-tuna webserver at port ${port}`));
} }
/** @param {Electron.BrowserWindow} win */
module.exports = async (win) => { module.exports = async (win) => {
ipcMain.on('apiLoaded', () => win.webContents.send('setupTimeChangedListener'));
ipcMain.on('timeChanged', async (_, t) => { ipcMain.on('timeChanged', async (_, t) => {
if (!data.title) return; if (!data.title) return;
data.progress = secToMilisec(t); data.progress = secToMilisec(t);

2
preload.js
View File

@ -95,6 +95,8 @@ function listenForApiLoad() {
function onApiLoaded() { function onApiLoaded() {
document.dispatchEvent(new CustomEvent('apiLoaded', { detail: api })); document.dispatchEvent(new CustomEvent('apiLoaded', { detail: api }));
//setImmediate()
ipcRenderer.send('apiLoaded');
// Remove upgrade button // Remove upgrade button
if (config.get("options.removeUpgradeButton")) { if (config.get("options.removeUpgradeButton")) {

5
providers/song-controls-front.js
View File

@ -1,13 +1,8 @@
const { ipcRenderer } = require("electron"); const { ipcRenderer } = require("electron");
const config = require("../config");
const is = require("electron-is");
module.exports.setupSongControls = () => { module.exports.setupSongControls = () => {
document.addEventListener('apiLoaded', e => { document.addEventListener('apiLoaded', e => {
ipcRenderer.on("seekTo", (_, t) => e.detail.seekTo(t)); ipcRenderer.on("seekTo", (_, t) => e.detail.seekTo(t));
ipcRenderer.on("seekBy", (_, t) => e.detail.seekBy(t)); ipcRenderer.on("seekBy", (_, t) => e.detail.seekBy(t));
if (is.linux() && config.plugins.isEnabled('shortcuts')) { // MPRIS Enabled
document.querySelector('video').addEventListener('seeked', v => ipcRenderer.send('seeked', v.target.currentTime));
}
}, { once: true, passive: true }) }, { once: true, passive: true })
}; };

90
providers/song-info-front.js
View File

@ -1,9 +1,6 @@
const { ipcRenderer } = require("electron"); const { ipcRenderer } = require("electron");
const is = require('electron-is');
const { getImage } = require("./song-info"); const { getImage } = require("./song-info");
const config = require("../config");
global.songInfo = {}; global.songInfo = {};
const $ = s => document.querySelector(s); const $ = s => document.querySelector(s);
@ -17,14 +14,63 @@ ipcRenderer.on("update-song-info", async (_, extractedSongInfo) => {
// used because 'loadeddata' or 'loadedmetadata' weren't firing on song start for some users (https://github.com/th-ch/youtube-music/issues/473) // used because 'loadeddata' or 'loadedmetadata' weren't firing on song start for some users (https://github.com/th-ch/youtube-music/issues/473)
const srcChangedEvent = new CustomEvent('srcChanged'); const srcChangedEvent = new CustomEvent('srcChanged');
const singleton = (fn) => {
let called = false;
return (...args) => {
if (called) return;
called = true;
return fn(...args);
}
}
module.exports.setupSeekedListener = singleton(() => {
document.querySelector('video')?.addEventListener('seeked', v => ipcRenderer.send('seeked', v.target.currentTime));
});
module.exports.setupTimeChangedListener = singleton(() => {
const progressObserver = new MutationObserver(mutations => {
ipcRenderer.send('timeChanged', mutations[0].target.value);
global.songInfo.elapsedSeconds = mutations[0].target.value;
});
progressObserver.observe($('#progress-bar'), { attributeFilter: ["value"] });
});
module.exports.setupRepeatChangedListener = singleton(() => {
const repeatObserver = new MutationObserver(mutations => {
ipcRenderer.send('repeatChanged', mutations[0].target.title);
});
repeatObserver.observe($('#right-controls .repeat'), { attributeFilter: ["title"] });
// Emit the initial value as well; as it's persistent between launches.
ipcRenderer.send('repeatChanged', $('#right-controls .repeat').title);
});
module.exports.setupVolumeChangedListener = singleton((api) => {
$('video').addEventListener('volumechange', (_) => {
ipcRenderer.send('volumeChanged', api.getVolume());
});
// Emit the initial value as well; as it's persistent between launches.
ipcRenderer.send('volumeChanged', api.getVolume());
});
module.exports = () => { module.exports = () => {
document.addEventListener('apiLoaded', apiEvent => { document.addEventListener('apiLoaded', apiEvent => {
if (config.plugins.isEnabled('tuna-obs') || ipcRenderer.on("setupTimeChangedListener", async () => {
(is.linux() && config.plugins.isEnabled('shortcuts'))) { this.setupTimeChangedListener();
setupTimeChangeListener(); });
setupRepeatChangeListener();
setupVolumeChangeListener(apiEvent.detail); ipcRenderer.on("setupRepeatChangedListener", async () => {
} this.setupRepeatChangedListener();
});
ipcRenderer.on("setupVolumeChangedListener", async () => {
this.setupVolumeChangedListener(apiEvent.detail);
});
ipcRenderer.on("setupSeekedListener", async () => {
this.setupSeekedListener();
});
const video = $('video'); const video = $('video');
// name = "dataloaded" and abit later "dataupdated" // name = "dataloaded" and abit later "dataupdated"
apiEvent.detail.addEventListener('videodatachange', (name, _dataEvent) => { apiEvent.detail.addEventListener('videodatachange', (name, _dataEvent) => {
@ -57,29 +103,3 @@ module.exports = () => {
} }
}, { once: true, passive: true }); }, { once: true, passive: true });
}; };
function setupTimeChangeListener() {
const progressObserver = new MutationObserver(mutations => {
ipcRenderer.send('timeChanged', mutations[0].target.value);
global.songInfo.elapsedSeconds = mutations[0].target.value;
});
progressObserver.observe($('#progress-bar'), { attributeFilter: ["value"] })
}
function setupRepeatChangeListener() {
const repeatObserver = new MutationObserver(mutations => {
ipcRenderer.send('repeatChanged', mutations[0].target.title);
});
repeatObserver.observe($('#right-controls .repeat'), { attributeFilter: ["title"] });
// Emit the initial value as well; as it's persistent between launches.
ipcRenderer.send('repeatChanged', $('#right-controls .repeat').title);
}
function setupVolumeChangeListener(api) {
$('video').addEventListener('volumechange', (_) => {
ipcRenderer.send('volumeChanged', api.getVolume());
});
// Emit the initial value as well; as it's persistent between launches.
ipcRenderer.send('volumeChanged', api.getVolume());
}

3
providers/song-info.js
View File

@ -61,7 +61,8 @@ const handleData = async (responseText, win) => {
songInfo.album = data?.videoDetails?.album; // Will be undefined if video exist songInfo.album = data?.videoDetails?.album; // Will be undefined if video exist
const oldUrl = songInfo.imageSrc; const oldUrl = songInfo.imageSrc;
songInfo.imageSrc = videoDetails.thumbnail?.thumbnails?.pop()?.url.split("?")[0]; const thumbnails = videoDetails.thumbnail?.thumbnails;
songInfo.imageSrc = thumbnails[thumbnails.length - 1]?.url.split("?")[0];
if (oldUrl !== songInfo.imageSrc) { if (oldUrl !== songInfo.imageSrc) {
songInfo.image = await getImage(songInfo.imageSrc); songInfo.image = await getImage(songInfo.imageSrc);
} }