BetterYTM-Mirror

BetterYTM

### Configurable layout and UX improvements for YouTube Music [Features](#features) • [Installation](#installation) • [Development](#development) • [Attributions](#attributions) • [Disclaimers](#disclaimers)

### Features: All of these features can be toggled and configured! - Input: - Use arrow keys to skip forward or backward by 10 seconds - Switch between YouTube and YouTube Music on a video by pressing a hotkey (F9 by default) - Layout: - Open any song's lyrics on genius.com which generally has higher quality than YouTube's providers - Quick actions on songs in a queue, to quickly open their lyrics or remove them from the queue - Remove the premium tab in the sidebar - Set a custom size and step resolution for the volume slider - Improvements to clickability of song titles and thumbnails when wanting to open them in a new tab ... and more!
To toggle features on or off, install the userscript, then click the "BetterYTM" text under the logo to open the settings menu. Note that the page needs to be reloaded for the changes to take effect. My work relies on donations, so if you like this userscript please consider [supporting development ❤️](https://github.com/sponsors/Sv443)

## Installation: **Requires a userscript manager browser extension. I recommend the following:** > Firefox: [ViolentMonkey](https://addons.mozilla.org/en-US/firefox/addon/violentmonkey/) or [TamperMonkey](https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/) > Chrome: [ViolentMonkey](https://chrome.google.com/webstore/detail/violentmonkey/jinjaccalgkegednnccohejagnlnfdag) or [TamperMonkey](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo) > Edge: [ViolentMonkey](https://microsoftedge.microsoft.com/addons/detail/violentmonkey/eeagobfjdenkkddmbclomhiblgggliao?hl=en-GB&gl=DE) or [TamperMonkey](https://microsoftedge.microsoft.com/addons/detail/tampermonkey/iikmkjmpaadaobahmlepeloendndfphd)
Once you have the extension, click this button to install the userscript:
_{Note: the `unsafeWindow` grant is required due to limitations in some browsers, [see this issue for more info.](https://github.com/Sv443/BetterYTM/issues/18#show_issue)}


### Development: This project is based on my extensive template for making a userscript with TypeScript and many modern language and convenience features. [Check it out here](https://github.com/Sv443/Userscript.ts) if you want to make your own userscripts! #### Setting up the project for local development: 1. Have Node.js, npm and Git installed 2. Download and extract or clone this repo 3. Open a terminal in the project root and run `npm i` 4. Copy the file `.env.template` to `.env` and modify the variables inside to your needs. #### These are the CLI commands available after setting up the project: | Command | Description | | --- | --- | | `npm i` | Run once to install dependencies | | `npm run build-prod` | Builds the userscript for production (minified) | | `npm run build-dev` | Builds the userscript for development | | `npm run dev` | Watches for any changes, then rebuilds and serves the userscript on port 8710, so it can be updated live if set up correctly in the userscript manager (see below). Configure request logging and more in `src/tools/serve.ts` | | `npm run lint` | Builds the userscript with the TypeScript compiler and lints it with ESLint | #### Extras: When using ViolentMonkey, after running the command `npm run watch`, open [`http://localhost:8710/BetterYTM.user.js`](http://localhost:8710/BetterYTM.user.js) and select the `Track local file` option. This makes it so the userscript automatically updates when the code changes. Note: the tab needs to stay open on Firefox or the script will not update itself.

### Attributions: This userscript depends on these runtime libraries: - [@billjs/event-emitter](https://npmjs.org/package/@billjs/event-emitter) For development dependencies, please refer to `devDependencies` in [`package.json`](./package.json) Icons: - Most icons are from [Material Icons](https://fonts.google.com/icons) - For external icon attributions, see [`./assets/external/README.md`](assets/external/)

### Disclaimers: - I am not affiliated with YouTube, Google, Alphabet, Genius, or anyone else. - I do not own any third party icons, I just re-host them here for better stability and availability. - I do not intend to ever collect any data about you, everything in this script is done and stored locally on your device or on the site it currently runs on. - I can't guarantee this software is without flaws. If something bad happens, I don't accept blame. I do however accept [bug reports and feature requests.](https://github.com/Sv443/BetterYTM/issues/new/choose)

Made with ❤️ by [Sv443](https://github.com/Sv443) If you like this userscript, please consider [supporting me](https://github.com/sponsors/Sv443) © 2022 Sv443 - [MIT license](./LICENSE.txt)