<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/style.css" type="text/css">
   
<link href="https://unpkg.com/video.js@7/dist/video-js.min.css" rel="stylesheet">
<link href="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/css/quality-selector.css" rel="stylesheet">


<script src="https://unpkg.com/video.js@7/dist/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-quality-levels/2.0.9/videojs-contrib-quality-levels.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-hls-quality-selector@1.1.1/dist/videojs-hls-quality-selector.min.js"></script>

  <title>
    <%= json_data.title %> 
  </title>
  <script defer type="text/javascript" charset="utf-8">
	function search_this(){
	const pre_query = document.querySelector('#srchTxt').value
	  if(pre_query.length == ''){
		console.log(`Can't just search for nothing!`)
	  } else {
	    const query = pre_query.replace(/\s/g,'+')
	    window.location.href = `/search?q=${query}`
	  }
	}

      window.onload = function (){

	      const get_search_inp = document.querySelector('input.srch-txt')
	      get_search_inp.addEventListener('keypress', function(e){ if(e.key == 'Enter'){ search_this() }})

	      const get_header = document.querySelector('header')

	    let limitBottom = document.documentElement.offsetHeight - window.innerHeight;
	    window.addEventListener("scroll",function(){
	      get_header.style.transition = "ease-out 0.4s"
	      get_header.style.display = "none"
	      if(document.documentElement.scrollTop == 0){
	      get_header.style.transition = "ease-in 0.4s"
	      get_header.style.display = "inline-flex"
	      }
	      if(document.documentElement.scrollTop > 450 ){
	      get_header.style.transition = "ease-out 0.3s"
	      get_header.style.display = "inline-flex"
	      }
	    })

      }	

  </script>
</head>
<body>
  <header>
    <h1 class="h-logo">
      <p onclick="window.location.href = '/'"> Äそ </p>
    </h1>
  <h1>
    <div>
	<input type="text" class="srch-txt" id="srchTxt"
	placeholder="...Search">
	<button class="srch-btn" onclick="search_this()">
	  Go
	</button>
    </div>
  </h1>
  <h1 class="latest-h1" onclick="window.location.href = '/latest' " > Recent </h1>
  </header>



<div class="contain-top-list">
<span class="anime-details">
<h1 class="anime-title">
   Anime: <%= json_data.title %> 
</h1>
<div>
  <span><span>Total Episode:</span> <%= json_data.total_ep %> 
	</span>
	<span><span>Anime Description:</span> <%= json_data.description %> 
	</span>
	<span><span>Anime Status:</span> <%= json_data.anime_status %> 
	</span>
	<span><span>Anime Type:</span> <%= json_data.anime_type %> 
	</span>
	<span><span>Genre:</span> <%= json_data.genre %> 
	</span>
	<span><span>Alternative Name:</span> <i><%= json_data.other_name %> 	    </i>
	</span>
	<span><span>Released On:</span> <%= json_data.released_year %> 
	</span>

	<% const show_crrEp = json_data.requested_episode %> 

	<span><span>Current Episode:</span> <%= show_crrEp %></span>
</div>
</span>

<% if(json_data.video_links.main_link == undefined){ %>


<div style="height:100vh; padding: 1.5rem;">
  <iframe id="iframe" src="<%= json_data.iframeLink %>"  scrolling="no" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowscreen="true" width="100%" class="videoo"></iframe>
	       

</div>

<% } else { %>

<div class="video-container">
  <video id="videoplayer" class="video-js vjs-fluid vjs-theme-default vjs-big-play-centered" controls preload="auto" fluid="true" liveui="true"
      data-setup='{“controls”: true, “autoplay”: false }'>
    <source src="<%= json_data.video_links.main_link %>" type="application/x-mpegURL">
      </video>
</div>

  <script defer>
    var player = videojs('videoplayer',{
    	responsive: true
    });
    player.hlsQualitySelector();
    </script>

    <% } %>

  <div class="video-con">
    <% const crr_Ep = json_data.requested_episode %>
    <% let nxPG = Number(crr_Ep) %>
    <% let pxPG = Number(crr_Ep) %>

    <%  if(Number(pxPG) !== 1){ %>

    <a href="<%= get_id %>?ep=<%= pxPG - 1 %>">
    <button onclick="next_ep()"> Previous <%= pxPG - 1 %></button>
  </a>
	
  <% } %>

  <% if(Number(json_data.total_ep) !== Number(nxPG)) { %>

  <a href="<%= get_id %>?ep=<%= nxPG + 1 %>">
    <button onclick="previous_ep()">Next <%= nxPG + 1 %></button>
    </a> 
    <% } %>

  </div>
<br>
  </center> 
<span class="anime-details">
<div>
  <h1 class="anime-title">Episode List For <%= json_data.title %></h1>  	
</div>
</span>
<br/>
  <div class="ep-opts">
	<% let i=1; %>
       <% for(let x=1; json_data.total_ep >= x; x++){
       %>
	
       <a href="<%= get_id %>?ep=<%= x %>">
       <button>  <%= i  %> </button>
       </a>


       <% i++ } %>

  </div>

<div class="footer">
	<span class="auth">
	  <a href="https://github.com/sidmaz666" target="_blank">
      Coded by Sidmaz666
	  </a>
	</span>
	<br>
	<span class="cl">© Copyleft  </span>	
</div>


</div>



<script type="text/javascript" src="../js/main.js" charset="utf-8"></script>
</body>
</html>
</body>
</html>
