update
This commit is contained in:
parent
63edb7268f
commit
8035b1038f
2 changed files with 22 additions and 20 deletions
36
README.md
36
README.md
|
@ -1,5 +1,7 @@
|
|||
# Zorn
|
||||
|
||||
![](https://img.sudovanilla.com/TojaBMo.png)
|
||||
|
||||
> Currently in beta stages.
|
||||
|
||||
### To Do List
|
||||
|
@ -17,14 +19,14 @@
|
|||
### NPM
|
||||
Install from NPM:
|
||||
```bash
|
||||
npm install plyx-player
|
||||
npm install @sudovanilla/zorn
|
||||
```
|
||||
|
||||
### Yarn PnP
|
||||
If you are using Yarn it's PnP feature enabled, please unplug Plyx Player, add the following to your package.json file:
|
||||
If you are using Yarn it's PnP feature enabled, please unplug Zorn Player, add the following to your package.json file:
|
||||
```json
|
||||
"dependenciesMeta": {
|
||||
"plyx-player": {
|
||||
"@sudovanilla/zorn": {
|
||||
"unplugged": true
|
||||
}
|
||||
}
|
||||
|
@ -35,11 +37,11 @@ Also make sure you are setting the correct path to the script and css file when
|
|||
### HTML5
|
||||
Add the stylesheet and script:
|
||||
```html
|
||||
<link rel="stylesheet" href="/node_modules/plyx-player/src/styles/app.css">
|
||||
<script src="/node_modules/plyx-player/src/index.js" type="module"></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 Pylx uses:
|
||||
Also add the Font Awesome that the Zorn uses:
|
||||
```html
|
||||
<script src="https://kit.fontawesome.com/ecedfeb6bc.js" crossorigin="anonymous"></script>
|
||||
```
|
||||
|
@ -50,25 +52,25 @@ This kit is a Pro kit provided by SudoVanilla, it has only a limited amount icon
|
|||
</details>
|
||||
|
||||
|
||||
Then, add the class name `plyx-player` to the `<video>` element and make sure it's wrapped around a div contained with the class name `video-container`:
|
||||
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="plyx-player" src="video.mp4"></video>
|
||||
<video class="zorn-player" src="video.mp4"></video>
|
||||
</div>
|
||||
```
|
||||
|
||||
___
|
||||
|
||||
### Express
|
||||
Route the files required for Pylx Player to work in Express (Tested with PokeTube):
|
||||
Route the files required for Zorn Player to work in Express (Tested with PokeTube):
|
||||
```
|
||||
const PylxDirectory = "./node_modules/plyx-player"
|
||||
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: PylxDirectory })})
|
||||
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: PylxDirectory })})
|
||||
app.get("/player/functions/length.js", function (req, res) {res.sendFile("/src/functions/length.js", { 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 })})
|
||||
}
|
||||
```
|
||||
|
||||
|
@ -78,14 +80,14 @@ Add the stylesheet and script:
|
|||
<script src="/player/index.js" type="module"></script>
|
||||
```
|
||||
|
||||
Also add the Font Awesome Kit that is included with Plyx:
|
||||
Also add the Font Awesome Kit that is included with zorn:
|
||||
```html
|
||||
<script src="/node_modules/plyx-player/src/icons/fa-kit/js/all.js" crossorigin="anonymous"></script>
|
||||
<script src="/node_modules/@sudovanilla/zorn/src/icons/fa-kit/js/all.js" crossorigin="anonymous"></script>
|
||||
```
|
||||
|
||||
|
||||
Then, add the class name `plyx-player` to the `<video>` element and make sure it's wrapped around a div contained with the class name `video-container`:
|
||||
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="plyx-player" src="video.mp4"></video>
|
||||
<video class="zorn-player" src="video.mp4"></video>
|
||||
</div>
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "zorn",
|
||||
"version": "2024.02.25",
|
||||
"name": "@sudovanilla/zorn",
|
||||
"version": "2024.02.25-1",
|
||||
"description": "Custom player for HTML5",
|
||||
"author": "sudovanilla",
|
||||
"license": "AGPL-3.0-or-later",
|
||||
"bugs": {
|
||||
"url": "https://sudovanilla.com/code/Korbs/Zorn/issues",
|
||||
"email": "support@sduovanilla.com"
|
||||
"email": "support@sudovanilla.com"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "concurrently \"serve ./\" \"npm run sass\"",
|
||||
|
|
Reference in a new issue