From f4d0d829b56fcae6c93f95a5e7d419568251f454 Mon Sep 17 00:00:00 2001 From: Korbs Date: Mon, 6 Nov 2023 18:08:47 -0500 Subject: [PATCH] Add events and dialogs --- src/functions/buttons.js | 40 +++++++++++++++++++++++++++++++++++++++- src/styles/app.css | 2 +- src/styles/app.scss | 32 +++++++++++++++++++++++++++++--- 3 files changed, 69 insertions(+), 5 deletions(-) diff --git a/src/functions/buttons.js b/src/functions/buttons.js index 2104c20..9bcd6ed 100644 --- a/src/functions/buttons.js +++ b/src/functions/buttons.js @@ -1,6 +1,42 @@ const video = document.querySelector('.plyx-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' + videoContainer.style.backgroundColor = '#101010' + setTimeout(() => { + video.style.opacity = '0.10' + document.querySelector('#buffering').style.display = 'none' + }, 0o250); +}, true) + +video.onwaiting = (event) => { + document.querySelector('#buffering').style.display = 'inherit' + video.style.transition = '5s opacity' + video.style.opacity = '0.25' +} +video.oncanplaythrough = (event) => { + document.querySelector('#buffering').style.display = 'none' + video.style.transition = '0.3s opacity' + video.style.opacity = '1' +} + +function AddDialogs() { + var add_dialogs = ` +
+
+

+
+
+

Failed to Load

+
+
+ ` + video.insertAdjacentHTML("afterend", add_dialogs) +} + function AddControls() { var add_controls = `
@@ -191,6 +227,8 @@ function Util() { document.addEventListener('keyup', keyboardShortcuts) // Other Controls + /// Error Event + /// Double click (Toggle Fullscreen) video.addEventListener('dblclick', () => {Toggle_Fullscreen()}) @@ -235,4 +273,4 @@ function Util() { } -export {AddControls, Util} \ No newline at end of file +export {AddControls, AddDialogs, Util} \ No newline at end of file diff --git a/src/styles/app.css b/src/styles/app.css index 22d82dc..761df4e 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%, rgba(10, 20, 28, 0.7) 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{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 .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:32px;width:32px;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{--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%, rgba(10, 20, 28, 0.7) 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 .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} diff --git a/src/styles/app.scss b/src/styles/app.scss index 592d5e2..05bfdaf 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -46,6 +46,32 @@ $background-color_4: rgba(255, 255, 255, 0.1); justify-content: center; font-family: $font-family_1; color: $color_1; + .plyx-player-dialogs { + #buffering { + display: none; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 0px 24px; + border-radius: 6px; + h2 { + font-size: 52px; + } + } + #invalid-src { + display: none; + position: absolute; + top: 50%; + left: 24px; + transform: translate(0px, -50%); + padding: 0px 24px; + border-radius: 6px; + h2 { + font-size: 52px; + } + } + } .plyx-player { display: inline-flex; } @@ -116,8 +142,8 @@ $background-color_4: rgba(255, 255, 255, 0.1); #volume-button { svg { aspect-ratio: 1; - height: 32px; - width: 32px; + height: 16px; + width: 16px; fill: white; padding: 3px 0px 0px 0px; } @@ -251,5 +277,5 @@ $background-color_4: rgba(255, 255, 255, 0.1); border: none; border-radius: 10px; } - } + } } \ No newline at end of file