# Zorn

<div class="video-container">
    <video class="zorn-player" src="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm"></video>
</div>

## What is Zorn?
A custom HTMl5 video player for the web using vanilla JavaScript. 

## Installation
### Package Manager
With NPM:
```bash
npm install @sudovanilla/zorn
```

With Yarn:
```bash
yarn add @sudovanilla/zorn
```

With Bun:
```bash
bun add @sudovanilla/zorn
```

With PNPM:
```bash
pnpm 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 Zorn at the bottom of your HTML page:
```html
    ...
    </body>
    <script src="/zorn.js"></script>
</html>
```

Then, add a video to the page inside a div with the class name set to `video-container`. Inside this div, will be the video element with the class name set as `zorn-player`.
```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/zorn.js", function (req, res) {res.sendFile("/dist/index.js", { root: ZornDirectory })})
}
```

Add the stylesheet and script:
```html
<script src="/player/index.js"></script>
```

Then, add a video to the page inside a div with the class name set to `video-container`. Inside this div, will be the video element with the class name set as `zorn-player`.
```html
<div class="video-container">
    <video class="zorn-player" src="video.mp4"></video>
</div>
```