@buntui/extensions 0.0.0

package/dist/widgets/videoplayer/VideoPlayerWidget.js

@@ -0,0 +1,465 @@
+import { widgets, } from '@buntui/core';
+import { encodeBrailleFrame, isVideoFile } from './braille';
+import { DEFAULT_VIDEOPLAYER_COLOR_SCHEME, DEFAULT_VIDEOPLAYER_OPTIONS } from './defaults';
+export class VideoPlayerWidget extends widgets.InteractiveWidget {
+    #x;
+    #y;
+    #width;
+    #height;
+    #src;
+    #colorScheme;
+    #loop;
+    #threshold;
+    #invert;
+    #targetFps;
+    #audioSrc;
+    #audioTempFile;
+    #frameData;
+    #frameCols = 0;
+    #frameRows = 0;
+    #frameCount = 0;
+    #fps = 30;
+    #frameInterval = 33;
+    #playerState = 'loading';
+    #currentFrame = 0;
+    #accumulator = 0;
+    #loadingProgress = '';
+    #audioProcess;
+    #ffmpegProcess;
+    #loading = false;
+    get #frameOffsetMs() {
+        return (this.#currentFrame / this.#fps) * 1000;
+    }
+    constructor(options = {}) {
+        super();
+        const resolved = { ...DEFAULT_VIDEOPLAYER_OPTIONS, ...options };
+        const rect = this.initRect(resolved.x, resolved.y, resolved.width, resolved.height);
+        this.#x = rect.x;
+        this.#y = rect.y;
+        this.#width = rect.width;
+        this.#height = rect.height;
+        const schemeOverride = resolved.colorScheme ?? {};
+        this.#colorScheme = {
+            dotRgba: schemeOverride.dotRgba ?? DEFAULT_VIDEOPLAYER_COLOR_SCHEME.dotRgba,
+            bgRgba: schemeOverride.bgRgba ?? DEFAULT_VIDEOPLAYER_COLOR_SCHEME.bgRgba,
+            textRgba: schemeOverride.textRgba ?? DEFAULT_VIDEOPLAYER_COLOR_SCHEME.textRgba,
+        };
+        this.#src = resolved.src;
+        this.#loop = resolved.loop ?? false;
+        this.#threshold = resolved.threshold ?? 128;
+        this.#invert = resolved.invert ?? false;
+        this.#targetFps = resolved.fps ?? 30;
+        if (resolved.audioSrc) {
+            this.#audioSrc = resolved.audioSrc;
+        }
+        else if (resolved.src && isVideoFile(resolved.src)) {
+            this.#audioSrc = resolved.src;
+        }
+        else if (resolved.src) {
+            this.#audioSrc = resolved.src.replace(/\.bin$/v, '.mp3');
+        }
+        else {
+            this.#audioSrc = undefined;
+        }
+        if (resolved.data) {
+            this.#parseBinData(resolved.data);
+        }
+        else if (!resolved.src) {
+            this.#playerState = 'error';
+        }
+    }
+    mounted() {
+        super.mounted();
+    }
+    unmounted() {
+        this.#stopAudio();
+        this.#killFfmpeg();
+        this.#cleanupTempAudio();
+        super.unmounted();
+    }
+    updateRect(rect) {
+        if (rect.x !== undefined) {
+            this.#x = rect.x;
+        }
+        if (rect.y !== undefined) {
+            this.#y = rect.y;
+        }
+        if (rect.width !== undefined) {
+            this.#width = rect.width;
+        }
+        if (rect.height !== undefined) {
+            this.#height = rect.height;
+        }
+    }
+    containsPoint(x, y) {
+        return x >= this.#x
+            && x < this.#x + this.#width
+            && y >= this.#y
+            && y < this.#y + this.#height;
+    }
+    get rect() {
+        return {
+            x: this.#x, y: this.#y, width: this.#width, height: this.#height,
+        };
+    }
+    handleKey(event) {
+        const { key } = event;
+        if (!key) {
+            return;
+        }
+        if (key === ' ') {
+            switch (this.#playerState) {
+                case 'ready':
+                case 'ended': {
+                    if (this.#playerState === 'ended') {
+                        this.#currentFrame = 0;
+                    }
+                    this.#playerState = 'playing';
+                    this.#accumulator = 0;
+                    this.#startAudio(0);
+                    break;
+                }
+                case 'playing': {
+                    this.#playerState = 'paused';
+                    this.#stopAudio();
+                    break;
+                }
+                case 'paused': {
+                    this.#startAudio(this.#frameOffsetMs);
+                    this.#playerState = 'playing';
+                    this.#accumulator = 0;
+                    break;
+                }
+                case 'loading':
+                case 'error': {
+                    break;
+                }
+            }
+        }
+        else if (key === 'r' || key === 'R') {
+            this.#currentFrame = 0;
+            this.#stopAudio();
+            this.#playerState = 'ready';
+        }
+    }
+    update(dt) {
+        if (this.#playerState !== 'playing' || !this.#frameData) {
+            return;
+        }
+        this.#accumulator += dt;
+        if (this.#accumulator >= this.#frameInterval) {
+            this.#accumulator -= this.#frameInterval;
+            this.#currentFrame++;
+            if (this.#currentFrame >= this.#frameCount) {
+                if (this.#loop) {
+                    this.#currentFrame = 0;
+                    this.#startAudio(0);
+                }
+                else {
+                    this.#currentFrame = this.#frameCount - 1;
+                    this.#playerState = 'ended';
+                    this.#stopAudio();
+                }
+            }
+        }
+    }
+    emitDrawCommands(buffer) {
+        const w = this.#width;
+        const h = this.#height;
+        if (w <= 0 || h <= 0) {
+            return;
+        }
+        const absX = this.#x;
+        const absY = this.#y;
+        const { bgRgba } = this.#colorScheme;
+        buffer.pushClip(absX, absY, w, h);
+        buffer.drawRect({
+            x: absX, y: absY, width: w, height: h, bgRgba,
+        });
+        if (this.#playerState === 'loading') {
+            if (!this.#loading && this.#src && !this.#frameData) {
+                this.#loading = true;
+                this.#load().catch(() => {
+                    this.#playerState = 'error';
+                });
+            }
+            const message = this.#loadingProgress || (this.#src ? `Loading: ${this.#src}` : 'Loading...');
+            this.#drawOverlay(buffer, absX, absY, w, h, message);
+            buffer.popClip();
+            return;
+        }
+        if (this.#playerState === 'error') {
+            const message = this.#src ? `Error: ${this.#src}` : 'No src or data provided';
+            this.#drawOverlay(buffer, absX, absY, w, h, message);
+            buffer.popClip();
+            return;
+        }
+        // Render current frame — batch by row to stay within DrawListBuffer limits
+        if (this.#frameData && this.#frameCols > 0 && this.#frameRows > 0) {
+            const offsetX = Math.max(0, Math.floor((w - this.#frameCols) / 2));
+            const offsetY = Math.max(0, Math.floor((h - this.#frameRows) / 2));
+            const rowSize = this.#frameCols;
+            const frameStart = this.#currentFrame * (rowSize * this.#frameRows);
+            const { dotRgba } = this.#colorScheme;
+            for (let row = 0; row < this.#frameRows; row++) {
+                const renderY = absY + offsetY + row;
+                if (renderY < absY || renderY >= absY + h) {
+                    continue;
+                }
+                let rowText = '';
+                for (let col = 0; col < this.#frameCols; col++) {
+                    const index = frameStart + (row * rowSize) + col;
+                    const brailleByte = this.#frameData[index];
+                    rowText += brailleByte === 0 ? ' ' : String.fromCodePoint(0x28_00 + brailleByte);
+                }
+                buffer.drawText({
+                    x: absX + offsetX,
+                    y: renderY,
+                    text: rowText,
+                    fgRgba: dotRgba,
+                    bgRgba,
+                });
+            }
+        }
+        // State overlay
+        switch (this.#playerState) {
+            case 'ready': {
+                const hint = this.#audioSrc ? 'SPACE to play (with audio)' : 'SPACE to play';
+                this.#drawOverlay(buffer, absX, absY, w, h, hint);
+                break;
+            }
+            case 'paused': {
+                this.#drawOverlay(buffer, absX, absY, w, h, 'PAUSED');
+                break;
+            }
+            case 'ended': {
+                this.#drawOverlay(buffer, absX, absY, w, h, 'END  SPACE=replay  R=reset');
+                break;
+            }
+            case 'playing': {
+                break;
+            }
+        }
+        // Progress bar at bottom
+        if (this.#frameCount > 0 && h > 2) {
+            const progress = (this.#currentFrame + 1) / this.#frameCount;
+            const barWidth = Math.max(1, Math.floor(w * progress));
+            buffer.drawRect({
+                x: absX, y: absY + h - 1, width: barWidth, height: 1, bgRgba: this.#colorScheme.textRgba,
+            });
+        }
+        buffer.popClip();
+    }
+    #drawOverlay(buffer, absX, absY, w, h, text) {
+        buffer.drawText({
+            x: absX + Math.max(0, Math.floor((w - text.length) / 2)),
+            y: absY + Math.floor(h / 2),
+            text,
+            fgRgba: this.#colorScheme.textRgba,
+            bgRgba: this.#colorScheme.bgRgba,
+        });
+    }
+    #parseBinData(raw) {
+        if (raw.length < 12 || raw[0] !== 0xBA || raw[1] !== 0xAD || raw[2] !== 0x01) {
+            this.#playerState = 'error';
+            return;
+        }
+        this.#fps = raw[3];
+        this.#frameCols = raw[4] | (raw[5] << 8);
+        this.#frameRows = raw[6] | (raw[7] << 8);
+        const frameArea = this.#frameCols * this.#frameRows;
+        this.#frameCount = raw[8] | (raw[9] << 8) | (raw[10] << 16) | (raw[11] << 24);
+        this.#frameInterval = Math.floor(1000 / this.#fps);
+        const expectedSize = 12 + (this.#frameCount * frameArea);
+        if (raw.length < expectedSize) {
+            this.#playerState = 'error';
+            return;
+        }
+        this.#frameData = raw.slice(12, expectedSize);
+        this.#playerState = 'ready';
+    }
+    async #load() {
+        const src = this.#src;
+        if (src.endsWith('.bin')) {
+            await this.#loadFromBinFile(src);
+        }
+        else if (isVideoFile(src)) {
+            await this.#loadFromVideo(src);
+        }
+        else {
+            this.#playerState = 'error';
+        }
+    }
+    async #loadFromBinFile(path) {
+        try {
+            const file = Bun.file(path);
+            const buffer = await file.arrayBuffer();
+            this.#parseBinData(new Uint8Array(buffer));
+        }
+        catch {
+            this.#playerState = 'error';
+        }
+    }
+    async #loadFromVideo(path) {
+        const cols = Math.max(1, this.#width);
+        const rows = Math.max(1, this.#height);
+        const pixelW = cols * 2;
+        const pixelH = rows * 4;
+        const rawFrameSize = pixelW * pixelH;
+        this.#fps = this.#targetFps;
+        this.#frameInterval = Math.floor(1000 / this.#fps);
+        this.#loadingProgress = 'Decoding 0 frames...';
+        try {
+            const proc = Bun.spawn([
+                'ffmpeg',
+                '-i',
+                path,
+                '-vf',
+                `scale=${pixelW}:${pixelH}`,
+                '-pix_fmt',
+                'gray',
+                '-r',
+                String(this.#fps),
+                '-f',
+                'rawvideo',
+                '-v',
+                'quiet',
+                'pipe:1',
+            ], {
+                stdout: 'pipe',
+                stderr: 'ignore',
+            });
+            this.#ffmpegProcess = proc;
+            const chunks = [];
+            let frameCount = 0;
+            const reader = proc.stdout.getReader();
+            let leftover = new Uint8Array(0);
+            while (true) {
+                // eslint-disable-next-line no-await-in-loop
+                const { done, value } = await reader.read();
+                if (done) {
+                    break;
+                }
+                const merged = new Uint8Array(leftover.length + value.length);
+                merged.set(leftover);
+                merged.set(value, leftover.length);
+                let offset = 0;
+                while (offset + rawFrameSize <= merged.length) {
+                    const rawFrame = merged.slice(offset, offset + rawFrameSize);
+                    chunks.push(encodeBrailleFrame(rawFrame, cols, rows, this.#threshold, this.#invert));
+                    frameCount++;
+                    offset += rawFrameSize;
+                    if (frameCount % 100 === 0) {
+                        this.#loadingProgress = `Decoding ${frameCount} frames...`;
+                    }
+                }
+                leftover = merged.slice(offset);
+            }
+            this.#ffmpegProcess = undefined;
+            const exitCode = await proc.exited;
+            if (exitCode !== 0 && frameCount === 0) {
+                this.#playerState = 'error';
+                return;
+            }
+            // Assemble frame data
+            const frameArea = cols * rows;
+            this.#frameCols = cols;
+            this.#frameRows = rows;
+            this.#frameCount = frameCount;
+            this.#frameData = new Uint8Array(frameCount * frameArea);
+            let writeOffset = 0;
+            for (const chunk of chunks) {
+                this.#frameData.set(chunk, writeOffset);
+                writeOffset += chunk.length;
+            }
+            // Extract audio to temp WAV for byte-accurate seeking
+            try {
+                const temporaryAudio = `${path}.buntui-audio.wav`;
+                const audioProc = Bun.spawn([
+                    'ffmpeg',
+                    '-i',
+                    path,
+                    '-vn',
+                    '-f',
+                    'wav',
+                    '-y',
+                    temporaryAudio,
+                ], {
+                    stdout: 'ignore',
+                    stderr: 'ignore',
+                });
+                const audioExit = await audioProc.exited;
+                if (audioExit === 0) {
+                    this.#audioSrc = temporaryAudio;
+                    this.#audioTempFile = temporaryAudio;
+                }
+            }
+            catch {
+                // Audio extraction failed, keep original source
+            }
+            this.#loadingProgress = '';
+            this.#playerState = 'ready';
+        }
+        catch {
+            this.#playerState = 'error';
+        }
+    }
+    #killFfmpeg() {
+        if (this.#ffmpegProcess) {
+            try {
+                this.#ffmpegProcess.kill();
+            }
+            catch {
+                // Process may have already exited
+            }
+            this.#ffmpegProcess = undefined;
+        }
+    }
+    #cleanupTempAudio() {
+        if (this.#audioTempFile) {
+            try {
+                void Bun.file(this.#audioTempFile).unlink();
+            }
+            catch {
+                // File may already be gone
+            }
+            this.#audioTempFile = undefined;
+        }
+    }
+    #startAudio(offsetMs) {
+        if (!this.#audioSrc) {
+            return;
+        }
+        this.#stopAudio();
+        const args = ['ffplay', '-nodisp', '-autoexit', '-loglevel', 'quiet'];
+        if (offsetMs > 0) {
+            args.push('-ss', String(offsetMs / 1000));
+        }
+        args.push(this.#audioSrc);
+        try {
+            this.#audioProcess = Bun.spawn(args, {
+                stdin: 'ignore',
+                stdout: 'ignore',
+                stderr: 'ignore',
+            });
+        }
+        catch {
+            // Ffplay not available, skip audio
+        }
+    }
+    #stopAudio() {
+        if (this.#audioProcess) {
+            try {
+                this.#audioProcess.kill();
+            }
+            catch {
+                // Process may have already exited
+            }
+            this.#audioProcess = undefined;
+        }
+    }
+}
+export function createVideoPlayerWidget(options) {
+    return new VideoPlayerWidget(options);
+}
+export default VideoPlayerWidget;

package/dist/widgets/videoplayer/braille.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Braille dot bit positions within a 2x4 cell grid.
+ * Each entry: [dx, dy, bitIndex]
+ * Maps pixel positions to the Unicode braille dot encoding.
+ */
+export declare const BRAILLE_DOTS: ReadonlyArray<readonly [number, number, number]>;
+export declare function isVideoFile(path: string): boolean;
+/**
+ * Encode a raw grayscale frame into braille dot patterns.
+ * Each 2x4 pixel block becomes one braille cell byte.
+ *
+ * @param pixels - Raw grayscale pixel data (width * height bytes)
+ * @param cols   - Number of braille columns (width / 2)
+ * @param rows   - Number of braille rows (height / 4)
+ * @param threshold - Brightness threshold (0-255). Pixels darker -> dots
+ * @param invert - If true, bright pixels become dots instead
+ */
+export declare function encodeBrailleFrame(pixels: Uint8Array, cols: number, rows: number, threshold: number, invert: boolean): Uint8Array;

package/dist/widgets/videoplayer/braille.js

@@ -0,0 +1,69 @@
+/**
+ * Braille dot bit positions within a 2x4 cell grid.
+ * Each entry: [dx, dy, bitIndex]
+ * Maps pixel positions to the Unicode braille dot encoding.
+ */
+export const BRAILLE_DOTS = [
+    [0, 0, 0],
+    [0, 1, 1],
+    [0, 2, 2],
+    [1, 0, 3],
+    [1, 1, 4],
+    [1, 2, 5],
+    [0, 3, 6],
+    [1, 3, 7],
+];
+const VIDEO_EXTENSIONS = new Set([
+    '.mp4',
+    '.mkv',
+    '.avi',
+    '.webm',
+    '.mov',
+    '.flv',
+    '.wmv',
+    '.ts',
+    '.mts',
+    '.m4v',
+    '.ogv',
+    '.3gp',
+]);
+export function isVideoFile(path) {
+    const dot = path.lastIndexOf('.');
+    if (dot === -1) {
+        return false;
+    }
+    return VIDEO_EXTENSIONS.has(path.slice(dot).toLowerCase());
+}
+/**
+ * Encode a raw grayscale frame into braille dot patterns.
+ * Each 2x4 pixel block becomes one braille cell byte.
+ *
+ * @param pixels - Raw grayscale pixel data (width * height bytes)
+ * @param cols   - Number of braille columns (width / 2)
+ * @param rows   - Number of braille rows (height / 4)
+ * @param threshold - Brightness threshold (0-255). Pixels darker -> dots
+ * @param invert - If true, bright pixels become dots instead
+ */
+export function encodeBrailleFrame(pixels, cols, rows, threshold, invert) {
+    const pixelW = cols * 2;
+    const pixelH = rows * 4;
+    const result = new Uint8Array(cols * rows);
+    for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < cols; col++) {
+            let byte = 0;
+            for (const [dx, dy, bit] of BRAILLE_DOTS) {
+                const px = (col * 2) + dx;
+                const py = (row * 4) + dy;
+                if (px < pixelW && py < pixelH) {
+                    const brightness = pixels[(py * pixelW) + px];
+                    const isOn = invert ? brightness >= threshold : brightness < threshold;
+                    if (isOn) { // eslint-disable-line max-depth
+                        byte |= (1 << bit);
+                    }
+                }
+            }
+            result[(row * cols) + col] = byte;
+        }
+    }
+    return result;
+}

package/dist/widgets/videoplayer/defaults.d.ts

@@ -0,0 +1,3 @@
+import type { VideoPlayerColorScheme, VideoPlayerWidgetOptions } from './types';
+export declare const DEFAULT_VIDEOPLAYER_COLOR_SCHEME: VideoPlayerColorScheme;
+export declare const DEFAULT_VIDEOPLAYER_OPTIONS: VideoPlayerWidgetOptions;

package/dist/widgets/videoplayer/defaults.js

@@ -0,0 +1,17 @@
+import { rgbToRgba } from '@buntui/core';
+export const DEFAULT_VIDEOPLAYER_COLOR_SCHEME = {
+    dotRgba: rgbToRgba(0xFF, 0xFF, 0xFF),
+    bgRgba: rgbToRgba(0x00, 0x00, 0x00),
+    textRgba: rgbToRgba(0x88, 0x88, 0x88),
+};
+export const DEFAULT_VIDEOPLAYER_OPTIONS = {
+    x: 0,
+    y: 0,
+    width: '100%',
+    height: '100%',
+    colorScheme: DEFAULT_VIDEOPLAYER_COLOR_SCHEME,
+    loop: false,
+    threshold: 128,
+    invert: false,
+    fps: 30,
+};

package/dist/widgets/videoplayer/types.d.ts

@@ -0,0 +1,21 @@
+import type { TuiSizeValue } from '@buntui/core';
+export type VideoPlayerState = 'loading' | 'ready' | 'playing' | 'paused' | 'ended' | 'error';
+export type VideoPlayerColorScheme = {
+    dotRgba: number;
+    bgRgba: number;
+    textRgba: number;
+};
+export type VideoPlayerWidgetOptions = {
+    x?: TuiSizeValue;
+    y?: TuiSizeValue;
+    width?: TuiSizeValue;
+    height?: TuiSizeValue;
+    src?: string;
+    audioSrc?: string;
+    data?: Uint8Array;
+    colorScheme?: Partial<VideoPlayerColorScheme>;
+    loop?: boolean;
+    threshold?: number;
+    invert?: boolean;
+    fps?: number;
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+    "name": "@buntui/extensions",
+    "version": "0.0.0",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/AlphaFoxz/buntui.git",
+        "directory": "packages/extensions"
+    },
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./matrix": {
+            "types": "./dist/matrix.d.ts",
+            "default": "./dist/matrix.js"
+        },
+        "./framerate": {
+            "types": "./dist/framerate.d.ts",
+            "default": "./dist/framerate.js"
+        },
+        "./snake": {
+            "types": "./dist/snake.d.ts",
+            "default": "./dist/snake.js"
+        },
+        "./videoplayer": {
+            "types": "./dist/videoplayer.d.ts",
+            "default": "./dist/videoplayer.js"
+        },
+        "./logger": {
+            "types": "./dist/logger.d.ts",
+            "default": "./dist/logger.js"
+        }
+    },
+    "files": [
+        "dist/"
+    ],
+    "sideEffects": false,
+    "scripts": {
+        "build": "tsc --project ./tsconfig.json"
+    },
+    "dependencies": {
+        "@buntui/core": "^0.0.0"
+    },
+    "devDependencies": {
+        "@types/bun": "^1.3.14"
+    }
+}