mirror of
https://github.com/th-ch/youtube-music.git
synced 2026-01-12 19:01:47 +00:00
fix: remove xo, migration to eslint
This commit is contained in:
JellyBrick
@ -1,10 +1,11 @@
|
||||
const { injectCSS } = require("../utils");
|
||||
const path = require("path");
|
||||
const path = require('node:path');
|
||||
|
||||
const { injectCSS } = require('../utils');
|
||||
|
||||
module.exports = (win, options) => {
|
||||
if (options.forceHide) {
|
||||
injectCSS(win.webContents, path.join(__dirname, "force-hide.css"));
|
||||
} else if (!options.mode || options.mode === "custom") {
|
||||
injectCSS(win.webContents, path.join(__dirname, "button-switcher.css"));
|
||||
}
|
||||
if (options.forceHide) {
|
||||
injectCSS(win.webContents, path.join(__dirname, 'force-hide.css'));
|
||||
} else if (!options.mode || options.mode === 'custom') {
|
||||
injectCSS(win.webContents, path.join(__dirname, 'button-switcher.css'));
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,86 +1,86 @@
|
||||
#main-panel.ytmusic-player-page {
|
||||
align-items: unset !important;
|
||||
align-items: unset !important;
|
||||
}
|
||||
|
||||
#main-panel {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-switch-button {
|
||||
z-index: 999;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 10px;
|
||||
background: rgba(33, 33, 33, 0.4);
|
||||
border-radius: 30px;
|
||||
overflow: hidden;
|
||||
width: 240px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
letter-spacing: 1px;
|
||||
color: #fff;
|
||||
padding-right: 120px;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 10px;
|
||||
background: rgba(33, 33, 33, 0.4);
|
||||
border-radius: 30px;
|
||||
overflow: hidden;
|
||||
width: 240px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
letter-spacing: 1px;
|
||||
color: #fff;
|
||||
padding-right: 120px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.video-switch-button:before {
|
||||
content: "Video";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
content: "Video";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.video-switch-button-checkbox {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.video-switch-button-label-span {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-switch-button-checkbox:checked+.video-switch-button-label:before {
|
||||
transform: translateX(120px);
|
||||
transition: transform 300ms linear;
|
||||
.video-switch-button-checkbox:checked + .video-switch-button-label:before {
|
||||
transform: translateX(120px);
|
||||
transition: transform 300ms linear;
|
||||
}
|
||||
|
||||
.video-switch-button-checkbox+.video-switch-button-label {
|
||||
position: relative;
|
||||
padding: 15px 0;
|
||||
display: block;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
.video-switch-button-checkbox + .video-switch-button-label {
|
||||
position: relative;
|
||||
padding: 15px 0;
|
||||
display: block;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.video-switch-button-checkbox+.video-switch-button-label:before {
|
||||
content: "";
|
||||
background: rgba(60, 60, 60, 0.4);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 30px;
|
||||
transform: translateX(0);
|
||||
transition: transform 300ms;
|
||||
.video-switch-button-checkbox + .video-switch-button-label:before {
|
||||
content: "";
|
||||
background: rgba(60, 60, 60, 0.4);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 30px;
|
||||
transform: translateX(0);
|
||||
transition: transform 300ms;
|
||||
}
|
||||
|
||||
/* disable the native toggler */
|
||||
#av-id {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
/* Hide the video player */
|
||||
#main-panel {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Make the side-panel full width */
|
||||
.side-panel.ytmusic-player-page {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
@ -1,142 +1,160 @@
|
||||
const { ElementFromFile, templatePath } = require("../utils");
|
||||
const { ElementFromFile, templatePath } = require('../utils');
|
||||
const { setOptions, isEnabled } = require('../../config/plugins');
|
||||
|
||||
const { setOptions, isEnabled } = require("../../config/plugins");
|
||||
const moveVolumeHud = isEnabled('precise-volume') ? require('../precise-volume/front').moveVolumeHud : () => {
|
||||
};
|
||||
|
||||
const moveVolumeHud = isEnabled("precise-volume") ? require("../precise-volume/front").moveVolumeHud : ()=>{};
|
||||
function $(selector) {
|
||||
return document.querySelector(selector);
|
||||
}
|
||||
|
||||
function $(selector) { return document.querySelector(selector); }
|
||||
|
||||
let options, player, video, api;
|
||||
let options;
|
||||
let player;
|
||||
let video;
|
||||
let api;
|
||||
|
||||
const switchButtonDiv = ElementFromFile(
|
||||
templatePath(__dirname, "button_template.html")
|
||||
templatePath(__dirname, 'button_template.html'),
|
||||
);
|
||||
|
||||
module.exports = (_options) => {
|
||||
if (_options.forceHide) return;
|
||||
switch (_options.mode) {
|
||||
case "native": {
|
||||
$("ytmusic-player-page").setAttribute("has-av-switcher");
|
||||
$("ytmusic-player").setAttribute("has-av-switcher");
|
||||
return;
|
||||
}
|
||||
case "disabled": {
|
||||
$("ytmusic-player-page").removeAttribute("has-av-switcher");
|
||||
$("ytmusic-player").removeAttribute("has-av-switcher");
|
||||
return;
|
||||
}
|
||||
default:
|
||||
case "custom": {
|
||||
options = _options;
|
||||
document.addEventListener("apiLoaded", setup, { once: true, passive: true });
|
||||
}
|
||||
if (_options.forceHide) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (_options.mode) {
|
||||
case 'native': {
|
||||
$('ytmusic-player-page').setAttribute('has-av-switcher');
|
||||
$('ytmusic-player').setAttribute('has-av-switcher');
|
||||
return;
|
||||
}
|
||||
|
||||
case 'disabled': {
|
||||
$('ytmusic-player-page').removeAttribute('has-av-switcher');
|
||||
$('ytmusic-player').removeAttribute('has-av-switcher');
|
||||
return;
|
||||
}
|
||||
|
||||
default:
|
||||
case 'custom': {
|
||||
options = _options;
|
||||
document.addEventListener('apiLoaded', setup, { once: true, passive: true });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function setup(e) {
|
||||
api = e.detail;
|
||||
player = $('ytmusic-player');
|
||||
video = $('video');
|
||||
api = e.detail;
|
||||
player = $('ytmusic-player');
|
||||
video = $('video');
|
||||
|
||||
$('#main-panel').append(switchButtonDiv);
|
||||
$('#main-panel').append(switchButtonDiv);
|
||||
|
||||
if (options.hideVideo) {
|
||||
$('.video-switch-button-checkbox').checked = false;
|
||||
changeDisplay(false);
|
||||
forcePlaybackMode();
|
||||
// fix black video
|
||||
video.style.height = "auto";
|
||||
if (options.hideVideo) {
|
||||
$('.video-switch-button-checkbox').checked = false;
|
||||
changeDisplay(false);
|
||||
forcePlaybackMode();
|
||||
// Fix black video
|
||||
video.style.height = 'auto';
|
||||
}
|
||||
|
||||
// Button checked = show video
|
||||
switchButtonDiv.addEventListener('change', (e) => {
|
||||
options.hideVideo = !e.target.checked;
|
||||
changeDisplay(e.target.checked);
|
||||
setOptions('video-toggle', options);
|
||||
});
|
||||
|
||||
video.addEventListener('srcChanged', videoStarted);
|
||||
|
||||
observeThumbnail();
|
||||
|
||||
switch (options.align) {
|
||||
case 'right': {
|
||||
switchButtonDiv.style.left = 'calc(100% - 240px)';
|
||||
return;
|
||||
}
|
||||
|
||||
// button checked = show video
|
||||
switchButtonDiv.addEventListener('change', (e) => {
|
||||
options.hideVideo = !e.target.checked;
|
||||
changeDisplay(e.target.checked);
|
||||
setOptions("video-toggle", options);
|
||||
})
|
||||
|
||||
video.addEventListener('srcChanged', videoStarted);
|
||||
|
||||
observeThumbnail();
|
||||
|
||||
switch (options.align) {
|
||||
case "right": {
|
||||
switchButtonDiv.style.left = "calc(100% - 240px)";
|
||||
return;
|
||||
}
|
||||
case "middle": {
|
||||
switchButtonDiv.style.left = "calc(50% - 120px)";
|
||||
return;
|
||||
}
|
||||
default:
|
||||
case "left": {
|
||||
switchButtonDiv.style.left = "0px";
|
||||
}
|
||||
case 'middle': {
|
||||
switchButtonDiv.style.left = 'calc(50% - 120px)';
|
||||
return;
|
||||
}
|
||||
|
||||
default:
|
||||
case 'left': {
|
||||
switchButtonDiv.style.left = '0px';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function changeDisplay(showVideo) {
|
||||
player.style.margin = showVideo ? '' : 'auto 0px';
|
||||
player.setAttribute('playback-mode', showVideo ? 'OMV_PREFERRED' : 'ATV_PREFERRED');
|
||||
player.style.margin = showVideo ? '' : 'auto 0px';
|
||||
player.setAttribute('playback-mode', showVideo ? 'OMV_PREFERRED' : 'ATV_PREFERRED');
|
||||
|
||||
$('#song-video.ytmusic-player').style.display = showVideo ? 'block' : 'none';
|
||||
$('#song-image').style.display = showVideo ? 'none' : 'block';
|
||||
$('#song-video.ytmusic-player').style.display = showVideo ? 'block' : 'none';
|
||||
$('#song-image').style.display = showVideo ? 'none' : 'block';
|
||||
|
||||
if (showVideo && !video.style.top) {
|
||||
video.style.top = `${(player.clientHeight - video.clientHeight) / 2}px`;
|
||||
}
|
||||
moveVolumeHud(showVideo);
|
||||
if (showVideo && !video.style.top) {
|
||||
video.style.top = `${(player.clientHeight - video.clientHeight) / 2}px`;
|
||||
}
|
||||
|
||||
moveVolumeHud(showVideo);
|
||||
}
|
||||
|
||||
function videoStarted() {
|
||||
if (api.getPlayerResponse().videoDetails.musicVideoType !== 'MUSIC_VIDEO_TYPE_ATV') {
|
||||
// switch to high res thumbnail
|
||||
forceThumbnail($('#song-image img'));
|
||||
// show toggle button
|
||||
switchButtonDiv.style.display = "initial";
|
||||
// change display to video mode if video exist & video is hidden & option.hideVideo = false
|
||||
if (!options.hideVideo && $('#song-video.ytmusic-player').style.display === "none") {
|
||||
changeDisplay(true);
|
||||
} else {
|
||||
moveVolumeHud(!options.hideVideo);
|
||||
}
|
||||
if (api.getPlayerResponse().videoDetails.musicVideoType === 'MUSIC_VIDEO_TYPE_ATV') {
|
||||
// Video doesn't exist -> switch to song mode
|
||||
changeDisplay(false);
|
||||
// Hide toggle button
|
||||
switchButtonDiv.style.display = 'none';
|
||||
} else {
|
||||
// Switch to high res thumbnail
|
||||
forceThumbnail($('#song-image img'));
|
||||
// Show toggle button
|
||||
switchButtonDiv.style.display = 'initial';
|
||||
// Change display to video mode if video exist & video is hidden & option.hideVideo = false
|
||||
if (!options.hideVideo && $('#song-video.ytmusic-player').style.display === 'none') {
|
||||
changeDisplay(true);
|
||||
} else {
|
||||
// video doesn't exist -> switch to song mode
|
||||
changeDisplay(false);
|
||||
// hide toggle button
|
||||
switchButtonDiv.style.display = "none";
|
||||
moveVolumeHud(!options.hideVideo);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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 :)
|
||||
function forcePlaybackMode() {
|
||||
const playbackModeObserver = new MutationObserver(mutations => {
|
||||
mutations.forEach(mutation => {
|
||||
if (mutation.target.getAttribute('playback-mode') !== "ATV_PREFERRED") {
|
||||
playbackModeObserver.disconnect();
|
||||
mutation.target.setAttribute('playback-mode', "ATV_PREFERRED");
|
||||
}
|
||||
});
|
||||
});
|
||||
playbackModeObserver.observe(player, { attributeFilter: ["playback-mode"] });
|
||||
const playbackModeObserver = new MutationObserver((mutations) => {
|
||||
for (const mutation of mutations) {
|
||||
if (mutation.target.getAttribute('playback-mode') !== 'ATV_PREFERRED') {
|
||||
playbackModeObserver.disconnect();
|
||||
mutation.target.setAttribute('playback-mode', 'ATV_PREFERRED');
|
||||
}
|
||||
}
|
||||
});
|
||||
playbackModeObserver.observe(player, { attributeFilter: ['playback-mode'] });
|
||||
}
|
||||
|
||||
function observeThumbnail() {
|
||||
const playbackModeObserver = new MutationObserver(mutations => {
|
||||
if (!player.videoMode_) return;
|
||||
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"] })
|
||||
for (const mutation of mutations) {
|
||||
if (!mutation.target.src.startsWith('data:')) {
|
||||
continue;
|
||||
}
|
||||
|
||||
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.split("?")[0];
|
||||
}
|
||||
const thumbnails = $('#movie_player').getPlayerResponse()?.videoDetails?.thumbnail?.thumbnails;
|
||||
if (thumbnails && thumbnails.length > 0) {
|
||||
img.src = thumbnails.at(-1).url.split('?')[0];
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,77 +1,77 @@
|
||||
const { setMenuOptions } = require("../../config/plugins");
|
||||
const { setMenuOptions } = require('../../config/plugins');
|
||||
|
||||
module.exports = (win, options) => [
|
||||
{
|
||||
label: "Mode",
|
||||
submenu: [
|
||||
{
|
||||
label: "Custom toggle",
|
||||
type: "radio",
|
||||
checked: options.mode === 'custom',
|
||||
click: () => {
|
||||
options.mode = 'custom';
|
||||
setMenuOptions("video-toggle", options);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "Native toggle",
|
||||
type: "radio",
|
||||
checked: options.mode === 'native',
|
||||
click: () => {
|
||||
options.mode = 'native';
|
||||
setMenuOptions("video-toggle", options);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "Disabled",
|
||||
type: "radio",
|
||||
checked: options.mode === 'disabled',
|
||||
click: () => {
|
||||
options.mode = 'disabled';
|
||||
setMenuOptions("video-toggle", options);
|
||||
}
|
||||
},
|
||||
]
|
||||
{
|
||||
label: 'Mode',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Custom toggle',
|
||||
type: 'radio',
|
||||
checked: options.mode === 'custom',
|
||||
click() {
|
||||
options.mode = 'custom';
|
||||
setMenuOptions('video-toggle', options);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Native toggle',
|
||||
type: 'radio',
|
||||
checked: options.mode === 'native',
|
||||
click() {
|
||||
options.mode = 'native';
|
||||
setMenuOptions('video-toggle', options);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Disabled',
|
||||
type: 'radio',
|
||||
checked: options.mode === 'disabled',
|
||||
click() {
|
||||
options.mode = 'disabled';
|
||||
setMenuOptions('video-toggle', options);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Alignment',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Left',
|
||||
type: 'radio',
|
||||
checked: options.align === 'left',
|
||||
click() {
|
||||
options.align = 'left';
|
||||
setMenuOptions('video-toggle', options);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Middle',
|
||||
type: 'radio',
|
||||
checked: options.align === 'middle',
|
||||
click() {
|
||||
options.align = 'middle';
|
||||
setMenuOptions('video-toggle', options);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Right',
|
||||
type: 'radio',
|
||||
checked: options.align === 'right',
|
||||
click() {
|
||||
options.align = 'right';
|
||||
setMenuOptions('video-toggle', options);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Force Remove Video Tab',
|
||||
type: 'checkbox',
|
||||
checked: options.forceHide,
|
||||
click(item) {
|
||||
options.forceHide = item.checked;
|
||||
setMenuOptions('video-toggle', options);
|
||||
},
|
||||
{
|
||||
label: "Alignment",
|
||||
submenu: [
|
||||
{
|
||||
label: "Left",
|
||||
type: "radio",
|
||||
checked: options.align === 'left',
|
||||
click: () => {
|
||||
options.align = 'left';
|
||||
setMenuOptions("video-toggle", options);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "Middle",
|
||||
type: "radio",
|
||||
checked: options.align === 'middle',
|
||||
click: () => {
|
||||
options.align = 'middle';
|
||||
setMenuOptions("video-toggle", options);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "Right",
|
||||
type: "radio",
|
||||
checked: options.align === 'right',
|
||||
click: () => {
|
||||
options.align = 'right';
|
||||
setMenuOptions("video-toggle", options);
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "Force Remove Video Tab",
|
||||
type: "checkbox",
|
||||
checked: options.forceHide,
|
||||
click: item => {
|
||||
options.forceHide = item.checked;
|
||||
setMenuOptions("video-toggle", options);
|
||||
}
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="video-switch-button">
|
||||
<input class="video-switch-button-checkbox" type="checkbox" checked="true"></input>
|
||||
<label class="video-switch-button-label" for=""><span class="video-switch-button-label-span">Song</span></label>
|
||||
<input checked="true" class="video-switch-button-checkbox" type="checkbox"></input>
|
||||
<label class="video-switch-button-label" for=""><span class="video-switch-button-label-span">Song</span></label>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user