Using with the Live Page

Example Code for Implementing with the Saucelive Player Library

STEP1. Prepare the Saucelive Player code in advance. (For handleMessage, please refer to the Saucelive Payload Definition . The implementation may vary slightly depending on your customer verification API.)

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Saucelive Player Example Code</title>
</head>
<body>
  <div id="sauce_live"></div>
</body>
<script type="text/javascript" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
<script>
  let isLogin = false;

  async function checkLoginStatus() {
    try {
      const response = await fetch('Customer verification API');
      const data = await response.json();

      isLogin = !!data.id;
      return data;
    } catch (error) {
      console.error("Error occurred while checking login status:", error);
      return null;
    }
  }

  function handleMessage(event) {
    if (typeof event.data !== "string") return;

    try {
      const jsonData = JSON.parse(event.data);

      switch (jsonData.key) {
        case "sauceflexEnter":
          console.log("Enter broadcast", jsonData.params);
          break;
        case "sauceflexBroadcastStatus":
          console.log("Broadcast status", jsonData.params.broadcastStateCode);
          break;
        case "sauceflexMoveExit":
          console.log("Exit broadcast");
          break;
        case "sauceflexMoveBanner":
          console.log("Banner data:", jsonData.params);
          break;
        case "sauceflexMoveLogin":
          console.log("Broadcast login");
          break;
        case "sauceflexMoveProduct":
          console.log("Product data:", jsonData.params);
          break;
        case "sauceflexOnShare":
          console.log("Share link:", jsonData.params);
          break;
        case "sauceflexPictureInPicture":
          console.log("PIP");
          break;
        case "sauceflexSendPlayTime":
          console.log("Current broadcast position:", jsonData.params.position);
          break;
        case "sauceflexMoveReward":
          console.log("Reward link:", jsonData.params.linkUrl);
          break;
        case "sauceflexMoveCoupon":
          console.log("Coupon link:", jsonData.params.linkUrl);
          break;
        default:
          console.warn("Unknown event:", jsonData);
      }
    } catch (error) {
      console.error("Failed to parse event message:", error);
    }
  }

  window.addEventListener("load", async () => {
    const sauceUrl = new URL(location.href);
    const broadcastId = sauceUrl.searchParams.get("broadcastId");

    const userData = await checkLoginStatus();
    const memberId = userData?.id;
    const nickname = userData?.nickname ?? userData?.name ?? "Guest";

    window.SauceLiveLib.setInit({ broadcastId });

    if (broadcastId && isLogin) {
      window.SauceLiveLib.setMemberObject({ memberId, nickname });
    } else {
      window.SauceLiveLib.setMemberToken(" ");
    }
    window.SauceLiveLib.load();
    window.addEventListener("message", handleMessage);
  });

</script>
</html>

STEP 2. After building your Collection page, check the broadcast link created earlier and insert it next to window.location.href as shown below.

<div id='sauce_collect'></div>
<script type="text/javascript" src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
<script>
 function flexCollectMoveBroadcast(params){
     const regex = /\/broadcast\/([^?]+)/;
     const match = params.broadcastUrl.match(regex);
     if(!match) return
     const broadcastId=match[1]
     // Add the link you created in the previous step below.
      window.location.href= '/live?broadcastId=' + broadcastId
  } 
  window.addEventListener(
    "load",  async () => {
   //  Be sure to enter the partner ID exactly as provided by Mobidoo.
      const partnerId = " "; 
      window.SauceWebLib.setInit({partnerId: partnerId });
      window.SauceWebLib.load();
     },
    false
  );
</script>

Example code for implementing the Saucelive player using a custom Saucelive link.

STEP 1. User authentication integration is completed through the Collection page. refer to the link

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Saucelive Player Example Code</title>
</head>
<body>
<div id="sauce_collect"></div>
</body>
<script
  type="text/javascript"
  src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
<script>

  async function checkLoginStatus() {
    try {
      const response = await fetch('Customer verification API')
      const data = await response.json()
      return data
    } catch (error) {
      console.error('Error occurred while checking login status:', error)
      return null
    }
  }

  window.addEventListener(
    'load',
    async () => {
      //  Be sure to enter the partner ID exactly as provided by Mobidoo.
      const partnerId = 'uiux'

      const userData = await checkLoginStatus()
      const memberId = userData?.id
      const nickname = userData?.nickname ?? userData?.name ?? 'Guest'

      window.SauceWebLib.setInit({ partnerId: partnerId })
      if (memberId && nickname) {
        window.SauceWebLib.setMemberObject({
          nickName: nickname,
          memberId: memberId,
        })
      }
      window.SauceWebLib.load()
    },
    false,
  )
</script>

</html>