Add query search

7 files changed, 54 insertions, 24 deletions

diff --git a/templates/css/frond.min.css b/templates/css/frond.min.css
index 4c11eec..6dba3b3 100644
--- a/templates/css/frond.min.css
+++ b/templates/css/frond.min.css
@@ -1 +1,2 @@
-body{background:#2d3743;color:#fff}.contenedor{margin:auto;width:70%;max-width:700px;background:#067ab4;display:flex;flex-direction:column;flex-wrap:wrap;align-items:center}.contenedor .libreyt{padding-bottom:60px}a.enlace{color:#ccc;text-decoration:none}a.enlace:hover{color:#2dde98}header{display:flex;width:90%;padding:20px 0px;justify-content:center}header img{align-items:center;width:100%;vertical-align:top}section{width:100%}section h2{text-align:center}section .formulario{display:flex;flex-wrap:wrap;justify-content:center}section .formulario input[type="text"]{background:#f5f5f1;border:2px solid;margin-bottom:15px;width:80%;border-radius:5px;padding:15px 20px;font-size:15px;color:#a4a4a4}section .formulario input[type="text"]:focus{border:2px solid #3895ea;color:#221f1f}section .formulario .boton{margin:auto;background:#3895ea;color:#fff;border:none;border-radius:3px;padding:15px 40px;cursor:pointer}footer p.copyleft{font-size:12px;text-align:center}
+body{background:#2d3743;color:#fff}.contenedor{margin:auto;width:70%;max-width:700px;background:#067ab4;display:flex;flex-direction:column;flex-wrap:wrap;align-items:center}.contenedor .libreyt{padding-bottom:60px}a.enlace{color:#ccc;text-decoration:none}a.enlace:hover{color:#2dde98}header{display:flex;width:90%;padding:20px 0px;justify-content:center}header img{align-items:center;width:100%;vertical-align:top}section{width:100%}section h2{text-align:center}section .formulario{display:flex;flex-wrap:wrap;justify-content:center}section .formulario input[type="text"],section .formulario input[type="search"]{background:#f5f5f1;border:2px solid;margin-bottom:15px;width:80%;border-radius:5px;padding:15px 20px;font-size:15px;color:#a4a4a4}section .formulario input[type="text"]:focus,section .formulario input[type="search"]:focus{border:2px solid #3895ea;color:#221f1f}section .formulario .boton{margin:auto;background:#3895ea;color:#fff;border:none;border-radius:3px;padding:15px 40px;cursor:pointer}footer p.copyleft{font-size:12px;text-align:center}
+/*# sourceMappingURL=frond.min.css.map */
diff --git a/templates/css/salida.min.css b/templates/css/salida.min.css
index 193ce55..61979f2 100644
--- a/templates/css/salida.min.css
+++ b/templates/css/salida.min.css
@@ -1,2 +1,2 @@
-body{background:#2d3743;color:#fff}a.enlace{color:#1aafff;text-decoration:none}a.enlace:hover{color:#2dde98}.contenedor{margin:auto;width:100%;max-width:800px;display:grid;grid-template-columns:auto;grid-template-rows:auto auto;grid-gap:1rem}.contenedor .libreyt .row{display:flex;width:80%;max-width:400px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-self:center;justify-content:center}.contenedor .libreyt .row .imageyt{flex:1 0 30%;max-width:40%;padding:0px 15px}.contenedor .libreyt .row .imageyt img{width:100%;vertical-align:middle}.contenedor .libreyt .row .features{flex:0;min-height:1px;max-height:100%;position:relative;padding:0px 15px}.contenedor .libreyt .row .features .yt-titulo{font-weight:700;font-size:1rem;line-height:24px}.contenedor .row{line-height:2.5}.contenedor .row .col{text-align:center;padding:0px 15px}.contenedor .row .col .boton-descarga{padding:2px 5px;font-size:12px;border-radius:3px;color:#fff;background-color:#5cb85c;border-color:#5cb85c;text-decoration:none}.contenedor .v-download ul.download-dropdown-content{padding-top:1rem;padding-bottom:1rem;background:#000;border:solid 1px #00b7f1}.contenedor .v-download ul.download-dropdown-content li a{text-decoration:none}.contenedor .v-download ul.download-dropdown-content li a:link{color:#2af}.librevideojs{width:90%;max-width:700px;justify-self:center}.mpv{margin-bottom:.5rem;margin-top:0}header{display:flex;width:90%;padding:20px 0px;justify-content:center}header a.drm-free{align-items:center;height:auto;opacity:.5;transition:opacity 150ms}header a.drm-free:before{content:url("../images/drm-free.png");vertical-align:top;display:block;position:absolute;top:12px;left:12px;max-width:120px;width:100%}header a.drm-free:hover{opacity:1}h2,h3,h4,h5,h6{margin-top:0;margin-bottom:0;line-height:1.1}hr{width:100%}section{width:100%}h2{text-align:center}footer p.copyleft{font-size:12px;text-align:center}@media screen and (max-width: 768px){header a.drm-free:before{display:none}}
+body{background:#2d3743;color:#fff}a.enlace{color:#1aafff;text-decoration:none}a.enlace:hover{color:#2dde98}.contenedor .form-search{display:grid;grid-gap:1px;grid-template-columns:auto auto auto 90px auto;grid-template-areas:". search-box search-box search-button .";position:relative}.contenedor .form-search .search-box{grid-area:search-box;background:#2d3743;border-bottom:1px solid gray;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;color:#fff}.contenedor .form-search .search-button{grid-area:search-button;cursor:pointer;padding-bottom:6px;padding-left:.75em;padding-right:.75em;padding-top:6px;text-align:center;white-space:nowrap;background-color:#dcdcdc;border:#00b7f1;color:#2d3743;border-radius:5px}.contenedor{margin:auto;width:100%;max-width:800px;display:grid;grid-template-columns:auto;grid-template-rows:auto auto;grid-gap:1rem}.contenedor .libreyt .row{display:flex;width:80%;max-width:400px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-self:center;justify-content:center}.contenedor .libreyt .row .imageyt{flex:1 0 30%;max-width:40%;padding:0px 15px}.contenedor .libreyt .row .imageyt img{width:100%;vertical-align:middle}.contenedor .libreyt .row .features{flex:0;min-height:1px;max-height:100%;position:relative;padding:0px 15px}.contenedor .libreyt .row .features .yt-titulo{font-weight:700;font-size:1rem;line-height:24px}.contenedor .v-download ul.download-dropdown-content{padding-top:1rem;padding-bottom:1rem;background:#000;border:solid 1px #00b7f1}.contenedor .v-download ul.download-dropdown-content li a{text-decoration:none}.contenedor .v-download ul.download-dropdown-content li a:link{color:#2af}.librevideojs{width:90%;max-width:700px;justify-self:center}.mpv{margin-bottom:.5rem;margin-top:0}header{display:flex;padding:20px 0px;justify-content:center}header a.drm-free{align-items:center;height:auto;opacity:.5;transition:opacity 150ms}header a.drm-free:before{content:url("../images/drm-free.png");vertical-align:top;display:block;position:absolute;top:12px;left:12px;max-width:120px;width:100%}header a.drm-free:hover{opacity:1}h2,h3,h4,h5,h6{margin-top:0;margin-bottom:0;line-height:1.1}hr{width:100%}section{width:100%}h2{text-align:center}footer p.copyleft{font-size:12px;text-align:center}@media screen and (max-width: 768px){header a.drm-free:before{display:none}}
 /*# sourceMappingURL=salida.min.css.map */
diff --git a/templates/index.tpl b/templates/index.tpl
index 79faf08..009b456 100644
--- a/templates/index.tpl
+++ b/templates/index.tpl
@@ -17,7 +17,7 @@
                 <h2>Herramienta Libre</h2>
                 <hr>
                 <form method="get" autocomplete="off" class="formulario">
-                    <input name="link" type="text" placeholder="Enlace de Youtube"/>
+                    <input name="link" type="search" placeholder="Enlace de Youtube"/>
                     <input class="boton" name="submit" type="submit" value="Decodificar"/>
                 </form>
             </section>
diff --git a/templates/sass/frond.sass b/templates/sass/frond.sass
index ac02d13..01b6d3e 100644
--- a/templates/sass/frond.sass
+++ b/templates/sass/frond.sass
@@ -55,7 +55,8 @@ section
         flex-wrap: wrap
         justify-content: center
 
-        input[type="text"]
+        input[type="text"],
+        input[type="search"]
             background: $URLbox
             border: 2px solid
             margin-bottom: 15px
@@ -64,7 +65,6 @@ section
             padding: 15px 20px
             font-size: 15px
             color: $textbox
-
             &:focus
                 border: 2px solid $submit
                 color: $textbox-focus
diff --git a/templates/sass/salida.sass b/templates/sass/salida.sass
index e4ea057..3dbd865 100644
--- a/templates/sass/salida.sass
+++ b/templates/sass/salida.sass
@@ -1,5 +1,8 @@
 $asana: #067ab4
-$blanco: #fff
+$border: #00b7f1
+$sborder: #808080
+$button: #dcdcdc
+$color: #fff
 $copyleft: #1aafff
 $enlace: #2dde98
 $fondo: #2d3743
@@ -9,7 +12,7 @@ $submit: #3895ea
 
 body
     background: $fondo
-    color: $blanco
+    color: $color
 
 a.enlace
     color: $copyleft
@@ -18,6 +21,36 @@ a.enlace
         color: $enlace
 
 .contenedor
+    .form-search
+        display: grid
+        grid-gap: 1px
+        grid-template-columns: auto auto auto 90px auto
+        grid-template-areas: ". search-box search-box search-button ."
+        position: relative
+        .search-box
+            grid-area: search-box
+            background: $fondo
+            border-bottom: 1px solid $sborder
+            border-top: 0px
+            border-left: 0px
+            border-right: 0px
+            border-radius: 0px
+            color: $color
+        .search-button
+            grid-area: search-button
+            cursor: pointer
+            padding-bottom: 6px
+            padding-left: .75em
+            padding-right: .75em
+            padding-top: 6px
+            text-align: center
+            white-space: nowrap
+            background-color: $button
+            border: $border
+            color: $fondo
+            border-radius: 5px
+
+.contenedor
     margin: auto
     width: 100%
     max-width: 800px
@@ -59,21 +92,6 @@ a.enlace
                     line-height: 24px
 
 .contenedor
-    .row
-        line-height: 2.5
-
-        .col
-            text-align: center
-            padding: 0px 15px
-
-            .boton-descarga
-                padding: 2px 5px
-                font-size: 12px
-                border-radius: 3px
-                color: $blanco
-                background-color: $green
-                border-color: $green
-                text-decoration: none
     .v-download
         ul.download-dropdown-content
             padding-top: 1rem
@@ -97,7 +115,6 @@ a.enlace
 
 header
     display: flex
-    width: 90%
     padding: 20px 0px
     justify-content: center
 
diff --git a/templates/video.tpl b/templates/video.tpl
index 76119f3..05d56c5 100644
--- a/templates/video.tpl
+++ b/templates/video.tpl
@@ -53,6 +53,12 @@
                 <a class="drm-free" rel="noopener noreferrer" href="https://www.defectivebydesign.org/drm-free" target="_blank"></a>
                 <h2>{$videoTitle}</h2>
             </header>
+
+            <form class="form-search" id="site-search">
+                <input type="search" name="link" class="search-box" value="" placeholder="Enlace de Youtube">
+                <button type="submit" value="Search" class="search-button">Query</button>
+            </form>
+
             <hr>
             <section class="libreyt">
                 <div class="contenedor">
diff --git a/tools/extract.php b/tools/extract.php
index 2b06a5f..dbf0f4b 100644
--- a/tools/extract.php
+++ b/tools/extract.php
@@ -381,7 +381,13 @@ $streamin_data_json = json_decode($jsn_str, true);
 // Microdata
 $vidtitle = $streamin_data_json["videoDetails"]["title"];
 $vidId  = $streamin_data_json["videoDetails"]["videoId"];
-$viddes = $streamin_data_json["microformat"]["playerMicroformatRenderer"]["description"]["simpleText"];
+
+if (isset( $streamin_data_json["videoDetails"]["shortDescription"] )) {
+    $viddes = $streamin_data_json["videoDetails"]["shortDescription"];
+} else {
+    $viddes = null;
+}
+
 $vidpub = $streamin_data_json["microformat"]["playerMicroformatRenderer"]["publishDate"];
 $vidviewCount = $streamin_data_json["videoDetails"]["viewCount"];
 $vidauthor = $streamin_data_json["videoDetails"]["author"];