Create test page
This commit is contained in:
Korbs
parent
f46ebc6330
commit
7d0b63ae63
8 changed files with 313 additions and 185 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
node_modules
|
||||
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"git.ignoreLimitWarning": true
|
||||
}
|
||||
BIN
bun.lockb
Executable file
BIN
bun.lockb
Executable file
Binary file not shown.
|
|
@ -7,5 +7,14 @@
|
|||
"bugs": {
|
||||
"url": "https://sudovanilla.com/code/Korbs/Plyx-Player/issues",
|
||||
"email": "support@sduovanilla.com"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "concurrently \"serve ./\" \"npm run sass\"",
|
||||
"sass": "sass -q --watch src/styles/app.scss:src/styles/app.css --style=compressed --no-source-map"
|
||||
},
|
||||
"dependencies": {
|
||||
"concurrently": "^8.2.1",
|
||||
"sass": "^1.69.3",
|
||||
"serve": "^14.2.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,185 +1 @@
|
|||
.plyx-player {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
}
|
||||
.video-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: white;
|
||||
}
|
||||
.plyx-player-controls {
|
||||
display: inline-flex;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transition: all 0.2s ease;
|
||||
background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));
|
||||
flex-direction: inherit;
|
||||
}
|
||||
.video-container .row-1 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.video-container .row-1-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.video-container .row-1-end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.video-container button {
|
||||
aspect-ratio: 1;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
margin: 0px 6px;
|
||||
}
|
||||
.video-container button:hover {
|
||||
background: rgba(44, 44, 44, 0.6);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.video-container #volume-button svg {
|
||||
aspect-ratio: 1;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
fill: white;
|
||||
padding: 3px 0px 0px 0px;
|
||||
}
|
||||
.video-container .video-controls.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.video-container .video-progress {
|
||||
position: relative;
|
||||
height: 6.4px;
|
||||
margin: 24px 0px;
|
||||
}
|
||||
.video-container progress {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
height: 8.4px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.video-container progress::-webkit-progress-bar {
|
||||
background-color: #474545;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.video-container progress::-webkit-progress-value {
|
||||
background: red;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.video-container progress::-moz-progress-bar {
|
||||
border: none;
|
||||
background: #ff7e7e;
|
||||
}
|
||||
.video-container .seek {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
.video-container .seek:hover + .seek-tooltip {
|
||||
display: block;
|
||||
}
|
||||
.video-container .seek-tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
margin-left: -20px;
|
||||
font-size: 12px;
|
||||
padding: 3px;
|
||||
content: attr(data-title);
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.video-container input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
height: 8.4px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.video-container input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
.video-container input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
background: transparent;
|
||||
}
|
||||
.video-container input[type=range]:focus::-moz-range-track {
|
||||
outline: none;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.video-container input[type=range]::-webkit-slider-thumb {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 16px;
|
||||
background: red;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.video-container input[type=range]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 8.4px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
.video-container input[type=range].volume {
|
||||
height: 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.video-container input[type=range].volume::-webkit-slider-runnable-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
.video-container input[type=range].volume::-webkit-slider-thumb {
|
||||
margin-left: 0;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
background: #fff;
|
||||
}
|
||||
.video-container input[type=range].volume::-moz-range-thumb {
|
||||
border: 1px solid #fff;
|
||||
background: #fff;
|
||||
}
|
||||
.video-container input[type="range"]::-moz-range-thumb {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
background: #f00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.video-container .hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.video-container #progress-bar {
|
||||
background: rgba(12, 12, 12, 0.1);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
:root{--plyx-progress-bar-bg: rgba(100,100,100,0.5);--plyx-progress-bar: rgba(255, 0, 0, 0.5);--pylx-thumb: red;--pylx-rounded-corners: 4px}.video-container{position:relative;display:flex;flex-direction:column;justify-content:center;font-family:Arial,Helvetica,sans-serif;color:#fff}.video-container .plyx-player{display:inline-flex}.video-container .plyx-player-controls{display:inline-flex;right:0;left:0;padding:10px;position:absolute;bottom:0;transition:all .2s ease;background-image:linear-gradient(to bottom, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));flex-direction:inherit}.video-container .plyx-player-controls .row-1{display:flex;justify-content:space-between;width:100%;padding-bottom:12px}.video-container .plyx-player-controls .row-1-start{display:flex;align-items:center}.video-container .plyx-player-controls .row-1-end{display:flex;align-items:center}.video-container .plyx-player-controls button{aspect-ratio:1;height:32px;width:32px;color:#fff;background-color:rgba(0,0,0,0);border:none;margin:0px 6px}.video-container .plyx-player-controls button:hover{background:rgba(44,44,44,.6);border-radius:6px}.video-container .plyx-player-controls #volume-button svg{aspect-ratio:1;height:32px;width:32px;fill:#fff;padding:3px 0px 0px 0px}.video-container .plyx-player-controls .video-controls.hide{opacity:0;pointer-events:none}.video-container .plyx-player-controls .video-progress{position:relative;height:6.4px;margin:24px 0px}.video-container .plyx-player-controls progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:2px;width:100%;height:8.4px;pointer-events:none;position:absolute;top:0}.video-container .plyx-player-controls progress::-webkit-progress-bar{border-radius:2px}.video-container .plyx-player-controls progress::-webkit-progress-value{background:rgba(0,0,0,0);border-radius:2px}.video-container .plyx-player-controls progress::-moz-progress-bar{border:none;background:#ff7e7e}.video-container .plyx-player-controls .seek{position:absolute;top:0;width:100%;cursor:pointer;margin:0}.video-container .plyx-player-controls .seek:hover+.seek-tooltip{display:block}.video-container .plyx-player-controls .seek-tooltip{display:none;position:absolute;top:-32px;margin-left:-30px;font-size:12px;padding:3px;content:attr(data-title);font-weight:bold;color:#fff;background-color:rgba(0,0,0,.6);border-radius:4px;padding:6px}.video-container .plyx-player-controls input[type=range]{height:8.4px;background:rgba(0,0,0,0);cursor:pointer}.video-container .plyx-player-controls input[type=range]:focus{outline:none}.video-container .plyx-player-controls input[type=range]:focus::-webkit-slider-runnable-track{background:rgba(0,0,0,0)}.video-container .plyx-player-controls input[type=range]:focus::-moz-range-track{outline:none}.video-container .plyx-player-controls input[type=range]::-webkit-slider-runnable-track{width:100%;cursor:pointer;border-radius:1.3px;-webkit-appearance:none;transition:all .4s ease}.video-container .plyx-player-controls input[type=range]::-webkit-slider-thumb{height:12px;width:12px;border-radius:10px;background:var(--pylx-thumb);cursor:pointer;-webkit-appearance:none;margin-left:-1px}.video-container .plyx-player-controls input[type=range]::-moz-range-track{width:100%;height:8.4px;cursor:pointer;border:1px solid rgba(0,0,0,0);background:rgba(0,0,0,0);border-radius:0}.video-container .plyx-player-controls input[type=range].volume{height:5px;background-color:#fff}.video-container .plyx-player-controls input[type=range].volume::-webkit-slider-runnable-track{background-color:rgba(0,0,0,0)}.video-container .plyx-player-controls input[type=range].volume::-webkit-slider-thumb{margin-left:0;height:14px;width:14px;background:#fff}.video-container .plyx-player-controls input[type=range].volume::-moz-range-thumb{border:1px solid #fff;background:#fff}.video-container .plyx-player-controls input[type=range]::-moz-range-thumb{height:12px;width:12px;border-radius:10px;border:none;background:var(--pylx-thumb);cursor:pointer}.video-container .plyx-player-controls .hide{opacity:0;pointer-events:none}.video-container .plyx-player-controls #progress-bar{background:var(--plyx-progress-bar-bg);border:none;border-radius:10px}
|
||||
|
|
|
|||
204
src/styles/app.scss
Normal file
204
src/styles/app.scss
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
$color_1: white;
|
||||
$color_2: #fff;
|
||||
$font-family_1: Arial, Helvetica, sans-serif;
|
||||
$background-color_1: transparent;
|
||||
$background-color_2: rgba(0, 0, 0, 0.6);
|
||||
$background-color_3: #fff;
|
||||
|
||||
:root {
|
||||
--plyx-progress-bar-bg: rgba(100,100,100,0.5);
|
||||
--plyx-progress-bar: rgba(255, 0, 0, 0.5);
|
||||
--pylx-thumb: red;
|
||||
--pylx-rounded-corners: 4px;
|
||||
}
|
||||
.video-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-family: $font-family_1;
|
||||
color: $color_1;
|
||||
.plyx-player {
|
||||
display: inline-flex;
|
||||
}
|
||||
.plyx-player-controls {
|
||||
display: inline-flex;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transition: all 0.2s ease;
|
||||
background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));
|
||||
flex-direction: inherit;
|
||||
.row-1 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.row-1-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.row-1-end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
button {
|
||||
aspect-ratio: 1;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
color: $color_1;
|
||||
background-color: $background-color_1;
|
||||
border: none;
|
||||
margin: 0px 6px;
|
||||
&:hover {
|
||||
background: rgba(44, 44, 44, 0.6);
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
#volume-button {
|
||||
svg {
|
||||
aspect-ratio: 1;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
fill: white;
|
||||
padding: 3px 0px 0px 0px;
|
||||
}
|
||||
}
|
||||
.video-controls.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.video-progress {
|
||||
position: relative;
|
||||
height: 6.4px;
|
||||
margin: 24px 0px;
|
||||
}
|
||||
progress {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
height: 8.4px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
&::-webkit-progress-bar {
|
||||
border-radius: 2px;
|
||||
}
|
||||
&::-webkit-progress-value {
|
||||
background: transparent;
|
||||
border-radius: 2px;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
border: none;
|
||||
background: #ff7e7e;
|
||||
}
|
||||
}
|
||||
.seek {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
&:hover {
|
||||
+ {
|
||||
.seek-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.seek-tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -32px;
|
||||
margin-left: -30px;
|
||||
font-size: 12px;
|
||||
padding: 3px;
|
||||
content: attr(data-title);
|
||||
font-weight: bold;
|
||||
color: $color_2;
|
||||
background-color: $background-color_2;
|
||||
border-radius: 4px;
|
||||
padding: 6px;
|
||||
}
|
||||
input[type=range] {
|
||||
height: 8.4px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
&:focus {
|
||||
outline: none;
|
||||
&::-webkit-slider-runnable-track {
|
||||
background: transparent;
|
||||
}
|
||||
&::-moz-range-track {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
&::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
border-radius: 1.3px;
|
||||
-webkit-appearance: none;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 10px;
|
||||
background: var(--pylx-thumb);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-left: -1px;
|
||||
}
|
||||
&::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 8.4px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
input[type=range].volume {
|
||||
height: 5px;
|
||||
background-color: $background-color_3;
|
||||
&::-webkit-slider-runnable-track {
|
||||
background-color: $background-color_1;
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
margin-left: 0;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
background: #fff;
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
border: 1px solid #fff;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
input[type="range"] {
|
||||
&::-moz-range-thumb {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
background: var(--pylx-thumb);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#progress-bar {
|
||||
background: var(--plyx-progress-bar-bg);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
test/WING IT! - Blender Open Movie-1080p.mp4
Normal file
BIN
test/WING IT! - Blender Open Movie-1080p.mp4
Normal file
Binary file not shown.
95
test/index.html
Normal file
95
test/index.html
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<!-- Credits -->
|
||||
<!-- The video shown here is called "WING IT!" -->
|
||||
<!-- It created by Blender Studio and Rik Schutte -->
|
||||
<!-- Also available to watch on their official PeerTube: -->
|
||||
<!-- https://video.blender.org/w/vrjS4NB4cwnJhrib8uEwi6 -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Plyx Player</title>
|
||||
<link rel="stylesheet" href="/src/styles/app.css">
|
||||
<script src="/src/index.js" type="module"></script>
|
||||
<script src="https://kit.fontawesome.com/ecedfeb6bc.js" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Plyx Player <span>By SudoVanilla</span></p>
|
||||
<div class="video-container">
|
||||
<video class="plyx-player" src="WING IT! - Blender Open Movie-1080p.mp4"></video>
|
||||
</div>
|
||||
<div class="credits">
|
||||
<p><a href="https://video.blender.org/w/vrjS4NB4cwnJhrib8uEwi6">WING IT!</a> <span>By Blender Studio</span></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #090909;
|
||||
color: white;
|
||||
font-family: arial;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
video {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
background-image: url(https://video.blender.org/lazy-static/previews/3f6a8580-1bac-4513-ae59-2df7d032ba4f.jpg);
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 0.06;
|
||||
filter: blur(10px);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
body > p:nth-child(1) {
|
||||
font-size: 24px;
|
||||
margin: auto;
|
||||
max-width: 1800px;
|
||||
padding-top: 24px;
|
||||
font-weight: bold;
|
||||
padding-left: 24px;
|
||||
}
|
||||
.credits > p:nth-child(2) {
|
||||
opacity: 0.5;
|
||||
font-size: 14px;
|
||||
margin: 0px;
|
||||
}
|
||||
span {
|
||||
opacity: 0.5;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.credits {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
width: 100%;
|
||||
max-width: 1800px;
|
||||
margin: auto;
|
||||
text-align: right;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
padding-right: 48px;
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
max-width: 1800px;
|
||||
width: calc(100% - 48px);
|
||||
}
|
||||
</style>
|
||||
Reference in a new issue