작은 창 UI 레이아웃

작은 창 UI 레이아웃 — 소스라이브 플레이어

⏱ 예상 소요 시간: 5~10분

📋 사전 조건: 띄울 방송 지정

🔧 선택 단계 — 생략하면 컨트롤형으로 동작합니다

작은 창 UI 레이아웃

플로팅 플레이어 위에 무엇을 그릴지를 layout.type으로 선택합니다. 시청 제어 버튼을 그대로 노출하는 control과, LIVE 뱃지만 얹어 최소한으로 노출하는 badge 두 가지입니다.
layout 은 선택 항목이고, 생략하면 control 로 동작합니다.

📘 기본값은 control이라 기존 코드는 그대로 두어도 동작이 바뀌지 않습니다. 뱃지형이 필요할 때만 layout을 추가하세요.

비교 항목	🎛 컨트롤형 `control` (기본)	🔴 뱃지형 `badge`
작은 창 위에	닫기·음소거·확대 버튼	LIVE 뱃지 + 닫기(×) 버튼
영상을 탭하면	재생 / 일시정지	전체화면으로 전환
버튼 구성 변경	가능 (`layout.buttonList`)	불가 — 버튼이 없는 구성
뱃지 이미지 교체	해당 없음	가능 (`layout.badgeImageUrl`)
뱃지 표시 조건	해당 없음	실제 방송 중일 때만 표시 (편성표 상태에서는 노출 안 됨)
추천 상황	시청 중 제어(음소거·확대)를 바로 쓸 수 있게 하고 싶을 때	홈·목록처럼 화면을 덜 가리면서 라이브 중임을 알리고 싶을 때

JavaScript — 컨트롤형 레이아웃

window.SauceLiveLib.setInit({ broadcastId: '라이브ID를 입력해주세요' });
window.SauceLiveLib.setFloatingType({
  type: 'basic',
  layout: {
    type: 'control',               // 기본값 — layout 자체를 생략해도 동일
    buttonList: ['exit']           // 선택 — 닫기 버튼만 노출
  }
});
window.SauceLiveLib.load();

JavaScript — 뱃지형 레이아웃

window.SauceLiveLib.setInit({ broadcastId: '라이브ID를 입력해주세요' });
window.SauceLiveLib.setFloatingType({
  type: 'basic',
  layout: {
    type: 'badge',
    badgeImageUrl: 'https://example.com/live-badge.png'  // 선택 — 미설정 시 기본 LIVE 뱃지
  }
});
window.SauceLiveLib.load();

뱃지 이미지 교체 시 확인할 것 .png · .svg만 지원

항목	기준
지원 형식	`.png` · `.svg` — `.jpg`/`.jpeg`는 사용할 수 없습니다. 배경을 투명하게 만들 수 없어 뱃지 주변에 사각형 배경이 남기 때문입니다.
권장 크기	높이 24px 기준으로 표시되며, 가로는 최대 80px까지 노출됩니다. 비율은 유지된 채 맞춰집니다.
실패 시 동작	이미지 로딩이 3초를 넘기거나 실패하면 기본 LIVE 뱃지로 자동 대체됩니다. 뱃지가 아예 사라지지는 않습니다.

⚠️ 레이아웃에 맞지 않는 옵션은 무시됩니다. 뱃지형에 buttonList를 주거나 컨트롤형에 badgeImageUrl을 주면 해당 값만 조용히 버려지고 브라우저 콘솔에 경고가 남습니다. 설정이 반영되지 않으면 콘솔을 먼저 확인하세요.

다음 단계

📐 위치·크기·이동 영역 — 작은 창의 세부 옵션

→