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

used youtube's videodatachange event

Browse Source
This commit is contained in:
Araxeus
2021-11-09 16:08:40 +02:00
parent 65ce62adc1
commit 895136af0a
3 changed files with 43 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/disable-autoplay/front.js
View File

@ -1,7 +1,7 @@
module.exports = () => { module.exports = () => {
document.addEventListener('apiLoaded', () => { document.addEventListener('apiLoaded', e => {
document.querySelector('video').addEventListener('srcChanged', e => { document.querySelector('video').addEventListener('srcChanged', () => {
e.target.pause(); e.detail.pauseVideo();
}) })
}, { once: true, passive: true }) }, { once: true, passive: true })
}; };

38
plugins/video-toggle/front.js
View File

@ -6,6 +6,8 @@ function $(selector) { return document.querySelector(selector); }
let options; let options;
let api;
const switchButtonDiv = ElementFromFile( const switchButtonDiv = ElementFromFile(
templatePath(__dirname, "button_template.html") templatePath(__dirname, "button_template.html")
); );
@ -17,7 +19,9 @@ module.exports = (_options) => {
document.addEventListener('apiLoaded', setup, { once: true, passive: true }); document.addEventListener('apiLoaded', setup, { once: true, passive: true });
} }
function setup() { function setup(e) {
api = e.detail;
$('ytmusic-player-page').prepend(switchButtonDiv); $('ytmusic-player-page').prepend(switchButtonDiv);
$('#song-image.ytmusic-player').style.display = "block" $('#song-image.ytmusic-player').style.display = "block"
@ -36,6 +40,8 @@ function setup() {
}) })
$('video').addEventListener('srcChanged', videoStarted); $('video').addEventListener('srcChanged', videoStarted);
observeThumbnail();
} }
function changeDisplay(showVideo) { function changeDisplay(showVideo) {
@ -51,11 +57,8 @@ function changeDisplay(showVideo) {
} }
function videoStarted() { function videoStarted() {
if (videoExist()) { if (api.getPlayerResponse().videoDetails.musicVideoType === 'MUSIC_VIDEO_TYPE_OMV') { // or `$('#player').videoMode_`
const thumbnails = $('#movie_player').getPlayerResponse()?.videoDetails?.thumbnail?.thumbnails; forceThumbnail($('#song-image img'));
if (thumbnails && thumbnails.length > 0) {
$('#song-image img').src = thumbnails[thumbnails.length-1].url;
}
switchButtonDiv.style.display = "initial"; switchButtonDiv.style.display = "initial";
if (!options.hideVideo && $('#song-video.ytmusic-player').style.display === "none") { if (!options.hideVideo && $('#song-video.ytmusic-player').style.display === "none") {
changeDisplay(true); changeDisplay(true);
@ -66,10 +69,6 @@ function videoStarted() {
} }
} }
function videoExist() {
return $('#player').videoMode_;
}
// on load, after a delay, the page overrides the playback-mode to 'OMV_PREFERRED' which causes weird aspect ratio in the image container // on load, after a delay, the page overrides the playback-mode to 'OMV_PREFERRED' which causes weird aspect ratio in the image container
// this function fix the problem by overriding that override :) // this function fix the problem by overriding that override :)
function forcePlaybackMode() { function forcePlaybackMode() {
@ -83,3 +82,22 @@ function forcePlaybackMode() {
}); });
playbackModeObserver.observe($('ytmusic-player'), { attributeFilter: ["playback-mode"] }) playbackModeObserver.observe($('ytmusic-player'), { attributeFilter: ["playback-mode"] })
} }
function observeThumbnail() {
const playbackModeObserver = new MutationObserver(mutations => {
if (!$('#player').videoMode_) return;
mutations.forEach(mutation => {
if (!mutation.target.src.startsWith('data:')) return;
forceThumbnail(mutation.target)
});
});
playbackModeObserver.observe($('#song-image img'), { attributeFilter: ["src"] })
}
function forceThumbnail(img) {
const thumbnails = $('#movie_player').getPlayerResponse()?.videoDetails?.thumbnail?.thumbnails;
if (thumbnails && thumbnails.length > 0) {
img.src = thumbnails[thumbnails.length - 1].url;
}
}

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

@ -9,23 +9,18 @@ ipcRenderer.on("update-song-info", async (_, extractedSongInfo) => {
global.songInfo.image = await getImage(global.songInfo.imageSrc); global.songInfo.image = await getImage(global.songInfo.imageSrc);
}); });
module.exports = () => {
document.addEventListener('apiLoaded', e => observeSrcChange(e.detail), { once: true, passive: true });
};
// 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)
function observeSrcChange(api) { const srcChangedEvent = new CustomEvent('srcChanged');
const srcChangedEvent = new CustomEvent('srcChanged');
const video = document.querySelector('video'); module.exports = () => {
document.addEventListener('apiLoaded', apiEvent => {
const playbackModeObserver = new MutationObserver((mutations) => { const video = document.querySelector('video');
mutations.forEach(mutation => { // name = "dataloaded" and abit later "dataupdated"
if (mutation.target.src) { // in first mutation src is usually an empty string (loading) apiEvent.detail.addEventListener('videodatachange', (name, dataEvent) => {
video.dispatchEvent(srcChangedEvent); if (name !== 'dataloaded') return;
ipcRenderer.send("song-info-request", JSON.stringify(api.getPlayerResponse())); ipcRenderer.send("song-info-request", JSON.stringify(dataEvent.playerResponse));
} video.dispatchEvent(srcChangedEvent);
}) })
});
playbackModeObserver.observe(video, { attributeFilter: ["src"] }) }, { once: true, passive: true });
} };