nanoplayer 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/nanoplayer.css +1 -1
- package/dist/nanoplayer.es.js +1 -1
- package/dist/nanoplayer.umd.js +1 -1
- package/package.json +1 -1
package/dist/nanoplayer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.nano-player{position:relative;max-width:720px;aspect-ratio:16 / 9;background
|
|
1
|
+
@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
CHANGED
|
@@ -17,7 +17,7 @@ class l {
|
|
|
17
17
|
}
|
|
18
18
|
/* ================= OVERLAY ================= */
|
|
19
19
|
createOverlay() {
|
|
20
|
-
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();
|
|
20
|
+
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();
|
|
21
21
|
}
|
|
22
22
|
/* ================= CONTROLS ================= */
|
|
23
23
|
createControls() {
|
package/dist/nanoplayer.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(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=`
|
|
1
|
+
(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=`
|
|
2
2
|
<strong>NanoPlayer</strong><br>
|
|
3
3
|
Version 0.1.0<br>
|
|
4
4
|
MIT License
|