0.0.2

Sstudios-Dev · May 25, 2024 · 6cc2314 · 6cc2314
1 parent a02fcb6
commit 6cc2314
Show file tree

Hide file tree

Showing 6 changed files with 229 additions and 131 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,88 @@
-# KittyPlayer
-Video player library for web pages with modern design in css and javaScript
+# KittyPlayer-lib
+KittyPlayer-lib is a library of components for creating modern and customizable video players.
+
+## Installation
+You can install KittyPlayer-lib via npm:
+
+```bash
+npm i kittyplayer
+```
+
+To use KittyPlayer-lib, first ensure you include the library in your project. Then, you can create a KittyPlayer instance and add it to your page:
+
+```html
+<link rel="stylesheet" href="/node_modules/kittyplayer/src/components/video/playVideo.css">
+
+<script src="/node_modules/kittyplayer/src/scripts/js/PlayVideo-Script.js"></script>
+```
+
+These two files must always be imported so that the library works 100% and does not fail.
+
+# Components
+
+KittyPlayer-lib includes a variety of components for customizing and enhancing the video playback experience, such as customizable controls, play buttons, progress bars, and more:
+
+## Warning ⚠
+
+adding this is very important to be able to use the library
+
+```html
+            <div class="video-container" id="videoContainer">
+                <video class="video" id="video" src="test/Path of your video"></video>
+                <div class="seek-icon" id="seekIcon"></div>
+                <div class="pause-icon" id="pauseIcon">&#10074;&#10074;</div>
+                <div class="controls" id="controls">
+                    <button class="btn" id="playPause"><i class="fas fa-play"></i></button>
+                    <input type="range" id="progress" class="progress" min="0" max="100" value="0">
+                    <div class="time" id="time">00:00 / 00:00</div>
+                    <div id="volumeContainer" class="volume-container">
+                        <input type="range" id="volume" class="volume-slider" min="0" max="1" step="0.01">
+                        <div id="volumeIcon" class="volume-icon">
+                            <i class="fas fa-volume-up"></i>
+                        </div>
+                    </div>                                      
+                    <button class="btn" id="fullscreen">
+                        <i class="fas fa-expand"></i>
+                    </button>
+                </div>
+            </div>
+```
+
+# Video Player Components
+
+- `.video-container` (`div`) - Main container of the video player.
+  - `.video` (`video`) - Video element.
+  - `.seek-icon` (`div`) - Seek icon.
+  - `.pause-icon` (`div`) - Pause icon.
+  - `.controls` (`div`) - Player controls.
+    - `#playPause` (`button`) - Play/pause button.
+      - Play/pause icon (`i` with class `fas fa-play`).
+    - `#progress` (`input[type="range"]`) - Progress bar.
+    - `#time` (`div`) - Elapsed time/duration of the video.
+    - `#volumeContainer` (`div`) - Volume container.
+      - `#volume` (`input[type="range"]`) - Volume control.
+      - `#volumeIcon` (`div`) - Volume icon (`i` with class `fas fa-volume-up`).
+    - `#fullscreen` (`button`) - Fullscreen button (`i` with class `fas fa-expand`).
+
+## Images
+
+<details>
+  <summary>Preview 1</summary>
+
+  ![Image 1](path_to_image_1)
+  ![Image 2](path_to_image_2)
+</details>
+
+<details>
+  <summary>Preview 2</summary>
+
+  ![Image 3](path_to_image_3)
+  ![Image 4](path_to_image_4)
+</details>
+
+# Contribution
+
+Feel free to contribute to KittyPlayer-lib! You can submit suggestions, report bugs, or add new components through pull requests.
+
+<a href="https://github.com/staFF6773"><img src="https://avatars.githubusercontent.com/u/108166164?v=4" height="128" width="128" /></a>
+<a href="https://github.com/Sstudiosdev"><img src="https://avatars.githubusercontent.com/u/149289426?v=4" height="128" width="128" /></a>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kittyplayer",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "📦 Browser video player library",
   "main": "src/scripts/js/PlayVideo-Script.js",
   "repository": {

diff --git a/src/components/video/playVideo.css b/src/components/video/playVideo.css
@@ -121,4 +121,51 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-}
+}
+
+.seek-icon {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 3em;
+    color: white;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 10px 20px;
+    border-radius: 10px;
+    z-index: 1000;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateY(-100%);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideOut {
+    from {
+        transform: translateY(0);
+    }
+    to {
+        transform: translateY(-100%);
+    }
+}
+
+.alert {
+    position: fixed;
+    top: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 1rem 2rem;
+    background-color: #f56565;
+    color: #fff;
+    border-radius: 0.25rem;
+    animation: slideIn 0.5s forwards, slideOut 0.5s forwards 2.5s;
+    opacity: 0;
+    display: none;
+}
+
diff --git a/src/html/example.html b/src/html/example.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
-<html lang="es">
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>KittyPlayer</title>
     <link rel="stylesheet" href="/src/components/example/html-example.css">
     <link rel="stylesheet" href="/src/components/video/playVideo.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 </head>
 <body>
     <div class="container">
@@ -15,19 +16,23 @@
         <div class="content">
             <div class="video-container" id="videoContainer">
                 <video class="video" id="video" src="/assets/visual-video-test.mp4"></video>
+                <div class="seek-icon" id="seekIcon"></div>
                 <div class="pause-icon" id="pauseIcon">&#10074;&#10074;</div>
                 <div class="controls" id="controls">
-                    <button class="btn" id="playPause">Play</button>
+                    <button class="btn" id="playPause"><i class="fas fa-play"></i></button>
                     <input type="range" id="progress" class="progress" min="0" max="100" value="0">
                     <div class="time" id="time">00:00 / 00:00</div>
-                    <button class="btn" id="volumeDown">-</button>
-                    <span id="volumeIcon">&#128266;</span>
-                    <button class="btn" id="volumeUp">+</button>
+                    <div id="volumeContainer" class="volume-container">
+                        <input type="range" id="volume" class="volume-slider" min="0" max="1" step="0.01">
+                        <div id="volumeIcon" class="volume-icon">
+                            <i class="fas fa-volume-up"></i>
+                        </div>
+                    </div>                                      
                     <button class="btn" id="fullscreen">
-                        <img src="/src/icons/fullscreen-icon.svg" class="icon" alt="Fullscreen">
+                        <i class="fas fa-expand"></i>
                     </button>
                 </div>
-            </div>            
+            </div>                       
             <div class="video-details">
                 <div class="video-title">4k nature video (Test video)</div>
                 <div class="video-info">

diff --git a/src/icons/fullscreen-icon.svg b/src/icons/fullscreen-icon.svg