diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 3b66410..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "git.ignoreLimitWarning": true -} \ No newline at end of file diff --git a/bun.lockb b/bun.lockb index 6970c73..768f9c5 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index d6513d5..59fd7e8 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { - "name": "plyx-player", - "version": "2023.12.14", + "name": "zorn", + "version": "2024.02.25", "description": "Custom player for HTML5", "author": "sudovanilla", "license": "AGPL-3.0-or-later", "bugs": { - "url": "https://sudovanilla.com/code/Korbs/Plyx-Player/issues", + "url": "https://sudovanilla.com/code/Korbs/Zorn/issues", "email": "support@sduovanilla.com" }, "scripts": { diff --git a/src/functions/buttons.js b/src/functions/buttons.js index ea269fc..93c658b 100644 --- a/src/functions/buttons.js +++ b/src/functions/buttons.js @@ -1,10 +1,10 @@ -const video = document.querySelector('.plyx-player') +const video = document.querySelector('.zorn-player') const videoContainer = document.querySelector('.video-container') // Events video.addEventListener('error', function(event) { document.querySelector('#invalid-src').style.display = 'inherit' - document.querySelector('.plyx-player-controls').style.display = 'none' + document.querySelector('.zorn-player-controls').style.display = 'none' videoContainer.style.backgroundColor = '#101010' setTimeout(() => { video.style.opacity = '0.10' @@ -25,11 +25,11 @@ video.oncanplaythrough = (event) => { function AddDialogs() { var add_dialogs = ` -
-
+
+

-
+

Failed to Load

@@ -39,15 +39,11 @@ function AddDialogs() { function AddControls() { if (video.getAttribute('layout') === 'default') { + var ZornTitleArea = document.querySelector(".video-container > h2") + var VideoTitle = video.getAttribute('title') var add_controls = ` -
-
-
- - -
00:00
-
-
+

+
@@ -58,6 +54,13 @@ function AddControls() {
+
+
+ + +
00:00
+
+
@@ -77,13 +80,19 @@ function AddControls() { video.insertAdjacentHTML("afterend", add_controls) - // video.setAttribute("oncontextmenu", "return false") + if (video.hasAttribute('title')) { + document.querySelector(".video-container .zorn-title").style.dispaly = 'inherit' + document.querySelector(".video-container > h2").innerText = VideoTitle + } else { + null + } + video.setAttribute("oncontextmenu", "return false") } function Util() { - const videoControls = document.querySelector('.plyx-player-controls') + const videoControls = document.querySelector('.zorn-player-controls') // Subtitles - var subtitles = document.querySelector('.plyx-player-controls #subtitles'); + var subtitles = document.querySelector('.zorn-player-controls #subtitles'); var subtitleMenuButtons = []; var createMenuItem = function(id, lang, label) { var listItem = document.createElement('li'); @@ -131,7 +140,7 @@ function Util() { }); // Play/Plause - const Button_PlayPause = document.querySelector('.plyx-player-controls #play-pause') + const Button_PlayPause = document.querySelector('.zorn-player-controls #play-pause') Button_PlayPause.addEventListener('click', Toggle_PlayPause) video.addEventListener('click', Toggle_PlayPause) @@ -180,8 +189,8 @@ function Util() { videoContainer.addEventListener('fullscreenchange', Update_FullscreenButton) // Skip Back or Forth - const Button_SkipBack = document.querySelector('.plyx-player-controls #skip-back') - const Button_SkipForth = document.querySelector('.plyx-player-controls #skip-forth') + const Button_SkipBack = document.querySelector('.zorn-player-controls #skip-back') + const Button_SkipForth = document.querySelector('.zorn-player-controls #skip-forth') Button_SkipBack.addEventListener('click', Toggle_SkipBack) Button_SkipForth.addEventListener('click', Toggle_SkipForth) @@ -290,18 +299,22 @@ function Util() { // Auto Hide Controls function Hide_Controls() { + var ZornTitleArea = document.querySelector(".video-container > h2") if (video.paused) { return } videoControls.classList.add('hide') subtitlesMenu.classList.add('hide') + ZornTitleArea.classList.add('hide') } // Show_Controls displays the video controls function Show_Controls() { + var ZornTitleArea = document.querySelector(".video-container > h2") videoControls.classList.remove('hide') subtitlesMenu.classList.remove('hide') + ZornTitleArea.classList.remove('hide') } video.addEventListener('mouseenter', Show_Controls) video.addEventListener('mouseleave', Hide_Controls) diff --git a/src/functions/length.js b/src/functions/length.js index ba4bd83..973f6d4 100644 --- a/src/functions/length.js +++ b/src/functions/length.js @@ -1,4 +1,4 @@ -const video = document.querySelector('.plyx-player') +const video = document.querySelector('.zorn-player') function VideoLength() { // Duration and Length of Video diff --git a/src/styles/app.css b/src/styles/app.css index 86ade0f..c27995e 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -1 +1 @@ -: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}.plyx-context-menu{background:linear-gradient(45deg, rgb(10, 20, 28) 0%, rgb(10, 20, 28) 100%);border-radius:6px;border:1px rgba(255,255,255,.08) solid}.plyx-context-menu ul{list-style:none;margin:0px;padding:0px}.plyx-context-menu ul li{padding:8px 32px 8px 16px;margin:4px;border-radius:4px;font-family:arial}.plyx-context-menu ul li:hover{background:rgba(255,255,255,.1);cursor:pointer}.plyx-context-menu ul li i{font-size:14px;margin-right:12px;width:12px}.video-container{position:relative;display:flex;flex-direction:column;justify-content:center;font-family:Arial,Helvetica,sans-serif;color:#fff}.video-container .plyx-player-dialogs #buffering{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:0px 24px;border-radius:6px}.video-container .plyx-player-dialogs #buffering h2{font-size:52px}.video-container .plyx-player-dialogs #invalid-src{display:none;position:absolute;top:50%;left:24px;transform:translate(0px, -50%);padding:0px 24px;border-radius:6px}.video-container .plyx-player-dialogs #invalid-src h2{font-size:52px}.video-container .plyx-player{display:inline-flex}.video-container .hide{opacity:0;pointer-events:none}.video-container .plyx-player-title{position:absolute;top:0px;width:100%;background-image:linear-gradient(to top, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));padding:12px 24px;font-size:18px;font-weight:bold}.video-container .subtitles-menu{display:none;position:absolute;right:60px;bottom:80px;background:rgba(0,0,0,.6);list-style:none;padding:6px;border-radius:6px}.video-container .subtitles-menu button{background-color:rgba(0,0,0,0);color:#fff;border:none;border-radius:4px;width:100%;text-align:left;padding:6px 12px;cursor:pointer}.video-container .subtitles-menu button:hover{background:rgba(255,255,255,.1607843137)}.video-container .subtitles-menu .hide{opacity:0;pointer-events:none}.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-controls:hover>#volume{opacity:1;transition:.3s opacity,.3s width;margin:0px;width:72px}.video-container .plyx-player-controls #volume{opacity:0;transition:.3s opacity,.3s width;margin:0px -6px;width:0px}.video-container .plyx-player-controls #volume-button svg{aspect-ratio:1;height:16px;width:16px;fill:#fff;padding:3px 0px 0px 0px}.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:var(--plyx-progress-bar)}.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,.5);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} +:root{--zorn-progress-bar-bg: rgba(100,100,100,0.5);--zorn-progress-bar: rgba(255, 0, 0, 0.5);--zorn-thumb: red;--zorn-rounded-corners: 4px}.zorn-context-menu{background:linear-gradient(45deg, rgb(10, 20, 28) 0%, rgb(10, 20, 28) 100%);border-radius:6px;border:1px rgba(255,255,255,.08) solid}.zorn-context-menu ul{list-style:none;margin:0px;padding:0px}.zorn-context-menu ul li{padding:8px 32px 8px 16px;margin:4px;border-radius:4px;font-family:arial}.zorn-context-menu ul li:hover{background:rgba(255,255,255,.1);cursor:pointer}.zorn-context-menu ul li i{font-size:14px;margin-right:12px;width:12px}.video-container{position:relative;display:flex;flex-direction:column;justify-content:center;font-family:Arial,Helvetica,sans-serif;color:#fff}.video-container .zorn-player-dialogs #buffering{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:0px 24px;border-radius:6px}.video-container .zorn-player-dialogs #buffering h2{font-size:52px}.video-container .zorn-player-dialogs #invalid-src{display:none;position:absolute;top:50%;left:24px;transform:translate(0px, -50%);padding:0px 24px;border-radius:6px}.video-container .zorn-player-dialogs #invalid-src h2{font-size:52px}.video-container .zorn-player{display:inline-flex}.video-container .zorn-title{display:none;position:absolute;top:0px;background:rgba(17,17,17,.9);width:auto;margin:12px;padding:12px 24px;border-radius:10px;font-size:18px}.video-container .hide{opacity:0;pointer-events:none}.video-container .zorn-player-title{position:absolute;top:0px;width:100%;background-image:linear-gradient(to top, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));padding:12px 24px;font-size:18px;font-weight:bold}.video-container .subtitles-menu{display:none;position:absolute;right:60px;bottom:50px;background:rgba(0,0,0,.6);list-style:none;padding:6px;border-radius:6px}.video-container .subtitles-menu button{background-color:rgba(0,0,0,0);color:#fff;border:none;border-radius:4px;width:100%;text-align:left;padding:6px 12px;cursor:pointer}.video-container .subtitles-menu button:hover{background:rgba(255,255,255,.1607843137)}.video-container .subtitles-menu .hide{opacity:0;pointer-events:none}.video-container .zorn-player-controls{display:inline-flex;right:0;left:0;padding:10px;position:absolute;bottom:-1px;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 .zorn-player-controls .row-1{display:flex;justify-content:space-between;width:100%}.video-container .zorn-player-controls .row-1-start{display:flex;align-items:center}.video-container .zorn-player-controls .row-1-center{display:flex;width:calc(100% - 420px)}.video-container .zorn-player-controls .row-1-end{display:flex;align-items:center}.video-container .zorn-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 .zorn-player-controls button:hover{background:rgba(44,44,44,.6);border-radius:6px}.video-container .zorn-player-controls .volume-controls:hover>#volume{opacity:1;transition:.3s opacity,.3s width;margin:0px;width:72px}.video-container .zorn-player-controls #volume{opacity:0;transition:.3s opacity,.3s width;margin:0px -6px;width:0px}.video-container .zorn-player-controls #volume-button svg{aspect-ratio:1;height:16px;width:16px;fill:#fff;padding:3px 0px 0px 0px}.video-container .zorn-player-controls .video-progress{position:relative;height:6.4px;margin:24px 0px;width:100%}.video-container .zorn-player-controls progress{border-radius:1rem;width:100%;height:8.4px;position:absolute;top:0}.video-container .zorn-player-controls progress::-webkit-progress-bar{border-radius:1rem;background:var(--zorn-progress-bar-bg)}.video-container .zorn-player-controls progress::-webkit-progress-value{background:var(--zorn-progress-bar);border-radius:1rem}.video-container .zorn-player-controls progress::-moz-progress-bar{border-radius:1rem;background:var(--zorn-progress-bar-bg)}.video-container .zorn-player-controls .seek{position:absolute;top:0;width:100%;cursor:pointer;margin:0}.video-container .zorn-player-controls .seek:hover+.seek-tooltip{display:block}.video-container .zorn-player-controls .seek-tooltip{display:none;position:relative;top:-32px;margin-left:-230px;font-size:12px;content:attr(data-title);font-weight:bold;color:#fff;background-color:rgba(0,0,0,.5);border-radius:4px;padding:6px;width:fit-content}.video-container .zorn-player-controls input[type=range]{height:8.4px;background:rgba(0,0,0,0);cursor:pointer;opacity:0}.video-container .zorn-player-controls input[type=range]:focus{outline:none}.video-container .zorn-player-controls input[type=range]:focus::-webkit-slider-runnable-track{background:rgba(0,0,0,0)}.video-container .zorn-player-controls input[type=range]:focus::-moz-range-track{outline:none}.video-container .zorn-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 .zorn-player-controls input[type=range]::-webkit-slider-thumb{height:12px;width:12px;border-radius:10px;background:var(--zorn-thumb);cursor:pointer;-webkit-appearance:none;margin-left:-1px}.video-container .zorn-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 .zorn-player-controls input[type=range].volume{height:5px;background-color:#fff}.video-container .zorn-player-controls input[type=range].volume::-webkit-slider-runnable-track{background-color:rgba(0,0,0,0)}.video-container .zorn-player-controls input[type=range].volume::-webkit-slider-thumb{margin-left:0;height:14px;width:14px;background:#fff}.video-container .zorn-player-controls input[type=range].volume::-moz-range-thumb{border:1px solid #fff;background:#fff}.video-container .zorn-player-controls input[type=range]::-moz-range-thumb{height:12px;width:12px;border-radius:10px;border:none;background:var(--zorn-thumb);cursor:pointer}.video-container .zorn-player-controls .hide{opacity:0;pointer-events:none}.video-container .zorn-player-controls #progress-bar{background:var(--zorn-progress-bar-bg);border:none;border-radius:10px} diff --git a/src/styles/app.scss b/src/styles/app.scss index af798d4..55ec0d1 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -7,13 +7,13 @@ $background-color_3: #fff; $background-color_4: rgba(255, 255, 255, 0.1); :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; + --zorn-progress-bar-bg: rgba(100,100,100,0.5); + --zorn-progress-bar: rgba(255, 0, 0, 0.5); + --zorn-thumb: red; + --zorn-rounded-corners: 4px; } -.plyx-context-menu { +.zorn-context-menu { background: linear-gradient( 45deg, rgb(10, 20, 28) 0%, rgba(10, 20, 28, 1) 100% ); border-radius: 6px; border: 1px rgba(255, 255, 255, 0.08) solid; @@ -46,7 +46,7 @@ $background-color_4: rgba(255, 255, 255, 0.1); justify-content: center; font-family: $font-family_1; color: $color_1; - .plyx-player-dialogs { + .zorn-player-dialogs { #buffering { display: none; position: absolute; @@ -72,14 +72,25 @@ $background-color_4: rgba(255, 255, 255, 0.1); } } } - .plyx-player { + .zorn-player { display: inline-flex; } + .zorn-title { + display: none; + position: absolute; + top: 0px; + background: rgb(17 17 17 / 90%); + width: auto; + margin: 12px; + padding: 12px 24px; + border-radius: 10px; + font-size: 18px; + } .hide { opacity: 0; pointer-events: none; } - .plyx-player-title { + .zorn-player-title { position: absolute; top: 0px; width: 100%; @@ -92,7 +103,7 @@ $background-color_4: rgba(255, 255, 255, 0.1); display: none; position: absolute; right: 60px; - bottom: 80px; + bottom: 50px; background: #0009; list-style: none; padding: 6px; @@ -115,13 +126,13 @@ $background-color_4: rgba(255, 255, 255, 0.1); pointer-events: none; } } - .plyx-player-controls { + .zorn-player-controls { display: inline-flex; right: 0; left: 0; padding: 10px; position: absolute; - bottom: 0; + bottom: -1px; 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; @@ -129,12 +140,15 @@ $background-color_4: rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; width: 100%; - padding-bottom: 12px; } .row-1-start { display: flex; align-items: center; } + .row-1-center { + display: flex; + width: calc(100% - 420px); + } .row-1-end { display: flex; align-items: center; @@ -179,27 +193,25 @@ $background-color_4: rgba(255, 255, 255, 0.1); position: relative; height: 6.4px; margin: 24px 0px; + width: 100%; } progress { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 2px; + border-radius: 1rem; width: 100%; height: 8.4px; - pointer-events: none; position: absolute; top: 0; &::-webkit-progress-bar { - border-radius: 2px; + border-radius: 1rem; + background: var(--zorn-progress-bar-bg); } &::-webkit-progress-value { - background: transparent; - border-radius: 2px; + background: var(--zorn-progress-bar); + border-radius: 1rem; } &::-moz-progress-bar { - border: none; - background: var(--plyx-progress-bar); + border-radius: 1rem; + background: var(--zorn-progress-bar-bg); } } .seek { @@ -218,22 +230,23 @@ $background-color_4: rgba(255, 255, 255, 0.1); } .seek-tooltip { display: none; - position: absolute; + position: relative; top: -32px; - margin-left: -30px; + margin-left: -230px; font-size: 12px; - padding: 3px; content: attr(data-title); font-weight: bold; - color: $color_2; - background-color: $background-color_2; + color: #fff; + background-color: rgba(0,0,0,.5); border-radius: 4px; padding: 6px; + width: fit-content; } input[type=range] { height: 8.4px; background: transparent; cursor: pointer; + opacity: 0; &:focus { outline: none; &::-webkit-slider-runnable-track { @@ -254,7 +267,7 @@ $background-color_4: rgba(255, 255, 255, 0.1); height: 12px; width: 12px; border-radius: 10px; - background: var(--pylx-thumb); + background: var(--zorn-thumb); cursor: pointer; -webkit-appearance: none; margin-left: -1px; @@ -291,7 +304,7 @@ $background-color_4: rgba(255, 255, 255, 0.1); width: 12px; border-radius: 10px; border: none; - background: var(--pylx-thumb); + background: var(--zorn-thumb); cursor: pointer; } } @@ -300,7 +313,7 @@ $background-color_4: rgba(255, 255, 255, 0.1); pointer-events: none; } #progress-bar { - background: var(--plyx-progress-bar-bg); + background: var(--zorn-progress-bar-bg); border: none; border-radius: 10px; } diff --git a/test/index.html b/test/index.html index d243831..82de0ac 100644 --- a/test/index.html +++ b/test/index.html @@ -1,19 +1,19 @@ - Plyx Player + Zorn -

Plyx Player By SudoVanilla

+

Zorn By SudoVanilla

-