feat: add Request a Channel page, API route, and homepage buttons

Add channel request form (/request-channel) that emails admin with channel details via nodemailer. Adds cyan "Request a Channel" button to both hero and CTA sections of the homepage alongside Live TV and Music buttons. Rename Traefik router to avoid conflicts with media stack. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-22 17:02:26 -07:00 · 2026-03-22 17:02:26 -07:00 · 709a87731c
parent 717eed7100
commit 709a87731c
6 changed files with 445 additions and 30 deletions
--- a/app/api/request-channel/route.ts
+++ b/app/api/request-channel/route.ts
@ -0,0 +1,111 @@
+import { NextRequest, NextResponse } from 'next/server'
+import nodemailer from 'nodemailer'
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { channelName, category, url, notes, email } = body
+
+    // Validate required fields
+    if (!channelName || !email) {
+      return NextResponse.json(
+        { error: 'Channel name and email are required' },
+        { status: 400 }
+      )
+    }
+
+    // Email validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    if (!emailRegex.test(email)) {
+      return NextResponse.json(
+        { error: 'Invalid email format' },
+        { status: 400 }
+      )
+    }
+
+    const smtpHost = process.env.SMTP_HOST
+    const smtpUser = process.env.SMTP_USER
+    const smtpPass = process.env.SMTP_PASS
+    if (!smtpHost || !smtpUser || !smtpPass) {
+      console.error('SMTP credentials not configured')
+      return NextResponse.json(
+        { error: 'Email service not configured' },
+        { status: 500 }
+      )
+    }
+
+    const adminEmail = process.env.ADMIN_EMAIL || 'jeff@jeffemmett.com'
+
+    const transporter = nodemailer.createTransport({
+      host: smtpHost,
+      port: Number(process.env.SMTP_PORT) || 587,
+      secure: false,
+      auth: { user: smtpUser, pass: smtpPass },
+      tls: { rejectUnauthorized: false },
+    })
+
+    await transporter.sendMail({
+      from: `Jefflix <${smtpUser}>`,
+      to: adminEmail,
+      subject: `[Jefflix] Channel Request: ${escapeHtml(channelName)}`,
+      html: `
+        <h2>New Channel Request</h2>
+        <p>Someone has requested a new Live TV channel:</p>
+        <table style="border-collapse: collapse; margin: 20px 0;">
+          <tr>
+            <td style="padding: 8px; font-weight: bold; border: 1px solid #ddd;">Channel:</td>
+            <td style="padding: 8px; border: 1px solid #ddd;">${escapeHtml(channelName)}</td>
+          </tr>
+          <tr>
+            <td style="padding: 8px; font-weight: bold; border: 1px solid #ddd;">Category:</td>
+            <td style="padding: 8px; border: 1px solid #ddd;">${escapeHtml(category || 'Not specified')}</td>
+          </tr>
+          <tr>
+            <td style="padding: 8px; font-weight: bold; border: 1px solid #ddd;">URL/Link:</td>
+            <td style="padding: 8px; border: 1px solid #ddd;">${url ? `<a href="${escapeHtml(url)}">${escapeHtml(url)}</a>` : 'Not provided'}</td>
+          </tr>
+          <tr>
+            <td style="padding: 8px; font-weight: bold; border: 1px solid #ddd;">Notes:</td>
+            <td style="padding: 8px; border: 1px solid #ddd;">${escapeHtml(notes || 'None')}</td>
+          </tr>
+          <tr>
+            <td style="padding: 8px; font-weight: bold; border: 1px solid #ddd;">Email:</td>
+            <td style="padding: 8px; border: 1px solid #ddd;"><a href="mailto:${escapeHtml(email)}">${escapeHtml(email)}</a></td>
+          </tr>
+          <tr>
+            <td style="padding: 8px; font-weight: bold; border: 1px solid #ddd;">Requested:</td>
+            <td style="padding: 8px; border: 1px solid #ddd;">${new Date().toLocaleString()}</td>
+          </tr>
+        </table>
+        <p><strong>To add this channel:</strong></p>
+        <ol>
+          <li>Check <a href="https://iptv-org.github.io">iptv-org</a> for an existing stream</li>
+          <li>If found, add to Threadfin channel list and map the stream</li>
+          <li>If not in iptv-org, add as a custom M3U source in Threadfin</li>
+          <li>Reply to ${escapeHtml(email)} to let them know it's been added</li>
+        </ol>
+        <hr style="margin: 20px 0; border: none; border-top: 1px solid #ddd;" />
+        <p style="color: #666; font-size: 12px;">This is an automated message from Jefflix.</p>
+      `,
+    })
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Channel request error:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
+
+function escapeHtml(text: string): string {
+  const map: Record<string, string> = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#039;',
+  }
+  return text.replace(/[&<>"']/g, (char) => map[char])
+}
--- a/app/page.tsx
+++ b/app/page.tsx
@ -79,6 +79,41 @@ export default function JefflixPage() {
                  </a>
                </Button>
              </div>
+              <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+                <Button
+                  asChild
+                  size="lg"
+                  className="text-lg px-8 py-6 font-bold bg-orange-600 hover:bg-orange-700 text-white"
+                  variant="default"
+                >
+                  <a href="https://tv.jefflix.lol">
+                    <Tv className="mr-2 h-5 w-5" />
+                    Watch Live TV
+                  </a>
+                </Button>
+                <Button
+                  asChild
+                  size="lg"
+                  className="text-lg px-8 py-6 font-bold bg-cyan-600 hover:bg-cyan-700 text-white"
+                  variant="default"
+                >
+                  <a href="/request-channel">
+                    <Radio className="mr-2 h-5 w-5" />
+                    Request a Channel
+                  </a>
+                </Button>
+                <Button
+                  asChild
+                  size="lg"
+                  className="text-lg px-8 py-6 font-bold bg-purple-600 hover:bg-purple-700 text-white"
+                  variant="default"
+                >
+                  <a href="https://music.jefflix.lol">
+                    <Music className="mr-2 h-5 w-5" />
+                    Listen to Music
+                  </a>
+                </Button>
+              </div>
            </div>
          </div>
        </div>
@ -231,6 +266,26 @@ export default function JefflixPage() {
                </a>
              </Button>
            </div>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+              <Button asChild size="lg" className="text-lg px-8 py-6 font-bold bg-orange-600 hover:bg-orange-700 text-white">
+                <a href="https://tv.jefflix.lol">
+                  <Tv className="mr-2 h-5 w-5" />
+                  Watch Live TV
+                </a>
+              </Button>
+              <Button asChild size="lg" className="text-lg px-8 py-6 font-bold bg-cyan-600 hover:bg-cyan-700 text-white">
+                <a href="/request-channel">
+                  <Radio className="mr-2 h-5 w-5" />
+                  Request a Channel
+                </a>
+              </Button>
+              <Button asChild size="lg" className="text-lg px-8 py-6 font-bold bg-purple-600 hover:bg-purple-700 text-white">
+                <a href="https://music.jefflix.lol">
+                  <Music className="mr-2 h-5 w-5" />
+                  Listen to Music
+                </a>
+              </Button>
+            </div>
            <p className="text-sm text-muted-foreground pt-4">
              Or learn how to set up your own Jellyfin server and join the movement
            </p>
--- a/app/request-channel/page.tsx
+++ b/app/request-channel/page.tsx
@ -0,0 +1,216 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { JefflixLogo } from "@/components/jefflix-logo"
+import { Radio, CheckCircle, AlertCircle, ArrowLeft } from "lucide-react"
+import Link from 'next/link'
+
+const categories = ['Sports', 'News', 'Entertainment', 'Music', 'Movies', 'Kids', 'Other']
+
+export default function RequestChannelPage() {
+  const [formData, setFormData] = useState({
+    channelName: '',
+    category: '',
+    url: '',
+    notes: '',
+    email: '',
+  })
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
+  const [errorMessage, setErrorMessage] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setStatus('loading')
+    setErrorMessage('')
+
+    try {
+      const response = await fetch('/api/request-channel', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to submit request')
+      }
+
+      setStatus('success')
+    } catch (error) {
+      setStatus('error')
+      setErrorMessage(error instanceof Error ? error.message : 'Something went wrong')
+    }
+  }
+
+  if (status === 'success') {
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center p-4">
+        <div className="max-w-md w-full text-center space-y-6">
+          <div className="inline-block p-6 bg-green-100 dark:bg-green-900/30 rounded-full">
+            <CheckCircle className="h-12 w-12 text-green-600 dark:text-green-400" />
+          </div>
+          <h1 className="text-2xl font-bold">Request Submitted!</h1>
+          <p className="text-muted-foreground">
+            We'll look into adding the channel and let you know once it's available.
+          </p>
+          <p className="text-sm text-muted-foreground">
+            Most channels are added within a few days.
+          </p>
+          <Link href="/">
+            <Button variant="outline" className="mt-4">
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back to Jefflix
+            </Button>
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <div className="border-b border-border">
+        <div className="container mx-auto px-4 py-4">
+          <Link href="/" className="inline-block">
+            <JefflixLogo size="small" />
+          </Link>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="container mx-auto px-4 py-12 md:py-20">
+        <div className="max-w-lg mx-auto">
+          <div className="text-center space-y-4 mb-8">
+            <div className="inline-block p-4 bg-cyan-100 dark:bg-cyan-900/30 rounded-full">
+              <Radio className="h-10 w-10 text-cyan-600 dark:text-cyan-400" />
+            </div>
+            <h1 className="text-3xl font-bold font-marker">Request a Channel</h1>
+            <p className="text-muted-foreground">
+              Can't find a channel you're looking for? Let us know and we'll try to add it
+              to the Live TV lineup.
+            </p>
+            <Badge className="bg-cyan-600 text-white">
+              3,468 Channels & Growing
+            </Badge>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="space-y-2">
+              <label htmlFor="channelName" className="text-sm font-medium">
+                Channel Name *
+              </label>
+              <input
+                type="text"
+                id="channelName"
+                required
+                value={formData.channelName}
+                onChange={(e) => setFormData({ ...formData, channelName: e.target.value })}
+                className="w-full px-4 py-3 rounded-lg border border-border bg-background focus:outline-none focus:ring-2 focus:ring-cyan-500"
+                placeholder="e.g. BBC World News, ESPN2"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label htmlFor="category" className="text-sm font-medium">
+                Category *
+              </label>
+              <select
+                id="category"
+                required
+                value={formData.category}
+                onChange={(e) => setFormData({ ...formData, category: e.target.value })}
+                className="w-full px-4 py-3 rounded-lg border border-border bg-background focus:outline-none focus:ring-2 focus:ring-cyan-500"
+              >
+                <option value="">Select a category</option>
+                {categories.map((cat) => (
+                  <option key={cat} value={cat}>{cat}</option>
+                ))}
+              </select>
+            </div>
+
+            <div className="space-y-2">
+              <label htmlFor="url" className="text-sm font-medium">
+                Link / URL (optional)
+              </label>
+              <input
+                type="text"
+                id="url"
+                value={formData.url}
+                onChange={(e) => setFormData({ ...formData, url: e.target.value })}
+                className="w-full px-4 py-3 rounded-lg border border-border bg-background focus:outline-none focus:ring-2 focus:ring-cyan-500"
+                placeholder="M3U URL or channel website"
+              />
+              <p className="text-xs text-muted-foreground">
+                If you know where to find a stream URL or M3U link, paste it here
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <label htmlFor="notes" className="text-sm font-medium">
+                Notes (optional)
+              </label>
+              <textarea
+                id="notes"
+                value={formData.notes}
+                onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
+                className="w-full px-4 py-3 rounded-lg border border-border bg-background focus:outline-none focus:ring-2 focus:ring-cyan-500 min-h-[100px]"
+                placeholder="Any extra details—specific shows, time zones, language, etc."
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label htmlFor="email" className="text-sm font-medium">
+                Your Email *
+              </label>
+              <input
+                type="email"
+                id="email"
+                required
+                value={formData.email}
+                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                className="w-full px-4 py-3 rounded-lg border border-border bg-background focus:outline-none focus:ring-2 focus:ring-cyan-500"
+                placeholder="your@email.com"
+              />
+              <p className="text-xs text-muted-foreground">
+                We'll let you know when the channel is added
+              </p>
+            </div>
+
+            {status === 'error' && (
+              <div className="flex items-center gap-2 p-4 bg-red-100 dark:bg-red-900/30 rounded-lg text-red-600 dark:text-red-400">
+                <AlertCircle className="h-5 w-5 flex-shrink-0" />
+                <p className="text-sm">{errorMessage}</p>
+              </div>
+            )}
+
+            <Button
+              type="submit"
+              disabled={status === 'loading'}
+              className="w-full py-6 text-lg font-bold bg-cyan-600 hover:bg-cyan-700 text-white"
+            >
+              {status === 'loading' ? 'Submitting...' : 'Request Channel'}
+            </Button>
+          </form>
+
+          <div className="mt-8 p-6 bg-muted/50 rounded-lg space-y-4">
+            <h3 className="font-bold mb-2">Where do channels come from?</h3>
+            <p className="text-sm text-muted-foreground">
+              Jefflix Live TV pulls from the <a href="https://iptv-org.github.io" className="text-cyan-600 hover:underline font-medium">iptv-org</a> community
+              lists—a massive open-source collection of publicly available IPTV streams from around the world.
+              We can also add custom M3U sources for channels not in the main list.
+            </p>
+            <p className="text-xs text-muted-foreground border-t border-border pt-3">
+              Not all channels can be added—availability depends on public stream sources. We'll do our best!
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/Integrate-Eleza-TV-for-live-sports-broadcasts.md
+++ b/Integrate-Eleza-TV-for-live-sports-broadcasts.md
@ -1,28 +0,0 @@
---
-id: task-2
-title: Integrate Eleza TV for live sports broadcasts
-status: To Do
-assignee: []
-created_date: '2026-02-04 20:56'
-labels: []
-dependencies: []
-priority: high
-due_date: '2026-02-06'
-start_by: '2026-02-05'
---
-
-## Description
-
-<!-- SECTION:DESCRIPTION:BEGIN -->
-Integrate Eleza TV (https://elezatv.com) as an IPTV source for live sports in Jellyfin. Eleza offers 40,000+ channels with EPG, SD/HD/FHD/4K quality, and 54,000+ VOD titles. Pricing: $69/yr for 1 connection, $96/yr for 2 connections. Need to: subscribe to a plan, get M3U/Xtream Codes credentials, configure Jellyfin Live TV & DVR with the IPTV source, set up EPG guide data, and replace the current Sportsnet-dependent sports button on jefflix.lol.
-<!-- SECTION:DESCRIPTION:END -->
-
-## Acceptance Criteria
-<!-- AC:BEGIN -->
- [ ] #1 Subscribe to Eleza TV plan (1 or 2 connections)
- [ ] #2 Obtain M3U playlist URL or Xtream Codes API credentials
- [ ] #3 Configure Jellyfin Live TV with Eleza TV IPTV source
- [ ] #4 Set up EPG/TV guide data in Jellyfin
- [ ] #5 Test live sports playback (e.g. NBA, NFL, Premier League)
- [ ] #6 Update jefflix.lol Live Sports button to use new channels
-<!-- AC:END -->
--- a/Integrate-IPTV-for-live-TV-Threadfin-iptv-org-Eleza-TV.md
+++ b/Integrate-IPTV-for-live-TV-Threadfin-iptv-org-Eleza-TV.md
@ -0,0 +1,61 @@
+---
+id: TASK-2
+title: Integrate IPTV for live TV (Threadfin + iptv-org + Eleza TV)
+status: In Progress
+assignee: []
+created_date: '2026-02-04 20:56'
+updated_date: '2026-03-22 22:08'
+labels: []
+dependencies: []
+priority: high
+---
+
+## Description
+
+<!-- SECTION:DESCRIPTION:BEGIN -->
+Integrate Eleza TV (https://elezatv.com) as an IPTV source for live sports in Jellyfin. Eleza offers 40,000+ channels with EPG, SD/HD/FHD/4K quality, and 54,000+ VOD titles. Pricing: $69/yr for 1 connection, $96/yr for 2 connections. Need to: subscribe to a plan, get M3U/Xtream Codes credentials, configure Jellyfin Live TV & DVR with the IPTV source, set up EPG guide data, and replace the current Sportsnet-dependent sports button on jefflix.lol.
+<!-- SECTION:DESCRIPTION:END -->
+
+## Acceptance Criteria
+<!-- AC:BEGIN -->
+- [ ] #1 Subscribe to Eleza TV plan (1 or 2 connections)
+- [ ] #2 Obtain M3U playlist URL or Xtream Codes API credentials
+- [ ] #3 Configure Jellyfin Live TV with Eleza TV IPTV source
+- [ ] #4 Set up EPG/TV guide data in Jellyfin
+- [ ] #5 Test live sports playback (e.g. NBA, NFL, Premier League)
+- [ ] #6 Update jefflix.lol Live Sports button to use new channels
+<!-- AC:END -->
+
+## Implementation Notes
+
+<!-- SECTION:NOTES:BEGIN -->
+### 2026-03-22: IPTV Infrastructure Deployed
+- **Threadfin** container running on Netcup (`/opt/media-server/`)
+- Admin UI at `threadfin.jeffemmett.com` via Traefik
+- `tv.jefflix.lol` redirect → Jellyfin Live TV section configured
+- "Watch Live TV" + "Listen to Music" buttons added to jefflix.lol website
+- Using **iptv-org/iptv** (90k+ stars) for community-curated free channel lists
+
+**Still TODO:**
+- Configure Threadfin with M3U playlists (English, sports, news channels)
+- Add XMLTV EPG source for program guide
+- Configure Jellyfin Live TV tuner (M3U → `http://threadfin:34400/auto/v1/m3u`)
+- Add Cloudflare DNS CNAME for `tv.jefflix.lol`
+- Enable Threadfin web auth
+- Test playback end-to-end
+
+### 2026-03-22: IPTV Fully Deployed
+**All infrastructure live:**
+- Threadfin running at `threadfin.jeffemmett.com` (3,468 streams from iptv-org)
+- `tv.jefflix.lol` redirects to Jellyfin Live TV section
+- Jellyfin has 3 M3U tuners: English (2,269ch), News, Sports
+- 3,468 total Live TV channels available in Jellyfin
+- "Watch Live TV" + "Listen to Music" buttons on jefflix.lol website
+- Cloudflare DNS + tunnel configured for both subdomains
+
+**Remaining manual tasks:**
+- Set up Threadfin web auth (visit threadfin.jeffemmett.com → Settings)
+- Map XEPG channels in Threadfin for curated filtered playlist
+- EPG guide requires self-hosted iptv-org/epg generator (no pre-built guides available)
+- Eleza TV subscription still optional for premium sports content
+<!-- SECTION:NOTES:END -->
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -17,8 +17,8 @@ services:
      - ADMIN_EMAIL=${ADMIN_EMAIL:-jeff@jeffemmett.com}
    labels:
      - "traefik.enable=true"
-      - "traefik.http.routers.jefflix.rule=Host(`jefflix.lol`) || Host(`www.jefflix.lol`)"
-      - "traefik.http.services.jefflix.loadbalancer.server.port=3000"
+      - "traefik.http.routers.jefflix-website.rule=Host(`jefflix.lol`) || Host(`www.jefflix.lol`)"
+      - "traefik.http.services.jefflix-website.loadbalancer.server.port=3000"
    healthcheck:
      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://127.0.0.1:3000/"]
      interval: 30s