Korbs/zorn
Korbs/zorn
1
Fork 0
Code Issues Pull requests Activity

updaet

Browse source
This commit is contained in:
Korbs 2023-10-16 17:56:26 -04:00
parent 6c06233cf0
commit 49ddc58ce8
No known key found for this signature in database
3 changed files with 42 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
README.md
View file

@ -23,6 +23,17 @@ Add the stylesheet and 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`: 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 ```html
<div class="video-container"> <div class="video-container">

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "@sudovanilla/plyx-player", "name": "@sudovanilla/plyx-player",
"version": "0.1.0", "version": "0.1.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",

59
src/styles/app.css
View file

@ -8,6 +8,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
color: white;
} }
.plyx-player-controls { .plyx-player-controls {
display: inline-flex; display: inline-flex;
@ -20,21 +21,21 @@
background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75)); background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));
flex-direction: inherit; flex-direction: inherit;
} }
.row-1 { .video-container .row-1 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
padding-bottom: 12px; padding-bottom: 12px;
} }
.row-1-start { .video-container .row-1-start {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.row-1-end { .video-container .row-1-end {
display: flex; display: flex;
align-items: center; align-items: center;
} }
button { .video-container button {
aspect-ratio: 1; aspect-ratio: 1;
height: 32px; height: 32px;
width: 32px; width: 32px;
@ -43,27 +44,27 @@ button {
border: none; border: none;
margin: 0px 6px; margin: 0px 6px;
} }
button:hover { .video-container button:hover {
background: rgba(44, 44, 44, 0.6); background: rgba(44, 44, 44, 0.6);
border-radius: 6px; border-radius: 6px;
} }
#volume-button svg { .video-container #volume-button svg {
aspect-ratio: 1; aspect-ratio: 1;
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: white; fill: white;
padding: 3px 0px 0px 0px; padding: 3px 0px 0px 0px;
} }
.video-controls.hide { .video-container .video-controls.hide {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
.video-progress { .video-container .video-progress {
position: relative; position: relative;
height: 6.4px; height: 6.4px;
margin: 24px 0px; margin: 24px 0px;
} }
progress { .video-container progress {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
@ -74,29 +75,29 @@ progress {
position: absolute; position: absolute;
top: 0; top: 0;
} }
progress::-webkit-progress-bar { .video-container progress::-webkit-progress-bar {
background-color: #474545; background-color: #474545;
border-radius: 2px; border-radius: 2px;
} }
progress::-webkit-progress-value { .video-container progress::-webkit-progress-value {
background: red; background: red;
border-radius: 2px; border-radius: 2px;
} }
progress::-moz-progress-bar { .video-container progress::-moz-progress-bar {
border: none; border: none;
background: #ff7e7e; background: #ff7e7e;
} }
.seek { .video-container .seek {
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
} }
.seek:hover + .seek-tooltip { .video-container .seek:hover + .seek-tooltip {
display: block; display: block;
} }
.seek-tooltip { .video-container .seek-tooltip {
display: none; display: none;
position: absolute; position: absolute;
top: -50px; top: -50px;
@ -108,30 +109,30 @@ progress::-moz-progress-bar {
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
} }
input[type=range] { .video-container input[type=range] {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
height: 8.4px; height: 8.4px;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
} }
input[type=range]:focus { .video-container input[type=range]:focus {
outline: none; outline: none;
} }
input[type=range]:focus::-webkit-slider-runnable-track { .video-container input[type=range]:focus::-webkit-slider-runnable-track {
background: transparent; background: transparent;
} }
input[type=range]:focus::-moz-range-track { .video-container input[type=range]:focus::-moz-range-track {
outline: none; outline: none;
} }
input[type=range]::-webkit-slider-runnable-track { .video-container input[type=range]::-webkit-slider-runnable-track {
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
border-radius: 1.3px; border-radius: 1.3px;
-webkit-appearance: none; -webkit-appearance: none;
transition: all 0.4s ease; transition: all 0.4s ease;
} }
input[type=range]::-webkit-slider-thumb { .video-container input[type=range]::-webkit-slider-thumb {
height: 16px; height: 16px;
width: 16px; width: 16px;
border-radius: 16px; border-radius: 16px;
@ -140,7 +141,7 @@ input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
margin-left: -1px; margin-left: -1px;
} }
input[type=range]::-moz-range-track { .video-container input[type=range]::-moz-range-track {
width: 100%; width: 100%;
height: 8.4px; height: 8.4px;
cursor: pointer; cursor: pointer;
@ -148,24 +149,24 @@ input[type=range]::-moz-range-track {
background: transparent; background: transparent;
border-radius: 0; border-radius: 0;
} }
input[type=range].volume { .video-container input[type=range].volume {
height: 5px; height: 5px;
background-color: #fff; background-color: #fff;
} }
input[type=range].volume::-webkit-slider-runnable-track { .video-container input[type=range].volume::-webkit-slider-runnable-track {
background-color: transparent; background-color: transparent;
} }
input[type=range].volume::-webkit-slider-thumb { .video-container input[type=range].volume::-webkit-slider-thumb {
margin-left: 0; margin-left: 0;
height: 14px; height: 14px;
width: 14px; width: 14px;
background: #fff; background: #fff;
} }
input[type=range].volume::-moz-range-thumb { .video-container input[type=range].volume::-moz-range-thumb {
border: 1px solid #fff; border: 1px solid #fff;
background: #fff; background: #fff;
} }
input[type="range"]::-moz-range-thumb { .video-container input[type="range"]::-moz-range-thumb {
height: 12px; height: 12px;
width: 12px; width: 12px;
border-radius: 10px; border-radius: 10px;
@ -173,11 +174,11 @@ input[type="range"]::-moz-range-thumb {
background: #f00; background: #f00;
cursor: pointer; cursor: pointer;
} }
.hide { .video-container .hide {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
#progress-bar { .video-container #progress-bar {
background: rgba(12, 12, 12, 0.1); background: rgba(12, 12, 12, 0.1);
border: none; border: none;
border-radius: 10px; border-radius: 10px;