updaet

README.md

@@ -1,2 +1,33 @@
 # Plyx-Player
 
+> Currently in beta stages.
+
+## Installing
+The Plyx Player is available to download from SudoVanilla's registry, run:
+```bash
+npm set registry https://packages.sudovanilla.com/
+```
+(This registry is also a proxy for NPM)
+
+Then, for your project, install Plyx:
+```bash
+npm install @sudovanilla/plyx-player
+```
+
+## Usage
+Add the stylesheet and script:
+```html
+...
+<link rel="stylesheet" href="/node_modules/@sudovanilla/plyx-player/src/styles/app.css">
+<script src="/node_modules/@sudovanilla/plyx-player/src/index.js" type="module">
+...
+```
+
+Then, add the class name `plyx-player` to the `<video>` element and make sure it's wrapped around a div contained with the class name `video-container`:
+```html
+<div class="video-container">
+    <video class="plyx-player" src="video.mp4"></video>
+</div>
+```
+
+That's it, if you've linked the stylesheet and script correctly, it should work.

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@sudovanilla/plyx-player",
+  "version": "0.1.0",
+  "description": "Custom player for HTML5",
+  "author": "sudovanilla",
+  "license": "AGPL-3.0-or-later",
+  "bugs": {
+    "url": "https://sudovanilla.com/code/Korbs/Plyx-Player/issues",
+    "email": "support@sduovanilla.com"
+  }
+}

src/functions/buttons.js

@@ -3,7 +3,14 @@ const videoContainer = document.querySelector('.video-container')
 
 function AddControls() {
     var add_controls = `
-    <div class="plyx-player-controls">
+    <div oncontextmenu="return false;" class="plyx-player-controls">
+        <div class="row-2">
+            <div class="video-progress">
+                <progress id="progress-bar" value="0" min="0"></progress>
+                <input class="seek" id="seek" value="0" min="0" type="range" step="1">
+                <div class="seek-tooltip" id="seek-tooltip">00:00</div>
+            </div>
+        </div>
         <div class="row-1">
             <div class="row-1-start">
                 <button id="play-pause"><i class="fa-solid fa-play"></i></button>
@@ -23,16 +30,10 @@ function AddControls() {
                 <button id="fullscreen"><i class="fa-solid fa-expand"></i></button>
             </div>
         </div>
-        <div class="row-2">
-            <div class="video-progress">
-                <progress id="progress-bar" value="0" min="0"></progress>
-                <input class="seek" id="seek" value="0" min="0" type="range" step="1">
-                <div class="seek-tooltip" id="seek-tooltip">00:00</div>
-            </div>
-        </div>
     </div>
     `
     video.insertAdjacentHTML("afterend", add_controls);
+    video.setAttribute("oncontextmenu", "return false")
 }
 
 function Util() {
@@ -176,13 +177,11 @@ function Util() {
         }
         
         videoControls.classList.add('hide')
-        console.log('0')
     }
     
     // Show_Controls displays the video controls
     function Show_Controls() {
         videoControls.classList.remove('hide')
-        console.log('1')
     }
     video.addEventListener('mouseenter', Show_Controls)
     video.addEventListener('mouseleave', Hide_Controls)

src/styles/app.css

@@ -7,6 +7,7 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
+	font-family: Arial, Helvetica, sans-serif;
 }
 .plyx-player-controls {
 	display: inline-flex;
@@ -16,13 +17,14 @@
 	position: absolute;
 	bottom: 0;
 	transition: all 0.2s ease;
-	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
+	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;
@@ -59,7 +61,7 @@ button:hover {
 .video-progress {
 	position: relative;
 	height: 6.4px;
-	margin: 6px -10px -8px -10px;
+	margin: 24px 0px;
 }
 progress {
 	-webkit-appearance: none;
@@ -165,8 +167,8 @@ input[type=range].volume::-moz-range-thumb {
 }
 input[type="range"]::-moz-range-thumb {
 	height: 12px;
-	width: 6px;
-	border-radius: 0px;
+	width: 12px;
+	border-radius: 10px;
 	border: none;
 	background: #f00;
 	cursor: pointer;
@@ -176,6 +178,7 @@ input[type="range"]::-moz-range-thumb {
 	pointer-events: none;
 }
 #progress-bar {
-	background: transparent;
+	background: rgba(12, 12, 12, 0.1);
 	border: none;
+	border-radius: 10px;
 }