Git Product home page Git Product logo

ytm-rpc's Introduction

Youtube Music Discord Rich Presence

A simplistic rich presence for Discord that displays your song information from Youtube Music.


Table of Contents
  1. Features
  2. Getting Started

Features

Features Status
Song Name
Album Cover
Share Button
Pausing/Unpausing
Pause/Playing mini-icons

Getting Started

Depending whether or not you use a Discord client modification, the way the RPC will look is different.

  • Without client modification (native RPC)

"Screenshot of RPC without a client mod" "Screenshot of RPC without a client mod but paused"

  • With client modification (plugin)

"screenshot of betterdiscord listening to status" "screenshot of betterdiscord listening to status but paused"

Prerequisites

Usage

In order to use this project, you must have the server running, alongside the extension running.

To start and install each respective component in located within its section.

Installation

Note

This project has a setup script in order to streamline the installation process, the manual methods of installing and setting up the components are still available.

Before proceeding with any of the methods below for installation, you have to clone the project. Open your terminal, where you wish to store the files for the project, then run the following:

git clone https://github.com/acelikesghosts/ytm-rpc.git
cd ytm-rpc

Then proceed with one of the following:

Setup Script

To run the setup script, you must have a bash terminal.

The accepted arguments are the following:

ALL OPTIONS ARE OPTIONAL, BUT ATLEAST ONE IS REQUIRED TO RUN THE SCRIPT

Argument Description
--deps Installs the dependencies required for each project.
--build Builds the server
--client=<bd|replugged> Specify what client modification to install

After deciding what arguments you wish to pass to the setup script, run the following:

bash ./scripts/setup.sh (your arguments)

The recommended installation script arguments are the following:

bash ./scripts/setup.sh --deps --build

Server Installation

  1. Install the NPM dependencies
    npm install
  2. Copy the .env.example into .env
    cp .env.example .env
  3. Configure the .env file
    • If using a client mod it is required to set USING_WS to true
    • You can change the pause/play mini-icons, and more by doing so.
  4. Build the server
    # this will build EVERY package
    npm run build --workspaces

Then run it using node .

Extension Installation

Chromium

  1. Navigate to the respective extensions tab.
  2. Turn on the Developer Mode switch (typically located in the top right of the extensions page)
  3. Click on the "Load Unpacked" button
  4. Browser to the project directory, and select the folder named packages/extensions

Firefox

  1. Navigate to about:debugging
  2. Proceed to the This Firefox tab
  3. Select Load Temporary Add-on…
  4. Navigate to the packages/extensions folder and select any file within it.

If you have changed the port of the server, click on the extension's icon to modify the port data is sent to.

If you have any open tabs of Youtube Music, please restart them.

Client Mod Installation

Warning

Using client modifications on Discord can result in termination, or account suspension.

Client Mod Status
BetterDiscord
Replugged
Vencord

"screenshot of betterdiscord listening to status" "screenshot of betterdiscord listening to status but paused"

BetterDiscord

  1. Navigate to the packages/betterdiscord folder.
  2. Install the dependencies required
npm install
  1. Tranpsile the JSX to JS
npm run build
  1. Move the file created in dist to your BetterDiscord plugin folder

If you have changed the port which the server runs at, change it within the plugin's settings as well.

Replugged

Prerequisites

  • pnpm
    npm i pnpm -g

If you have changed the port which the server runs at, change it within the plugin's settings as well.

  1. Navigate to the packages/replugged folder.
  2. Install the dependenices for the project.
pnpm install
  1. Build the Typescript project
pnpm run build
  1. Ensure that it is in your Replugged plugins folder after building.
  2. Navigate to the plugin settings within Replugged.
  3. Press Load Missing Buttons, then refresh Discord.

"gif of load missing plugins"

Vencord

At the moment, it is not possible to create custom plugins for Vencord without having it merged into the base client mod, which is a big overstep for a project like this.

Follow this PR for when they allow external plugins

Updating

Updating your local version of the project is rather simple, and all you have to do is:

  1. Navigate to where it is installed and update the Git repo
git pull
  1. Update the required dependencies using npm:
npm install
  1. Rebuild the codebase
npm run build --workspaces
  1. Navigate to the browser's extension manager and press Update

"update image"

  1. If you are using a client modification, go to the respective installation section and proceed with the steps.

ytm-rpc's People

Contributors

acelikesghosts avatar

Stargazers

 avatar

Watchers

 avatar

ytm-rpc's Issues

feat(server): ability to spoof being spotify

This would involve the following:

  1. Using a Spotify account token to fetch the song from Spotify in order to set the Artist URLs.
  2. Setting the Application Id to 0
  3. Setting the application name to "Spotify"
  4. Providing a listen along ID/Token (spotify:UUID)

and prolly more

bug: event listeners on `background` or `content` fire twice

attempting to resolve this on the refactor branch, alongside adding pausing of music being displayed;
have to fix the double sending (which is present in the master branch o.o) in order to add pausing.

double sending of the state causes the paused variable to flip flop because it sends the old state once and the new state once.

todo: stream line installation steps

Server Installation: 7 steps
Extension Installation: 4 steps
Client Mod: 5 steps

What we can do here is streamline the server installation and the client mod installation, most likely using a CLI.
The way I want to go for this will be something along the lines of the pseudo commands listed below:

git clone https://github.com/acelikesghosts/ytm-rpc.git
node ./scripts/streamline.js

Where streamline.js would provide a CLI to decide between the following:

  1. Server Installation setup (install deps, using client mod, port)
  2. Client mod (bd or replugged, automatically build and install it if chosen)
  3. inform they have to add the extension manually

todo(extension): rewrite.

the src is painful to look at, no separation between the client script and the page script, etc etc

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.