BinaryNinja/tvapp2
4
1
Fork 0
mirror of https://github.com/TheBinaryNinja/tvapp2.git synced 2026-06-04 07:05:42 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: update webui interface

Browse Source
This commit is contained in:
Aetherx
2025-06-23 02:38:02 -07:00
parent 60fd32e4d5
commit 2d24d8e379
2 changed files with 787 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1104
tvapp2/www/css/tvapp2.min.css vendored
View File

File diff suppressed because it is too large Load Diff

95
tvapp2/www/index.html
View File

@@ -16,11 +16,11 @@
<!-- Header -->
<div class="header">
<nav class="navbar sticky-top container">
<div class="navbar-brand">
<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="navbar-social">
<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>
@@ -32,10 +32,27 @@
<!-- Header Notification: description -->
<div class="container">
<div class="container header-container">
<div class="introduction">
<div class="row">
<div class="col">
<div class="about">This page displays your most recent copies of the <code><%= fileM3U %></code> playlist and <code><%= fileXML %></code> EPG guide data. Right-click each file, select <span class="text-accent">Copy Link</span> and paste the URLs within an IPTV app such as Jellyfin. The <code><%= fileXML %></code> and <code><%= fileGZP %></code> have identical guide data, however the <code><%= fileGZP %></code> is compressed and will import into your IPTV application much faster.</div>
<div class="introduction-body">
<div class="desc">
This page displays your most recent copies of the <code><%= fileM3U %></code> playlist and <code><%= fileXML %></code>
EPG guide data. Right-click each file, select <span class="accent">Copy Link</span> and paste the URLs within an IPTV
app such as Jellyfin. The <code><%= fileXML %></code> and <code><%= fileGZP %></code> have identical guide data,
however the <code><%= fileGZP %></code> is compressed and will import into your IPTV application much faster.
<br />
<div class="badges">
<img src="https://img.shields.io/github/v/tag/TheBinaryNinja/tvapp2?logo=GitHub&label=Version&color=ba5225">
<img src="https://img.shields.io/github/downloads/TheBinaryNinja/tvapp2/total?logo=github&logoColor=FFFFFF&label=Downloads&color=376892">
<img src="https://img.shields.io/github/repo-size/TheBinaryNinja/tvapp2?logo=github&label=Size&color=59702a">
<img src="https://img.shields.io/badge/dynamic/xml?url=https%3A%2F%2Fgithub.com%2Faetherinox%2Fbackage%2Fraw%2Findex%2FTheBinaryNinja%2Ftvapp2%2Ftvapp2.xml&query=%2Fxml%2Fdownloads&label=Pulls&logo=github&color=de1f5e">
<img src="https://img.shields.io/github/last-commit/TheBinaryNinja/tvapp2?logo=conventionalcommits&logoColor=FFFFFF&label=Last%20Commit&color=313131">
</div>
</div>
</div>
</div>
</div>
</div>
@@ -116,12 +133,13 @@
<!-- Footer -->
<footer class="footer">
<div class="container" style="padding-bottom:20px;">
<div id="ntfy-restart" class="ntfy ntfy-success sticky-bottom"></div>
<div id="ntfy-firewall" class="ntfy ntfy-warning sticky-bottom"></div>
<div id="ntfy-localhost" class="ntfy ntfy-danger sticky-bottom"></div>
<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="footer-inner">
<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 />
@@ -271,21 +289,27 @@
Notify > Localhost
*/
document.addEventListener('DOMContentLoaded', function() {
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 = "<p><span class='warning'>Warning</span> If you are accessing this page via 127.0.0.1 or localhost, proxying will not work on other devices.Please load \
this page using your computer's IP address (e.g., 192.168.x.x) and port in order to access the playlist from other devices on your network.</p> \
<br> \
<p> 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>.</p>";
document.getElementById('ntfy-localhost').innerHTML = msg;
document.getElementById('ntfy-localhost').style.display = 'block';
const msg = "<div class='ntfy-child'><span class='danger'>Danger</span> \
<span class='msg'> \
If you are accessing this page via 127.0.0.1 or localhost, proxying will not work on other devices.Please load \
this page using your computer's IP address (e.g., 192.168.x.x) and port in order to access the playlist from other \
devices on your network. \
<br> <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';
document.getElementById( 'ntfy-localhost' ).style.display = 'none';
}
});
@@ -293,27 +317,38 @@
Notify > Firewall
*/
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener( 'DOMContentLoaded', function()
{
const port = window.location.port || (window.location.protocol === 'https:' ? '443' : '80');
const msg = "<p><span class='notice'>Notice</span> 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.</p>";
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';
document.getElementById( 'ntfy-firewall' ).innerHTML = msg;
document.getElementById( 'ntfy-firewall' ).style.display = 'block';
});
/*
Notify > Restart / Resync
*/
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener( 'DOMContentLoaded', function()
{
const port = window.location.port || (window.location.protocol === 'https:' ? '443' : '80');
const msg = "<p><span class='success'>Success</span> Your IPTV m3u channels and xml guide data has been successfully re-synced. \
Please refresh this window to see new data</p>";
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';
document.getElementById( 'ntfy-restart' ).innerHTML = msg;
document.getElementById( 'ntfy-restart' ).style.display = 'none';
});
/*
@@ -350,7 +385,7 @@
},
beforeSend: function( data )
{
console.log('Sending health check ...')
console.log( 'Sending health check ...' )
},
success: function( data )
{