// ==UserScript==
// @name VK Audio Integration
// @name:ru Аудио интеграция VK
// @description Integrates VK.com audio player with MediaSession API
// @description:ru Интегрирует аудиоплеер ВКонтакте с API MediaSession
// @author Sasha Sorokin
// @version 1.7.0
// @license MIT https://raw.githubusercontent.com/Sasha-Sorokin/vkaintegra/master/LICENSE
// @namespace https://github.com/Sasha-Sorokin/vkaintegra
// @homepage https://github.com/Sasha-Sorokin/vkaintegra
// @supportURL https://github.com/Sasha-Sorokin/vkaintegra/issues
// @grant GM.notification
// @grant GM_notification
// @grant GM.setValue
// @grant GM_setValue
// @grant GM.getValue
// @grant GM_getValue
// @include https://vk.com/*
// @run-at document-end
// @noframes
// ==/UserScript==
(async () => {
"use strict";
console.log("[VKAINTEGRA] Initializing...");
const GENERAL_HANDLERS = ["play", "pause", "previoustrack", "nexttrack", "seek"];
// =========================
// === HELPFUL FUNCTIONS ===
// =========================
function onPlayerEvent(eventName, callback) {
const callbackName = callback.name || "<anonymous>";
const subscriber = {
et: eventName,
cb: function safeCallback(...args) {
try {
callback(...args);
} catch (err) {
console.error(`[VKAINTEGRA] (!) Player callback ${callbackName} for event ${eventName} has failed:`, err);
}
}
};
const subscriberId = getAudioPlayer().subscribers.push(subscriber);
console.log(`[VKAINTEGRA] Bound callback ${callbackName} for "${eventName}", subscriber ID #${subscriberId}`);
}
function htmlDecode(input) {
const doc = new DOMParser().parseFromString(input, "text/html");
return doc.documentElement.textContent;
}
// 14 artworks
function extractArtworks(audio) {
const artworks = [...new Set(audio[14].split(","))];
for (let i = 0, l = artworks.length; i < l; i++) {
artworks[i] = { src: artworks[i], sizes: "80x80" };
}
return artworks;
}
// 3 title
// 4 artist
// 16 remix
function extractVKMetadata(audio) {
let title = htmlDecode(audio[3]);
const remixType = audio[16];
if (remixType !== "") title += ` (${htmlDecode(remixType)})`;
return {
artist: htmlDecode(audio[4]),
title,
artwork: extractArtworks(audio)
};
}
function extractTimes(audio) {
// 15 durations
return audio[15];
}
const USING_RU_LOCALE = (function isUsingRuLocale() {
return [0, 1, 100, 114, 777].includes(langConfig.id);
})();
function insertBefore(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode);
}
// from underscore.js
function debounce(func, wait, immediate) {
let timeout;
return function() {
const context = this, args = arguments;
const later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
const callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
// ====================
// ===   SETTINGS   ===
// ====================
// BUG-5: GM can be different and we must be catchy
const settings = {
setValue: (() => {
try {
return GM && GM.setValue;
} catch {
return GM_setValue;
}
})(),
getValue: (() => {
try {
return GM && GM.getValue;
} catch {
return GM_getValue;
}
})()
};
/**
* Are notifications enabled
*/
let notificationsEnabled;
/**
* Are notifications disposed by script
* @default null Notifications are not disposed
*/
let notificationsDispose;
/**
* Does single press on Previous key seeks to beginning?
*/
let previousSeeking;
/**
* Should be "next track" button be actived on latest track in playlist?
*/
let lastNext;
// Load all the settings
await (async () => {
notificationsEnabled = await settings.getValue("notificationsEnabled", false);
notificationsDispose = await settings.getValue("notificationsDispose", "3s");
previousSeeking = await settings.getValue("previousSeeking", false);
lastNext = await settings.getValue("lastNext", true);
})();
function saveSettings() {
settings.setValue("notificationsEnabled", notificationsEnabled);
settings.setValue("notificationsDispose", notificationsDispose);
settings.setValue("previousSeeking", previousSeeking);
settings.setValue("lastNext", lastNext);
}
// =========================
// === SETTINGS CONTROLS ===
// =========================
{
// #region Elements functions
function appendTo(elem, children) {
for (let i = 0, l = children.length; i < l; i++) {
const child = children[i];
if (typeof child === "function") child(elem);
else elem.appendChild(child);
}
}
function inlineMenuValueText(values, value) {
for (let i = 0, l = values.length; i < l; i++) {
const item = values[i];
if (item[0] === value) return item[1];
}
}
function createInlineMenu(id, currentValue, values, onSelect) {
const div = document.createElement("div");
div.id = id;
div.classList.add(id);
const selectedValue = document.createElement("div");
selectedValue.classList.add("idd_selected_value");
selectedValue.setAttribute("tabIndex", 0);
selectedValue.setAttribute("role", "link");
selectedValue.innerText = inlineMenuValueText(values, currentValue);
div.appendChild(selectedValue);
const input = document.createElement("input");
input.id = `${id}_input`;
input.setAttribute("type", "hidden");
input.setAttribute("name", id);
input.value = currentValue;
div.appendChild(input);
return function mount(parent) {
parent.appendChild(div);
const dropdown = new InlineDropdown(div, {
items: values,
selected: currentValue,
onSelect
});
mount.component = dropdown;
}
}
function createCheckbox(id, text, isChecked, onChange) {
const checkbox = document.createElement("input");
checkbox.classList.add("blind_label");
checkbox.setAttribute("type", "checkbox");
checkbox.checked = isChecked;
checkbox.id = id;
checkbox.addEventListener("change", onChange);
const label = document.createElement("label");
label.setAttribute("for", id);
label.innerText = text;
return [checkbox, label];
}
function createSettingsNarrowRow(children) {
const div = document.createElement("div");
div.classList.add("settings_narrow_row");
appendTo(div, children);
return div;
}
function createSettingsLine(labelText, id, children) {
const div = document.createElement("div");
div.id = id;
div.classList.add("settings_line");
const label = document.createElement("div");
label.classList.add("settings_label");
label.innerText = labelText;
div.appendChild(label);
const inner = document.createElement("div");
inner.classList.add("settings_labeled_text");
appendTo(inner, children);
div.appendChild(inner);
return div;
}
function createHint(text) {
const hint = document.createElement("span");
hint.classList.add("hint_icon");
hint.addEventListener("mouseover", function showHint() {
showTooltip(this, {
text,
dir: "auto",
shift: [22, 10],
slide: 15,
className: "settings_tt"
})
});
return hint;
}
function cid(id) {
return `vkaintegra_${id}`;
}
const initNotifyValues = [
// [value, [russian, english]]
["auto", ["автоматически", "automatically"]],
["3s", ["спустя 3 секунды", "3 seconds after"]],
["5s", ["спустя 5 секунд", "5 seconds after"]],
];
function getNotifyDisposeValues() {
const values = [];
for (let i = 0, l = initNotifyValues.length; i < l; i++) {
const item = initNotifyValues[i];
values.push([item[0], item[1][USING_RU_LOCALE ? 0 : 1]]);
}
return values;
}
function disableElement(element) {
element.style.opacity = "0.5";
element.style["pointer-events"] = "none";
}
function enableElement(element) {
element.style.opacity = "";
element.style["pointer-events"] = "";
}
function bindTooltip(elem, text) {
elem.addEventListener("mouseover", function showLabelTooltip() {
showTooltip(this, {
shift: [-20, 8, 8],
dir: "auto",
text: text,
slide: 15,
className: 'settings_tt',
hasover: 1
});
});
}
// #endregion
// ================
// ===  EVENTS  ===
// ================
async function saveSettingsInteractive() {
saveSettings();
unsafeWindow.uiPageBlock && uiPageBlock.showSaved("vkaintegra");
}
function previousSeekingChanged(e) {
previousSeeking = e.target.checked;
saveSettingsInteractive();
}
function lastNextChanged(e) {
lastNext = e.target.value;
try {
// We may need to refresh the controls to apply changes
const player = getAudioPlayer();
const { _currentAudio: audio } = player;
if (audio != null) {
console.log("[VKAINTEGRA] Refreshing controls due to lastNext change");
onStop();
onStart();
onTrackChange(player._currentAudio, false);
if (!player._isPlaying) onPause();
}
} catch (err) {
console.error("[VKAINTEGRA] Failed to refresh controls", err);
}
saveSettingsInteractive();
}
let notificationsChangeLock = false;
async function notificationsChanged(e) {
if (notificationsChangeLock) return true;
let shouldSave = true;
if (e.target.checked) {
if (Notification.permission !== "granted") {
// locking element
e.target.disabled = true;
disableElement(e.target.parentElement);
notificationsChangeLock = true;
const status = await Notification.requestPermission();
if (status !== "granted") {
showDoneBox(
USING_RU_LOCALE
? "Кажется вы отклонили запрос, либо они блокируются браузером."
: "It seems you have denied request, or they're disabled in the browser."
);
e.target.checked = false;
shouldSave = false;
}
e.target.disabled = false;
enableElement(e.target.parentElement);
notificationsChangeLock = false;
}
notificationsEnabled = Notification.permission === "granted";
} else {
notificationsEnabled = false;
}
if (notificationsEnabled) {
enableElement(settingsPanel.notifyDisposeSelect.component.getElement().parentNode);
} else {
disableElement(settingsPanel.notifyDisposeSelect.component.getElement().parentNode);
}
if (shouldSave) saveSettingsInteractive();
}
function notifyDisposeSelected(val) {
notificationsDispose = val;
saveSettingsInteractive();
}
// =============================
// === SETTINGS PANEL ITSELF ===
// =============================
let settingsPanel = Object.create(null);
async function getSettingsLine() {
// #region Panel initialization
if (!settingsPanel.previousSeekingCheckbox) {
const [,label] = settingsPanel.previousSeekingCheckbox = createCheckbox(
cid("previous_seeking"),
USING_RU_LOCALE
? "«Прошлый трек» перематывает в начало"
: "“Previous track” seeking to beginning",
previousSeeking,
previousSeekingChanged
);
const tooltipText = USING_RU_LOCALE
? "Если настройка включена, то, при нажатии кнопки или клавиши «Прошлый трек», вместо перехода будет осуществляться перемотка к началу трека.<br><br>Переход всегда будет осуществляться, если трек играет менее 2 секунд."
: "With this setting on, clicking button or pressing “Previous track” will seek to beginning of the current track instead of switching.<br><br>Switching will always happen if track is playing for less than 2 seconds.";
bindTooltip(label, tooltipText);
}
if (!settingsPanel.lastNextCheckbox) {
const [,label] = settingsPanel.lastNextCheckbox = createCheckbox(
cid("last_next"),
USING_RU_LOCALE
? "Не отключать «Следующий трек» в конце плейлиста"
: "Do not disable “Next track” at last song in playlist",
lastNext,
lastNextChanged
);
const tooltipText = USING_RU_LOCALE
? "Включение этой настройки убирает отключение кнопки «Следующий трек» при проигрывании последнего трека в плейлисте. Нажатие этой кнопки остановит воспроизведение и переключится на первый трек в плейлисте."
: "Enabling this option avoids disabling of “Next track” button when playing last track in playlist. Pressing this button stops playing and switches to first track in playlist."
bindTooltip(label, tooltipText);
}
if (!settingsPanel.notificationsCheckbox) {
settingsPanel.notificationsCheckbox = createCheckbox(
cid("notifications"),
USING_RU_LOCALE ? "Включить уведомления" : "Enable notifications",
notificationsEnabled,
notificationsChanged
);
}
if (!settingsPanel.notifyDisposeSelect) {
settingsPanel.notifyDisposeSelect = createInlineMenu(
cid("notifications_dispose"),
notificationsDispose,
getNotifyDisposeValues(),
notifyDisposeSelected
);
}
if (!settingsPanel.panel) {
const CLOSE_NOTIFS_TEXT = document.createTextNode(
USING_RU_LOCALE
? "Убирать уведомления "
: "Close notifications "
);
const DISPOSE_HINT = createHint(
USING_RU_LOCALE
? "Эта настройка позволяет установить, как быстро скрипт должен убирать уведомления.<br><br>В <b>автоматическом</b> режиме уведомления убираются браузером или системой.<br><br>В <b>других</b> режимах уведомления будут убраны спустя выбранный интервал времени."
: "This setting allows to set how fast script must close notifications.<br><br>In <b>automatic</b> mode notifications will be closed by browser or system.<br><br>In <b>other</b> modes notifications will be closed after selected interval."
);
settingsPanel.panel = createSettingsLine("VK Audio Integration", "vkaintegra", [
createSettingsNarrowRow(settingsPanel.previousSeekingCheckbox),
createSettingsNarrowRow(settingsPanel.lastNextCheckbox),
createSettingsNarrowRow(settingsPanel.notificationsCheckbox),
createSettingsNarrowRow([CLOSE_NOTIFS_TEXT, settingsPanel.notifyDisposeSelect, DISPOSE_HINT])
]);
if (!notificationsEnabled) {
disableElement(settingsPanel.notifyDisposeSelect.component.getElement().parentNode);
}
}
// #endregion
settingsPanel.previousSeekingCheckbox[0].toggled = previousSeeking;
settingsPanel.notificationsCheckbox[0].toggled = notificationsEnabled;
settingsPanel.notifyDisposeSelect.component.select(notificationsDispose, true);
return settingsPanel.panel;
}
async function initSettings() {
const pwdChange = document.querySelector("div.settings_line#chgpass");
insertBefore(pwdChange, await getSettingsLine());
}
// =========================
// === SETTINGS WRAPPING ===
// =========================
// #region Settings Wrapping
function wrapSettings(settings) {
const origSettingsInit = settings.init.bind(Settings);
settings.init = function wrappedInitSettings() {
origSettingsInit();
initSettings();
};
}
if (cur.module === "settings") {
wrapSettings(Settings);
initSettings();
} else {
let origSettings;
Object.defineProperty(unsafeWindow, "Settings", {
get() {
return origSettings;
},
set(value) {
origSettings = value;
wrapSettings(value);
},
});
}
// #endregion
}
// =====================
// === NOTIFICATIONS ===
// =====================
if (notificationsEnabled && Notification.permission !== "granted") {
const SETTINGS_LINK = `<a href=\"/settings\" onclick=\"nav.go(this, event, {noback: !0}))\">${USING_RU_LOCALE ? "на странице настроек" : "on settings page"}</a>`
showDoneBox(
USING_RU_LOCALE
? `С момента прошлой активации уведомлений от VK Audio Integration разрешения на отправку этих самых уведомлений больше нет. Включить их обратно можно ${SETTINGS_LINK}.`
: `Since last activation of notifications from VK Audio Integration, there is no more permission to send those notifications. You can re-enable them ${SETTINGS_LINK}.`
);
notificationsEnabled = false;
saveSettings();
}
const UNKNOWN_AUDIO_ICON = {
SMALL: "https://i.imgur.com/tTGovqM.png",
LARGE: "https://i.imgur.com/EbP2xGC.png"
};
let currentNotificationTimer = undefined;
const DISPOSE_OPTIONS = {
"3s": 3000,
"5s": 5000
};
function showNotification(trackMetadata, actualityCallback, unknownAlbum) {
if (!notificationsEnabled) return;
let icon = trackMetadata.artwork[0].src;
if (icon === UNKNOWN_AUDIO_ICON.LARGE) {
icon = UNKNOWN_AUDIO_ICON.SMALL;
}
const albumLine = unknownAlbum
? "VK"
: `${trackMetadata.album} · VK`;
const notification = new Notification(trackMetadata.title, {
body: `${trackMetadata.artist}\n${albumLine}`,
silent: true,
icon,
tag: "vk-nowplaying"
});
if (!actualityCallback()) {
notification.close();
} else if (notificationsDispose !== "auto") {
if (currentNotificationTimer) clearTimeout(currentNotificationTimer);
setTimeout(() => {
notification.close();
currentNotificationTimer = null;
}, DISPOSE_OPTIONS[notificationsDispose]);
}
}
const notificationDebounce = debounce(showNotification, 500);
// =====================
// === PLAYER EVENTS ===
// =====================
const setPositionState = navigator.mediaSession.setPositionState
? navigator.mediaSession.setPositionState
: (() => {
console.log("[VKAINTEGRA] Browser support: setPositionState is not implemeted.");
return undefined;
})();
let isStarted = false;
function onStart() {
isStarted = true;
bindGeneralHandlers();
navigator.mediaSession.playbackState = "playing";
}
onPlayerEvent("start", onStart);
function previousTrack(player) {
// FEAT-1: Rewind to start instead of playing previous
if (previousSeeking && player.stats.currentPosition > 2) {
player.seekToTime(0);
} else {
player.playPrev();
}
}
let isLatestTrack = false;
function updateControls(player, playlist, track) {
let noPrevious;
if (playlist) {
const audioPosition = playlist.indexOfAudio(track);
const playlistLength = playlist.getAudiosCount() - 1;
noPrevious = audioPosition === 0;
isLatestTrack = audioPosition === playlistLength;
} else {
noPrevious = true;
isLatestTrack = true;
}
if (!lastNext) {
if (isLatestTrack) resetHandlers("nexttrack");
else bindHandler("nexttrack", () => player.playNext());
}
if (noPrevious) resetHandlers("previoustrack");
else bindHandler("previoustrack", () => previousTrack(player));
}
function onPlaylistChange() {
// BUG-2: Shuffle does not fire any events
const playlist = getAudioPlayer()._currentPlaylist;
if (playlist == null) return;
const originalShuffle = playlist.shuffle.bind(playlist);
playlist.shuffle = (...args) => {
console.log("[VKAINTEGRA] Caught a shuffle attempt!");
const player = getAudioPlayer();
originalShuffle(...args);
updateControls(player, player._currentPlaylist, player._currentAudio);
};
}
onPlayerEvent("plchange", onPlaylistChange);
function onTrackChange(track, notification = true) {
// BUG-7: Sometimes VK tells us it has no current track
if (!track) return onStop();
const trackMetadata = extractVKMetadata(track);
const player = getAudioPlayer();
// Use current playlist name as the album title
let playlist = player._currentPlaylist;
// BUG-1: Sometimes we going to deal with referenced playlists
if (playlist._ref) {
playlist = playlist._ref;
// But it's good to us to take a bigger cover image
// BUG-3: If that's an official album, of course
if (playlist._isOfficial && playlist._coverUrl !== "") {
trackMetadata.artwork = [{ src: playlist._coverUrl, sizes: "300x300" }];
}
}
// BUG-9: playlist titles can be empty for some reason
const playlistTitle = htmlDecode(playlist._title);
let unknownPlaylist = false;
if (playlistTitle === "") {
playlistTitle = USING_RU_LOCALE
? "(неизвестно)"
: "(unknown)";
unknownPlaylist = true;
}
trackMetadata.album = playlistTitle;
// BUG-10: chrome sets url of the current page if artwork == "",
// so let's use unknown icon as we did with notifications for
// every empty artwork in the array
{
const artworks = trackMetadata.artwork;
for (let i = 0, l = artworks.length; i < l; i++) {
const artwork = artworks[i];
if (artwork.src === "") {
artwork.src = UNKNOWN_AUDIO_ICON.LARGE;
artwork.sizes = "450x450";
};
}
}
// Prepare the media session
navigator.mediaSession.metadata = new MediaMetadata(trackMetadata);
if (setPositionState != null) {
setPositionState({
duration: extractTimes(track).duration
});
}
navigator.mediaSession.playbackState = "playing";
updateControls(player, playlist, track);
if (isStarted && notification) {
notificationDebounce(
trackMetadata,
() => player._currentAudio[0] === track[0],
unknownPlaylist
);
}
}
onPlayerEvent("curr", onTrackChange);
if (setPositionState != null) {
onPlayerEvent("progress", function onProgress(_progress, duration, position) {
setPositionState({ duration, playbackRate: 1, position });
});
onPlayerEvent("seek", function onSeek(track) {
setPositionState({
duration: extractTimes(track).duration,
playbackRate: 1,
position: getAudioPlayer()._listenedTime
});
});
}
function onPause() {
navigator.mediaSession.playbackState = "paused";
}
onPlayerEvent("pause", onPause);
function onStop() {
console.log("[VKAINTEGRA] Player stopped. Reset state and unbind handlers");
navigator.mediaSession.playbackState = "none";
navigator.mediaSession.metadata = undefined;
resetHandlers(GENERAL_HANDLERS);
isStarted = false;
}
onPlayerEvent("stop", onStop);
// ===================
// === POST EVENTS ===
// ===================
onPlaylistChange();
// ==========================
// === ALL ABOUT HANDLERS ===
// ==========================
let generalHandlersBound = false;
const handlerStates = Object.create(null);
// BUG-4: Chrome does not suppert "seek" and throws error
function setActionHandlerSafe(name, handler) {
try {
navigator.mediaSession.setActionHandler(name, handler);
} catch {
console.warn(`[VKAINTEGRA] Failed to setActionHandler "${name}", it may not supported in this browser`);
}
}
function bindHandler(name, handler) {
if (handlerStates[name]) return;
setActionHandlerSafe(name, handler);
handlerStates[name] = true;
}
function resetHandlers(names) {
if (names == null) throw new Error("Cannot reset no handlers");
if (!Array.isArray(names)) names = [names];
for (let i = 0, l = names.length; i < l; i++) {
const name = names[i];
if (!handlerStates[name]) continue;
setActionHandlerSafe(name, null);
handlerStates[name] = undefined;
}
if (names === GENERAL_HANDLERS) generalHandlersBound = false;
}
function bindGeneralHandlers() {
if (generalHandlersBound) return;
const player = getAudioPlayer();
bindHandler("play", () => player.play());
bindHandler("pause", () => player.pause());
bindHandler("seek", ({ seekTime }) => player.seekToTime(seekTime));
if (lastNext) {
bindHandler("nexttrack", () => {
// BUG-8: playNext() after latest track not firing stop or pause
let stopAfter = false;
if (isLatestTrack && !ap.isRepeatAll()) stopAfter = true;
player.playNext();
if (stopAfter) player.stop();
});
}
generalHandlersBound = true;
}
})();