I have this loadChannels.php page with the code:
<?php
session_start();
header("Access-Control-Allow-Origin: *");
/* Captura a página */
if (isset($_GET['page'])) {
$page = (int)$_GET['page'];
} else {
$page = 1;
}
/* Acessa o parquivo 'lista' + número da página + '.m3u8' */
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://localhost/list/lista{$page}.m3u");
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
$info = curl_getinfo($ch);
curl_close($ch);
if (substr($info["http_code"], 0, 2) != 20) {
die();
}
preg_match_all('/(tvg-logo="(?<logo>.*?)".+group-title="(?<group>.*?)",(?<nome>.*)\((?<ano>\d+)\)\s-\s(?<audio>\w+)\s-\s(?<qualidade>\d+\w).*(?:\n(?P<link>http?:\/\/.+)))/', $response, $channels, PREG_SET_ORDER);
/**
* Cria a lista LI e escreve na tela.
* Como vamos acessar via AJAX, o conteúdo
* será retornado via JavaScript
*/
foreach($channels as $channel):
?>
<li class="list-group-item">
<a href="<?php echo $channel["link"] ?>">
<img src="<?php echo $channel["logo"]?>"/>
<div id="nome_bar"><?php echo $channel["nome"] ?></div>
<div id="ano_bar"><?php echo $channel["ano"] ?></div>
</a>
</li>
<?php $_SESSION['nome'] = $channel["nome"];
endforeach; ?>
index:
<?php session_start(); ?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>CINEPLAY</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="../css/font-awesome.css">
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/mdb.css" rel="stylesheet">
<link href="../css/cp.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="57x57" href="../img/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="../img/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="../img/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="../img/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="../img/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="../img/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="../img/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="../img/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="../img/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="../img/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="../img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="../img/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="../img/favicon/favicon-16x16.png">
<link rel="manifest" href="../img/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="../img/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top">
<div style="position: relative; background-image: url('../img/favicon/favicon-96x96.png'); background-size: 28px 28px; background-repeat: no-repeat;"/>
<div class="titulo-blog">CINEPLAY</a>
</nav>
</header>
<div class="py-4"></div>
<div class="filmes">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<ul id="channels-list"></ul>
</div>
</div>
</div>
</div>
</div>
<footer class="fixed-bottom">
Nenhum dos arquivos mostrados aqui estão hospedados no servidor. Os links são fornecidos por outros usuários.<br>CinePlay © 2018
</footer>
<script type="text/javascript" src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/mdb.js"></script>
<script src="../js/jarallax.js"></script>
<script src="../js/jarallax-video.js"></script>
<script>
/* Define a página inicial */
let scrollPage = 0;
/* Cria uma função para detectar se o usuário rolou a barra até o final */
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
loadChannels();
}
});
/* Utilizamos o método 'on' para detectar o evento de clique de novos elementos */
$("#channels-list").on("click", "a", function(e) {
e.preventDefault();
$("#modal").find(".modal-title").text( $(this).attr("title") );
$("#modal").find(".modal-body")
.empty()
.append( "<iframe allowFullScreen='allowFullScreen' allowscriptaccess='always' src=\""+$(this).attr("href")+"\"></iframe>" ); //Altere essa linha para chamar outro arquivo
$("#modal").modal("show");
/*
* Utilizamos esse evento para executar uma função ao fechar o modal
* Caso o modal seja fechado sem remover o 'iframe', o player continuará funcionando.
*/
$('#modal').on('hidden.bs.modal', function (e) {
$("#modal iframe").remove();
})
});
/*
* Utilizamos esse evento para executar uma função ao fechar o modal
* Caso o modal seja fechado sem remover o 'iframe', o player continuará funcionando.
*/
$('#modal').on('hidden.bs.modal', function (e) {
$("#modal iframe").remove();
})
/**
* Função responsável por realizar a requisição para 'loadChannels.php'
*/
function loadChannels(page) {
/* Realizamos a requisição e retornamos o resultado na variável 'data' */
$.get("loadChannels.php?page="+scrollPage, function(data) {
/* Incrementamos o valor retornado na DIV indicada e somamos o valor de 'scrollPage' + 1 */
$("#channels-list").append(data);
scrollPage++;
});
}
/* Carregamos a primeira lista */
loadChannels();
</script>
<div class="modal fade" tabindex="-1" role="dialog" id="modal" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title "><?php echo $_SESSION['nome'] ?></h4>
</div>
<div class="modal-body"><img src="<?php echo $channel["logo"]?>"/></div>
<div class="modal-footer">
<a href='whatsapp://send?text=StackOverflow'>
<button type="button" class="btn whatsapp">WHASTAPP</button>
</a>
<button type="button" class="btn" data-dismiss="modal">FECHAR</button>
</div>
</div>
</div>
</div>
</body>
</html>