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

feat(music-together): Add new plugin Music Together (#1562)

Browse Source 
* feat(music-together): test `peerjs`

* feat(music-together): replace `prompt` to `custom-electron-prompt`

* fix(music-together): fix

* test fix

* wow

* test

* feat(music-together): improve `onStart`

* fix: adblocker

* fix(adblock): fix crash with `peerjs`

* feat(music-together): add host UI

* feat(music-together): implement addSong, removeSong, syncQueue

* feat(music-together): inject panel

* feat(music-together): redesign music together panel

* feat(music-together): sync queue, profile

* feat(music-together): sync progress, song, state

* fix(music-together): fix some bug

* fix(music-together): fix sync queue

* feat(music-together): support i18n

* feat(music-together): improve sync queue

* feat(music-together): add profile in music item

* refactor(music-together): refactor structure

* feat(music-together): add permission

* fix(music-together): fix queue sync bug

* fix(music-together): fix some bugs

* fix(music-together): fix permission not working on guest mode

* fix(music-together): fix queue sync relate bugs

* fix(music-together): fix automix items not append using music together

* fix(music-together): fix

* feat(music-together): improve video injection

* fix(music-together): fix injection code

* fix(music-together): fix broadcast guest

* feat(music-together): add more permission

* fix(music-together): fix injector

* fix(music-together): fix guest add song logic

* feat(music-together): add popup close listener

* fix(music-together): fix connection issue

* fix(music-together): fix connection issue 2

* feat(music-together): reserve playlist

* fix(music-together): exclude automix songs

* fix(music-together): fix playlist index sync bug

* fix(music-together): fix connection failed error and sync index

* fix(music-together): fix host set index bug

* fix: apply fix from eslint

* feat(util): add `ImageElementFromSrc`

* chore(util): update jsdoc

* feat(music-together): add owner name

* chore(music-together): add translation

* feat(music-together): add progress sync

* chore(music-together): remove `console.log`

---------

Co-authored-by: JellyBrick <shlee1503@naver.com>
This commit is contained in:
Su-Yong
2023-12-31 13:52:15 +09:00
committed by GitHub
parent 5f9b522307
commit ee0c512529
34 changed files with 2383 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/plugins/music-together/queue/client.ts Normal file
View File

@ -0,0 +1,40 @@
import { SHA1Hash } from './sha1hash';
export const extractToken = (cookie = document.cookie) => cookie.match(/SAPISID=([^;]+);/)?.[1] ?? cookie.match(/__Secure\-3PAPISID=([^;]+);/)?.[1];
export const getHash = (papisid: string, millis = Date.now(), origin: string = 'https://music.youtube.com') => {
const hash = SHA1Hash();
hash.update(`${millis} ${papisid} ${origin}`);
return hash.digestString().toLowerCase();
};
export const getAuthorizationHeader = (papisid: string, millis = Date.now(), origin: string = 'https://music.youtube.com') => {
return `SAPISIDHASH ${millis}_${getHash(papisid, millis, origin)}`;
};
export const getClient = () => {
return {
hl: navigator.language.split('-')[0] ?? 'en',
gl: navigator.language.split('-')[1] ?? 'US',
deviceMake: '',
deviceModel: '',
userAgent: navigator.userAgent,
clientName: 'WEB_REMIX',
clientVersion: '1.20231208.05.02',
osName: '',
osVersion: '',
platform: 'DESKTOP',
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
locationInfo: {
locationPermissionAuthorizationStatus: 'LOCATION_PERMISSION_AUTHORIZATION_STATUS_UNSUPPORTED',
},
musicAppInfo: {
pwaInstallabilityStatus: 'PWA_INSTALLABILITY_STATUS_UNKNOWN',
webDisplayMode: 'WEB_DISPLAY_MODE_BROWSER',
storeDigitalGoodsApiSupportStatus: {
playStoreDigitalGoodsApiSupportStatus: 'DIGITAL_GOODS_API_SUPPORT_STATUS_UNSUPPORTED',
},
},
utcOffsetMinutes: -1 * (new Date()).getTimezoneOffset(),
};
};

1
src/plugins/music-together/queue/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './queue';

429
src/plugins/music-together/queue/queue.ts Normal file
View File

@ -0,0 +1,429 @@
import { getMusicQueueRenderer } from './song';
import { mapQueueItem } from './utils';
import type { Profile, QueueAPI, VideoData } from '../types';
import { ConnectionEventUnion } from '@/plugins/music-together/connection';
import { t } from '@/i18n';
const getHeaderPayload = (() => {
let payload: unknown = null;
return () => {
if (!payload) {
payload = {
title: {
runs: [
{
text: t('plugins.music-together.internal.track-source')
}
]
},
subtitle: {
runs: [
{
text: t('plugins.music-together.name')
}
]
},
buttons: [
{
chipCloudChipRenderer: {
style: {
styleType: 'STYLE_TRANSPARENT'
},
text: {
runs: [
{
text: t('plugins.music-together.internal.save')
}
]
},
navigationEndpoint: {
saveQueueToPlaylistCommand: {}
},
icon: {
iconType: 'ADD_TO_PLAYLIST'
},
accessibilityData: {
accessibilityData: {
label: t('plugins.music-together.internal.save')
}
},
isSelected: false,
uniqueId: t('plugins.music-together.internal.save')
}
}
]
};
}
return payload;
}
})();
export type QueueOptions = {
videoList?: VideoData[];
owner?: Profile;
queue?: HTMLElement & QueueAPI;
getProfile: (id: string) => Profile | undefined;
}
export type QueueEventListener = (event: ConnectionEventUnion) => void;
export class Queue {
private queue: (HTMLElement & QueueAPI) | null = null;
private originalDispatch: ((obj: {
type: string;
payload?: unknown;
}) => void) | null = null;
private internalDispatch = false;
private ignoreFlag = false;
private listeners: QueueEventListener[] = [];
private owner: Profile | null = null;
private getProfile: (id: string) => Profile | undefined;
constructor(options: QueueOptions) {
this.getProfile = options.getProfile;
this.queue = options.queue ?? document.querySelector<HTMLElement & QueueAPI>('#queue');
this.owner = options.owner ?? null;
this._videoList = options.videoList ?? [];
}
private _videoList: VideoData[] = [];
/* utils */
get videoList() {
return this._videoList;
}
get selectedIndex() {
return mapQueueItem((it) => it?.selected, this.queue?.store.getState().queue.items).findIndex(Boolean) ?? 0;
}
get rawItems() {
return this.queue?.store.getState().queue.items;
}
get flatItems() {
return mapQueueItem((it) => it, this.rawItems);
}
setOwner(owner: Profile) {
this.owner = owner;
}
/* public */
async setVideoList(videoList: VideoData[], sync = true) {
this._videoList = videoList;
if (sync) await this.syncVideo();
}
async addVideos(videos: VideoData[], index?: number) {
const response = await getMusicQueueRenderer(videos.map((it) => it.videoId));
if (!response) return false;
const items = response.queueDatas.map((it) => it?.content).filter(Boolean);
if (!items) return false;
this.internalDispatch = true;
this._videoList.push(...videos);
this.queue?.dispatch({
type: 'ADD_ITEMS',
payload: {
nextQueueItemId: this.queue.store.getState().queue.nextQueueItemId,
index: index ?? this.queue.store.getState().queue.items.length ?? 0,
items,
shuffleEnabled: false,
shouldAssignIds: true
}
});
this.internalDispatch = false;
setTimeout(() => {
this.initQueue();
this.syncQueueOwner();
}, 0);
return true;
}
async removeVideo(index: number) {
this.internalDispatch = true;
this._videoList.splice(index, 1);
this.queue?.dispatch({
type: 'REMOVE_ITEM',
payload: index
});
this.internalDispatch = false;
setTimeout(() => {
this.initQueue();
this.syncQueueOwner();
}, 0);
}
setIndex(index: number) {
this.internalDispatch = true;
this.queue?.dispatch({
type: 'SET_INDEX',
payload: index
});
this.internalDispatch = false;
}
moveItem(fromIndex: number, toIndex: number) {
this.internalDispatch = true;
const data = this._videoList.splice(fromIndex, 1)[0];
this._videoList.splice(toIndex, 0, data);
this.queue?.dispatch({
type: 'MOVE_ITEM',
payload: {
fromIndex,
toIndex
}
});
this.internalDispatch = false;
setTimeout(() => {
this.initQueue();
this.syncQueueOwner();
}, 0);
}
clear() {
this.internalDispatch = true;
this._videoList = [];
this.queue?.dispatch({
type: 'CLEAR'
});
this.internalDispatch = false;
}
on(listener: QueueEventListener) {
this.listeners.push(listener);
}
off(listener: QueueEventListener) {
this.listeners = this.listeners.filter((it) => it !== listener);
}
rollbackInjection() {
if (!this.queue) {
console.error('Queue is not initialized!');
return;
}
if (this.originalDispatch) this.queue.store.dispatch = this.originalDispatch;
}
injection() {
if (!this.queue) {
console.error('Queue is not initialized!');
return;
}
this.originalDispatch = this.queue.store.dispatch;
this.queue.store.dispatch = (event) => {
if (!this.queue || !this.owner) {
console.error('Queue is not initialized!');
return;
}
if (!this.internalDispatch) {
if (event.type === 'CLEAR') {
this.ignoreFlag = true;
}
if (event.type === 'ADD_ITEMS') {
if (this.ignoreFlag) {
this.ignoreFlag = false;
const videoList = mapQueueItem((it: any) => ({
videoId: it.videoId,
ownerId: this.owner!.id
} satisfies VideoData), (event.payload as any).items);
const index = this._videoList.length + videoList.length - 1;
if (videoList.length > 0) {
this.broadcast({ // play
type: 'ADD_SONGS',
payload: {
videoList
},
after: [
{
type: 'SYNC_PROGRESS',
payload: {
index
}
}
]
});
}
} else if ((event.payload as any).items.length === 1) {
this.broadcast({ // add playlist
type: 'ADD_SONGS',
payload: {
// index: (event.payload as any).index,
videoList: mapQueueItem((it: any) => ({
videoId: it.videoId,
ownerId: this.owner!.id
} satisfies VideoData), (event.payload as any).items)
}
});
}
return;
}
if (event.type === 'MOVE_ITEM') {
this.broadcast({
type: 'MOVE_SONG',
payload: {
fromIndex: (event.payload as any).fromIndex,
toIndex: (event.payload as any).toIndex
}
});
return;
}
if (event.type === 'REMOVE_ITEM') {
this.broadcast({
type: 'REMOVE_SONG',
payload: {
index: event.payload as number
}
});
return;
}
if (event.type === 'SET_INDEX') {
this.broadcast({
type: 'SYNC_PROGRESS',
payload: {
index: event.payload as number
}
});
return;
}
if (event.type === 'SET_HEADER') event.payload = getHeaderPayload();
if (event.type === 'ADD_STEERING_CHIPS') {
event.type = 'CLEAR_STEERING_CHIPS';
event.payload = undefined;
}
if (event.type === 'SET_PLAYER_UI_STATE') {
if (event.payload === 'INACTIVE' && this.videoList.length > 0) {
return;
}
}
if (event.type === 'HAS_SHOWN_AUTOPLAY') return;
if (event.type === 'ADD_AUTOMIX_ITEMS') return;
}
const fakeContext = {
...this.queue,
store: {
...this.queue.store,
dispatch: this.originalDispatch
}
};
this.originalDispatch!.call(fakeContext, event);
};
}
/* sync */
async initQueue() {
if (!this.queue) return;
this.internalDispatch = true;
this.queue.dispatch({
type: 'HAS_SHOWN_AUTOPLAY',
payload: false
});
this.queue.dispatch({
type: 'SET_HEADER',
payload: getHeaderPayload(),
});
this.queue.dispatch({
type: 'CLEAR_STEERING_CHIPS'
});
this.internalDispatch = false;
}
async syncVideo() {
const response = await getMusicQueueRenderer(this._videoList.map((it) => it.videoId));
if (!response) return false;
const items = response.queueDatas.map((it) => it.content);
this.internalDispatch = true;
this.queue?.dispatch({
type: 'UPDATE_ITEMS',
payload: {
items: items,
nextQueueItemId: this.queue.store.getState().queue.nextQueueItemId,
shouldAssignIds: true,
currentIndex: -1
}
});
this.internalDispatch = false;
setTimeout(() => {
this.initQueue();
this.syncQueueOwner();
}, 0);
return true;
}
async syncQueueOwner() {
const allQueue = document.querySelectorAll('#queue');
allQueue.forEach((queue) => {
const list = Array.from(queue?.querySelectorAll<HTMLElement>('ytmusic-player-queue-item') ?? []);
list.forEach((item, index) => {
if (typeof index !== 'number') return;
const id = this._videoList[index]?.ownerId;
const data = this.getProfile(id);
const profile = item.querySelector<HTMLImageElement>('.music-together-owner') ?? document.createElement('img');
profile.classList.add('music-together-owner');
profile.dataset.id = id;
profile.dataset.index = index.toString();
const name = item.querySelector<HTMLElement>('.music-together-name') ?? document.createElement('div');
name.classList.add('music-together-name');
name.textContent = data?.name ?? t('plugins.music-together.internal.unknown-user');
if (data) {
profile.dataset.thumbnail = data.thumbnail ?? '';
profile.dataset.name = data.name ?? '';
profile.dataset.handleId = data.handleId ?? '';
profile.dataset.id = data.id ?? '';
profile.src = data.thumbnail ?? '';
profile.title = data.name ?? '';
profile.alt = data.handleId ?? '';
}
if (!profile.isConnected) item.append(profile);
if (!name.isConnected) item.append(name);
});
});
}
removeQueueOwner() {
const allQueue = document.querySelectorAll('#queue');
allQueue.forEach((queue) => {
const list = Array.from(queue?.querySelectorAll<HTMLElement>('ytmusic-player-queue-item') ?? []);
list.forEach((item) => {
const profile = item.querySelector<HTMLImageElement>('.music-together-owner');
const name = item.querySelector<HTMLElement>('.music-together-name');
profile?.remove();
name?.remove();
});
});
}
/* private */
private broadcast(event: ConnectionEventUnion) {
this.listeners.forEach((listener) => listener(event));
}
}

117
src/plugins/music-together/queue/sha1hash.ts Normal file
View File

@ -0,0 +1,117 @@
export function SHA1Hash(): {
reset: () => void,
update: (message: string | number[], length?: number) => void,
digest: () => number[],
digestString: () => string
} {
let hash: number[];
function initialize(): void {
hash = [1732584193, 4023233417, 2562383102, 271733878, 3285377520];
totalLength = currentLength = 0;
}
function processBlock(block: number[]): void {
let words: number[] = [];
for (let i = 0; i < 64; i += 4) {
words[i / 4] = block[i] << 24 | block[i + 1] << 16 | block[i + 2] << 8 | block[i + 3];
}
for (let i = 16; i < 80; i++) {
let temp = words[i - 3] ^ words[i - 8] ^ words[i - 14] ^ words[i - 16];
words[i] = (temp << 1 | temp >>> 31) & 4294967295;
}
let a = hash[0],
b = hash[1],
c = hash[2],
d = hash[3],
e = hash[4];
for (let i = 0; i < 80; i++) {
let f, k;
if (i < 20) {
f = d ^ b & (c ^ d);
k = 1518500249;
} else if (i < 40) {
f = b ^ c ^ d;
k = 1859775393;
} else if (i < 60) {
f = b & c | d & (b | c);
k = 2400959708;
} else {
f = b ^ c ^ d;
k = 3395469782;
}
let temp = ((a << 5 | a >>> 27) & 4294967295) + f + e + k + words[i] & 4294967295;
e = d;
d = c;
c = (b << 30 | b >>> 2) & 4294967295;
b = a;
a = temp;
}
hash[0] = hash[0] + a & 4294967295;
hash[1] = hash[1] + b & 4294967295;
hash[2] = hash[2] + c & 4294967295;
hash[3] = hash[3] + d & 4294967295;
hash[4] = hash[4] + e & 4294967295;
}
function update(message: string | number[], length?: number): void {
if ('string' === typeof message) {
message = unescape(encodeURIComponent(message));
let bytes: number[] = [];
for (let i = 0, len = message.length; i < len; ++i)
bytes.push(message.charCodeAt(i));
message = bytes;
}
length || (length = message.length);
let i = 0;
if (0 == currentLength)
for (; i + 64 < length;)
processBlock(message.slice(i, i + 64)),
i += 64,
totalLength += 64;
for (; i < length;)
if (buffer[currentLength++] = message[i++],
totalLength++,
64 == currentLength)
for (currentLength = 0,
processBlock(buffer); i + 64 < length;)
processBlock(message.slice(i, i + 64)),
i += 64,
totalLength += 64;
}
function finalize(): number[] {
let result: number[] = []
, bits = 8 * totalLength;
if (currentLength < 56)
update(padding, 56 - currentLength);
else
update(padding, 64 - (currentLength - 56));
for (let i = 63; i >= 56; i--)
buffer[i] = bits & 255,
bits >>>= 8;
processBlock(buffer);
for (let i = 0; i < 5; i++)
for (let j = 24; j >= 0; j -= 8)
result.push(hash[i] >> j & 255);
return result;
}
let buffer: number[] = [], padding: number[] = [128], totalLength: number, currentLength: number;
for (let i = 1; i < 64; ++i)
padding[i] = 0;
initialize();
return {
reset: initialize,
update: update,
digest: finalize,
digestString: function(): string {
let hash = finalize(), hex = '';
for (let i = 0; i < hash.length; i++)
hex += '0123456789ABCDEF'.charAt(Math.floor(hash[i] / 16)) + '0123456789ABCDEF'.charAt(hash[i] % 16);
return hex;
}
};
}

48
src/plugins/music-together/queue/song.ts Normal file
View File

@ -0,0 +1,48 @@
import { extractToken, getAuthorizationHeader, getClient } from './client';
type QueueRendererResponse = {
queueDatas: {
content: unknown;
}[];
responseContext: unknown;
trackingParams: string;
};
export const getMusicQueueRenderer = async (videoIds: string[]): Promise<QueueRendererResponse | null> => {
const token = extractToken();
if (!token) return null;
const response = await fetch(
'https://music.youtube.com/youtubei/v1/music/get_queue?key=AIzaSyC9XL3ZjWddXya6X74dJoCTL-WEYFDNX30&prettyPrint=false',
{
method: 'POST',
credentials: 'include',
body: JSON.stringify({
context: {
client: getClient(),
request: {
useSsl: true,
internalExperimentFlags: [],
consistencyTokenJars: [],
},
user: {
lockedSafetyMode: false,
},
},
videoIds,
}),
headers: {
'Content-Type': 'application/json',
Origin: 'https://music.youtube.com',
Authorization: getAuthorizationHeader(token)
}
}
);
const text = await response.text();
try {
return JSON.parse(text) as QueueRendererResponse;
} catch {}
return null;
};

15
src/plugins/music-together/queue/utils.ts Normal file
View File

@ -0,0 +1,15 @@
export const mapQueueItem = <T>(map: (item: any | null) => T, array: any[]): T[] => array
.map((item) => {
if ('playlistPanelVideoWrapperRenderer' in item) {
const keys = Object.keys(item.playlistPanelVideoWrapperRenderer.primaryRenderer);
return item.playlistPanelVideoWrapperRenderer.primaryRenderer[keys[0]];
}
if ('playlistPanelVideoRenderer' in item) {
return item.playlistPanelVideoRenderer;
}
console.error('Music Together: Unknown item', item);
return null;
})
.map(map);