Korbs/zorn-js
Archived
1
Fork 0
Code Activity

Add todo and instructions for Express

Browse source
This commit is contained in:
Korbs 2023-10-17 06:25:22 -04:00
parent 49ddc58ce8
commit ab26a5256b
1 changed files with 46 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
README.md
View file

@ -2,6 +2,14 @@
> Currently in beta stages.
### To Do List
- Add colors as root colors (Make changable by developer)
- Create layouts
- Create custom context-menu
- Create demo
- Create documentations
## Installing
The Plyx Player is available to download from SudoVanilla's registry, run:
```bash
@ -15,12 +23,11 @@ npm install @sudovanilla/plyx-player
```
## Usage
### HTML5
Add the stylesheet and script:
```html
...
<link rel="stylesheet" href="/node_modules/@sudovanilla/plyx-player/src/styles/app.css">
<script src="/node_modules/@sudovanilla/plyx-player/src/index.js" type="module">
...
```
Also add the Font Awesome that the Pylx uses:
@ -41,4 +48,40 @@ Then, add the class name `plyx-player` to the `<video>` element and make sure it
</div>
```
That's it, if you've linked the stylesheet and script correctly, it should work.
___
### Express
Route the files required for Pylx Player to work in Express (Tested with PokeTube):
```
const PylxDirectory = "./node_modules/@sudovanilla/plyx-player"
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.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 })})
}
```
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 that the Pylx 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 `plyx-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>
</div>