refactor: modular src/tpl + src/js structure, Docker support

This commit is contained in:
Johnnybegood90
2026-03-12 00:05:20 +01:00
parent e3bf8adce3
commit e7becf356c
3 changed files with 97 additions and 46 deletions
+11
View File
@@ -0,0 +1,11 @@
FROM php:8.2-apache
RUN docker-php-ext-install curl && \
a2enmod rewrite
COPY . /var/www/html/
RUN chown -R www-data:www-data /var/www/html && \
chmod -R 775 /var/www/html
EXPOSE 80
+78 -46
View File
@@ -5,6 +5,7 @@
![PHP](https://img.shields.io/badge/PHP-8.0+-777BB4?style=flat-square&logo=php&logoColor=white) ![PHP](https://img.shields.io/badge/PHP-8.0+-777BB4?style=flat-square&logo=php&logoColor=white)
![Apache](https://img.shields.io/badge/Apache-ready-D22128?style=flat-square&logo=apache&logoColor=white) ![Apache](https://img.shields.io/badge/Apache-ready-D22128?style=flat-square&logo=apache&logoColor=white)
![Nginx](https://img.shields.io/badge/Nginx-ready-009639?style=flat-square&logo=nginx&logoColor=white) ![Nginx](https://img.shields.io/badge/Nginx-ready-009639?style=flat-square&logo=nginx&logoColor=white)
![Docker](https://img.shields.io/badge/Docker-ready-2496ED?style=flat-square&logo=docker&logoColor=white)
![License](https://img.shields.io/badge/license-AGPLv3-blue?style=flat-square) ![License](https://img.shields.io/badge/license-AGPLv3-blue?style=flat-square)
--- ---
@@ -19,7 +20,7 @@ A public demo instance is available here:
👉 https://guide.demo.johnnybegood.fr/ 👉 https://guide.demo.johnnybegood.fr/
This demo runs with a sample XMLTV feed and fake channels to showcase the interface. This demo runs with sample XMLTV feeds to showcase the interface.
--- ---
@@ -35,7 +36,7 @@ This demo runs with a sample XMLTV feed and fake channels to showcase the interf
- 🔀 **HTTP→HTTPS proxy** — streams Tunarr over HTTP transparently from an HTTPS page - 🔀 **HTTP→HTTPS proxy** — streams Tunarr over HTTP transparently from an HTTPS page
- 🎨 **Theme system** — drop a CSS file in `themes/` and it appears in the menu automatically - 🎨 **Theme system** — drop a CSS file in `themes/` and it appears in the menu automatically
- 📡 **Multi-EPG sources** — configure multiple EPG/M3U sources, switch from the topbar - 📡 **Multi-EPG sources** — configure multiple EPG/M3U sources, switch from the topbar
- 👤 **Personal EPG** — optionally let visitors use your instance with their own EPG/M3U - 👤 **Personal EPG** — optionally let visitors use your instance with their own EPG/M3U URLs (saved in localStorage)
- ⚙️ **Guided setup** on first launch — no config files to edit manually - ⚙️ **Guided setup** on first launch — no config files to edit manually
- 🔄 **Auto-reload** EPG every 30 minutes - 🔄 **Auto-reload** EPG every 30 minutes
- 0️⃣ **Zero JS dependencies** — vanilla PHP, hls.js loaded from CDN - 0️⃣ **Zero JS dependencies** — vanilla PHP, hls.js loaded from CDN
@@ -47,31 +48,47 @@ This demo runs with a sample XMLTV feed and fake channels to showcase the interf
### Requirements ### Requirements
- A web server running **PHP 8.0+** with **php-curl** extension - A web server running **PHP 8.0+** with **php-curl** extension
- **Apache** or **Nginx** - **Apache** or **Nginx** — or just use **Docker**
- An **EPG source in XMLTV format** (e.g. Tunarr, Jellyfin, xTeVe...) - An **EPG source in XMLTV format** (e.g. Tunarr, Jellyfin, xTeVe...)
- *(Optional)* An **M3U playlist** — required for the built-in player - *(Optional)* An **M3U playlist** — required for the built-in player
--- ---
### 1. Clone the repo ### Option A — Docker (recommended)
```bash
git clone https://github.com/Johnnybegood90/GridTV.git
cd GridTV
docker compose up -d
```
Then open `http://localhost:8080` and follow the setup wizard.
To run on a custom port:
```bash
PORT=9000 docker compose up -d
```
---
### Option B — Apache / Nginx
#### 1. Clone the repo
```bash ```bash
git clone https://github.com/Johnnybegood90/GridTV.git /var/www/gridtv git clone https://github.com/Johnnybegood90/GridTV.git /var/www/gridtv
cd /var/www/gridtv cd /var/www/gridtv
``` ```
--- #### 2. Set permissions
### 2. Set permissions
```bash ```bash
chmod 775 /var/www/gridtv chmod 775 /var/www/gridtv
chown -R www-data:www-data /var/www/gridtv chown -R www-data:www-data /var/www/gridtv
``` ```
--- #### 3a. Configure Nginx
### 3a. Configure Nginx
```nginx ```nginx
server { server {
@@ -98,9 +115,7 @@ server {
nginx -t && systemctl reload nginx nginx -t && systemctl reload nginx
``` ```
--- #### 3b. Configure Apache
### 3b. Configure Apache
```apache ```apache
<VirtualHost *:80> <VirtualHost *:80>
@@ -119,23 +134,17 @@ a2enmod php8.4 rewrite
systemctl reload apache2 systemctl reload apache2
``` ```
--- #### 4. Install php-curl
### 4. Install php-curl
The built-in player uses `proxy.php` to relay HTTP streams over HTTPS. This requires the **php-curl** extension: The built-in player uses `proxy.php` to relay HTTP streams over HTTPS. This requires the **php-curl** extension:
```bash ```bash
# Debian/Ubuntu — adjust version to match your PHP # Debian/Ubuntu — adjust version to match your PHP
apt install php8.4-curl apt install php8.4-curl
# Then reload the web server
systemctl reload apache2 # or: systemctl reload nginx systemctl reload apache2 # or: systemctl reload nginx
``` ```
--- #### 5. First launch — Setup
### 5. First launch — Setup
Open your browser at `http://guide.your-domain.com`. Open your browser at `http://guide.your-domain.com`.
@@ -147,11 +156,19 @@ GridTV detects the missing config and automatically redirects you to the setup p
| **EPG sources** | Add one or more XMLTV sources, each with an optional M3U URL | | **EPG sources** | Add one or more XMLTV sources, each with an optional M3U URL |
| **Personal EPG** | Toggle to allow visitors to use your instance with their own EPG/M3U | | **Personal EPG** | Toggle to allow visitors to use your instance with their own EPG/M3U |
Once submitted, `config.json` is created on the server. **The setup page becomes inaccessible.** Once submitted, `config.json` is created on the server. **The setup page becomes inaccessible until you re-enter your admin key.**
--- ---
### 6. Editing the config later ### Editing the config later
You can re-open the setup page at any time using the admin key generated during first setup:
```
http://guide.your-domain.com/setup.php
```
Or edit `config.json` directly:
```bash ```bash
nano /var/www/gridtv/config.json nano /var/www/gridtv/config.json
@@ -176,7 +193,7 @@ nano /var/www/gridtv/config.json
} }
``` ```
> Instances running the old single-source format (`epg_url` at root) are **migrated automatically** on first load — no manual action needed. > Instances running the old single-source format (`epg_url` at root) are **migrated automatically** on first load.
--- ---
@@ -184,17 +201,37 @@ nano /var/www/gridtv/config.json
``` ```
gridtv/ gridtv/
├── index.php # The TV guide (redirects to setup if no config found) ├── index.php # Entry point
├── setup.php # First-launch configuration page ├── setup.php # First-launch + re-configuration page
├── proxy.php # HTTP→HTTPS stream proxy (required for the player) ├── proxy.php # HTTP→HTTPS stream proxy
├── config.example.json # Config template ├── config.example.json # Config template
├── .gitignore # config.json excluded from the repo ├── Dockerfile
├── docker-compose.yml
├── .gitignore # config.json excluded
├── themes/ # CSS theme files ├── themes/ # CSS theme files
│ ├── default.css # Dark studio (default) │ ├── default.css
│ ├── magazine.css # Vintage newspaper │ ├── magazine.css
│ ├── cyberpunk.css # Neon on black │ ├── cyberpunk.css
│ └── steampunk.css # Victorian copper │ └── steampunk.css
└── README.md └── src/
├── config.php # Config loader + migration
├── tpl/ # HTML templates
│ ├── head.php
│ ├── topbar.php
│ ├── grid.php
│ ├── modals.php
│ └── footer.php
└── js/ # JavaScript modules
├── config.js # Constants + PHP-injected vars
├── utils.js # Helpers, clock, EPG fetch
├── epg.js # Grid rendering
├── mobile.js # Mobile list view
├── tooltip.js # Hover tooltip
├── sources.js # Multi-EPG switcher
├── m3u.js # M3U parser
├── player.js # HLS PiP player
├── themes.js # Theme switcher
└── live.js # Live updates + responsive
``` ```
> `config.json` is listed in `.gitignore` — your private URLs will never be pushed to GitHub. > `config.json` is listed in `.gitignore` — your private URLs will never be pushed to GitHub.
@@ -214,11 +251,10 @@ GridTV ships with 4 built-in themes. To add your own, create a CSS file in `them
:root { :root {
--bg: #0a0b0d; --bg: #0a0b0d;
--accent: #e8c842; --accent: #e8c842;
/* ... */
} }
``` ```
Drop it in `themes/` — it appears in the theme selector automatically, no code changes needed. Drop it in `themes/` — it appears in the theme selector automatically.
--- ---
@@ -232,19 +268,15 @@ If `allow_personal_epg` is `true`, a **"✏ Personal EPG"** option appears in th
## ▶️ Built-in Player ## ▶️ Built-in Player
Click on any **channel name** or **currently airing program** to open a PiP (picture-in-picture) player in the bottom-right corner. Click on any **channel name** or **currently airing program** to open a PiP player in the bottom-right corner.
The player requires: Requires an **M3U URL** in the active source and the **php-curl** extension. The `proxy.php` handles HTTP→HTTPS relay transparently.
- An **M3U URL** configured in the active source (used to match channel names to stream URLs)
- The **php-curl** extension installed on the server
If your stream source (e.g. Tunarr) serves streams over HTTP while GridTV runs on HTTPS, `proxy.php` handles the relay transparently — no browser mixed-content errors.
--- ---
## ⚙️ Advanced configuration ## ⚙️ Advanced configuration
The following constants can be tweaked directly in `index.php`: Tweak these constants in `src/js/config.js`:
```js ```js
const PX_PER_MIN = 5; // Horizontal zoom (pixels per minute) const PX_PER_MIN = 5; // Horizontal zoom (pixels per minute)
@@ -260,17 +292,17 @@ GridTV parses the standard **XMLTV format**. Tested with:
- ✅ [Tunarr](https://github.com/chrisbenincasa/tunarr) - ✅ [Tunarr](https://github.com/chrisbenincasa/tunarr)
- ✅ [xTeVe](https://github.com/xteve-project/xTeVe) - ✅ [xTeVe](https://github.com/xteve-project/xTeVe)
- ✅ [Jellyfin](https://jellyfin.org/) (via LiveTV plugin) - ✅ [Jellyfin](https://jellyfin.org/)
- ✅ Any XMLTV-compliant file - ✅ Any XMLTV-compliant source
--- ---
## 🤝 Contributing ## 🤝 Contributing
PRs are welcome! Got an idea, a fix, or a feature request — open an issue or send a PR directly. PRs are welcome! Got an idea, a fix, or a feature request — open an issue or send a PR.
--- ---
## 📄 License ## 📄 License
GNU Affero (AGPLv3) GNU Affero General Public License v3.0 (AGPLv3)
+8
View File
@@ -0,0 +1,8 @@
services:
gridtv:
build: .
ports:
- "${PORT:-8080}:80"
volumes:
- ./config.json:/var/www/html/config.json
restart: unless-stopped