Create test page

This commit is contained in:
Korbs 2023-10-17 08:45:17 -04:00
parent f46ebc6330
commit 7d0b63ae63
No known key found for this signature in database
8 changed files with 313 additions and 185 deletions

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
node_modules

3
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"git.ignoreLimitWarning": true
}

BIN
bun.lockb Executable file

Binary file not shown.

View file

@ -7,5 +7,14 @@
"bugs": { "bugs": {
"url": "https://sudovanilla.com/code/Korbs/Plyx-Player/issues", "url": "https://sudovanilla.com/code/Korbs/Plyx-Player/issues",
"email": "support@sduovanilla.com" "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"
} }
} }

View file

@ -1,185 +1 @@
.plyx-player { :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}
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;
}

204
src/styles/app.scss Normal file
View 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;
}
}
}

Binary file not shown.

95
test/index.html Normal file
View 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>