@muabe/muabe-player-web

Web Component + JS SDK for Muabe .miv playback.

Status

This package currently provides:

• <muabe-player> custom element API surface
• createMuabePlayer(...) JS SDK wrapper
• iframe runtime bridge protocol
• default runtime endpoint (production): https://webplayer.muabe.com/muabe-player-runtime/index.html

Companion runtime app:

• apps/muabe_player_runtime_web (Flutter Web)
• receives bridge commands via postMessage
• renders .miv using MuabePlayerView

Runtime URL policy

Default runtime URL (all hosts, including localhost):

• https://webplayer.muabe.com/muabe-player-runtime/index.html

You can override per element:

<muabe-player runtime-url="/custom-runtime/index.html"></muabe-player>

Runtime-host stub (debug only)

public/runtime-host.html is a development stub page for bridge debugging. It is not the production runtime.

Production runtime should use:

• apps/muabe_player_runtime_web build output
• served under /muabe-player-runtime/

Quick Usage

<script type="module">
  import './player-sdk/index.js';
</script>
<muabe-player src="./sample.miv"></muabe-player>

기본 레이아웃 정책:

• layout-mode="adaptive"(기본값): 부모 높이가 있으면 부모를 채우고, 없으면 16:9 fallback
• fullscreen 기본 fit: fullscreen-fit="contain" (왜곡 없이 전체 표시)

Runtime Build

cd /Users/bobby/workspace/muabe/no-code/muabe_player
./scripts/local/build_web_delivery.sh
./scripts/local/serve_web_delivery.sh

API

<muabe-player> attributes:

• src
• autoplay
• initial-page
• runtime-url
• layout-mode (adaptive | aspect | viewport)
• fullscreen-fit (contain | cover)

Methods:

• load(source)
• play()
• pause()
• stop()
• seek(ms)
• nextPage()
• prevPage()
• goToPage(index)
• setPlaybackRate(rate)
• getState()
• dispose()

Events:

• ready
• error
• pageChanged
• playbackStateChanged
• interaction
• ended

Event payload policy (v1):

• playbackStateChanged: actively emitted by runtime
• interaction: reserved, default runtime path does not emit yet
• ended: reserved, default runtime path does not emit yet

Breaking Change (v1.0.0)

• Removed volume-related API surface:
  • Removed muted attribute
  • Removed setMuted(value) and setVolume(value) methods
  • Removed muted and volume fields from getState()

If you need audio policy control, implement it via Graphy role composition at content level.

Control Policy (Current)

• Runtime actual media control is currently guaranteed for play() and pause().
• stop(), seek(ms), and setPlaybackRate(rate) remain exposed as API surface, but detailed media semantics are intentionally not fixed yet.
• Future advanced control should be designed via Graphy role composition, not by re-introducing global volume APIs.

Web Embed E2E

Playwright 기반 E2E는 아래 명령으로 실행한다.

cd /Users/bobby/workspace/muabe/no-code/muabe_player/packages/muabe_player_web
npm run test:e2e

빌드부터 포함해 실행하려면:

npm run test:e2e:build

검증 파일:

• e2e/web-embed.spec.ts

CDN Usage

jsDelivr:

<script type="module" src="https://cdn.jsdelivr.net/npm/@muabe/muabe-player-web@1/dist/index.js"></script>

unpkg:

<script type="module" src="https://unpkg.com/@muabe/muabe-player-web@1/dist/index.js"></script>

runtime-url를 지정하면 기본값을 override할 수 있다.

Layout & Fullscreen

layout-mode:

• adaptive (default): parent height가 유효하면 fill, 아니면 16:9 fallback
• aspect: 항상 16:9 fallback
• viewport: 항상 viewport fill

fullscreen-fit:

• contain (default): 레터박스 허용, 왜곡 없음
• cover: 화면을 채우되 일부 크롭 가능

예시:

<muabe-player
  src="./sample.miv"
  layout-mode="adaptive"
  fullscreen-fit="contain"
></muabe-player>