# Zorn

![](https://img.sudovanilla.com/TojaBMo.png)

> Currently in beta stages.

### To Do List
 - Add colors as root colors (Make changable by developer)
 - Add mobile support
 - Create options
 - Create layouts
 - Create custom context-menu
 - Create demo
 - Create documentations
 - Ignore keyboard shortcuts if an input is active


## Installing
### NPM
Install from NPM:
```bash
npm install @sudovanilla/zorn
```

### Yarn PnP
If you are using Yarn it's PnP feature enabled, please unplug Zorn Player, add the following to your package.json file:
```json
"dependenciesMeta": {
    "@sudovanilla/zorn": {
      "unplugged": true
    }
}
```
Also make sure you are setting the correct path to the script and css file when adding them to your website or app.

## Usage
### HTML5
Add the stylesheet and script:
```html
<link rel="stylesheet" href="/node_modules/@sudovanilla/zorn/src/styles/app.css">
<script src="/node_modules/@sudovanilla/zorn/src/index.js" type="module"></script>
```

Also add the Font Awesome that the Zorn uses:
```html
<script src="https://kit.fontawesome.com/ecedfeb6bc.js" crossorigin="anonymous"></script>
```

<details>
<summary>About this Font Awesome Pro Kit</summary>
This kit is a Pro kit provided by SudoVanilla, it has only a limited amount icons that can be used since subsetting is used.
</details>


Then, add the class name `zorn-player` to the `<video>` element and make sure it's wrapped around a div contained with the class name `video-container`:
```html
<div class="video-container">
    <video class="zorn-player" src="video.mp4"></video>
</div>
```

___

### Express
Route the files required for Zorn Player to work in Express (Tested with PokeTube):
```
const ZornDirectory = "./node_modules/@sudovanilla/zorn"
module.exports = function (app, config, renderTemplate) {
    app.get("/player/index.js", function (req, res) {res.sendFile("/src/index.js", { root: ZornDirectory })})
    app.get("/player/index.css", function (req, res) {res.sendFile("/src/styles/app.css", { root: PylxDirectory })})

    app.get("/player/functions/buttons.js", function (req, res) {res.sendFile("/src/functions/buttons.js", { root: ZornDirectory })})
    app.get("/player/functions/length.js", function (req, res) {res.sendFile("/src/functions/length.js", { root: ZornDirectory })})
}
```

Add the stylesheet and script:
```html
<link rel="stylesheet" href="/player/index.css">
<script src="/player/index.js" type="module"></script>
```

Also add the Font Awesome Kit that is included with zorn:
```html
<script src="/node_modules/@sudovanilla/zorn/src/icons/fa-kit/js/all.js" crossorigin="anonymous"></script>
```


Then, add the class name `zorn-player` to the `<video>` element and make sure it's wrapped around a div contained with the class name `video-container`:
```html
<div class="video-container">
    <video class="zorn-player" src="video.mp4"></video>
</div>