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

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`:
```html
<div class="video-container">

View file

@ -1,6 +1,6 @@
{
"name": "@sudovanilla/plyx-player",
"version": "0.1.0",
"version": "0.1.1",
"description": "Custom player for HTML5",
"author": "sudovanilla",
"license": "AGPL-3.0-or-later",

View file

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