Skip to content

πŸŽ¬πŸ“± Lightweight MPC-HC Remote used on mobile browsers using PreactJS and Vite

Notifications You must be signed in to change notification settings

RinMinase/mpc-remote

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

MPC-HC Remote

Introduction

A lightweight MPC-HC remote to be opened on the browser on your mobile phone.

UI Image

Using the project

Installations Required:

Steps:

  1. Clone the project, duplicate the ENV file and install the dependencies

    git clone https://github.com/RinMinase/mpc-remote.git
    cd mpc-remote
    cp .env.example .env
    
    npm install
    

    Note: If you have installed Yarn, run this instead:

    yarn install
    
  2. Open the .env file on the project folder root.

  3. Locate the Local IP Address of your machine then place it on LOCAL_COMPUTER_IP

    You can do this by running ipconfig on your terminal,

    If you are using Ethernet, copy the IPv4 Address in Ethernet adapter

    If you are using WiFi, copy the IPv4 Address in Wireless LAN adapter

  4. Build the project by running:

    npm run build
    

    Note: If you have installed Yarn, run this instead:

    yarn build
    

    Note: This should generate a /dist folder inside the project folder.

  5. Open up your file explorer and navigate to where MPC-HC is installed

    This is typically found on either folders:

    C:\Program Files\MPC-HC
    
    C:\Program Files (x86)\MPC-HC
    
  6. Create a webroot folder inside the MPC-HC folder

  7. Copy contents of the /dist folder generated earlier from the build from #3 inside the webroot folder

  8. Open up the options of MPC-HC under View > Options

  9. Navigate to Player > Web Interface and:

    • check Listen on port
    • check Serve pages from:
    • un-check Allow access from localhost only

    Note: Remember the port number in Listen on port, by default this is 13579

    Additional Note: If the port is set to a different number from 13579. Open the .env file and edit MPC_PORT

  10. Open any video file

  11. Open the browser on your phone, then navigate to <computer IP address>:<port stated on Listen on port>

Environmental Variables Used

Variable Description
PORT Port used for the development server (default: 3000)
POLL_RATE Polling rate for remote status (default: 1500)
MPC_PORT Port used by MPC-HC WebServer (default: 13579)
LOCAL_COMPUTER_IP Local IP Address of your computer *required

Project Development

Running the project

  1. Download the latest Node version. This is marked as <version number> Current. Install it on your machine.

  2. (Optional) Download Yarn. This is a faster package manager than the default npm one.

  3. Clone the project and duplicate the ENV file

    git clone https://github.com/RinMinase/mpc-remote.git
    cd mpc-remote
    cp .env.example .env
    
  4. Install the dependencies then run the project

    npm install
    npm start
    

    Note: If you have installed Yarn, run these instead:

    yarn install
    yarn start
    
  5. Fire up your browser and go to localhost:3000

Project Structure

.
β”œβ”€β”€ public/                         # Project public assets
β”œβ”€β”€ src/                            # Project source code
β”‚   β”œβ”€β”€ home/
β”‚   β”‚   β”œβ”€β”€ actions.ts              # Main component http actions
β”‚   β”‚   β”œβ”€β”€ index.css               # Main component stylesheet
β”‚   β”‚   └── index.tsx               # Main component
β”‚   β”œβ”€β”€ global.css                  # Main stylesheet
β”‚   β”œβ”€β”€ main.tsx                    # Main scripts
β”‚   └── vite-env.d.ts               # Project type definitions
β”œβ”€β”€ index.html                      # Main template file
β”œβ”€β”€ tsconfig.json                   # TypeScript configuration file
β”œβ”€β”€ tsconfig.node.json              # Vite typescript configuration file
└── vite.config.ts                  # Vite configuration file

Building the project

Installations Required:

  • Node
  • (Optional) Yarn
  1. Fire up your terminal inside the project folder.

  2. Build the project by running:

    npm run build
    

    Note: If you have installed Yarn, run these instead:

    yarn build
    
  3. This should generate a /dist folder inside the project folder.

Project tasks

Task automation is based on Yarn scripts or NPM scripts.

Task Description
yarn dev Run development server on http://localhost:3000/
yarn build Build production code

Built with

About

πŸŽ¬πŸ“± Lightweight MPC-HC Remote used on mobile browsers using PreactJS and Vite

Topics

Resources

Stars

Watchers

Forks