mirror of
https://github.com/th-ch/youtube-music.git
synced 2026-01-16 04:41:47 +00:00
feat(plugin): migrating plugins to new plugin system (WIP)
Co-authored-by: JellyBrick <shlee1503@naver.com>
This commit is contained in:
@ -1,4 +1,4 @@
|
||||
import style from './style.css';
|
||||
import style from './style.css?inline';
|
||||
|
||||
import { createPluginBuilder } from '../utils/builder';
|
||||
|
||||
|
||||
@ -7,79 +7,83 @@ const bufferList = [1, 5, 10, 20, 30];
|
||||
const blurAmountList = [0, 5, 10, 25, 50, 100, 150, 200, 500];
|
||||
const opacityList = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
|
||||
|
||||
export default builder.createMenu(({ getConfig, setConfig }) => ([
|
||||
{
|
||||
label: 'Smoothness transition',
|
||||
submenu: interpolationTimeList.map((interpolationTime) => ({
|
||||
label: `During ${interpolationTime / 1000}s`,
|
||||
type: 'radio',
|
||||
checked: getConfig().interpolationTime === interpolationTime,
|
||||
click() {
|
||||
setConfig({ interpolationTime });
|
||||
},
|
||||
})),
|
||||
},
|
||||
{
|
||||
label: 'Quality',
|
||||
submenu: qualityList.map((quality) => ({
|
||||
label: `${quality} pixels`,
|
||||
type: 'radio',
|
||||
checked: getConfig().quality === quality,
|
||||
click() {
|
||||
setConfig({ quality });
|
||||
},
|
||||
})),
|
||||
},
|
||||
{
|
||||
label: 'Size',
|
||||
submenu: sizeList.map((size) => ({
|
||||
label: `${size}%`,
|
||||
type: 'radio',
|
||||
checked: getConfig().size === size,
|
||||
click() {
|
||||
setConfig({ size });
|
||||
},
|
||||
})),
|
||||
},
|
||||
{
|
||||
label: 'Buffer',
|
||||
submenu: bufferList.map((buffer) => ({
|
||||
label: `${buffer}`,
|
||||
type: 'radio',
|
||||
checked: getConfig().buffer === buffer,
|
||||
click() {
|
||||
setConfig({ buffer });
|
||||
},
|
||||
})),
|
||||
},
|
||||
{
|
||||
label: 'Opacity',
|
||||
submenu: opacityList.map((opacity) => ({
|
||||
label: `${opacity * 100}%`,
|
||||
type: 'radio',
|
||||
checked: getConfig().opacity === opacity,
|
||||
click() {
|
||||
setConfig({ opacity });
|
||||
},
|
||||
})),
|
||||
},
|
||||
{
|
||||
label: 'Blur amount',
|
||||
submenu: blurAmountList.map((blur) => ({
|
||||
label: `${blur} pixels`,
|
||||
type: 'radio',
|
||||
checked: getConfig().blur === blur,
|
||||
click() {
|
||||
setConfig({ blur });
|
||||
},
|
||||
})),
|
||||
},
|
||||
{
|
||||
label: 'Using fullscreen',
|
||||
type: 'checkbox',
|
||||
checked: getConfig().fullscreen,
|
||||
click(item) {
|
||||
setConfig({ fullscreen: item.checked });
|
||||
export default builder.createMenu(async ({ getConfig, setConfig }) => {
|
||||
const config = await getConfig();
|
||||
|
||||
return [
|
||||
{
|
||||
label: 'Smoothness transition',
|
||||
submenu: interpolationTimeList.map((interpolationTime) => ({
|
||||
label: `During ${interpolationTime / 1000}s`,
|
||||
type: 'radio',
|
||||
checked: config.interpolationTime === interpolationTime,
|
||||
click() {
|
||||
setConfig({ interpolationTime });
|
||||
},
|
||||
})),
|
||||
},
|
||||
},
|
||||
]));
|
||||
{
|
||||
label: 'Quality',
|
||||
submenu: qualityList.map((quality) => ({
|
||||
label: `${quality} pixels`,
|
||||
type: 'radio',
|
||||
checked: config.quality === quality,
|
||||
click() {
|
||||
setConfig({ quality });
|
||||
},
|
||||
})),
|
||||
},
|
||||
{
|
||||
label: 'Size',
|
||||
submenu: sizeList.map((size) => ({
|
||||
label: `${size}%`,
|
||||
type: 'radio',
|
||||
checked: config.size === size,
|
||||
click() {
|
||||
setConfig({ size });
|
||||
},
|
||||
})),
|
||||
},
|
||||
{
|
||||
label: 'Buffer',
|
||||
submenu: bufferList.map((buffer) => ({
|
||||
label: `${buffer}`,
|
||||
type: 'radio',
|
||||
checked: config.buffer === buffer,
|
||||
click() {
|
||||
setConfig({ buffer });
|
||||
},
|
||||
})),
|
||||
},
|
||||
{
|
||||
label: 'Opacity',
|
||||
submenu: opacityList.map((opacity) => ({
|
||||
label: `${opacity * 100}%`,
|
||||
type: 'radio',
|
||||
checked: config.opacity === opacity,
|
||||
click() {
|
||||
setConfig({ opacity });
|
||||
},
|
||||
})),
|
||||
},
|
||||
{
|
||||
label: 'Blur amount',
|
||||
submenu: blurAmountList.map((blur) => ({
|
||||
label: `${blur} pixels`,
|
||||
type: 'radio',
|
||||
checked: config.blur === blur,
|
||||
click() {
|
||||
setConfig({ blur });
|
||||
},
|
||||
})),
|
||||
},
|
||||
{
|
||||
label: 'Using fullscreen',
|
||||
type: 'checkbox',
|
||||
checked: config.fullscreen,
|
||||
click(item) {
|
||||
setConfig({ fullscreen: item.checked });
|
||||
},
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import builder from './index';
|
||||
|
||||
export default builder.createRenderer(({ getConfig }) => {
|
||||
const initConfigData = getConfig();
|
||||
export default builder.createRenderer(async ({ getConfig }) => {
|
||||
const initConfigData = await getConfig();
|
||||
|
||||
let interpolationTime = initConfigData.interpolationTime;
|
||||
let buffer = initConfigData.buffer;
|
||||
@ -26,6 +26,7 @@ export default builder.createRenderer(({ getConfig }) => {
|
||||
if (!video) return null;
|
||||
if (!wrapper) return null;
|
||||
|
||||
console.log('injectBlurVideo', songVideo, video, wrapper);
|
||||
const blurCanvas = document.createElement('canvas');
|
||||
blurCanvas.classList.add('html5-blur-canvas');
|
||||
|
||||
@ -39,6 +40,7 @@ export default builder.createRenderer(({ getConfig }) => {
|
||||
if (typeof lastEffectWorkId === 'number') cancelAnimationFrame(lastEffectWorkId);
|
||||
|
||||
lastEffectWorkId = requestAnimationFrame(() => {
|
||||
// console.log('context', context);
|
||||
if (!context) return;
|
||||
|
||||
const width = qualityRatio;
|
||||
|
||||
Reference in New Issue
Block a user