YourTune

YourTune is a continuation of pear-desktop (formerly th-ch/youtube-music): a desktop music player with custom plugins. Upstream development has slowed down and a lot of fixes are sitting in open pull requests there, so this repo picks them up and keeps shipping releases. The full history is kept, every commit still belongs to its original author.

If you used pear-desktop before, your settings and plugin data are copied over the first time you start YourTune. The old app's data is left as it is.

• Native look & feel extension

Important

⚠️ Disclaimer

No Affiliation

This project, and its contributors, are not affiliated with, authorized by, endorsed by, or in any way officially connected with Google LLC, YouTube, or any of their subsidiaries or affiliates. This is an independent, non-profit, and unofficial extension developed by volunteers with the goal of providing a desktop experience.

Trademarks

The names "Google" and "YouTube Music", as well as related names, marks, emblems, and images, are registered trademarks of their respective owners. Any use of these trademarks is for identification and reference purposes only and does not imply any association with the trademark holder. We have no intention of infringing upon these trademarks or causing harm to the trademark holders.

Limitation of Liability

This application (extension) is provided "AS IS", and you use it at your own risk. In no event shall the developers or contributors be liable for any claim, damages, or other liability, including any legal consequences, arising from, out of, or in connection with the software or the use or other dealings in the software. The responsibility for any and all outcomes of using this software rests entirely with the user.

Content

• YourTune and pear-desktop
• Translation
• Download
• Themes
• Dev
• Build your own plugins
  • Creating a plugin
  • Common use cases
• Build
• Production Preview
• Tests
• License
• FAQ

YourTune and pear-desktop

We love pear-desktop. YourTune is built on all of its work, so the plugins and settings you know from it are here too. What's different:

• Fixes land sooner. Fixes that are still waiting in pear-desktop's open pull requests get picked up here, like the previous/next buttons for the new player UI (pear-desktop#4750).
• Regular releases. Every version bump on master ships a release, and the app tells you when a new one is out.
• Our own look. Two new plugins, on by default: Player Waves (colored waves above the player bar that follow the cover and the music) and Floating Player Bar. The app has its own icon too.
• A separate app. YourTune installs next to pear-desktop with its own data folder and url scheme, and copies your pear-desktop settings on its first start.
• No Discord status for now. Rich presence is off until YourTune has its own Discord application.

Translation

Translations live in src/i18n/resources. Pull requests are welcome.

Download

Download the latest version from the releases page, or build it yourself (see Build).

Themes

You can load CSS files to change the look of the application (Options > Visual Tweaks > Themes).

Some predefined themes are available in https://github.com/kerichdev/themes-for-ytmdesktop-player.

Dev

git clone https://github.com/robotlog/YourTune
cd YourTune
pnpm install --frozen-lockfile
pnpm dev

Instead of installing pnpm on your system, you can also use devcontainers. You can use devcontainers either as a development environment in VS Code, or as a way to easily build the project without installing dependencies on your host system.

Note that this has it's own limitations (for example, GUI doesn't work on, at least some, Linux hosts).

Build your own plugins

Using plugins, you can:

• manipulate the app - the BrowserWindow from electron is passed to the plugin handler
• change the front by manipulating the HTML/CSS

Creating a plugin

Create a folder in src/plugins/YOUR-PLUGIN-NAME:

• index.ts: the main file of the plugin

import style from './style.css?inline'; // import style as inline

import { createPlugin } from '@/utils';

export default createPlugin({
  name: 'Plugin Label',
  restartNeeded: true, // if value is true, ytmusic show restart dialog
  config: {
    enabled: false,
  }, // your custom config
  stylesheets: [style], // your custom style,
  menu: async ({ getConfig, setConfig }) => {
    // All *Config methods are wrapped Promise<T>
    const config = await getConfig();
    return [
      {
        label: 'menu',
        submenu: [1, 2, 3].map((value) => ({
          label: `value ${value}`,
          type: 'radio',
          checked: config.value === value,
          click() {
            setConfig({ value });
          },
        })),
      },
    ];
  },
  backend: {
    start({ window, ipc }) {
      window.maximize();

      // you can communicate with renderer plugin
      ipc.handle('some-event', () => {
        return 'hello';
      });
    },
    // it fired when config changed
    onConfigChange(newConfig) { /* ... */ },
    // it fired when plugin disabled
    stop(context) { /* ... */ },
  },
  renderer: {
    async start(context) {
      console.log(await context.ipc.invoke('some-event'));
    },
    // Only renderer available hook
    onPlayerApiReady(api, context) {
      // set plugin config easily
      context.setConfig({ myConfig: api.getVolume() });
    },
    onConfigChange(newConfig) { /* ... */ },
    stop(_context) { /* ... */ },
  },
  preload: {
    async start({ getConfig }) {
      const config = await getConfig();
    },
    onConfigChange(newConfig) {},
    stop(_context) {},
  },
});

Common use cases

• injecting custom CSS: create a style.css file in the same folder then:

// index.ts
import style from './style.css?inline'; // import style as inline

import { createPlugin } from '@/utils';

export default createPlugin({
  name: 'Plugin Label',
  restartNeeded: true, // if value is true, YourTune will show a restart dialog
  config: {
    enabled: false,
  }, // your custom config
  stylesheets: [style], // your custom style
  renderer() {} // define renderer hook
});

• If you want to change the HTML:

import { createPlugin } from '@/utils';

export default createPlugin({
  name: 'Plugin Label',
  restartNeeded: true, // if value is true, ytmusic will show the restart dialog
  config: {
    enabled: false,
  }, // your custom config
  renderer() {
    console.log('hello from renderer');
  } // define renderer hook
});

• communicating between the front and back: can be done using the ipcMain module from electron. See index.ts file and example in sponsorblock plugin.

Build

1. Clone the repo
2. Follow this guide to install pnpm
3. Run pnpm install --frozen-lockfile to install dependencies
4. Run pnpm dist:OS

• pnpm dist:win - Windows
• pnpm dist:linux - Linux (amd64)
• pnpm dist:linux:deb-arm64 - Linux (arm64 for Debian)
• pnpm dist:linux:rpm-arm64 - Linux (arm64 for Fedora)
• pnpm dist:mac - macOS (amd64)
• pnpm dist:mac:arm64 - macOS (arm64)

Builds the app for macOS, Linux, and Windows, using electron-builder.

Building in devcontainer

1. Clone the repo;
2. Open the folder in VS Code;
3. Reopen in container when prompted;
4. Run pnpm build as above (choosing the desired target);
5. Collect the built files from the dist folder.

Since devcontainer uses a mount for the workspace, the built files will be available on the host system as well.

Production Preview

pnpm start

Tests

pnpm test

Uses Playwright to test the app.

License

MIT © pear-devs and the YourTune contributors

FAQ

Why apps menu isn't showing up?

If Hide Menu option is on - you can show the menu with the alt key (or ` [backtick] if using the in-app-menu plugin)