라이브 알림 버튼 연동

라이브 알림 버튼 연동 — 소스라이브 플레이어

📋 선행 조건: 브릿지 이벤트 연동 완료

⚙️ 어드민 '라이브 알림' 사용 설정 필요

📨 알림 받기/해제는 고객사 측 구현 필요

→

신청 후

사전 준비

라이브 알림 기능을 사용하려면 아래 세 가지가 모두 준비되어야 합니다.

고객사 측 알림 기능 준비

사용자에게 알림 받기/해제를 제공하는 기능(푸시 구독 등)을 고객사 측에서 준비합니다.

알림 받기/해제 브릿지 이벤트 구현

sauceflexTurnOnNotification·sauceflexTurnOffNotification 이벤트를 수신하는 리스너를 구현합니다. 이벤트 데이터 구조는 브릿지 이벤트 레퍼런스에 있습니다.

알림 받기 기능 설정 요청

고객성공팀에 파트너 설정의 '라이브 알림 기능'을 '사용함'으로 설정 요청합니다.

📨 고객성공팀 문의

알림 버튼 노출 조건

어드민의 라이브 편성·라이브 정보 페이지에서 '라이브 알림'을 '사용함'으로 설정한 경우, 라이브 시작 전 라이브 예고 플레이어에 알림 버튼이 노출됩니다.

📘 알림 버튼은 라이브 예고(시작 전) 상태의 플레이어에만 표시됩니다. 라이브가 시작되면 일반 플레이어로 전환되어 알림 버튼은 사라집니다.

알림 버튼 동작 순서

사용자가 알림 버튼을 누른 시점부터 버튼 상태가 갱신되기까지의 흐름입니다.

알림 버튼 클릭 → 이벤트 전송 (또는 로그인 모달)

로그인 상태이면 플레이어가 sauceflexTurnOnNotification(또는 해제 시 sauceflexTurnOffNotification) 이벤트를 전송합니다. 로그인 상태가 아니면 로그인 모달을 먼저 노출합니다.

🎯 브릿지 이벤트 발생

고객사 측 알림 받기/해제 처리

고객사는 이벤트를 받아 직접 구현한 알림 받기/해제 기능을 처리합니다.

처리 결과 → 콜백 이벤트 전송

고객사는 처리 결과를 result(success·fail·cancel)에 담아 sauceflexTurnOnNotificationCallback(또는 sauceflexTurnOffNotificationCallback)으로 플레이어에 전송합니다.

↩ 콜백 필수 · 실패·취소 포함

플레이어가 콜백 대기

플레이어는 콜백이 도착할 때까지 시간 제한 없이 대기하고, 그동안 알림 버튼을 잠급니다.

콜백 결과값	플레이어 동작
`success`	알림 신청자 목록에 등록(해제면 삭제)하고 버튼 상태를 바꿉니다. 신청이면 완료 토스트 표시
`fail`	실패 토스트 · 버튼 유지
`cancel`	버튼 유지(토스트 없음) · 사용자가 거절한 경우
생략 · 그 밖의 값	`success` 로 처리

⚠️ 콜백을 보내지 않으면 알림 버튼이 잠긴 채 남습니다. 실패·취소도 콜백으로 전송합니다.

📘 이벤트를 받을 브릿지가 없는 환경에서는 대기 없이 바로 실패 토스트를 표시합니다.

구현 예시

플레이어가 보낸 알림 받기/해제 이벤트를 고객사가 수신하고, 처리 결과를 콜백으로 플레이어에 전송하는 예시입니다. 웹·Android·iOS 모두 동일한 key와 params로 이벤트를 수신합니다.
콜백은 웹이면 플레이어 iframe 의 contentWindow.postMessage, 앱 웹뷰면 evaluateJavascript 로 window.postMessage 를 호출해 전송합니다.

수신 이벤트 데이터(params) — 플레이어 → 고객사 · 받기/해제 공통

필드	타입	필수	설명
accessToken	String	-	플레이어에 설정된 회원 토큰. 없으면 `null`
broadcastId	String	필수	라이브 ID
broadcastUrl	String	필수	라이브 플레이어 링크
memberId	String	필수	유저 식별 ID
partnerUniqueId	String	필수	파트너 ID
programmingStartDt	String	필수	라이브 시작 예정 시간 (UTC, YYYY-MM-DDThh:mm:ss.sssZ)
programmingEndDt	String	필수	라이브 종료 예정 시간 (UTC, YYYY-MM-DDThh:mm:ss.sssZ)

📘 콜백(sauceflexTurnOnNotificationCallback·sauceflexTurnOffNotificationCallback)은 고객사 → 플레이어 방향이고, params는 { broadcastId, result } 입니다. 전체 구조는 브릿지 이벤트 레퍼런스에 있습니다.

웹 Android iOS

JavaScript — 이벤트 수신 · 콜백 전송

const iframe = document.getElementById('sauce-player')

// 처리 결과를 플레이어로 전송 — result: success · fail · cancel
const sendCallback = (key, broadcastId, result) => {
  iframe.contentWindow.postMessage(
    JSON.stringify({ key, params: { broadcastId, result } }),
    '*'
  )
}

window.addEventListener('message', async (e) => {
  if (typeof e.data !== 'string') return
  const { key, params } = JSON.parse(e.data)

  switch (key) {
    case 'sauceflexTurnOnNotification': {
      // 알림 신청 처리 후 결과('success'·'fail'·'cancel')를 돌려준다
      const result = await subscribeLiveAlarm(params)
      sendCallback('sauceflexTurnOnNotificationCallback', params.broadcastId, result)
      break
    }
    case 'sauceflexTurnOffNotification': {
      const result = await unsubscribeLiveAlarm(params)
      sendCallback('sauceflexTurnOffNotificationCallback', params.broadcastId, result)
      break
    }
  }
})

Kotlin — SauceflexBridge.kt

    @JavascriptInterface
    fun sauceflexTurnOnNotification(payload: String?) {
        val params      = JSONObject(payload ?: "{}")
        val broadcastId = params.optString("broadcastId", "")

        // 알림 신청 처리 후 결과("success"·"fail"·"cancel")를 넘긴다
        subscribeLiveAlarm(params) { result ->
            sendCallback("sauceflexTurnOnNotificationCallback", broadcastId, result)
        }
    }

    @JavascriptInterface
    fun sauceflexTurnOffNotification(payload: String?) {
        val params      = JSONObject(payload ?: "{}")
        val broadcastId = params.optString("broadcastId", "")

        unsubscribeLiveAlarm(params) { result ->
            sendCallback("sauceflexTurnOffNotificationCallback", broadcastId, result)
        }
    }

    // 처리 결과를 플레이어로 전송
    private fun sendCallback(key: String, broadcastId: String, result: String) {
        val message = JSONObject()
            .put("key", key)
            .put("params", JSONObject()
                .put("broadcastId", broadcastId)
                .put("result", result))
        activity?.runOnUiThread {
            webView.evaluateJavascript(
                "window.postMessage(JSON.stringify($message), '*')",
                null
            )
        }
    }

Kotlin — WebView 등록

webView.addJavascriptInterface(SauceflexBridge(context, activity), "sauceflex")

Swift — WKWebView 등록

contentController.add(self, name: "sauceflexTurnOnNotification")
contentController.add(self, name: "sauceflexTurnOffNotification")

Swift — ViewController.swift

func userContentController(
    _ userContentController: WKUserContentController,
    didReceive message: WKScriptMessage
) {
    guard let body = message.body as? String,
          let data = body.data(using: .utf8),
          let params = try? JSONSerialization.jsonObject(with: data) as? [String: Any]
    else { return }
    let broadcastId = params["broadcastId"] as? String ?? ""

    switch message.name {
    case "sauceflexTurnOnNotification":
        // 알림 신청 처리 후 결과("success"·"fail"·"cancel")를 넘긴다
        subscribeLiveAlarm(params) { result in
            sendCallback("sauceflexTurnOnNotificationCallback", broadcastId, result)
        }
    case "sauceflexTurnOffNotification":
        unsubscribeLiveAlarm(params) { result in
            sendCallback("sauceflexTurnOffNotificationCallback", broadcastId, result)
        }
    default: break
    }
}

// 처리 결과를 플레이어로 전송
func sendCallback(_ key: String, _ broadcastId: String, _ result: String) {
    let message: [String: Any] = [
        "key": key,
        "params": ["broadcastId": broadcastId, "result": result]
    ]
    guard let data = try? JSONSerialization.data(withJSONObject: message),
          let json = String(data: data, encoding: .utf8)
    else { return }

    webView.evaluateJavaScript("window.postMessage(JSON.stringify(\(json)), '*')")
}

📘 subscribeLiveAlarm·unsubscribeLiveAlarm은 고객사가 구현하는 알림 처리 함수의 예시입니다.

다음 단계

📋 브릿지 이벤트 레퍼런스 — 전체 이벤트 데이터 구조

→