<?php defined("APP") or die(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?=$data['title']?></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="icon" href="<?=PROOT?>/uploads/<?=$this->config['favicon']?>"/>
<script src="<?=$this->getJWLicense()?>"></script>
<link href="<?=getThemeURI()?>/assets/libs/jw_skin/tube.min.css" rel="stylesheet"/>
<style>
body {
  margin:0;
  background:#000;
  color:#fff;
  font-family:sans-serif;
}
#jw_player {
  width:100%;
  height:100vh;
}
</style>
</head>
<body>

<div id="jw_player"></div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function(){
  const vastTag = "";

  const p = jwplayer("jw_player").setup({
    playlist: [{
      title: "<?=addslashes($data['title'])?>",
      sources: <?=$data['sources']?>,
      image: "<?=$data['poster']?>",
      tracks: <?=$data['subs']?>
      <?php if(!empty($data['thumbs'])): ?>,thumbnails:"<?=$data['thumbs']?>"<?php endif; ?>
    }],

    // AUTOPLAY dimatikan
    autostart: false,

    // PAKSA SUARA HIDUP
    mute: false,

    logo: { file: "<?=$logo?>", position: "top-left" },
    playbackRateControls: true,
    playbackRates: [0.5, 1, 1.5, 2],
    skin: { timeslider: { progress: "#ffcc00" } },

    advertising: {
      client: "vast",
      schedule: [
        { tag: vastTag, offset: "pre" },
        { tag: vastTag, offset: "00:07:00" },
        { tag: vastTag, offset: "00:15:00" },
        { tag: vastTag, offset: "00:20:00" }
      ]
    },

    qualityLabels: {
      2160:"4K",1440:"1440p",1080:"1080p",720:"720p",
      480:"480p",360:"360p",240:"240p"
    }
  });

  // Tombol forward 10 detik
  p.addButton(
    "<?=getThemeURI()?>/assets/libs/jw_skin/svg/forward.svg",
    "Forward 10 detik",
    ()=>p.seek(p.getPosition()+10),
    "jw-icon-forward"
  );

  // Tombol rewind 10 detik
  p.addButton(
    "<?=getThemeURI()?>/assets/libs/jw_skin/svg/rewind.svg",
    "Rewind 10 detik",
    ()=>p.seek(Math.max(p.getPosition()-10,0)),
    "jw-icon-rewind"
  );
});
</script>
</body>
</html>
