diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..3b66410 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "git.ignoreLimitWarning": true +} \ No newline at end of file diff --git a/bun.lockb b/bun.lockb new file mode 100755 index 0000000..6970c73 Binary files /dev/null and b/bun.lockb differ diff --git a/package.json b/package.json index f544fa2..313e3bb 100644 --- a/package.json +++ b/package.json @@ -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" } } \ No newline at end of file diff --git a/src/styles/app.css b/src/styles/app.css index 6735035..0fd2f45 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -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} diff --git a/src/styles/app.scss b/src/styles/app.scss new file mode 100644 index 0000000..30365b5 --- /dev/null +++ b/src/styles/app.scss @@ -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; + } + } +} diff --git a/test/WING IT! - Blender Open Movie-1080p.mp4 b/test/WING IT! - Blender Open Movie-1080p.mp4 new file mode 100644 index 0000000..2e10c2e Binary files /dev/null and b/test/WING IT! - Blender Open Movie-1080p.mp4 differ diff --git a/test/index.html b/test/index.html new file mode 100644 index 0000000..1c458b4 --- /dev/null +++ b/test/index.html @@ -0,0 +1,95 @@ + + + + + + + + + + Plyx Player + + + + + +

Plyx Player By SudoVanilla

+
+ +
+
+

WING IT! By Blender Studio

+
+ + + + \ No newline at end of file