MPC-HC Remote

Introduction

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

Using the project

Installations Required:

MPC-HC — https://github.com/clsid2/mpc-hc/releases
Node — https://nodejs.org/en/
(Optional) Yarn — https://classic.yarnpkg.com/en/docs/install

Steps:

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
```
Open the .env file on the project folder root.
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
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.
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
```
Create a webroot folder inside the MPC-HC folder
Copy contents of the /dist folder generated earlier from the build from #3 inside the webroot folder
Open up the options of MPC-HC under View > Options
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
Open any video file
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

Download the latest Node version. This is marked as <version number> Current. Install it on your machine.
(Optional) Download Yarn. This is a faster package manager than the default npm one.

Clone the project and duplicate the ENV file

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

Install the dependencies then run the project
```
npm install
npm start
```
Note: If you have installed Yarn, run these instead:
```
yarn install
yarn start
```
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.scss              # Main component stylesheet
│   │   └── index.tsx               # Main component
│   ├── global.scss                 # 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

Fire up your terminal inside the project folder.
Build the project by running:
```
npm run build
```
Note: If you have installed Yarn, run these instead:
```
yarn build
```
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

Preact - Web Framework
TypeScript - Language syntax
Vite - Source Code Bundler
Sassy CSS (SCSS) - CSS pre-processor

RinMinase / mpc-remote