Archived

This repository has been archived on 2024-09-29. You can view files and clone it, but cannot push or open issues or pull requests.

Korbs 45a9034c19

Use NPM official repo

2023-11-06 02:09:42 -05:00

2.6 KiB

Raw Blame History

Plyx-Player

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

Install from NPM:

npm install plyx-player

Usage

HTML5

Add the stylesheet and script:

<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"></script>

Also add the Font Awesome that the Pylx 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 plyx-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="plyx-player" src="video.mp4"></video>
</div>

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 })})
}