parra/TDTChannels
parra/TDTChannels
1
0
Fork 0
mirror of https://github.com/LaQuay/TDTChannels.git synced 2024-11-26 10:49:13 +01:00
Code Releases Activity

Merge pull request #94 from LaQuay/add-list-to-web

Browse source 
Add list to web
This commit is contained in:
Marc Vila 2019-02-03 18:49:54 +01:00 committed by GitHub
commit 43215bfc00
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 221 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

149
script/public/index.html
View file

@ -17,28 +17,30 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>
<div class="container" style="margin-top: 30px; margin-bottom: 30px; padding-bottom: 50px;"> <div class="container" style="margin-top: 30px">
<h1 class="display-3">TDTChannels</h1> <h1 class="display-4">TDTChannels</h1>
<p class="lead">
Bienvenido al reproductor del proyecto opensource TDTChannels
</p>
<br> <br>
<a class="btn btn-outline-secondary" role="button" href="https://github.com/LaQuay/TDTChannels" <a class="btn btn-outline-secondary" role="button" href="https://github.com/LaQuay/TDTChannels"
target="_blank">Repositorio TDT Channels</a> target="_blank">Repositorio TDT Channels</a>
<a class="btn btn-outline-success" role="button" href="http://www.marcvila.me/" <a class="btn btn-outline-success" role="button" href="http://www.marcvila.me/"
target="_blank">Sitio personal</a> target="_blank">Marc Vila</a>
<a class="btn btn-outline-warning" role="button" href="https://github.com/LaQuay/" <a class="btn btn-outline-warning" role="button" href="https://github.com/LaQuay/"
target="_blank">GitHub</a> target="_blank">GitHub</a>
<a class="btn btn-outline-primary" role="button" href="https://www.linkedin.com/in/marcvilagomez/" <a class="btn btn-outline-primary" role="button" href="https://www.linkedin.com/in/marcvilagomez/"
target="_blank">LinkedIn</a> target="_blank">LinkedIn</a>
<div style="margin-top: 25px"> <div class="row" style="margin-top: 40px;">
<div class="col-xs-4 col-md-4">
<div class="list-group channels-list"></div>
</div>
<div class="col-xs-8 col-md-8">
<div id="video"> <div id="video">
<p class="lead"> <p class="lead">
Reproductor de Televisión Reproductor de Televisión
</p> </p>
<div class="input-group mb-3"> <div class="input-group mb-3">
<input id="input-reproduccion-video" type="text" class="form-control" placeholder="URL de reproducción"> <input id="input-reproduccion-video" type="text" class="form-control"
placeholder="URL de reproducción">
<div class="input-group-append"> <div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-reproduccion-video" <button class="btn btn-outline-secondary" type="button" id="button-reproduccion-video"
onclick="loadItem('video');">Cargar onclick="loadItem('video');">Cargar
@ -63,7 +65,8 @@
Reproductor de Radio Reproductor de Radio
</p> </p>
<div class="input-group mb-3"> <div class="input-group mb-3">
<input id="input-reproduccion-audio" type="text" class="form-control" placeholder="URL de reproducción"> <input id="input-reproduccion-audio" type="text" class="form-control"
placeholder="URL de reproducción">
<div class="input-group-append"> <div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-reproduccion-audio" <button class="btn btn-outline-secondary" type="button" id="button-reproduccion-audio"
onclick="loadItem('audio');">Cargar onclick="loadItem('audio');">Cargar
@ -95,6 +98,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div class="navbar fixed-bottom container"> <div class="navbar fixed-bottom container">
@ -108,132 +112,19 @@
</div> </div>
</div> </div>
<script> <script>
// Se espera en la URL este tipo de llamada var player;
// .html?type={audio,video}&channel={url_a_reproducir}
var player;
var typeToReproduce = getUrlParameter("type"); var typeToReproduce = getUrlParameter("type");
var channelToReproduce; var channelToReproduce;
if (typeToReproduce == "audio") { if (typeToReproduce == "audio") {
channelToReproduce = getUrlParameter("channel"); channelToReproduce = getUrlParameter("channel");
reproduceAudio(channelToReproduce); reproduceAudio(channelToReproduce);
} else if (typeToReproduce == "video") { } else if (typeToReproduce == "video") {
channelToReproduce = getUrlParameter("channel"); channelToReproduce = getUrlParameter("channel");
reproduceVideo(channelToReproduce); reproduceVideo(channelToReproduce);
} }
function loadItem(from) {
var value;
if (from == "audio") {
value = document.getElementById("input-reproduccion-audio").value;
reproduceAudio(value);
} else if (from == "video") {
value = document.getElementById("input-reproduccion-video").value;
reproduceVideo(value);
}
}
function reproduceVideo(channelToReproduce) {
console.log("Reproducing video: " + channelToReproduce);
if (channelToReproduce.includes("m3u8")) {
var divInfo = document.getElementById("video-player").childElementCount;
if (divInfo == 0) {
player = new Clappr.Player({
source: channelToReproduce,
parentId: '#video-player',
height: '500px',
width: '100%',
autoPlay: true,
});
} else {
// Assume player instance is already created
player.configure({
source: channelToReproduce,
});
}
clearResolutions();
getResolution(channelToReproduce, updateResolution);
}
ga('send', {
hitType: 'event',
eventCategory: 'Video',
eventAction: 'play',
eventLabel: channelToReproduce
});
}
function reproduceAudio(channelToReproduce) {
if (channelToReproduce.includes("pls")) {
getURLsFromPLS(channelToReproduce, reproducePLSFromUrl);
} else {
reproduceAudioFromUrl(channelToReproduce);
}
}
function reproduceAudioFromUrl(channelToReproduce) {
console.log("Reproducing audio: " + channelToReproduce);
var audioSource = document.getElementById('audio-controller');
var audioPlayer = document.getElementById('audio-player');
audioPlayer.src = channelToReproduce;
audioSource.load();
audioSource.pause();
var playPromise = audioSource.play();
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
}).catch(function(error) {
// Automatic playback failed.
// Show a UI element to let the user manually start playback.
});
}
ga('send', {
hitType: 'event',
eventCategory: 'Audio',
eventAction: 'play',
eventLabel: channelToReproduce
});
}
function reproducePLSFromUrl(data) {
reproduceAudioFromUrl(data[0]);
updateExtraAudioInfo("pls_more_url_available", data);
}
function updateResolution(resolutions) {
console.log("Resoluciones: " + resolutions);
for (i = 0; i < resolutions.length; i++) {
var resolutionToAdd = resolutions[i];
if (i < resolutions.length - 1){
resolutionToAdd += ", ";
}
document.getElementById("video-resolution").innerHTML += resolutionToAdd;
}
}
function clearResolutions() {
document.getElementById("video-resolution").innerHTML = "";
}
function updateExtraAudioInfo(type, data) {
console.log("Extra info type: " + type);
console.log("Extra info data: " + data);
var textToAdd = "";
if (type == "pls_more_url_available") {
for (i = 0; i < data.length; i++) {
textToAdd += data[i] + "<br>";
}
}
document.getElementById("extra-audio-info").innerHTML = textToAdd;
document.getElementById("extra-audio-info-div").style.display = "block";
}
loadChannelsInList();
</script> </script>
</body> </body>
</html> </html>

140
script/public/index.js
View file

@ -1,3 +1,116 @@
// Se espera en la URL este tipo de llamada .html?type={audio,video}&channel={url_a_reproducir}
function loadItem(from) {
var value;
if (from == "audio") {
value = document.getElementById("input-reproduccion-audio").value;
reproduceAudio(value);
} else if (from == "video") {
value = document.getElementById("input-reproduccion-video").value;
reproduceVideo(value);
}
}
function reproduceVideo(channelToReproduce) {
console.log("Reproducing video: " + channelToReproduce);
if (channelToReproduce.includes("m3u8")) {
var divInfo = document.getElementById("video-player").childElementCount;
if (divInfo == 0) {
player = new Clappr.Player({
source: channelToReproduce,
parentId: '#video-player',
height: '500px',
width: '100%',
autoPlay: true,
});
} else {
// Assume player instance is already created
player.configure({
source: channelToReproduce,
});
}
clearResolutions();
getResolution(channelToReproduce, updateResolution);
}
ga('send', {
hitType: 'event',
eventCategory: 'Video',
eventAction: 'play',
eventLabel: channelToReproduce
});
}
function reproduceAudio(channelToReproduce) {
if (channelToReproduce.includes("pls")) {
getURLsFromPLS(channelToReproduce, reproducePLSFromUrl);
} else {
reproduceAudioFromUrl(channelToReproduce);
}
}
function reproduceAudioFromUrl(channelToReproduce) {
console.log("Reproducing audio: " + channelToReproduce);
var audioSource = document.getElementById('audio-controller');
var audioPlayer = document.getElementById('audio-player');
audioPlayer.src = channelToReproduce;
audioSource.load();
audioSource.pause();
var playPromise = audioSource.play();
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
}).catch(function(error) {
// Automatic playback failed.
// Show a UI element to let the user manually start playback.
});
}
ga('send', {
hitType: 'event',
eventCategory: 'Audio',
eventAction: 'play',
eventLabel: channelToReproduce
});
}
function reproducePLSFromUrl(data) {
reproduceAudioFromUrl(data[0]);
updateExtraAudioInfo("pls_more_url_available", data);
}
function updateResolution(resolutions) {
console.log("Resoluciones: " + resolutions);
for (i = 0; i < resolutions.length; i++) {
var resolutionToAdd = resolutions[i];
if (i < resolutions.length - 1){
resolutionToAdd += ", ";
}
document.getElementById("video-resolution").innerHTML += resolutionToAdd;
}
}
function clearResolutions() {
document.getElementById("video-resolution").innerHTML = "";
}
function updateExtraAudioInfo(type, data) {
console.log("Extra info type: " + type);
console.log("Extra info data: " + data);
var textToAdd = "";
if (type == "pls_more_url_available") {
for (i = 0; i < data.length; i++) {
textToAdd += data[i] + "<br>";
}
}
document.getElementById("extra-audio-info").innerHTML = textToAdd;
document.getElementById("extra-audio-info-div").style.display = "block";
}
function getURLsFromPLS(sUrl, fn_callback) { function getURLsFromPLS(sUrl, fn_callback) {
$.get(sUrl, function(data) { $.get(sUrl, function(data) {
$response = data.split("\n"); $response = data.split("\n");
@ -54,9 +167,34 @@ function getUrlParameter(sParam) {
}; };
// Check an URL is valid or broken // Check an URL is valid or broken
// TODO: For streams if it works it keeps loading infinite time // FIXME: For streams if it works it keeps loading infinite time
function checkIfWebsiteWorks(sUrl){ function checkIfWebsiteWorks(sUrl){
$.get(sUrl, function(data, status){ $.get(sUrl, function(data, status){
alert("Data: " + data + "\nStatus: " + status); alert("Data: " + data + "\nStatus: " + status);
}); });
} }
function onChannelClick(channel){
channel = JSON.parse(channel);
reproduceVideo(channel['options'][0]['url'])
}
function loadChannelsInList() {
fetch('http://91.121.64.179/tdt_project/output/channels.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
nacionales = myJson[1];
var items = [];
$.each(nacionales["ambits"], function( ambit, ambit_val ) {
$.each(ambit_val["channels"], function( key, val ) {
items.push("<a href='javascript:onChannelClick("+ JSON.stringify(JSON.stringify(val)) + ")' class='list-group-item list-group-item-action'>" + val["name"] + "</a>")
});
});
$(items.join( "" )).appendTo(".channels-list");
});
}

7
script/public/styles.css
View file

@ -1,3 +1,10 @@
.container[data-container] { .container[data-container] {
max-width: 100% !important; max-width: 100% !important;
} }
.list-group{
max-height: 70%;
overflow: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}