nanoplayer 0.1.1 → 0.1.3

package/LICENSE

@@ -1,32 +1,21 @@
-# NanoPlayer 🎬
-
-**NanoPlayer** — это лёгкий, dependency-free HTML5 видеоплеер на чистом JavaScript  
-с интерфейсом в стиле YouTube.
-
-Проект создан как **open-source** и может использоваться как в личных,
-так и в коммерческих проектах.
-
----
-
-## ✨ Возможности
-
-- ▶️ Play / Pause (кнопка, пробел)
-- 🎞 Превью видео (poster или первый кадр автоматически)
-- ⏱ Прогресс и перемотка
-- 🔊 Громкость (выпадающее меню)
-- ⚙️ Скорость воспроизведения
-- ℹ️ Информация о плеере
-- ⛶ Полноэкранный режим
-- ⌨️ Управление с клавиатуры
-- 🎨 Кастомный UI (без native controls)
-- ❌ Без зависимостей
-
----
-
-## 📦 Установка
-
-### Через npm (рекомендуется)
-
-```bash
-npm install nanoplayer
-```
+MIT License
+
+Copyright (c) 2026 Swift
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/nanoplayer.css

@@ -1 +1 @@
-.nano-player{position:relative;max-width:720px;aspect-ratio:16 / 9;background:#000;border-radius:12px;overflow:hidden;font-family:system-ui,sans-serif}.nano-player video{width:100%;height:100%;display:block}.nano-overlay{position:absolute;inset:0;background:#0006;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.nano-overlay.hidden{display:none}.nano-big-play{width:80px;height:80px;border-radius:50%;border:none;font-size:32px;cursor:pointer}.nano-info-overlay{color:#fff;font-size:14px;text-align:center}.nano-controls{position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:8px;background:linear-gradient(to top,rgba(0,0,0,.7),transparent)}.nano-left,.nano-center,.nano-right{display:flex;align-items:center;gap:6px}.nano-icon{background:none;border:none;color:#fff;font-size:16px;cursor:pointer}.nano-progress{width:100%;height:6px;background:#ffffff4d;cursor:pointer}.nano-progress-fill{height:100%;background:#fff;width:0%}.nano-menu-wrap{position:relative}.nano-menu{position:absolute;bottom:36px;right:0;min-width:140px;background:#000000e6;border-radius:6px;padding:8px;display:none;color:#fff;font-size:13px}.nano-menu-wrap.open .nano-menu{display:block}.nano-menu button{width:100%;background:none;border:none;color:#fff;padding:6px;cursor:pointer;text-align:left}.nano-menu button:hover{background:#ffffff1a}.nano-menu input[type=range]{width:100%}.nano-player.nano-fullscreen{width:100vw;height:100vh;max-width:none;border-radius:0}
+@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{--nano-bg: #0b0d10;--nano-accent: #ffb703;--nano-accent-2: #219ebc;--nano-glow: rgba(255, 183, 3, .35);--nano-text: #f7f7f7;--nano-muted: rgba(255, 255, 255, .7);--nano-glass: rgba(12, 14, 18, .55);--nano-border: rgba(255, 255, 255, .12)}.nano-player{position:relative;max-width:720px;aspect-ratio:16 / 9;background:radial-gradient(1200px 500px at 10% 110%,rgba(33,158,188,.35),transparent 50%),radial-gradient(900px 400px at 110% -10%,rgba(255,183,3,.35),transparent 45%),var(--nano-bg);border-radius:18px;overflow:hidden;font-family:Space Grotesk,Segoe UI,Tahoma,sans-serif;box-shadow:0 10px 30px #0006,0 0 0 1px #ffffff14 inset;transform:translateZ(0)}.nano-player video{width:100%;height:100%;display:block;filter:saturate(1.05) contrast(1.02)}.nano-overlay{position:absolute;inset:0;background:radial-gradient(360px 360px at 50% 30%,rgba(255,255,255,.12),transparent 60%),#05070a99;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .22s ease}.nano-overlay.hidden{display:none}.nano-big-play{width:86px;height:86px;border-radius:50%;border:1px solid rgba(255,255,255,.3);font-size:36px;cursor:pointer;color:#0b0d10;background:radial-gradient(circle at 30% 30%,#fff,#ffe8a3 60%,#ffb703);box-shadow:0 10px 24px #00000059,0 0 0 6px #ffb70326;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}.nano-big-play:hover{transform:scale(1.04);box-shadow:0 12px 30px #00000073,0 0 0 8px #ffb70333;filter:brightness(1.05)}.nano-info-overlay{color:var(--nano-text);font-size:13px;text-align:center;letter-spacing:.03em}.nano-controls{position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:auto 1fr auto;gap:12px;padding:10px 12px 12px;background:linear-gradient(to top,rgba(5,7,10,.95),rgba(5,7,10,.2) 65%,transparent),radial-gradient(500px 140px at 50% 120%,rgba(255,183,3,.18),transparent 60%)}.nano-left,.nano-center,.nano-right{display:flex;align-items:center;gap:6px}.nano-icon{background:none;border:none;color:var(--nano-text);font-size:16px;cursor:pointer;padding:6px;border-radius:8px;transition:background .16s ease,color .16s ease}.nano-icon:hover{color:var(--nano-accent);background:#ffffff14}.nano-icon:active{transform:translateY(1px)}.nano-progress{width:100%;height:7px;background:#ffffff26;cursor:pointer;border-radius:999px;overflow:hidden;position:relative}.nano-progress-fill{height:100%;background:linear-gradient(90deg,var(--nano-accent),#ffe169);width:0%;box-shadow:0 0 10px var(--nano-glow)}.nano-progress:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.25),transparent 45%,rgba(255,255,255,.2));opacity:.2}.nano-menu-wrap{position:relative}.nano-menu{position:absolute;bottom:36px;right:0;min-width:140px;background:#0a0c10e6;border-radius:10px;padding:10px;display:none;color:var(--nano-text);font-size:13px;box-shadow:0 10px 26px #00000073,0 0 0 1px #ffffff14 inset;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.nano-menu-wrap.open .nano-menu{display:block}.nano-menu button{width:100%;background:none;border:none;color:var(--nano-text);padding:6px;cursor:pointer;text-align:left;border-radius:6px;transition:background .16s ease,color .16s ease}.nano-menu button:hover{background:#ffffff14;color:var(--nano-accent)}.nano-menu input[type=range]{width:100%;accent-color:var(--nano-accent)}.nano-player.nano-fullscreen{width:100vw;height:100vh;max-width:none;border-radius:0}

package/dist/nanoplayer.es.js

@@ -17,7 +17,7 @@ class l {
   }
   /* ================= OVERLAY ================= */
   createOverlay() {
-    this.overlay = document.createElement("div"), this.overlay.className = "nano-overlay", this.bigPlay = document.createElement("button"), this.bigPlay.className = "nano-big-play", this.bigPlay.textContent = "▶", this.overlay.append(this.bigPlay, this.infoOverlay), this.wrapper.appendChild(this.overlay), this.bigPlay.onclick = () => this.video.play();
+    this.overlay = document.createElement("div"), this.overlay.className = "nano-overlay", this.bigPlay = document.createElement("button"), this.bigPlay.className = "nano-big-play", this.bigPlay.textContent = "▶", this.infoOverlay = document.createElement("div"), this.infoOverlay.className = "nano-info-overlay", this.infoOverlay.textContent = "", this.overlay.append(this.bigPlay, this.infoOverlay), this.wrapper.appendChild(this.overlay), this.bigPlay.onclick = () => this.video.play();
   }
   /* ================= CONTROLS ================= */
   createControls() {

package/dist/nanoplayer.umd.js

@@ -1,4 +1,4 @@
-(function(s,i){typeof exports=="object"&&typeof module<"u"?module.exports=i():typeof define=="function"&&define.amd?define(i):(s=typeof globalThis<"u"?globalThis:s||self,s.NanoPlayer=i())})(this,(function(){"use strict";class s{constructor(e,t={}){if(this.container=document.querySelector(e),!this.container)throw new Error("NanoPlayer: container not found");this.options={src:"",poster:null,autoplay:!1,volume:1,playbackRates:[.5,1,1.5,2],...t},this.init()}init(){this.wrapper=document.createElement("div"),this.wrapper.className="nano-player",this.wrapper.tabIndex=0,this.video=document.createElement("video"),this.video.src=this.options.src,this.video.autoplay=this.options.autoplay,this.video.volume=this.options.volume,this.video.preload="metadata",this.video.controls=!1,this.options.poster&&(this.video.poster=this.options.poster),this.wrapper.appendChild(this.video),this.container.appendChild(this.wrapper),this.createOverlay(),this.createControls(),this.bindEvents()}createOverlay(){this.overlay=document.createElement("div"),this.overlay.className="nano-overlay",this.bigPlay=document.createElement("button"),this.bigPlay.className="nano-big-play",this.bigPlay.textContent="▶",this.overlay.append(this.bigPlay,this.infoOverlay),this.wrapper.appendChild(this.overlay),this.bigPlay.onclick=()=>this.video.play()}createControls(){this.controls=document.createElement("div"),this.controls.className="nano-controls",this.left=document.createElement("div"),this.left.className="nano-left",this.playBtn=document.createElement("button"),this.playBtn.className="nano-icon",this.playBtn.textContent="▶",this.left.appendChild(this.playBtn),this.center=document.createElement("div"),this.center.className="nano-center",this.progress=document.createElement("div"),this.progress.className="nano-progress",this.progressFill=document.createElement("div"),this.progressFill.className="nano-progress-fill",this.progress.appendChild(this.progressFill),this.center.appendChild(this.progress),this.right=document.createElement("div"),this.right.className="nano-right",this.volumeMenu=this.createMenu("🔊"),this.volumeSlider=document.createElement("input"),this.volumeSlider.type="range",this.volumeSlider.min=0,this.volumeSlider.max=1,this.volumeSlider.step=.01,this.volumeSlider.value=this.video.volume,this.volumeMenu.menu.appendChild(this.volumeSlider),this.settingsMenu=this.createMenu("⚙️"),this.options.playbackRates.forEach(e=>{const t=document.createElement("button");t.textContent=`${e}x`,t.onclick=()=>{this.video.playbackRate=e,this.settingsMenu.close()},this.settingsMenu.menu.appendChild(t)}),this.infoMenu=this.createMenu("ℹ️"),this.infoMenu.menu.innerHTML=`
+(function(s,i){typeof exports=="object"&&typeof module<"u"?module.exports=i():typeof define=="function"&&define.amd?define(i):(s=typeof globalThis<"u"?globalThis:s||self,s.NanoPlayer=i())})(this,(function(){"use strict";class s{constructor(e,t={}){if(this.container=document.querySelector(e),!this.container)throw new Error("NanoPlayer: container not found");this.options={src:"",poster:null,autoplay:!1,volume:1,playbackRates:[.5,1,1.5,2],...t},this.init()}init(){this.wrapper=document.createElement("div"),this.wrapper.className="nano-player",this.wrapper.tabIndex=0,this.video=document.createElement("video"),this.video.src=this.options.src,this.video.autoplay=this.options.autoplay,this.video.volume=this.options.volume,this.video.preload="metadata",this.video.controls=!1,this.options.poster&&(this.video.poster=this.options.poster),this.wrapper.appendChild(this.video),this.container.appendChild(this.wrapper),this.createOverlay(),this.createControls(),this.bindEvents()}createOverlay(){this.overlay=document.createElement("div"),this.overlay.className="nano-overlay",this.bigPlay=document.createElement("button"),this.bigPlay.className="nano-big-play",this.bigPlay.textContent="▶",this.infoOverlay=document.createElement("div"),this.infoOverlay.className="nano-info-overlay",this.infoOverlay.textContent="",this.overlay.append(this.bigPlay,this.infoOverlay),this.wrapper.appendChild(this.overlay),this.bigPlay.onclick=()=>this.video.play()}createControls(){this.controls=document.createElement("div"),this.controls.className="nano-controls",this.left=document.createElement("div"),this.left.className="nano-left",this.playBtn=document.createElement("button"),this.playBtn.className="nano-icon",this.playBtn.textContent="▶",this.left.appendChild(this.playBtn),this.center=document.createElement("div"),this.center.className="nano-center",this.progress=document.createElement("div"),this.progress.className="nano-progress",this.progressFill=document.createElement("div"),this.progressFill.className="nano-progress-fill",this.progress.appendChild(this.progressFill),this.center.appendChild(this.progress),this.right=document.createElement("div"),this.right.className="nano-right",this.volumeMenu=this.createMenu("🔊"),this.volumeSlider=document.createElement("input"),this.volumeSlider.type="range",this.volumeSlider.min=0,this.volumeSlider.max=1,this.volumeSlider.step=.01,this.volumeSlider.value=this.video.volume,this.volumeMenu.menu.appendChild(this.volumeSlider),this.settingsMenu=this.createMenu("⚙️"),this.options.playbackRates.forEach(e=>{const t=document.createElement("button");t.textContent=`${e}x`,t.onclick=()=>{this.video.playbackRate=e,this.settingsMenu.close()},this.settingsMenu.menu.appendChild(t)}),this.infoMenu=this.createMenu("ℹ️"),this.infoMenu.menu.innerHTML=`
       <strong>NanoPlayer</strong><br>
       Version 0.1.0<br>
       MIT License

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nanoplayer",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "NanoPlayer — lightweight vanilla JavaScript video player",
   "main": "dist/nanoplayer.umd.js",
   "module": "dist/nanoplayer.es.js",