Zorn

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:

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:

"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:

<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:

<script src="https://kit.fontawesome.com/ecedfeb6bc.js" crossorigin="anonymous"></script>

About this Font Awesome Pro Kit

This kit is a Pro kit provided by SudoVanilla, it has only a limited amount icons that can be used since subsetting is used.

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:

<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:

<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:

<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:

<div class="video-container">
    <video class="zorn-player" src="video.mp4"></video>
</div>