Step 4: 정리 및 해제

이 프롬프트는 LLM이 HTML5/Web용 적절한 리소스 정리를 구현하도록 안내합니다.

사용 전: {{AD_TYPE}}과 {{APPROACH}}를 입력하세요.

We are integrating the FLOWER SDK into our HTML5/Web project.
This step implements proper cleanup when stopping playback or leaving the page.

AD_TYPE: {{AD_TYPE}}
(linear-tv | vod | interstitial)

APPROACH: {{APPROACH}}
(flower-hls | media-player-hook)
Note: For interstitial AD_TYPE, no APPROACH selection is needed.

========================================
PART 1 — Cleanup Function
========================================

IMPORTANT: For proper cleanup to work:
1. Declare flowerAdView and adsManagerListener at module scope using `let` (not `const`),
   initialized to `null`.
2. Create FlowerAdView INSIDE the play function (not at module scope) so it can be
   recreated on each playback.
3. Call stopPlayback() at the START of the play function to clean up any previous session.
4. At the end of stopPlayback(), set flowerAdView and adsManagerListener to null.

If APPROACH is "flower-hls":

  function stopPlayback() {
      if (hls) {
          hls.removeAdListener(adsManagerListener);
          hls.destroy();
          hls = null;
      }
  }

If APPROACH is "media-player-hook":

  function stopPlayback() {
      if (flowerAdView && adsManagerListener) {
          flowerAdView.adsManager.removeListener(adsManagerListener);
          flowerAdView.adsManager.stop();
      }

      // Destroy player (depends on player type)
      // HLS.js:
      if (player) { player.destroy(); player = null; }
      // Bitmovin:
      if (player) { player.destroy(); player = null; }
      // Dash.js:
      if (player) { player.destroy(); player = null; }

      // Clear video element
      const video = document.getElementById('video-element');
      if (video) {
          video.pause();
          video.removeAttribute('src');
          video.load();
      }

      flowerAdView = null;
      adsManagerListener = null;
  }

If AD_TYPE is "interstitial":

  function stopAd() {
      if (flowerAdView && adsManagerListener) {
          flowerAdView.adsManager.removeListener(adsManagerListener);
          flowerAdView.adsManager.stop();
      }
      flowerAdView = null;
      adsManagerListener = null;
  }

========================================
PART 2 — Page Unload (Optional)
========================================

Clean up on page navigation:

If AD_TYPE is "linear-tv" or "vod":

  window.addEventListener('beforeunload', () => {
      stopPlayback();
  });

  React useEffect cleanup:
  useEffect(() => {
      return () => { stopPlayback(); };
  }, []);

If AD_TYPE is "interstitial":

  window.addEventListener('beforeunload', () => {
      stopAd();
  });

  React useEffect cleanup:
  useEffect(() => {
      return () => { stopAd(); };
  }, []);

========================================
PART 3 — VOD Playback State Control (media-player-hook only)
========================================

Notify SDK about user-initiated pause/resume:

  // User pauses content
  function onUserPause() {
      videoElement.pause();
      flowerAdView.adsManager.pause();
  }

  // User resumes content
  function onUserResume() {
      videoElement.play();
      flowerAdView.adsManager.resume();
  }

  // Exit VOD
  function onVodExit() {
      flowerAdView.adsManager.stop();
  }

========================================
CONSTRAINTS
========================================

- Always remove listener BEFORE calling stop().
- FlowerHls uses hls.removeAdListener() and hls.destroy().
- Media-player-hook uses flowerAdView.adsManager.removeListener() and flowerAdView.adsManager.stop().
- HTML5 SDK does NOT require FlowerSdk.destroy() — no explicit SDK release needed.
- Always destroy the player instance to prevent memory leaks.