<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
    <head>
        <title><%= appName %> | HDHomeRun Tuner | v<%= appVersion %></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="robots" content="noindex, nofollow">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
        <link rel="stylesheet" href="css/tvapp2.min.css">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js' integrity='sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq' crossorigin='anonymous'></script>
        <script src=' https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js '></script>
        <script src='js/tvapp2.min.js'></script>
    </head>
    <body>
        <!-- Header -->
        <div class="header">
            <nav class="navbar sticky-top container">
                <div class="brand">
                    <i data-bs-toggle="tooltip" title="v<%= appVersion %>" class="logo fa-sharp-duotone fa-regular fa-tv" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i>
                    <a target="_blank" data-bs-toggle="tooltip" title="View Github Repository" class="header-name" href="<%= appUrlGithub %>">TVApp2 for Docker</a>
                </div>
                <div class="social">
                    <i id="action-health" data-bs-toggle="tooltip" title="Health" class="heart logo health fa-duotone fa-solid fa-heart" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i>
                    <a href="javascript:runResync();"><i id="action-resync" data-bs-toggle="tooltip" title="Resync" class="restart fa-solid fa-rotate" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
                    <a target="_blank" href="<%= appUrlDocs %>"><i data-bs-toggle="tooltip" title="Documentation" class="logo fa-duotone fa-solid fa-book-open-cover" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
                    <a target="_blank" href="<%= appUrlGithub %>"><i data-bs-toggle="tooltip" title="Github" class="logo fa-logos fa-github" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
                    <a target="_blank" href="<%= appUrlDiscord %>"><i data-bs-toggle="tooltip" title="Discord" class="logo fa-logos fa-discord" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
                </div>
            </nav>
        </div>

        <!-- Header Notification: description -->
        <div class="container">
            <div class="introduction">
                <div class="row">
                    <div class="col">
                        <div class="introduction-body">
                            <div class="desc">
                                <div class="about" style="font-size: 13px;"><code>HDHomeRun</code> is a network-attached digital television tuner box, produced by the company SiliconDust USA, Inc. Self-hosted multimedia applications such as Jellyfin allow for you to add IPTV channels either using a <code>M3U8 tuner</code>, or also with the option of specifying a <code>HDHomeRun</code> tuner.</div>
                                <div class="about" style="font-size: 13px;">The TVApp2 app allows you to host your own HDHomeRun tuner, and then utilize this tuner within apps like Jellyfin in order to stream IPTV using the integrated server. Your HDHomeRun tuner settings are provided below:</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Header Fontawesome Icons -->
            <div class="container main-container">
                <table id="list" class="table table-dark table-striped" style="width:60%; margin: 0 auto;">
                    <thead>
                        <tr class="d-none d-md-table-row">
                            <th class="file cell-file">
                                Property
                            </th>
                            <th class="link cell-link">
                                Value
                            </th>
                            <th class="desc cell-desc">
                                Description
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="file cell-file" style="color: #919191;font-weight: 400;">
                                FriendlyName
                            </td>
                            <td class="link cell-link"><%= friendlyName %></td>
                            <td class="desc cell-desc">Name of tuner</td>
                        </tr>
                        <tr>
                            <td class="file cell-file" style="color: #919191;font-weight: 400;">
                                ModelNumber
                            </td>
                            <td class="link cell-link"><%= modelNumber %></td>
                            <td class="desc cell-desc">Virtual tuner model number</td>
                        </tr>
                        <tr>
                            <td class="file cell-file" style="color: #919191;font-weight: 400;">
                                FirmwareName
                            </td>
                            <td class="link cell-link"><%= firmwareName %></td>
                            <td class="desc cell-desc">Firmware name for tuner</td>
                        </tr>
                        <tr>
                            <td class="file cell-file" style="color: #919191;font-weight: 400;">
                                FirmwareVersion
                            </td>
                            <td class="link cell-link"><%= firmwareVersion %></td>
                            <td class="desc cell-desc">Firmware version running on tuner</td>
                        </tr>
                        <tr>
                            <td class="file cell-file" style="color: #919191;font-weight: 400;">
                                DeviceID
                            </td>
                            <td class="link cell-link"><%= deviceId %></td>
                            <td class="desc cell-desc">Tuner device id</td>
                        </tr>
                        <tr>
                            <td class="file cell-file" style="color: #919191;font-weight: 400;">
                                TunerCount
                            </td>
                            <td class="link cell-link"><%= slotsConnected %> / <%= slotsMax %></td>
                            <td class="desc cell-desc">Number of connection slots to view IPTV</td>
                        </tr>
                        <tr>
                            <td class="file cell-file" style="color: #919191;font-weight: 400;">
                                BaseURL
                            </td>
                            <td class="link cell-link"><a href="https://<%= hdhrIp %>:<%= hdhrPort %>" id="m3u-link" target="_blank"><%= hdhrIp %>:<%= hdhrPort %></a></td>
                            <td class="desc cell-desc">Base URL where HDHomeRun is hosted</td>
                        </tr>
                        <tr>
                            <td class="file cell-file" style="color: #919191;font-weight: 400;">
                                LineupURL
                            </td>
                            <td class="link cell-link"><a href="https://<%= hdhrIp %>:<%= hdhrPort %>/lineup.json" id="m3u-link" target="_blank"><%= hdhrIp %>:<%= hdhrPort %>/lineup.json</a></td>
                            <td class="desc cell-desc">URL to IPTV channel & guide lineups</td>
                        </tr>
                        <tr>
                            <td class="file cell-file" style="color: #919191;font-weight: 400;">
                                Uptime
                            </td>
                            <td class="link cell-link"><%= appUptimeFull %></td>
                            <td class="desc cell-desc">Duration that tuner has been online</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Footer -->
        <footer class="footer">
            <div class="container notifications" style="padding-bottom:20px;">
                <div id="ntfy-restart" class="ntfy-parent indicator-success sticky-bottom"></div>
                <div id="ntfy-firewall" class="ntfy-parent indicator-warning sticky-bottom"></div>
                <div id="ntfy-localhost" class="ntfy-parent indicator-danger sticky-bottom"></div>
            </div>
    
            <div class="sub">
                <div class="container">
                    <div class="col text-center text-muted text-small text-nowrap">
                        <small>Developed by BinaryNinja - <a data-bs-toggle="tooltip" title="v<%= appVersion %> <%= appRelease %> (<%= appGitHashShort %>)" href="<%= appUrlGithub %>"><%= appName %> (<%= appRelease %>)</a> v<%= appVersion %> <a target="_blank" data-bs-toggle="tooltip" title="View Github commit" href="<%= appUrlGithub %>/commit/<%= appGitHashLong %>"><%= appGitHashShort %></a></small><br />
                        <span class="footer-sub"><small>Uptime <a id="uptime" href="" data-bs-toggle="tooltip" title="<%= appUptimeLong %>"> <%= appUptimeShort %> </a> | Startup <a id="startup" data-bs-toggle="tooltip" title="Startup time" href=""><%= appStartup %>s</a> | OS <a id="os" href="" data-bs-toggle="tooltip" title="Server operating system" href=""><%= serverOs %></a></small></span>
                    </div>
                </div>
            </div>
        </footer>

        <!-- Toast Notifications -->
        <!-- <button type="button" class="btn btn-primary" id="btnTestToasts">Show toast</button> -->
        <div style="z-index: 9999;" class="toast position-fixed bottom-0 end-0 p-8 m-3" id="tvapp2Toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true" data-bs-delay="10000">
            <div class="toast-body">
                <div class="d-flex gap-4">
                    <span><i class="fa-solid fa-circle-check fa-lg icon-success"></i></span>
                    <div class="d-flex flex-column flex-grow-1 gap-2">
                        <div class="d-flex align-items-center">
                            <span id="toast-title" class="fw-semibold">Toast Title</span>
                            <button type="button" class="btn-close btn-close-sm ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                        </div>
                        <span id="toast-message">Dismiss in 6 seconds</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="modalTvapp2" tabindex="-1" data-bs-backdrop="static" aria-labelledby="modalTvapp2Label" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalTvapp2Label">Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                    ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btn-secondary" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" id="btn-primary" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            /*
            this is test code. enable the "Show Toast" button and then uncomment this code.

            document.getElementById("btnTestToasts").onclick = function()
            {
                var toastElList = [].slice.call(document.querySelectorAll('.toast'))
                var toastList = toastElList.map(function(toastEl)
                {
                    return new bootstrap.Toast(toastEl)
                });

                toastList.forEach(toast => toast.show());
                console.log(toastList);
            };
            */

            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })

            const urlBase = window.location.origin;
            const urlM3U = urlBase + '/playlist';
            const urlXML = urlBase + '/epg';
            const urlGZP = urlBase + '/gzip';
        </script>

        <script>

            /*
                Document Ready
            */

            $(function(){
                $("[data-bs-toggle=tooltip]").tooltip({ placement: 'bottom'});
            });

            /*
                Action > DOM Status
            */

            document.addEventListener("DOMContentReady", function() {
                $("#tvapp2Toast").toast();
            });

            /*
            document.addEventListener("DOMContentLoaded", function() {
                $('#tvapp2Toast').toast("show");
            });
            */

            /*
                Notify > Localhost
            */

            document.addEventListener( 'DOMContentLoaded', function()
            {
                const host          = window.location.hostname;
                const port          = window.location.port || (window.location.protocol === 'https:' ? '443' : '80');
                if (host === 'localhost' || host === '127.0.0.1')
                {

                    const msg           = "<div class='ntfy-child'><span class='danger'>Danger</span> \
                                        <span class='msg'> \
                                            If accessing this page via 127.0.0.1 / localhost, proxying will not work on other devices. Load this page using \
                                            your computer's IP address (e.g., 192.168.x.x) and port to access the playlist from other devices on your network. \
                                            <br> \
                                            Learn how to locate your IP address on <a href='https://youtube.com/watch?v=UAhDHXN2c6E' target = '_blank' > Windows</a> \
                                            or <a href='https://youtube.com/watch?v=gaIYP4TZfHI' target = '_blank' > Linux</a>.\
                                        </span></div>";

                    document.getElementById( 'ntfy-localhost' ).innerHTML = msg;
                    document.getElementById( 'ntfy-localhost' ).style.display = 'block';
                } else {
                    document.getElementById( 'ntfy-localhost' ).style.display = 'none';
                }
            });

            /*
                Notify > Firewall
            */

            document.addEventListener( 'DOMContentLoaded', function()
            {
                const port          = window.location.port || (window.location.protocol === 'https:' ? '443' : '80');
                const msg           = "<div class='ntfy-child'><span class='warning'>Warning</span> \
                                    <span class='msg'> \
                                        Port <strong> " + port + " </strong> must be open and allowed through your \
                                        <a href='https://youtu.be/zOZWlTplrcA?si=nGXrHKU4sAQsy18e&t=18 target='_blank'>Windows</a> \
                                        or \
                                        <a href='https://youtu.be/7c_V_3nWWbA?si=Hkd_II9myn-AkNnS&t=12' target='_blank'>Linux</a> \
                                        OS firewall settings. This action enables devices such as Firestick or Android to connect \
                                        to the server and request the playlist through the proxy. \
                                    </span></div>";

                document.getElementById( 'ntfy-firewall' ).innerHTML = msg;
                document.getElementById( 'ntfy-firewall' ).style.display = 'block';
            });

            /*
                Notify > Restart / Resync
            */

            document.addEventListener( 'DOMContentLoaded', function()
            {
                const port          = window.location.port || (window.location.protocol === 'https:' ? '443' : '80');
                const msg           = "<div class='ntfy-child'><span class='success'>Success</span> \
                                    <span class='msg'> \
                                        Your IPTV m3u channels and xml guide data has been successfully re-synced. \
                                        Please refresh this window to see new data \
                                    </span></div>";

                document.getElementById( 'ntfy-restart' ).innerHTML = msg;
                document.getElementById( 'ntfy-restart' ).style.display = 'none';
            });

            /*
                Set initial health check sync time

                first health check runs after 10 seconds
                all future health checks run after <%= healthTimer %>
            */

            let timerDelayMS            = 10000;
            let timerStartMS            = Date.now(); // returns milliseconds
            const timerHealthRun        = '<%= healthTimer %>'; // time in milliseconds until health check ran AFTER initial run
            const timerUptime           = 1000;

            /*
                Action > Healthcheck
            */

            function runHealthCheck()
            {
                const toastTypeClass = [];
                toastTypeClass[ 'DEFAULT' ]     = 'text-bg-primary';
                toastTypeClass[ 'UNHEALTHY' ]   = 'text-bg-warning';
                toastTypeClass[ 'HEALTHY' ]     = 'text-bg-success';
                toastTypeClass[ 'ERROR' ]       = 'text-bg-danger';

                $.ajax(
                {
                    url: 'api/health',
                    type: 'GET',
                    data: {
                        query: 'healthcheck',
                        silent: false
                    },
                    beforeSend: function( data )
                    {
                        console.log( 'Sending health check ...' )
                    },
                    success: function( data )
                    {
                        const status = data.message;
                        const code = data.code;
                        if ( status )
                        {
                            const toastClass = toastTypeClass[status.toUpperCase()];
                            const toastElm = document.getElementById('tvapp2Toast');
                            toastElm.classList.add(toastClass);

                            $('.toast #toast-title').html(`<%= appName %> is ${ status }`);
                            $('.toast #toast-message').html(`Health check returned ${ status } (${ code })`);
                            $('#tvapp2Toast').toast('show');

                            const elementsList = document.querySelectorAll( '#ntfy-firewall, #ntfy-localhost, #ntfy-restart' );
                            const elementsArray = [...elementsList];

                            elementsArray.forEach(element =>
                            {
                                element.style.transition = '1s';
                                element.style.opacity = '0';
                                element.style.visibility = 'hidden';
                            });
                        }

                    },
                    error: function( data )
                    {
                        const toastClass = toastTypeClass['ERROR'];
                        const toastElm = document.getElementById('tvapp2Toast');
                        toastElm.classList.add(toastClass);

                        $('.toast #toast-title').html(`Could not connect to health check api`);
                        $('.toast #toast-message').html(`Failed to communicate with health check api. Try restarting the docker container to restore connection.`);
                        $('#tvapp2Toast').toast('show');

                    }
                }).always(function()
                {
                    timerDelayMS = parseInt(timerHealthRun);
                    timerStartMS = Date.now();

                    setTimeout(function()
                    {
                        runHealthCheck();
                    }, parseInt(timerHealthRun));
                }).responseText;
            }

            function runUptime()
            {
                const toastTypeClass = [];
                toastTypeClass[ 'DEFAULT' ]     = 'text-bg-primary';
                toastTypeClass[ 'UNHEALTHY' ]   = 'text-bg-warning';
                toastTypeClass[ 'HEALTHY' ]     = 'text-bg-success';
                toastTypeClass[ 'ERROR' ]       = 'text-bg-danger';

                $.ajax(
                {
                    url: 'api/health',
                    type: 'GET',
                    data: {
                        query: 'uptime',
                        silent: true
                    },
                    success: function( data )
                    {
                        const status = data.message;
                        const code = data.code;
                        const uptimeShort = data.uptimeShort;
                        const uptimeLong = data.uptimeLong;
                        if ( status )
                        {
                            $('a#uptime').text(`${ uptimeShort }`);

                            const tooltip = bootstrap.Tooltip.getInstance('#uptime') // Returns a Bootstrap tooltip instance
                            tooltip.setContent( { '.tooltip-inner': `HDHomeRun server started ${ uptimeLong }` } )
                        }
                    },
                    error: function( data )
                    {
                        const toastClass = toastTypeClass['ERROR'];
                        const toastElm = document.getElementById('tvapp2Toast');
                        toastElm.classList.add(toastClass);

                        $('.toast #toast-title').html(`Could not get uptime from api`);
                        $('.toast #toast-message').html(`Failed to communicate with the api. Try restarting the docker container to restore connection.`);
                        $('#tvapp2Toast').toast('show');
                    }
                }).always(function()
                {
                    setTimeout(function()
                    {
                        runUptime();
                    }, parseInt(timerUptime));
                }).responseText;
            }

            /*
                Action > Do Resync
            */

            function runResync()
            {
                $.ajax(
                {
                    url: 'api/restart',
                    type: 'GET',
                    data: {
                        query: 'sync',
                        silent: false
                    },
                    beforeSend: function( data )
                    {
                        const dimmer = document.createElement('div');
                        dimmer.setAttribute('id', 'dimmer');
                        dimmer.style.visibility = 'visible';
                        dimmer.classList.add('dimmer-in');
                        document.getElementsByTagName('body')[0].appendChild(dimmer);
                        document.getElementById('ntfy-firewall').style.display = 'none';
                        document.getElementById('ntfy-localhost').style.display = 'none';
                        document.getElementById('ntfy-restart').style.display = 'none';

                        const iconResync = document.getElementsByClassName('fa-rotate');
                        iconResync[0].classList.remove('restart');
                        iconResync[0].classList.add('spin');

                        $('.modal-content .modal-body').html('<small>The M3U and EPG data will now be re-downloaded and synced with your TVApp2 container. Afterward, this page will be refreshed automatically.</small><br /><br /><small>Please wait...</small>')
                        $('.modal-content .modal-title').html('Resyncing Data')
                        $('#modalTvapp2').modal('show');

                        const modalBtnPrimary = document.querySelector('#btn-primary');
                        modalBtnPrimary.style.display = 'none';
                        modalBtnPrimary.style.visibility= 'hidden';

                    },
                    success: function( data )
                    {

                        /*
                            On successful restart, wait 1 second, remove dimmer, reload page in 5 seconds
                        */

                        setTimeout( () =>
                        {
                            document.getElementById('ntfy-restart').style.display = 'block'
                            const dimmer = document.getElementById('dimmer');
                            dimmer.classList.remove('dimmer-in');
                            dimmer.classList.add('dimmer-out');
                            dimmer.remove();

                            setTimeout( function()
                            {
                                const iconResync = document.getElementsByClassName('fa-rotate');        // resync favicon
                                iconResync[0].classList.remove('spin');                                 // stop spinning
                                iconResync[0].classList.add('restart');                                 // normal spinner class
                                document.location.reload()                                              // reload page
                            }, 5000 );  // how long until refresh page
                        }, 1000 );      // how long until dimmer is removed / reload page activated (also on delay)
                    }
                });
            }

            /*
                Health check > Show time remaining as tooltip
            */

            function runTooltipCountdown( )
            {
                let timerHours, timerMins, timerRemainsLS;

                function twoDigits( n )
                {
                    return (n <= 9 ? "0" + n : n);
                }

                /*
                    Update Tooltip Countdown

                    MS          = milliseconds
                    LS          = long string (Wed Dec 31 1969 10:01:42 (Coordinated Universal Time))
                */

                function updateTooltipCountdown()
                {
                    const timerElapsedMS    = Date.now() - timerStartMS;            // ( 2091 )
                    const timerRemainsMS    = timerDelayMS - timerElapsedMS;        // ( 7909 )     divide by 1000 for seconds

                    timerRemainsLS          = new Date( timerRemainsMS );           // (Wed Dec 31 1969 10:01:42 (Coordinated Universal Time))
                    timerHours              = timerRemainsLS.getUTCHours();         // ( 0 )
                    timerMins               = timerRemainsLS.getUTCMinutes();       // ( 9 )
                    const timeLeft          = (timerHours ? timerHours + ':' + twoDigits( timerMins ) : timerMins) + ':' + twoDigits( timerRemainsLS.getUTCSeconds() );

                    jQuery(function($)
                    {
                        const tooltip = bootstrap.Tooltip.getInstance('#action-health') // Returns a Bootstrap tooltip instance
                        tooltip.setContent({ '.tooltip-inner': `Health check in ${ timeLeft }` })
                    });

                    const Heart = document.getElementsByClassName('fa-heart');
                    Heart[0].style.color = '#FFF';

                    setTimeout( function()
                    {
                        const Heart = document.getElementsByClassName('fa-heart');
                        Heart[0].style.color = '#FFF';

                        setTimeout( function()
                        {
                            Heart[0].style.color = '#FF6593';
                        }, timerRemainsLS.getUTCMilliseconds() + 100 );

                    }, timerRemainsLS.getUTCMilliseconds() + 500 );


                    setTimeout( function()
                    {
                        updateTooltipCountdown();
                    }, timerRemainsLS.getUTCMilliseconds() + 500 );
                }

                updateTooltipCountdown();
            }

            /*
                Action > Healthcheck > Initialize
            */

            setTimeout( function() { runHealthCheck(); }, timerDelayMS );
            setTimeout( function() { runUptime(); }, 1000 );

            /*
                Action > Tooltip Resync Timers
            */

            runTooltipCountdown( );

        </script>
    </body>
</html>
