Make core extract

4 files changed, 108 insertions, 106 deletions

diff --git a/templates/css/salida.min.css b/templates/css/salida.min.css
index 0100963..193ce55 100644
--- a/templates/css/salida.min.css
+++ b/templates/css/salida.min.css
@@ -1 +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:flex;flex-direction:column;flex-wrap:wrap;align-items:center}.contenedor .libreyt{padding-bottom:20px}.contenedor .libreyt .row{display:flex;width:80%;max-width:400px;flex-direction:row;flex-wrap:wrap;align-items: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}.librevideojs{width:90%;max-width:700px}.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{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}}
+/*# sourceMappingURL=salida.min.css.map */
diff --git a/templates/embed.tpl b/templates/embed.tpl
index b29dd68..085a8bb 100644
--- a/templates/embed.tpl
+++ b/templates/embed.tpl
@@ -41,39 +41,46 @@
         </script>
     </head>
     <body>
-        <video id="player" controls poster="{$librethumb}" data-setup="{}">
-            {if $breaklink === TRUE}
-                <source data-res="{$breakquality}" src="{$breakurl}" type='{$formatdrm}'/>
-            {else}
+        {if $islive == false }
+            <video id="player"
+                   poster="{$videoThumbURL}"
+                   controls
+                   playsinline
+                   onmouseleave='{$videoTitle}'
+                   oncontextmenu='{$videoTitle}'
+                   onmouseenter='{$videoTitle}'
+                   title='{$videoTitle}'>
                 {foreach $streamFormats as $stream}
-                    <source data-res="{trim($stream->resolution, 'p')}" src="{$stream->url}" type='{$stream->type}'/>
+                    <source data-res="{trim($stream['resolution'], 'p')}" src="{$stream['url']}" type='{$stream['type']}'/>
                 {/foreach}
-            {/if}
-            <p>Lo siento, este navegador no soporta vídeo en HTML5. Por favor, cambia o actualiza tu navegador web</p>
-        </video>
-        <!--Plyr-->
-        <script>
-         // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
-         document.addEventListener('DOMContentLoaded', () => {
-             const player = new Plyr(document.getElementById('player'), {
-                 disableContextMenu: false,
-                 controls: [
-                     'play-large',
-                     'play',
-                     'progress',
-                     'current-time',
-                     'mute',
-                     'volume',
-                     'captions',
-                     'settings',
-                     'download',
-                     'fullscreen'
-                 ]
+                <p>Lo siento, este navegador no soporta vídeo en HTML5. Por favor, cambia o actualiza tu navegador web</p>
+            </video>
+            <!--Plyr-->
+            <script>
+             // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
+             document.addEventListener('DOMContentLoaded', () => {
+                 const player = new Plyr(document.getElementById('player'), {
+                     disableContextMenu: false,
+                     controls: [
+                         'play-large',
+                         'play',
+                         'progress',
+                         'current-time',
+                         'mute',
+                         'volume',
+                         'captions',
+                         'settings',
+                         'download',
+                         'fullscreen'
+                     ]
+                 });
              });
-         });
-         // @license-end
-        </script>
-        <!--EndPlyr-->
+             // @license-end
+            </script>
+            <!--EndPlyr-->
+        {else}
+            <p>I sorry not live support for now.</p>
+        {/if}
         <script src="{$javascript.plyr}" integrity="sha512-YjLaaKupD6GUZwnkLn8LbzL73ZhgY01zYCaeCscD/+khdOtmPfz02tw/cb9kYySUSPlpQoBT8HGY/ggiKAjA7A=="></script>
     </body>
 </html>
diff --git a/templates/sass/salida.sass b/templates/sass/salida.sass
index e39f9c2..e4ea057 100644
--- a/templates/sass/salida.sass
+++ b/templates/sass/salida.sass
@@ -21,14 +21,12 @@ a.enlace
     margin: auto
     width: 100%
     max-width: 800px
-    display: flex
-    flex-direction: column
-    flex-wrap: wrap
-    align-items: center
+    display: grid
+    grid-template-columns: auto
+    grid-template-rows: auto auto
+    grid-gap: 1rem
 
     .libreyt
-        padding-bottom: 20px
-
         .row
             display: flex
             width: 80%
@@ -36,6 +34,7 @@ a.enlace
             flex-direction: row
             flex-wrap: wrap
             align-items: center
+            justify-self: center
             justify-content: center
 
             .imageyt
@@ -75,10 +74,22 @@ a.enlace
                 background-color: $green
                 border-color: $green
                 text-decoration: none
+    .v-download
+        ul.download-dropdown-content
+            padding-top: 1rem
+            padding-bottom: 1rem
+            background: black
+            border: solid 1px #00b7f1
+            li
+                a
+                    text-decoration: none
+                    &:link
+                        color: #22aaff
 
 .librevideojs
     width: 90%
     max-width: 700px
+    justify-self: center
 
 .mpv
     margin-bottom: .5rem
diff --git a/templates/video.tpl b/templates/video.tpl
index dc818b8..76119f3 100644
--- a/templates/video.tpl
+++ b/templates/video.tpl
@@ -62,7 +62,7 @@
                         </div>
                         <div class="features">
                             <h6 class="yt-titulo">Canal</h6>
-                            <h6><a class="enlace" href="https://invidio.us/channel/{$videoChannel}" rel="noopener noreferrer" target="_blank">{$videoAuthor}</a></h6>
+                            <h6>{$videoAuthor}</h6>
                             <h6 class="yt-titulo">Duración</h6>
                             <h6>{$videoDuration}</h6>
                             <h6 class="yt-titulo">Vistas</h6>
@@ -72,80 +72,63 @@
                 </div>
                 <hr>
                 <div class="contenedor">
-                    <h4>Formatos de vídeo</h4>
-
-                    {if $downloadbreak === TRUE}
-                        <div class="row">
-                            <div class="col">{$downloadFormat}</div>
-                            <div class="col">{$downloadQuality}</div>
-                            <div class="col">
-                                <a class="boton-descarga" href="{$breakurl}"
-                                   title='{$videoTitle}.{$downloadFormat}'
-                                   download='{$videoTitle}.{$downloadFormat}'>Descarga Habilitada</a>
-                            </div>
-                        </div>
-                    {else}
-                        {foreach $downloads as $download}
-                            <div class="row">
-                                <div class="col">{$download->container}</div>
-                                <div class="col">{$download->resolution}</div>
-                                <div class="col">
-                                    <a class="boton-descarga"
-                                       title='{$videoTitle}.{$download->container}'
-                                       href="{$download->url}"
-                                       download='{$videoTitle}.{$download->container}'>Descarga</a>
-                                </div>
-                            </div>
-                        {/foreach}
-                    {/if}
-
-                    <div class="librevideojs">
-                        <video id="player"
-                               poster="{$librethumb}"
-                               controls
-                               playsinline
-                               onmouseleave='{$videoTitle}'
-                               oncontextmenu='{$videoTitle}'
-                               onmouseenter='{$videoTitle}'
-                               title='{$videoTitle}'>
-                            {if $islive === True}
-                                <p> Livestream videos are not yet supported. </p>
-                            {elseif $breaklink === TRUE}
-                                <source data-res="{$breakquality}" src="{$breakurl}" type='{$formatdrm}'/>
-                            {else}
+                    {if $islive == false }
+                        <div class="librevideojs">
+                            <video id="player"
+                                   poster="{$videoThumbURL}"
+                                   controls
+                                   playsinline
+                                   onmouseleave='{$videoTitle}'
+                                   oncontextmenu='{$videoTitle}'
+                                   onmouseenter='{$videoTitle}'
+                                   title='{$videoTitle}'>
                                 {foreach $streamFormats as $stream}
-                                    <source data-res="{trim($stream->resolution, 'p')}" src="{$stream->url}" type='{$stream->type}'/>
+                                    <source data-res="{trim($stream['resolution'], 'p')}" src="{$stream['url']}" type='{$stream['type']}'/>
                                 {/foreach}
-                            {/if}
-                        </video>
-                    </div>
-                    <!--Plyr-->
-                    <script>
-                     document.addEventListener('DOMContentLoaded', () => {
-                         const player = new Plyr(document.getElementById('player'), {
-                             disableContextMenu: false,
-                             quality: { default: 360 },
-                             controls: [
-                                 'play-large',
-                                 'play',
-                                 'progress',
-                                 'current-time',
-                                 'mute',
-                                 'volume',
-                                 'captions',
-                                 'settings',
-                                 'download',
-                                 'fullscreen'
-                             ]
+                            </video>
+                        </div>
+                        <!--Plyr-->
+                        <script>
+                         document.addEventListener('DOMContentLoaded', () => {
+                             const player = new Plyr(document.getElementById('player'), {
+                                 disableContextMenu: false,
+                                 quality: { default: 360 },
+                                 controls: [
+                                     'play-large',
+                                     'play',
+                                     'progress',
+                                     'current-time',
+                                     'mute',
+                                     'volume',
+                                     'captions',
+                                     'settings',
+                                     'download',
+                                     'fullscreen'
+                                 ]
+                             });
                          });
-                     });
-                    </script>
-                    <!--EndPlyr-->
+                        </script>
+                        <!--EndPlyr-->
+                        <details class="v-download">
+                            <summary class="download-dropdown-label">Download</summary>
+                            <ul class="download-dropdown-content">
+                                {foreach $streamFormats as $download}
+                                    <li class="download-format">
+                                        <a class="boton-descarga" href="{$download['url']}">
+                                            {$download['format']}
+                                        </a>
+                                    </li>
+                                {/foreach}
+                            </ul>
+                        </details>
+                    {else}
+                        <p>I sorry not live support for now.</p>
+                    {/if}
                 </div>
             </section>
-            <code>{$url_freedom}</code>
+            <code>{$url_query}</code>
             <code>
-                &lt;iframe width='560' height='315' src='{$local_url}embed?link={$url_freedom}' frameborder='0' scrolling='no'&gt;&lt;/iframe&gt;
+                &lt;iframe width='560' height='315' src='{$local_url}embed?link={$url_query}' frameborder='0' scrolling='no'&gt;&lt;/iframe&gt;
             </code>
             <footer>
                 <p class="copyleft">Esta web es Software Libre y esta disponible en <a class="enlace"