<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>{$titulo} | {$videoTitle}</title>
        <link rel="icon" href="templates/images/favicon.png" sizes="192x192" />
        <link href="{$styles.normalize}" rel="stylesheet"/>
        <link href="{$styles.salida}" rel="stylesheet"/>
        <!--Plyr-->
        <script>
         /*
            @licstart  The following is the entire license notice for the
            JavaScript code in this page.

            Copyright (C) {$smarty.now|date_format:"%Y"} Jesús E. | <heckyel@hyperbola.info>

            The JavaScript code in this page is free software: you can
            redistribute it and/or modify it under the terms of the GNU
            General Public License (GNU GPL) as published by the Free Software
            Foundation, either version 3 of the License, or (at your option)
            any later version.  The code is distributed WITHOUT ANY WARRANTY;
            without even the implied warranty of MERCHANTABILITY or FITNESS
            FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.

            As additional permission under GNU GPL version 3 section 7, you
            may distribute non-source (e.g., minimized or compacted) forms of
            that code without the copy of the GNU GPL normally required by
            section 4, provided you include this license notice and a URL
            through which recipients can access the Corresponding Source.


            @licend  The above is the entire license notice
            for the JavaScript code in this page.
          */
        </script>
        <link href="{$styles.plyr}" rel="stylesheet"/>
        <style>
         code, kbd, samp {
             font-family: monospace, monospace;
             font-size: 0.8em;
             background: black;
             text-align: center;
             padding: 1em;
             border: solid 1px #00b7f1;
             margin-bottom: 1em;
         }
        </style>
    </head>
    <body>
        <div class="contenedor">
            <header>
                <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">
                    <div class="row">
                        <div class="imageyt">
                            <img alt='{$videoTitle}' src="{$videoThumbURL}"/>
                        </div>
                        <div class="features">
                            <h6 class="yt-titulo">Canal</h6>
                            <h6>{$videoAuthor}</h6>
                            <h6 class="yt-titulo">Duración</h6>
                            <h6>{$videoDuration}</h6>
                            <h6 class="yt-titulo">Vistas</h6>
                            <h6>{$videoViews}</h6>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="contenedor">
                    {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']}'/>
                                {/foreach}
                            </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-->
                        <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}

                                {if $streamExtra == TRUE}
                                    {foreach $streamFormatsExtra as $download}
                                        <li class="download-format">
                                            <a class="boton-descarga" href="{$download['url']}">
                                                {$download['format']}
                                            </a>
                                        </li>
                                    {/foreach}
                                {/if}
                            </ul>
                        </details>
                    {else}
                        <p>I sorry not live support for now.</p>
                    {/if}
                </div>
            </section>
            <code>{$url_query}</code>
            <code>
                &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"
                                                                                       rel="noopener noreferrer"
                                                                                       href="{$source_code}"
                                                                                       target="_blank">LibreGit</a> bajo la Licencia
                    <a class="enlace" rel="license noopener noreferrer" href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank">
                        <abbr title="GNU Affero General Public License version 3">GNU AGPLv3+</abbr>
                    </a>
                </p>
                <p class="copyleft">
                    <a class="enlace" href="templates/librejs.html" data-jslicense="1"
                       rel="license noopener noreferrer" target="_blank">Información de licencias de JavaScript.</a>
                </p>
                <p class="copyleft">Versión <a href="{$source_code}/src/tag/{$version}"
                                               class="enlace"
                                               rel="noopener noreferrer"
                                               target="_blank">{$version}</a></p>
            </footer>
        </div>
        <script src="{$javascript.plyr}" integrity="sha512-VAzAm4qxuDivjRHdF9ykJb9aEntumzPAheFTg3fs9FGmVyI4Gx9GsRBy2ydWOAIXLVfCG1ZwvKjnVMe7zZLOKw=="></script>
    </body>
</html>
