videopull/index.html at main · parencode/videopull · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Pull</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <style>
    body {font-family: Arial, sans-serif; margin: 20px; background-color: black; } .videoItem {margin: 15px 10px; padding: 10px; border: 0px solid #ddd; border-radius: 5px; background-color: #333333; } .videoTitle, h4 {font-size: 15px; margin-bottom: 5px; color: white; font-family: monospace; font-weight: bold; } .videoArtist {font-style: italic; color: #999999; } .videoLink {color: #428bca; text-decoration: none; } .videoContainer {position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden; cursor: pointer; } .videoFrame {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0px solid #ddd; } .modal-content {border: none; } .modal-header {background-color: #333333; font-size: 10px; color: white; font-family: monospace; font-weight: bold; padding: 0.5rem; } .modal-title {font-size: 15px; text-overflow: ellipsis; } .modal-body {text-align: center; background-color: #333333; } .modal-header .btn-close {background-color: white; border-radius: 15px; } .carousel-item img {max-width: 100%; max-height: 70vh; margin: auto; } .carousel-control-next, .carousel-control-prev {position: absolute; top: 0; bottom: 55px; } #floatingTextarea {height: 50rem; } #videoModal .modal-body {padding: 0px; }
  </style>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="position-fixed" style="z-index: 100;"> <div class="btn" data-bs-target="#videoModal" data-bs-toggle="modal"> <span><img src="./images/logo.png" style="width: 25px;"/></span> </div> </div> <div class="container-fluid"> <h4 class="row justify-content-center" data-bs-target="#textareaModal" data-bs-toggle="modal">Video Pull</h4> <div class="row justify-content-center" id="videoPanel"></div> </div> <!-- Modal para el carrusel --> <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title text-truncate" id="videoModalLabel">Video Pull</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div id="videoCarousel" class="carousel slide" data-bs-wrap="false"> <div class="carousel-inner" id="carouselInner"></div> <button class="carousel-control-prev" type="button" data-bs-target="#videoCarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Anterior</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#videoCarousel" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Siguiente</span> </button> </div> </div> </div> </div> </div> <!-- Modal para el textarea --> <div class="modal fade" id="textareaModal" tabindex="-1" role="dialog" aria-labelledby="textareaModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title text-truncate" id="textareaModalLabel">Video Pull</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="form-floating"> <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea> <label for="floatingTextarea">Video Pull</label> </div> </div> </div> </div>

</div>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <h4>YouTube usa cookies</h4> <button type="button" class="btn btn-secondary" >Rechazar</button> <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Aceptar</button> </div> </div> </div> </div>

<!-- Agregar enlaces a Bootstrap JS y Popper.js (requeridos por Bootstrap) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>


<script>
var urlString=window.location.href,match=urlString.match(/\?(\d+)/),numero=match?match[1]:null,scriptElement=document.createElement("script");scriptElement.src=null!=numero?`./data/list${numero}.js`:"./data/list.js",scriptElement.addEventListener("load",()=>{$('#staticBackdrop').modal('show');e=0;const c=function(t){0===e&&(e=1,window.addEventListener("message",function(e){if("https://www.youtube.com"===e.origin&&void 0!==e.data)try{var t=JSON.parse(e.data);"onStateChange"===t.event&&n(t)}catch(e){}})),t.addEventListener("load",function(){var e=JSON.stringify({event:"listening",id:t.id+"",channel:"widget"});t.contentWindow.postMessage(e,"https://www.youtube.com"),e=JSON.stringify({event:"command",func:"addEventListener",args:["onStateChange"],id:t.id+"",channel:"widget"}),t.contentWindow.postMessage(e,"https://www.youtube.com")})};var e;const n=e=>{switch(e.info){case 1:break;case 0:w.to(Number.parseInt(e.id)+1)}},m=document.getElementById("videoPanel");new bootstrap.Modal(document.getElementById("videoModal"));const u=document.getElementById("carouselInner");let v;const o="?autohide=2&border=0&wmode=opaque&enablejsapi=1&rel=0&controls=1&showinfo=0&start=0&origin=https://parencode.github.io";function p(e){e=new URL(e);return e.searchParams.get("v")||e.pathname.split("/").pop()}function g(e,t,n){var a=document.createElement("iframe");return a.className="videoFrame",a.frameborder="0",a.src=`https://www.youtube.com/embed/${p(e)}${o}&autoplay=`+t,a.allow="autoplay; encrypted-media; allowfullscreen; mozallowfullscreen; msallowfullscreen; oallowfullscreen; ebkitallowfullscreen;",a.id=n,a}var t=document.getElementById("videoCarousel");t.addEventListener("slide.bs.carousel",e=>{var t=e.to,n=videosJSON.videos[t],a=("left"==e.direction?e.relatedTarget.previousElementSibling:e.relatedTarget.nextElementSibling).querySelector(".videoFrame"),a=(a.parentNode.removeChild(a),g(videosJSON.videos[t].enlace,1,t));c(a),e.relatedTarget.querySelector(".videoContainer").appendChild(a),v="",a=e.relatedTarget.querySelector(".videoFrame"),h=t,v!==a&&(v&&void 0!==v.contentWindow&&v.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}',"*"),(v=a).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}',"*")),document.getElementById("videoModalLabel").innerHTML=1+t+" - "+n.titulo});const w=new bootstrap.Carousel(t);let h=-1;function a(){let t=1;async function e(){var e=9*(t-1),n=9+e;for(let t=e;t<n&&t<videosJSON.videos.length;t++){var a=videosJSON.videos[t],o=document.createElement("div"),d=(o.className="col-md-3 col-lg-3 videoItem",document.createElement("div")),i=(d.className="videoTitle",d.textContent=a.titulo,document.createElement("div")),l=(i.className="videoArtist",i.textContent=a.artista,document.createElement("a")),r=(l.className="videoLink",l.href=a.enlace,l.target="_blank",l.textContent="Ver video en YouTube",document.createElement("div")),s=(r.className="videoContainer",r.dataset.bsTarget="#videoModal",r.dataset.bsToggle="modal",r.addEventListener("click",()=>{var d,e;d=t,e=videosJSON.videos,h!=d&&((u.innerHTML="")==u.innerHTML&&e.forEach((e,t)=>{var n,a=document.createElement("div"),o=(a.className="carousel-item "+(t===d?"active":""),document.createElement("div"));o.className="videoContainer",t===d&&(n=g(e.enlace,1,d),c(n),o.appendChild(n),v=n,document.getElementById("videoModalLabel").innerHTML=1+d+" - "+e.titulo,h=t),a.appendChild(o),u.appendChild(a)}),w.to(d))}),document.createElement("img"));s.className="videoFrame",s.id="l"+t,s.dataset.videoSrc=a.enlace,s.src=`https://i.ytimg.com/vi/${p(a.enlace)}/hqdefault.jpg`,r.appendChild(s),o.appendChild(r),o.appendChild(d),o.appendChild(i),o.appendChild(l),m.appendChild(o)}t++}e(),window.addEventListener("scroll",()=>{window.innerHeight+window.scrollY>=document.body.offsetHeight/5&&e()})}document.getElementById("textareaModal").addEventListener("hide.bs.modal",e=>{var t=document.getElementById("floatingTextarea").value.split("\n").map((e,t)=>({titulo:"",artista:"",enlace:e.trim()}));videosJSON={videos:t},document.getElementById("videoPanel").innerHTML="",document.getElementById("carouselInner").innerHTML="",paginaActual=0,a()}),a()}),document.body.appendChild(scriptElement);</script>
</body>
</html>