0.0.2

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>

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": {

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

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">