From 29e1798a81670c808f2eb13cfed118d4a151ad5a Mon Sep 17 00:00:00 2001
From: Marc <marcvila10@hotmail.com>
Date: Sun, 9 Dec 2018 01:15:31 +0100
Subject: [PATCH 1/4] Update web
---
script/public/index.html | 150 ++++++++++++++++++++++++++++------
script/public/index_test.html | 73 -----------------
2 files changed, 125 insertions(+), 98 deletions(-)
delete mode 100644 script/public/index_test.html
diff --git a/script/public/index.html b/script/public/index.html
index 7733e7df..74dad107 100644
--- a/script/public/index.html
+++ b/script/public/index.html
@@ -1,36 +1,136 @@
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
+ integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+ integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+ crossorigin="anonymous"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
+ integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
+ crossorigin="anonymous"></script>
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
+ integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
+ crossorigin="anonymous"></script>
</head>
<body>
-<div id="player"></div>
+<div class="container" style="margin-top: 50px">
+ <h1 class="display-3">TDTChannels</h1>
+ <p class="lead">
+ Bienvenido al reproductor del proyecto opensource TDTChannels
+ </p>
+ <br>
+ <a class="btn btn-outline-secondary" role="button" href="https://github.com/LaQuay/TDTChannels"
+ target="_blank">Repositorio TDT Channels</a>
+ <a class="btn btn-outline-success" role="button" href="http://www.marcvila.me/"
+ target="_blank">Sitio personal</a>
+ <a class="btn btn-outline-warning" role="button" href="https://github.com/LaQuay/"
+ target="_blank">GitHub</a>
+ <a class="btn btn-outline-primary" role="button" href="https://www.linkedin.com/in/marcvilagomez/"
+ target="_blank">LinkedIn</a>
+ <div style="margin-top: 30px">
+ <div id="video">
+ <p class="lead">
+ Reproductor de Televisión
+ </p>
+ <p>Formatos soportado: <em>m3u8</em></p>
+ <div class="input-group mb-3 col-8">
+ <input id="input-reproduccion-video" type="text" class="form-control" placeholder="URL de reproducción">
+ <div class="input-group-append">
+ <button class="btn btn-outline-secondary" type="button" id="button-reproduccion-video"
+ onclick="loadItem('video');">Cargar
+ </button>
+ </div>
+ </div>
+ <div id="video-player" class="col-8"></div>
+ </div>
+
+ <div id="audio">
+ <p class="lead">
+ Reproductor de Radio
+ </p>
+ <p>Formatos soportado: <em>nsv</em></p>
+ <div class="input-group mb-3 col-8">
+ <input id="input-reproduccion-audio" type="text" class="form-control" placeholder="URL de reproducción">
+ <div class="input-group-append">
+ <button class="btn btn-outline-secondary" type="button" id="button-reproduccion-audio"
+ onclick="loadItem('audio');">Cargar
+ </button>
+ </div>
+ </div>
+ <audio id="audio-controller" controls>
+ <source id="audio-player" src="http://rac105.radiocat.net/;*.nsv" autoplay>
+ Your browser does not support the audio element.
+ </audio>
+ </div>
+ </div>
+</div>
<script>
- var getUrlParameter = function getUrlParameter(sParam) {
- var sPageURL = decodeURIComponent(window.location.search.substring(1)),
- sURLVariables = sPageURL.split('&'),
- sParameterName,
- i;
+ var getUrlParameter = function getUrlParameter(sParam) {
+ var sPageURL = decodeURIComponent(window.location.search.substring(1)),
+ sURLVariables = sPageURL.split('&'),
+ sParameterName,
+ i;
- for (i = 0; i < sURLVariables.length; i++) {
- sParameterName = sURLVariables[i].split('=');
+ for (i = 0; i < sURLVariables.length; i++) {
+ sParameterName = sURLVariables[i].split('=');
- if (sParameterName[0] === sParam) {
- return sParameterName[1] === undefined ? true : sParameterName[1];
- }
- }
- };
-
- var channelToReproduce = getUrlParameter("channel");
-
- if (channelToReproduce.includes("m3u8")) {
- var player = new Clappr.Player({
- source: channelToReproduce,
- parentId: '#player',
- height: '100%',
- width: '100%',
- autoPlay: true,
- });
- }
+ if (sParameterName[0] === sParam) {
+ return sParameterName[1] === undefined ? true : sParameterName[1];
+ }
+ }
+ };
+ //var channelToReproduce = getUrlParameter("channel");
+
+ 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 " + channelToReproduce);
+ if (channelToReproduce.includes("m3u8")) {
+ console.log("Reproducing video")
+ var player = new Clappr.Player({
+ source: channelToReproduce,
+ parentId: '#video-player',
+ height: '50%',
+ width: '100%',
+ autoPlay: true,
+ });
+ }
+ }
+
+ function reproduceAudio(channelToReproduce) {
+ console.log("Reproducing " + channelToReproduce);
+ if (channelToReproduce.includes("nsv")) {
+ console.log("Reproducing audio")
+
+ 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.
+ });
+ }
+ }
+ }
</script>
</body>
diff --git a/script/public/index_test.html b/script/public/index_test.html
deleted file mode 100644
index abf56abb..00000000
--- a/script/public/index_test.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<html>
-<head>
- <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
- <script src="https://unpkg.com/video.js/dist/video.js"></script>
- <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
-
- </style>
-</head>
-
-<body>
-<video autoplay preload="auto" controls id="player" class="video-js vjs-default-skin">
-</video>
-
-<script>
- var getUrlParameter = function getUrlParameter(sParam) {
- var sPageURL = decodeURIComponent(window.location.search.substring(1)),
- sURLVariables = sPageURL.split('&'),
- sParameterName,
- i;
-
- for (i = 0; i < sURLVariables.length; i++) {
- sParameterName = sURLVariables[i].split('=');
-
- if (sParameterName[0] === sParam) {
- return sParameterName[1] === undefined ? true : sParameterName[1];
- }
- }
- };
-
- var channelToReproduce = getUrlParameter("channel");
- if (channelToReproduce.includes("m3u8")) {
- videojs('player').src({type: 'application/x-mpegURL', src: channelToReproduce});
-
- videojs('player').ready(function () {
- var myPlayer = this;
- myPlayer.play();
-
- // Store the video object
- var myPlayer = this, id = myPlayer.id();
- // Make up an aspect ratio
- var aspectRatio = 9.0/17.5;
- var reduction = 0.95;
-
- function resizeVideoJS(){
- var width = document.getElementById(id).parentElement.offsetWidth;
- myPlayer.width(width*reduction);
- myPlayer.height(width*aspectRatio*reduction);
- }
-
- // Initialize resizeVideoJS()
- resizeVideoJS();
- // Then on resize call resizeVideoJS()
- window.onresize = resizeVideoJS();
- });
-
- videojs('player').on('dblclick', function() {
- var myPlayer = this;
- if (myPlayer.isFullscreen()) {
- myPlayer.exitFullscreen();
- } else {
- myPlayer.requestFullscreen();
- }
- });
- }
-
-</script>
-</body>
-</html>
\ No newline at end of file
From 03bee7c121dbab5232a1b5e47e165624c128c5ae Mon Sep 17 00:00:00 2001
From: Marc <marcvila10@hotmail.com>
Date: Sun, 9 Dec 2018 08:54:29 +0100
Subject: [PATCH 2/4] Read data from URL
---
script/public/index.html | 20 +++++++++++++++-----
1 file changed, 15 insertions(+), 5 deletions(-)
diff --git a/script/public/index.html b/script/public/index.html
index 74dad107..b45e8c05 100644
--- a/script/public/index.html
+++ b/script/public/index.html
@@ -14,7 +14,7 @@
crossorigin="anonymous"></script>
</head>
<body>
-<div class="container" style="margin-top: 50px">
+<div class="container" style="margin-top: 30px">
<h1 class="display-3">TDTChannels</h1>
<p class="lead">
Bienvenido al reproductor del proyecto opensource TDTChannels
@@ -28,7 +28,7 @@
target="_blank">GitHub</a>
<a class="btn btn-outline-primary" role="button" href="https://www.linkedin.com/in/marcvilagomez/"
target="_blank">LinkedIn</a>
- <div style="margin-top: 30px">
+ <div style="margin-top: 25px">
<div id="video">
<p class="lead">
Reproductor de Televisión
@@ -45,7 +45,7 @@
<div id="video-player" class="col-8"></div>
</div>
- <div id="audio">
+ <div id="audio" style="margin-top: 15px">
<p class="lead">
Reproductor de Radio
</p>
@@ -66,6 +66,8 @@
</div>
</div>
<script>
+ // Se espera en la URL este tipo de llamada
+ // .html?type={audio,video}&channel={url_a_reproducir}
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
@@ -80,7 +82,15 @@
}
}
};
- //var channelToReproduce = getUrlParameter("channel");
+ var typeToReproduce = getUrlParameter("type");
+ var channelToReproduce;
+ if (typeToReproduce == "audio") {
+ channelToReproduce = getUrlParameter("channel");
+ reproduceAudio(channelToReproduce);
+ } else if (typeToReproduce == "video") {
+ channelToReproduce = getUrlParameter("channel");
+ reproduceVideo(channelToReproduce);
+ }
function loadItem(from) {
var value;
@@ -100,7 +110,7 @@
var player = new Clappr.Player({
source: channelToReproduce,
parentId: '#video-player',
- height: '50%',
+ height: '400px',
width: '100%',
autoPlay: true,
});
From f69c5b6b99fd47b589d6d79badc648deb40c381b Mon Sep 17 00:00:00 2001
From: Marc <marcvila10@hotmail.com>
Date: Sun, 9 Dec 2018 09:00:47 +0100
Subject: [PATCH 3/4] Improve responsive
---
script/public/index.html | 12 +++++++-----
1 file changed, 7 insertions(+), 5 deletions(-)
diff --git a/script/public/index.html b/script/public/index.html
index b45e8c05..66d3f237 100644
--- a/script/public/index.html
+++ b/script/public/index.html
@@ -12,9 +12,11 @@
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
-<div class="container" style="margin-top: 30px">
+<div class="container" style="margin-top: 30px; margin-bottom: 30px">
<h1 class="display-3">TDTChannels</h1>
<p class="lead">
Bienvenido al reproductor del proyecto opensource TDTChannels
@@ -34,7 +36,7 @@
Reproductor de Televisión
</p>
<p>Formatos soportado: <em>m3u8</em></p>
- <div class="input-group mb-3 col-8">
+ <div class="input-group mb-3">
<input id="input-reproduccion-video" type="text" class="form-control" placeholder="URL de reproducción">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-reproduccion-video"
@@ -42,7 +44,7 @@
</button>
</div>
</div>
- <div id="video-player" class="col-8"></div>
+ <div id="video-player"></div>
</div>
<div id="audio" style="margin-top: 15px">
@@ -50,7 +52,7 @@
Reproductor de Radio
</p>
<p>Formatos soportado: <em>nsv</em></p>
- <div class="input-group mb-3 col-8">
+ <div class="input-group mb-3">
<input id="input-reproduccion-audio" type="text" class="form-control" placeholder="URL de reproducción">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-reproduccion-audio"
@@ -59,7 +61,7 @@
</div>
</div>
<audio id="audio-controller" controls>
- <source id="audio-player" src="http://rac105.radiocat.net/;*.nsv" autoplay>
+ <source id="audio-player" src="" autoplay>
Your browser does not support the audio element.
</audio>
</div>
From 5aa3d6da5648ddb1826c3ffa2513575248baa327 Mon Sep 17 00:00:00 2001
From: Marc <marcvila10@hotmail.com>
Date: Sun, 9 Dec 2018 17:15:22 +0100
Subject: [PATCH 4/4] Fix multiple instance of video
---
script/public/index.html | 30 +++++++++++++++++++++---------
1 file changed, 21 insertions(+), 9 deletions(-)
diff --git a/script/public/index.html b/script/public/index.html
index 66d3f237..c58f1e3e 100644
--- a/script/public/index.html
+++ b/script/public/index.html
@@ -35,7 +35,7 @@
<p class="lead">
Reproductor de Televisión
</p>
- <p>Formatos soportado: <em>m3u8</em></p>
+ <p>Formatos soportados: <em>m3u8</em></p>
<div class="input-group mb-3">
<input id="input-reproduccion-video" type="text" class="form-control" placeholder="URL de reproducción">
<div class="input-group-append">
@@ -51,7 +51,7 @@
<p class="lead">
Reproductor de Radio
</p>
- <p>Formatos soportado: <em>nsv</em></p>
+ <p>Formatos soportados: <em>nsv</em></p>
<div class="input-group mb-3">
<input id="input-reproduccion-audio" type="text" class="form-control" placeholder="URL de reproducción">
<div class="input-group-append">
@@ -70,6 +70,7 @@
<script>
// Se espera en la URL este tipo de llamada
// .html?type={audio,video}&channel={url_a_reproducir}
+
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
@@ -84,6 +85,9 @@
}
}
};
+
+ var player;
+
var typeToReproduce = getUrlParameter("type");
var channelToReproduce;
if (typeToReproduce == "audio") {
@@ -109,13 +113,21 @@
console.log("Reproducing " + channelToReproduce);
if (channelToReproduce.includes("m3u8")) {
console.log("Reproducing video")
- var player = new Clappr.Player({
- source: channelToReproduce,
- parentId: '#video-player',
- height: '400px',
- width: '100%',
- autoPlay: true,
- });
+ var divInfo = document.getElementById("video-player").childElementCount;
+ if (divInfo == 0) {
+ player = new Clappr.Player({
+ source: channelToReproduce,
+ parentId: '#video-player',
+ height: '400px',
+ width: '100%',
+ autoPlay: true,
+ });
+ } else {
+ // Assume player instance is already created
+ player.configure({
+ source: channelToReproduce,
+ });
+ }
}
}