v0.16

## [v0.16]
### Changed
- CSS: <a>:focus y <a>:hover
- manifesto PWA
- CSS: .barra-overlay debido a que no estaba bien centrado su contenido
- .barra-overlay se añade tabindex=0 para poder hacer focus con tecla TAB
- Texto: de "Desactivar" a "Quitar" en modal canales (para que sea igual a botón quitar que tienen las señales)
- Separados botones share de barra copiar enlace (para que modal muestre copiar enlace a personas con bloqueadores de publicidad)
- Reescrito archivo "NOTICE.md"
- Alerta tras borrado localStorage
- SVG's logos redes sociales por iconos Bootstrap
- Imágenes ejemplo sitio en README.md, index.html y site.webmanifest acorde a version nueva

#### 📺 Canales
Chile

- [Canal 13](https://www.13.cl/en-vivo)
- [CHV 2](https://www.chilevision.cl/senal-online) - [x](https://m3u.cl/lista-iptv-chile.php)

### Added
- Icono a enlaces externos dentro de señal activa <iframe> para mejor comunicación de que al pulsar abandonará el sitio <i class="bi bi-box-arrow-up-right"></i>
- Sección agradecimientos contribuciones en "README.md"
- Capacidad de reordenar canales con plugin desde grid [SortableJS](https://github.com/SortableJS/Sortable)
- Icono para contribuciones en modal créditos y README.md con [contributors-img](https://github.com/lacolaco/contributors-img)
- Efectos de sonido para alerta de copiado enlace en modal compartir: [button-pressed por Pixabay](https://pixabay.com/sound-effects/button-pressed-38129/), [Cancel/miss chime por Raclure](https://freesound.org/people/Raclure/sounds/405548/)
- Efecto de sonido a botones de quitar todos los canales activos [TV, Shutdown.wav por MATRIXXX_](https://freesound.org/people/MATRIXXX_/sounds/523553/)
- Efecto sonido de fondo a alerta tras borrado localStorage [DefectLineTransformer por blaukreuz](https://freesound.org/people/blaukreuz/sounds/440128/)
- Efecto de sonido a botones de quitar canal [User Interface Clicks and Buttons 1 por original_sound](https://freesound.org/people/original_sound/sounds/493551/)
- Variación rancia https://alienxproject.github.io/X/
- "Variación" https://navezjt.github.io/JCN-TV/
- Enlace complementario Línea Prevención del Suicidio
- Efecto flicker para fondo tras borrado localStorage https://codepen.io/frbarbre/pen/BaObOXL
- Efecto flicker para texto tras borrado localStorage https://codepen.io/patrickhlauke/pen/YaoBop
- Tema oscuro/claro, fondos SVG temas generados con https://wickedbackgrounds.com/app transformados a css con https://yoksel.github.io/url-encoder/
- Opción cambiar/reemplazar canal desde grid
- Habilidad recordar selección de número de canales por fila con localStorage
- Alerta en caso de que búsqueda canales no arroje resultados
- Opción para reordenar botones canales de forma ascendente o descendente
- screenshots para PWA, hechas con Progressier https://progressier.com

#### 📺 Canales
Chile

- [Meganoticias 3](https://www.meganoticias.cl/senal-en-vivo/meganoticias/) - [x](https://github.com/HERBERTM3/iptv/blob/f55200534fdab9a503f04b0482ce7307c2767469/hd.m3u)
- [Meganoticias 4](https://www.meganoticias.cl/senal-en-vivo/meganoticias/) - [x](https://github.com/HERBERTM3/iptv/blob/f55200534fdab9a503f04b0482ce7307c2767469/hd.m3u)
- [Canal 13](https://www.13.cl/en-vivo) - [x](https://github.com/HERBERTM3/iptv/blob/f55200534fdab9a503f04b0482ce7307c2767469/hd.m3u)
- [Canal 13 3](https://www.13.cl/en-vivo) - [x](https://github.com/HERBERTM3/iptv/blob/f55200534fdab9a503f04b0482ce7307c2767469/hd.m3u)
- [La Red 2](https://www.lared.cl/senal-online) - [x](https://github.com/HERBERTM3/iptv/blob/f55200534fdab9a503f04b0482ce7307c2767469/hd.m3u)

#### Radios 📻
Chile

- [Radio El Conquistador FM](https://www.elconquistadorfm.net/) - [x](#3)
- [Radio El Conquistador FM 2](https://www.elconquistadorfm.net/) - [x](#3)
- [Radio El Conquistador FM 3](https://www.twitch.tv/elconquistadortv)

### Removed
- Archivo bloquean.txt
- Archivo emergencia.html
- Archivo archivo.html
- SVG's logos redes sociales
- Imágenes ejemplo sitio v0.07

NOTICE.md

@@ -52,4 +52,6 @@ Para licencia del proyecto "teles" referirse al archivo LICENSE.
 
 * [Audio] DefectLineTransformer por blaukreuz https://freesound.org/people/blaukreuz/sounds/440128/ - [(CC0 1.0 DEED)](https://creativecommons.org/publicdomain/zero/1.0/)
 
-* [Audio] User Interface Clicks and Buttons 1 por original_sound https://freesound.org/people/original_sound/sounds/493551/ - [(CC BY 4.0 DEED)](https://creativecommons.org/licenses/by/4.0/)
+* [Audio] User Interface Clicks and Buttons 1 por original_sound https://freesound.org/people/original_sound/sounds/493551/ - [(CC BY 4.0 DEED)](https://creativecommons.org/licenses/by/4.0/)
+
+* Screenshots PWA hechas con Progressier https://progressier.com - [(Terms)](https://progressier.com/terms)

README.md

@@ -13,8 +13,9 @@ Enlace: https://alplox.github.io/teles/
 - [Descargo de responsabilidad](#descargo-de-responsabilidad)
 - [Licencia](#licencia)
 
-[![](https://raw.githubusercontent.com/Alplox/teles/master/assets/img/previews/v0.07.jpg)](https://alplox.github.io/teles/)
-[![](https://raw.githubusercontent.com/Alplox/teles/master/assets/img/previews/v0.07-opciones.gif)](https://alplox.github.io/teles/)
+[![](https://raw.githubusercontent.com/Alplox/teles/master/assets/img/previews/teles-v0-16-vacio-temas.jpg)](https://alplox.github.io/teles/)
+[![](https://raw.githubusercontent.com/Alplox/teles/master/assets/img/previews/teles-v0-16-canales-por-defecto.jpg)](https://alplox.github.io/teles/)
+[![](https://raw.githubusercontent.com/Alplox/teles/master/assets/img/previews/teles-v0-16-personalizar.gif)](https://alplox.github.io/teles/)
 
 # Canales disponibles junto a su origen: 
 [↑ Volver arriba ↑](#tabla-de-contenido)
@@ -46,7 +47,7 @@ Enlace: https://alplox.github.io/teles/
 - [CHV Noticias 2](https://www.chvnoticias.cl/) - [x](https://pluto.tv/es/live-tv/chilevision-noticias)
 - [CHV Noticias 3](https://www.chvnoticias.cl/senal-online/)
 - [CHV](https://www.youtube.com/channel/UC8EdTmyUaFIfZvVttJ9lgIA)
-- [CHV 2](https://www.chilevision.cl/senal-online) - [x](https://github.com/AINMcl/MonitorTV/blob/05188eeaea9622e986b338f63a46fb189898184f/IPTV/AINM.m3u)
+- [CHV 2](https://www.chilevision.cl/senal-online) - [x](https://m3u.cl/lista-iptv-chile.php)
 - [La Red](https://www.lared.cl/senal-online) - [x](https://www.m3u.cl/iptv-chile.php)
 - [La Red 2](https://www.lared.cl/senal-online) - [x](https://github.com/HERBERTM3/iptv/blob/f55200534fdab9a503f04b0482ce7307c2767469/hd.m3u)
 - [Stgo TV](https://www.santiagotelevision.cl/)

assets/data/canales.json

@@ -132,7 +132,7 @@
     },
     "chv-2": {
         "nombre": "CHV 2",
-        "iframe_url": "https://www.viendotele.cl/assets-tele/chv.html",
+        "m3u8_url": "https://scl.edge.grupoz.cl/transmision/live/playlist.m3u8",
         "fuente": "https://www.chilevision.cl/senal-online",
         "pais": "cl"
     },

assets/js/canalesRespaldo.js → assets/data/canalesRespaldo.js

@@ -180,7 +180,7 @@ const listaCanalesViejo = {
     },
     'chv-2': {
         'nombre': 'CHV 2',
-        'iframe_url': 'https://www.viendotele.cl/assets-tele/chv.html',
+        'm3u8_url': 'https://scl.edge.grupoz.cl/transmision/live/playlist.m3u8',
         'fuente': 'https://www.chilevision.cl/senal-online',
         'pais': 'cl'
     },

assets/js/filtroCanales.js

@@ -33,7 +33,7 @@ function filtrarCanalesPorInput(e, btnsCanales) {
   if (idDelElemento === 'modal-body-botones-canales') {
     const btnsCanalesDentroContainer = btnsCanales.querySelectorAll('button');
 
-    if (inputNormalized === 'unknow') {
+    if (inputNormalized === 'desconocido') {
       btnsCanalesDentroContainer.forEach(btn => {
         const country = btn.getAttribute('country');
         const countryNormalized = normalizarInput(country); 
@@ -69,7 +69,7 @@ function filtrarCanalesPorInput(e, btnsCanales) {
     filtroCanalesModal.value = e
   } else if (idDelElemento === 'offcanvas-body-botones-canales') {
     const btnsCanalesDentroContainer = btnsCanales.querySelectorAll('button');
-    if (inputNormalized === 'unknow') {
+    if (inputNormalized === 'desconocido') {
       btnsCanalesDentroContainer.forEach(btn => {
         const country = btn.getAttribute('country');
         const countryNormalized = normalizarInput(country); 

assets/js/main.js

@@ -537,7 +537,7 @@ async function fetchCodigosBandera() {
 let listaCanales
 
 // Función para cargar el archivo JSON y almacenarlo en una variable
-async function cargarCanales() {
+async function fetchCargarCanales() {
   try {
       // Realizar el fetch y esperar la respuesta
       const response = await fetch('assets/data/canales.json');
@@ -631,7 +631,6 @@ function crearIframe(source, titleIframe, canalId) {
 
 function crearOverlay(nombre, fuente, pais, altIcon, canalId) {
   const fragmentOVERLAY = document.createDocumentFragment();
-  const a = document.createElement('a');
   if (pais === undefined && altIcon === undefined) {
     contenido = `<span class="ocultar-en-768px">${nombre}</span>`;
   } else if (pais === undefined && altIcon !== undefined) {
@@ -657,6 +656,7 @@ function crearOverlay(nombre, fuente, pais, altIcon, canalId) {
   btnCambiarSeñal.innerHTML = '<span class="ocultar-en-768px">Cambiar</span><i class="bi bi-arrow-repeat"></i>';
   btnCambiarSeñal.setAttribute('data-button-cambio', canalId);
   btnCambiarSeñal.addEventListener('click', () => {
+    let fragmentModal = document.createDocumentFragment();
     let modal = document.createElement('div');
     modal.classList.add('modal', 'fade');
     modal.id = `Modal-cambiar-${canalId}`;
@@ -728,7 +728,9 @@ function crearOverlay(nombre, fuente, pais, altIcon, canalId) {
     modalDialog.append(modalContent);
     modal.append(modalDialog);
 
-    document.body.append(modal);
+    fragmentModal.append(modal);
+
+    document.body.append(fragmentModal);
 
     // Activar el modal, darle focus al input si esta en PC y mostrar listado sugerencias canales
     let myModal = new bootstrap.Modal(document.getElementById(`Modal-cambiar-${canalId}`));
@@ -746,38 +748,38 @@ function crearOverlay(nombre, fuente, pais, altIcon, canalId) {
     });
   });
 
-  a.innerHTML = contenido + `<i class="bi bi-box-arrow-up-right"></i>`;
-  a.title = 'Ir a la página oficial de esta transmisión';
-  a.href = fuente;
-  a.setAttribute('tabindex', 0);
-  a.setAttribute('data-bs-toggle', 'tooltip');
-  a.setAttribute('data-bs-title', 'Ir a la página oficial de esta transmisión');
-  a.rel = 'noopener nofollow noreferrer';
-  a.classList.add('d-flex', 'justify-content-center', 'align-items-center', 'gap-1', 'btn', 'btn-sm', 'btn-dark', 'p-0', 'px-1', 'pe-auto', 'mt-1');
-
-  let btnRemove = document.createElement('button');
-  btnRemove.classList.add('btn', 'btn-sm', 'btn-danger', 'top-0', 'end-0', 'p-0', 'px-1', 'd-flex', 'justify-content-center', 'align-items-center', 'gap-1', 'pe-auto', 'mt-1', 'me-1');
-  btnRemove.setAttribute('aria-label', 'Close');
-  btnRemove.setAttribute('type', 'button');
-  btnRemove.setAttribute('title', 'Quitar canal');
-  btnRemove.setAttribute('data-bs-toggle', 'tooltip');
-  btnRemove.setAttribute('data-bs-title', 'Quitar canal');
-  btnRemove.innerHTML = '<span class="ocultar-en-768px">Quitar</span><i class="bi bi-x-circle"></i>';
-  btnRemove.addEventListener('click', () => {
-    tele.remove(canalId)
+  const a = document.createElement('a');
+    a.innerHTML = contenido + `<i class="bi bi-box-arrow-up-right"></i>`;
+    a.title = 'Ir a la página oficial de esta transmisión';
+    a.href = fuente;
+    a.setAttribute('tabindex', 0);
+    a.setAttribute('data-bs-toggle', 'tooltip');
+    a.setAttribute('data-bs-title', 'Ir a la página oficial de esta transmisión');
+    a.rel = 'noopener nofollow noreferrer';
+    a.classList.add('d-flex', 'justify-content-center', 'align-items-center', 'gap-1', 'btn', 'btn-sm', 'btn-dark', 'p-0', 'px-1', 'pe-auto', 'mt-1');
+
+  const btnRemove = document.createElement('button');
+    btnRemove.classList.add('btn', 'btn-sm', 'btn-danger', 'top-0', 'end-0', 'p-0', 'px-1', 'd-flex', 'justify-content-center', 'align-items-center', 'gap-1', 'pe-auto', 'mt-1', 'me-1');
+    btnRemove.setAttribute('aria-label', 'Close');
+    btnRemove.setAttribute('type', 'button');
+    btnRemove.setAttribute('title', 'Quitar canal');
+    btnRemove.setAttribute('data-bs-toggle', 'tooltip');
+    btnRemove.setAttribute('data-bs-title', 'Quitar canal');
+    btnRemove.innerHTML = '<span class="ocultar-en-768px">Quitar</span><i class="bi bi-x-circle"></i>';
     const audioQuitarCanal = new Audio('assets/sounds/User-Interface-Clicks-and-Buttons-1-por-original_sound.mp3');
-    audioQuitarCanal.play()
-  });
+    btnRemove.addEventListener('click', () => {
+      tele.remove(canalId)
+      audioQuitarCanal.play()
+    });
 
   const divOVERLAY = document.createElement('div');
-  divOVERLAY.setAttribute('id', `overlay-de-canal-${canalId}`)
-  divOVERLAY.classList.add('position-absolute', 'barra-overlay', 'w-100', 'h-100', 'bg-transparent', 'pe-none', 
-  'd-flex', 'flex-wrap', 'justify-content-end', 'align-items-start', 'gap-1', 'top-0', 'end-0');
-  divOVERLAY.classList.toggle('d-none', !(overlayCheckbox.checked === true || divOVERLAY.classList.contains('d-none')));
-  divOVERLAY.append(btnMoverEnGrid)
-  divOVERLAY.append(btnCambiarSeñal)
-  divOVERLAY.append(a);
-  divOVERLAY.append(btnRemove)
+    divOVERLAY.setAttribute('id', `overlay-de-canal-${canalId}`)
+    divOVERLAY.classList.add('position-absolute', 'barra-overlay', 'w-100', 'h-100', 'bg-transparent', 'pe-none', 'd-flex', 'flex-wrap', 'justify-content-end', 'align-items-start', 'gap-1', 'top-0', 'end-0');
+    divOVERLAY.classList.toggle('d-none', !(overlayCheckbox.checked === true || divOVERLAY.classList.contains('d-none')));
+    divOVERLAY.append(btnMoverEnGrid)
+    divOVERLAY.append(btnCambiarSeñal)
+    divOVERLAY.append(a);
+    divOVERLAY.append(btnRemove)
 
   fragmentOVERLAY.append(divOVERLAY);
   return fragmentOVERLAY;
@@ -786,9 +788,8 @@ function crearOverlay(nombre, fuente, pais, altIcon, canalId) {
 
 // ----- tele
 let tele = {
-  add:  (canal, divExistenteEnCasoDeCambio) => {
-
-    // listaCanales = canales.js
+  add: (canal, divExistenteEnCasoDeCambio) => {
+    // listaCanales = canales.json
     if (typeof canal !== 'undefined' && typeof listaCanales[canal] !== 'undefined') {
       let { iframe_url, m3u8_url, yt_id, yt_embed, yt_playlist, nombre, fuente, pais, alt_icon } = listaCanales[canal];
 
@@ -960,7 +961,7 @@ let tele = {
       activarTooltipsBootstrap();
     }
   },
-  populateModal: () => {
+  crearBotonesParaCanales: () => {
     let numeroCanalesConPais = [];
 
     const fragmentBtn = document.createDocumentFragment();
@@ -1005,11 +1006,11 @@ let tele = {
         numeroCanalesConPais.push(pais);
       } else if (!pais && alt_icon) {
         pNombreCanalDentroBoton.innerHTML += alt_icon;
-        btnTransmision.setAttribute('country', 'Unknow');
-        numeroCanalesConPais.push('Unknow');
+        btnTransmision.setAttribute('country', 'Desconocido');
+        numeroCanalesConPais.push('Desconocido');
       } else {
-        btnTransmision.setAttribute('country', 'Unknow');
-        numeroCanalesConPais.push('Unknow');
+        btnTransmision.setAttribute('country', 'Desconocido');
+        numeroCanalesConPais.push('Desconocido');
       }
 
       btnTransmision.append(pNombreCanalDentroBoton);
@@ -1050,22 +1051,34 @@ let tele = {
     for (const bandera of paisesSinRepetir) {
       let nombrePais = codigosBandera[bandera];
       let btn = document.createElement('button');
-      btn.classList.add('btn', 'btn-outline-secondary', 'd-flex', 'justify-content-between', 'align-items-center');
+      btn.classList.add('btn', 'btn-outline-secondary', 'd-flex', 'justify-content-between', 'align-items-center', 'w-100');
       btn.setAttribute('type', 'button');
       btn.setAttribute('data-country', bandera);
-      let span = document.createElement('span');
-      span.classList.add('badge', 'bg-secondary', 'rounded-pill');
-      span.innerHTML = conteoNumeroCanalesConPais[bandera] || 0;
+
+      const pNombreCanalDentroBoton = document.createElement('p');
+      pNombreCanalDentroBoton.classList.add('m-0', 'd-flex', 'justify-content-between', 'align-items-center', 'text-start', 'gap-2', 'w-100');
+
+      const spanBtnNombrePais = document.createElement('span');
+      spanBtnNombrePais.classList.add('flex-grow-1');
+      spanBtnNombrePais.textContent = nombrePais;
+      pNombreCanalDentroBoton.append(spanBtnNombrePais)
+
+      let spanBadge = document.createElement('span');
+      spanBadge.classList.add('badge', 'bg-secondary'/* , 'rounded-pill' */);
+      spanBadge.innerHTML = conteoNumeroCanalesConPais[bandera] || 0;
       if (codigosBandera[bandera]) {
         let img = document.createElement('img');
         img.setAttribute('src', `https://flagcdn.com/${bandera}.svg`);
         img.setAttribute('alt', `bandera ${nombrePais}`);
         img.setAttribute('title', nombrePais);
-        img.classList.add('rounded-5');
-        btn.append(img, span);
+        img.classList.add('h-100', 'm-0');
+
+        pNombreCanalDentroBoton.append(img);
+        pNombreCanalDentroBoton.append(spanBadge);
+        btn.append(pNombreCanalDentroBoton)
       } else {
-        btn.innerHTML = bandera;
-        btn.append(span);
+        btn.textContent = bandera
+        btn.append(spanBadge);
       }
 
       fragmentBtnsFiltroBanderas.append(btn);
@@ -1089,7 +1102,7 @@ let tele = {
 
         btn.classList.replace('btn-outline-secondary', 'btn-primary');
 
-        let filtro = codigosBandera[btn.dataset.country] ? codigosBandera[btn.dataset.country] : 'Unknow';
+        let filtro = codigosBandera[btn.dataset.country] ? codigosBandera[btn.dataset.country] : 'Desconocido';
         filtrarCanalesPorInput(filtro, document.querySelector('#modal-body-botones-canales'));
       });
     });
@@ -1104,21 +1117,18 @@ let tele = {
 
         btn.classList.replace('btn-outline-secondary', 'btn-primary');
 
-        let filtro = codigosBandera[btn.dataset.country] ? codigosBandera[btn.dataset.country] : 'Unknow';
+        let filtro = codigosBandera[btn.dataset.country] ? codigosBandera[btn.dataset.country] : 'Desconocido';
         filtrarCanalesPorInput(filtro, document.querySelector('#offcanvas-body-botones-canales'));
       });
     });
 
 
   },
   init: async () => {
-    // Llamar a la función para realizar el fetch de nombre paises
-    await fetchCodigosBandera();
+    await fetchCodigosBandera(); // Llamar a la función para realizar el fetch de nombre paises
+    await fetchCargarCanales();  // Llamar a la función para realizar el fetch de lista canales
 
-    // Llamar a la función para realizar el fetch de lista canales
-    await cargarCanales();
-
-    tele.populateModal();
+    tele.crearBotonesParaCanales();
 
     const localStorageCanales = localStorage.getItem('canales_storage');
     const canalesPredeterminados = ['24-horas-2', 'meganoticias-3', 't13-4'];
@@ -1157,9 +1167,12 @@ new Sortable(canalesGrid, {
   ghostClass: 'marca-al-mover',
 });
 
+
+
+// Permitir mover divs
 canalesGrid.addEventListener("dragstart", () => {
   // busca el div antepuesto en cada canal y le quita clase "pe-none" para poder abarcar todo el tamaño del div del canal para el threshold https://sortablejs.github.io/Sortable/#thresholds
-  const elements = canalesGrid.querySelectorAll('.pe-none');
+  const elements = canalesGrid.querySelectorAll('.bg-transparent');
   elements.forEach(element => {
       element.classList.toggle('pe-none');
   });
@@ -1169,7 +1182,7 @@ canalesGrid.addEventListener("dragstart", () => {
 
 
 canalesGrid.addEventListener("dragend", () => {
-  // Volvemos a activar tooltips
+  // Volvemos a activar tooltips para su funcionamiento normal
   activarTooltipsBootstrap();
   // busca el div antepuesto en cada canal y le regresa las clase de "pe-none" para poder hacer clic en iframes o videojs
   const elements = canalesGrid.querySelectorAll('.bg-transparent');
@@ -1178,6 +1191,7 @@ canalesGrid.addEventListener("dragend", () => {
   });
 
   // capturamos valores de los div para que se pase a borrar el listado canales de localStorage y reemplazado por el orden nuevo, de forma de recordar orden a la siguiente carga 
+  // no es la mejor forma de dar solución a este problema pero es la única que se me ocurrió xd
   const elementsLS = canalesGrid.querySelectorAll('div[data-canal]');
   localStorage.removeItem('canales_storage');
   let canalesStorage = JSON.parse(localStorage.getItem('canales_storage')) || {};

assets/js/resetLocalStorage.js

@@ -8,7 +8,7 @@ btnReset.addEventListener('click', () => {
   localStorage.clear();
   audioLimpiarCanalesActivos.play();
   audioLimpiarCanalesActivos.volume = 0.8;
-  audioLoopEstaticaCRT.volume = 0.6;
+  audioLoopEstaticaCRT.volume = 0.8;
   audioLoopEstaticaCRT.loop = true;
   audioLoopEstaticaCRT.play();
   alertReset.classList.remove('d-none');