v0.1.3-alpha — UX Improvements, Vertical Video Pixel Optimization and Audio/Video Sync State Isolation.

[YusufB5]

New Features & UX Improvements

• Minimalist Vector Sound Button: Replaced system emoji buttons with crisp, modern frosted-glass SVG icons (Mute / Unmute).
• Click-to-Play / Pause: Clicking anywhere on the video player or pressing Space toggles playback with a sleek center pause indicator overlay.
• Smart Text Selection Guard: Pausing is intelligently bypassed while highlighting ASCII characters in the selection layer.
• Auto Codec Negotiation: Automatically ensures ?codec=adaptive is used for optimal streaming bandwidth even if omitted in client connection URLs.
• Dual Package Export: Supports both import AsciiPlayer from 'asciline-player' and import { AsciiPlayer } from 'asciline-player'.

Bug Fixes & Performance

• Vertical Video Pixel Optimization: Fixed high-bandwidth saturation (up to 40 MB/s) on portrait videos in pixel mode by standardizing the adaptive pixel budget, preventing TCP buffer stutter.
• Audio/Video Sync State Isolation: Fully separated audio mute state from video playback state to prevent audio desync during paused interactions.
• Clean Socket Teardown: Suppressed harmless underlying WebSocket library AssertionError race conditions on disconnect.

Quickstart

npm install asciline-player

Minimal Setup (Silent or Autoplay)

<canvas id="ascii-canvas"></canvas>

<script type="module">
  import { AsciiPlayer } from 'asciline-player';

  new AsciiPlayer('#ascii-canvas', { 
    url: 'ws://localhost:8000/ws',
    autoplay: true,
    audio: true // Plays muted automatically with a sleek 🔇/🔊 toggle button
  });
</script>

Setup with Synced Audio & Play Button (Recommended)

<!-- Wrapper container with relative positioning -->
<div id="player-box" style="position: relative; width: 100%; max-width: 900px; aspect-ratio: 16/9; background: #000;">
  <canvas id="ascii-canvas"></canvas>
</div>

<script type="module">
  import { AsciiPlayer } from 'asciline-player';

  // Automatically renders a sleek ▶ overlay.
  // Clicking it provides the user gesture required by modern browsers,
  // starting audio and video in rock-solid synchronization!
  const player = new AsciiPlayer('#ascii-canvas', {
    url: 'ws://localhost:8000/ws',
    container: '#player-box',
    audio: true,          // Automatic synchronized audio stream
    selectionLayer: true, // Copyable text overlay
    playOverlay: true     // Auto-managed play button (defaults to true)
  });
</script>

---

This discussion was created from the release v0.1.3-alpha — UX Improvements, Vertical Video Pixel Optimization and Audio/Video Sync State Isolation..