Korbs/zorn-js
Archived
1
Fork 0
Code Issues Pull requests Activity

update

Browse source
This commit is contained in:
Korbs 2024-02-25 03:26:46 -05:00
parent 63edb7268f
commit 8035b1038f
No known key found for this signature in database
2 changed files with 22 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
README.md
View file

@ -1,5 +1,7 @@
# Zorn # Zorn
![](https://img.sudovanilla.com/TojaBMo.png)
> Currently in beta stages. > Currently in beta stages.
### To Do List ### To Do List
@ -17,14 +19,14 @@
### NPM ### NPM
Install from NPM: Install from NPM:
```bash ```bash
npm install plyx-player npm install @sudovanilla/zorn
``` ```
### Yarn PnP ### 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 ```json
"dependenciesMeta": { "dependenciesMeta": {
"plyx-player": { "@sudovanilla/zorn": {
"unplugged": true "unplugged": true
} }
} }
@ -35,11 +37,11 @@ Also make sure you are setting the correct path to the script and css file when
### HTML5 ### HTML5
Add the stylesheet and script: Add the stylesheet and script:
```html ```html
<link rel="stylesheet" href="/node_modules/plyx-player/src/styles/app.css"> <link rel="stylesheet" href="/node_modules/@sudovanilla/zorn/src/styles/app.css">
<script src="/node_modules/plyx-player/src/index.js" type="module"></script> <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 ```html
<script src="https://kit.fontawesome.com/ecedfeb6bc.js" crossorigin="anonymous"></script> <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> </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 ```html
<div class="video-container"> <div class="video-container">
<video class="plyx-player" src="video.mp4"></video> <video class="zorn-player" src="video.mp4"></video>
</div> </div>
``` ```
___ ___
### Express ### 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) { 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/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/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: PylxDirectory })}) 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> <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 ```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 ```html
<div class="video-container"> <div class="video-container">
<video class="plyx-player" src="video.mp4"></video> <video class="zorn-player" src="video.mp4"></video>
</div> </div>

6
package.json
View file

@ -1,12 +1,12 @@
{ {
"name": "zorn", "name": "@sudovanilla/zorn",
"version": "2024.02.25", "version": "2024.02.25-1",
"description": "Custom player for HTML5", "description": "Custom player for HTML5",
"author": "sudovanilla", "author": "sudovanilla",
"license": "AGPL-3.0-or-later", "license": "AGPL-3.0-or-later",
"bugs": { "bugs": {
"url": "https://sudovanilla.com/code/Korbs/Zorn/issues", "url": "https://sudovanilla.com/code/Korbs/Zorn/issues",
"email": "support@sduovanilla.com" "email": "support@sudovanilla.com"
}, },
"scripts": { "scripts": {
"test": "concurrently \"serve ./\" \"npm run sass\"", "test": "concurrently \"serve ./\" \"npm run sass\"",