nanoplayer 0.1.0

package/LICENSE

@@ -0,0 +1,32 @@
+# NanoPlayer 🎬
+
+**NanoPlayer** — это лёгкий, dependency-free HTML5 видеоплеер на чистом JavaScript  
+с интерфейсом в стиле YouTube.
+
+Проект создан как **open-source** и может использоваться как в личных,
+так и в коммерческих проектах.
+
+---
+
+## ✨ Возможности
+
+- ▶️ Play / Pause (кнопка, пробел)
+- 🎞 Превью видео (poster или первый кадр автоматически)
+- ⏱ Прогресс и перемотка
+- 🔊 Громкость (выпадающее меню)
+- ⚙️ Скорость воспроизведения
+- ℹ️ Информация о плеере
+- ⛶ Полноэкранный режим
+- ⌨️ Управление с клавиатуры
+- 🎨 Кастомный UI (без native controls)
+- ❌ Без зависимостей
+
+---
+
+## 📦 Установка
+
+### Через npm (рекомендуется)
+
+```bash
+npm install nanoplayer
+```

package/README.md

@@ -0,0 +1,128 @@
+# NanoPlayer 🎬
+
+NanoPlayer — лёгкий, dependency-free HTML5 видеоплеер на чистом JavaScript  
+с интерфейсом в стиле YouTube.
+
+Проект создаётся как open-source и подходит как для личных,
+так и для коммерческих проектов.
+
+---
+
+## Возможности
+
+- Play / Pause (кнопка и пробел)
+- Превью видео (poster или первый кадр автоматически)
+- Прогресс и перемотка
+- Громкость (выпадающее меню)
+- Скорость воспроизведения
+- Информация о плеере
+- Полноэкранный режим
+- Управление с клавиатуры
+- Кастомный UI (без native controls)
+- Без зависимостей
+
+---
+
+## Установка
+
+Через npm:
+```
+npm install nanoplayer
+```
+---
+
+## Быстрый старт
+
+HTML (UMD):
+```
+<link rel="stylesheet" href="dist/style.css">
+
+<div id="player"></div>
+
+<script src="dist/nanoplayer.umd.js"></script>
+<script>
+  new NanoPlayer('#player', {
+    src: 'video.mp4',
+    poster: 'poster.jpg'
+  })
+</script>
+```
+---
+
+ES Modules:
+```
+import NanoPlayer from 'nanoplayer'
+import 'nanoplayer/dist/style.css'
+
+new NanoPlayer('#player', {
+  src: 'video.mp4'
+})
+```
+Важно: ES-модули должны запускаться через HTTP-сервер, не file://
+
+---
+
+## Параметры
+
+new NanoPlayer(selector, options)
+
+options:
+
+- src (string) — путь к видео
+- poster (string | null) — превью (если не указано, берётся первый кадр)
+- autoplay (boolean) — автозапуск
+- volume (number) — громкость (0–1)
+- playbackRates (number[]) — доступные скорости
+
+---
+
+## Управление с клавиатуры
+
+- Space — Play / Pause
+- Esc — выход из fullscreen
+
+Пробел не перехватывается, если фокус находится в input, textarea или select.
+
+---
+
+## Стилизация
+
+NanoPlayer не влияет на глобальные стили страницы.  
+Все CSS-классы имеют префикс nano-.
+
+Можно:
+- переопределять стили
+- писать собственные темы
+- полностью заменить style.css
+
+---
+
+## Архитектура
+
+.nano-player  
+├── video  
+├── overlay (big play + info)  
+├── controls  
+│   ├── left (play)  
+│   ├── center (progress)  
+│   └── right (menus)  
+│       ├── volume  
+│       ├── settings  
+│       └── info  
+
+Каждое меню — отдельный popover, как в YouTube.
+
+---
+
+## Структура проекта
+
+nanoplayer/  
+├── src/  
+│   ├── NanoPlayer.js  
+│   └── index.js  
+│   └── style.css  
+├── dist/  
+│   ├── nanoplayer.umd.js  
+│   └── nanoplayer.es.js 
+│   └── nanoplayer.umd.js  
+

package/dist/nanoplayer.css

@@ -0,0 +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}

package/dist/nanoplayer.es.js

@@ -0,0 +1,95 @@
+class l {
+  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: [0.5, 1, 1.5, 2],
+      ...t
+    }, this.init();
+  }
+  /* ================= 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();
+  }
+  /* ================= 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();
+  }
+  /* ================= CONTROLS ================= */
+  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 = 0.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
+      swiftmessage.org
+      github.com/swiftmessage/NanoPlayer
+    `, this.fullscreenBtn = document.createElement("button"), this.fullscreenBtn.className = "nano-icon", this.fullscreenBtn.textContent = "⛶", this.fullscreenBtn.onclick = () => this.toggleFullscreen(), this.right.append(
+      this.volumeMenu.root,
+      this.settingsMenu.root,
+      this.infoMenu.root,
+      this.fullscreenBtn
+    ), this.controls.append(this.left, this.center, this.right), this.wrapper.appendChild(this.controls), this.playBtn.onclick = () => this.video.paused ? this.video.play() : this.video.pause(), this.progress.onclick = (e) => {
+      const t = this.progress.getBoundingClientRect();
+      this.video.currentTime = (e.clientX - t.left) / t.width * this.video.duration;
+    }, this.volumeSlider.oninput = () => this.video.volume = this.volumeSlider.value;
+  }
+  /* ================= MENU HELPER ================= */
+  createMenu(e) {
+    const t = document.createElement("div");
+    t.className = "nano-menu-wrap";
+    const s = document.createElement("button");
+    s.className = "nano-icon", s.textContent = e;
+    const i = document.createElement("div");
+    return i.className = "nano-menu", s.onclick = (n) => {
+      n.stopPropagation(), document.querySelectorAll(".nano-menu-wrap.open").forEach((o) => o.classList.remove("open")), t.classList.toggle("open");
+    }, document.addEventListener("click", () => {
+      t.classList.remove("open");
+    }), t.append(s, i), {
+      root: t,
+      menu: i,
+      close: () => t.classList.remove("open")
+    };
+  }
+  /* ================= EVENTS ================= */
+  bindEvents() {
+    this.wrapper.addEventListener("click", () => {
+      this.wrapper.focus();
+    }), this.video.addEventListener("loadedmetadata", () => {
+      this.options.poster || (this.video.currentTime = 0.1, this.video.pause());
+    }), this.video.addEventListener("play", () => {
+      this.playBtn.textContent = "❚❚", this.overlay.classList.add("hidden");
+    }), this.video.addEventListener("pause", () => {
+      this.playBtn.textContent = "▶";
+    }), this.video.addEventListener("timeupdate", () => {
+      const e = this.video.currentTime / this.video.duration * 100;
+      this.progressFill.style.width = `${e}%`;
+    }), this.wrapper.addEventListener("keydown", (e) => {
+      if (e.code !== "Space") return;
+      const t = e.target.tagName;
+      ["INPUT", "TEXTAREA", "SELECT"].includes(t) || (e.preventDefault(), this.video.paused ? this.video.play() : this.video.pause());
+    }), document.addEventListener("fullscreenchange", () => {
+      this.wrapper.classList.toggle(
+        "nano-fullscreen",
+        !!document.fullscreenElement
+      );
+    });
+  }
+  /* ================= FULLSCREEN ================= */
+  toggleFullscreen() {
+    const e = this.wrapper;
+    document.fullscreenElement ? document.exitFullscreen ? document.exitFullscreen() : document.webkitExitFullscreen ? document.webkitExitFullscreen() : document.msExitFullscreen && document.msExitFullscreen() : e.requestFullscreen ? e.requestFullscreen() : e.webkitRequestFullscreen ? e.webkitRequestFullscreen() : e.msRequestFullscreen && e.msRequestFullscreen();
+  }
+}
+typeof window < "u" && (window.NanoPlayer = l);
+export {
+  l as default
+};

package/dist/nanoplayer.umd.js

@@ -0,0 +1,7 @@
+(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=`
+      <strong>NanoPlayer</strong><br>
+      Version 0.1.0<br>
+      MIT License
+      swiftmessage.org
+      github.com/swiftmessage/NanoPlayer
+    `,this.fullscreenBtn=document.createElement("button"),this.fullscreenBtn.className="nano-icon",this.fullscreenBtn.textContent="⛶",this.fullscreenBtn.onclick=()=>this.toggleFullscreen(),this.right.append(this.volumeMenu.root,this.settingsMenu.root,this.infoMenu.root,this.fullscreenBtn),this.controls.append(this.left,this.center,this.right),this.wrapper.appendChild(this.controls),this.playBtn.onclick=()=>this.video.paused?this.video.play():this.video.pause(),this.progress.onclick=e=>{const t=this.progress.getBoundingClientRect();this.video.currentTime=(e.clientX-t.left)/t.width*this.video.duration},this.volumeSlider.oninput=()=>this.video.volume=this.volumeSlider.value}createMenu(e){const t=document.createElement("div");t.className="nano-menu-wrap";const n=document.createElement("button");n.className="nano-icon",n.textContent=e;const o=document.createElement("div");return o.className="nano-menu",n.onclick=l=>{l.stopPropagation(),document.querySelectorAll(".nano-menu-wrap.open").forEach(r=>r.classList.remove("open")),t.classList.toggle("open")},document.addEventListener("click",()=>{t.classList.remove("open")}),t.append(n,o),{root:t,menu:o,close:()=>t.classList.remove("open")}}bindEvents(){this.wrapper.addEventListener("click",()=>{this.wrapper.focus()}),this.video.addEventListener("loadedmetadata",()=>{this.options.poster||(this.video.currentTime=.1,this.video.pause())}),this.video.addEventListener("play",()=>{this.playBtn.textContent="❚❚",this.overlay.classList.add("hidden")}),this.video.addEventListener("pause",()=>{this.playBtn.textContent="▶"}),this.video.addEventListener("timeupdate",()=>{const e=this.video.currentTime/this.video.duration*100;this.progressFill.style.width=`${e}%`}),this.wrapper.addEventListener("keydown",e=>{if(e.code!=="Space")return;const t=e.target.tagName;["INPUT","TEXTAREA","SELECT"].includes(t)||(e.preventDefault(),this.video.paused?this.video.play():this.video.pause())}),document.addEventListener("fullscreenchange",()=>{this.wrapper.classList.toggle("nano-fullscreen",!!document.fullscreenElement)})}toggleFullscreen(){const e=this.wrapper;document.fullscreenElement?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():e.requestFullscreen?e.requestFullscreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.msRequestFullscreen&&e.msRequestFullscreen()}}return typeof window<"u"&&(window.NanoPlayer=s),s}));

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "nanoplayer",
+  "version": "0.1.0",
+  "description": "NanoPlayer — lightweight vanilla JavaScript video player",
+  "main": "dist/nanoplayer.umd.js",
+  "module": "dist/nanoplayer.es.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build"
+  },
+  "keywords": [
+    "video",
+    "player",
+    "html5",
+    "vanilla-js",
+    "nano"
+  ],
+  "author": "SWIFTMESSAGE",
+  "license": "MIT",
+  "devDependencies": {
+    "vite": "^7.3.1"
+  }
+}