Add events and dialogs

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 = `
+    <div class="plyx-player-dialogs">
+        <div id="buffering" class="plyx-dialog">
+            <h2><i class="fa-duotone fa-spinner-third fa-spin fa-2xl"></i></h2>
+        </div>
+        <div id="invalid-src" class="plyx-dialog">
+            <h2>Failed to Load</h2>
+        </div>
+    </div>
+    `
+    video.insertAdjacentHTML("afterend", add_dialogs)
+}
+
 function AddControls() {
     var add_controls = `
     <div oncontextmenu="return false" class="plyx-player-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}
+export {AddControls, AddDialogs, Util}

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;
 		}
-	}	
+	}
 }