I have made an app in Tizen Studio its a hls stream player but keeps infinite loading

Question

I have made an app in Tizen Studio its a hls stream player it uses hls.js to play a stream and has remote controls and a little more things when i test it in the tizen studio emulator everything works but after i package it and add it to samsung seller the qa testers keep saying it infinite loads. What could be the problem? This is the main.js

  var videoPlayer = document.getElementById("videoPlayer");
  videoPlayer.tabIndex = 0; // add tabindex to focus the element
  videoPlayer.requestFullscreen();

  var player = new shaka.Player(videoPlayer);

  player.configure({
    abr: {
      enabled: true
    }
  });

  var manifestUri = 'removed';

  player.load(manifestUri).then(function() {
    console.log('The video has now been loaded!');
    videoPlayer.requestFullscreen();
  }).catch(function(error) {
    console.error('Error code', error.code, 'object', error);
  });

  player.addEventListener('error', function(event) {
    console.error('Error code', event.detail.code, 'object', event.detail);
    console.log('A video playback error occurred.');
    if (event.detail.code === 6003 || event.detail.code === 6004 || event.detail.code === 6005) {
      console.log('The video failed to load due to a network error. Retrying...');
      showOfflineNotification();
      setTimeout(function() {
        player.load(manifestUri);
      }, 5000);
    }
  });

  function showOfflineNotification() {
    var offlineNotification = document.getElementById("offline-popup");
    offlineNotification.style.display = "block";
    videoPlayer.style.display = "none";
  }

  function showOnlineNotification() {
    var offlineNotification = document.getElementById("offline-popup");
    offlineNotification.style.display = "none";
    videoPlayer.style.display = "block";
    player.load(manifestUri).then(function() {
      console.log('The video has now been loaded!');
      videoPlayer.requestFullscreen();
    }).catch(function(error) {
      console.error('Error code', error.code, 'object', error);
    });
  }

  window.addEventListener("online", showOnlineNotification);
  window.addEventListener("offline", showOfflineNotification);

  if (navigator.onLine) {
    showOnlineNotification();
  } else {
    showOfflineNotification();
  }

  // Add event listeners to the buttons
  var playButton = document.getElementById("playButton");
  var pauseButton = document.getElementById("pauseButton");
  var stopButton = document.getElementById("stopButton");
  var forwardButton = document.getElementById("forwardButton");
  var backwardButton = document.getElementById("backwardButton");

  playButton.addEventListener("click", function() {
    player.play();
  });

  pauseButton.addEventListener("click", function() {
    player.pause();
  });

  stopButton.addEventListener("click", function() {
    player.pause();
    player.seek(0);
  });

  forwardButton.addEventListener("click", function() {
    var currentTime = player.getPlaybackRate();
    player.seek(currentTime + 10);
  });

  backwardButton.addEventListener("click", function() {
    var currentTime = player.getPlaybackRate();
    player.seek(currentTime - 10);
  });
  
//Register listeners for remote control buttons
  tizen.tvinputdevice.registerKey("MediaPlay", function() {
    player.play();
  });

  tizen.tvinputdevice.registerKey("MediaPause", function() {
    player.pause();
  });

  tizen.tvinputdevice.registerKey("MediaStop", function() {
    player.pause();
    player.seek(0);
  });

  tizen.tvinputdevice.registerKey("MediaFastForward", function() {
    var currentTime = player.getPlaybackRate();
    player.seek(currentTime + 10);
  });

  tizen.tvinputdevice.registerKey("MediaRewind", function() {
    var currentTime = player.getPlaybackRate();
    player.seek(currentTime - 10);
  });


//Add event listener to handle keyboard controls
  document.addEventListener("keydown", function(event) {
    if (event.target !== videoPlayer) return; // check if videoPlayer has focus
    switch (event.keyCode) {
      case 10009: // Return key
        window.history.back();
        break;
      case 415: // Play key
        if (player.isPaused()) {
          player.play();
        } else {
          player.pause();
        }
        break;
      case 413: // Stop key
        player.pause();
        player.seek(0);
        break;
      case 417: // Forward key
        var currentTime = player.getPlaybackRate();
        player.seek(currentTime + 10);
        break;
      case 412: // Backward key
        var currentTime = player.getPlaybackRate();
        player.seek(currentTime - 10);
        break;
      default:
        console.log("Unsupported key: " + event.keyCode);
    }
  });
});````

Answer 1

You may be trying to use the player and its methods before the DOM has fully initialized.

At a first glance videoPlayer.requestFullscreen(); is running before that method can be used so that is one issue, but that shouldn't prevent the app from launching.

I also tried to run your code ona device with a dummy HTML file, and you main.js renders on the device.

Did not note anything there that could stall, or cause infinite loading.

So the next step is to look at your video:

• is it geo blocked?
• is it giving the TV CORs errors?
• is there another playback error?

Then after that, there are other issues that could arise; like how the app was packaged.

• did you create a certificate, and sign the app?