217 lines
8.4 KiB
TypeScript
217 lines
8.4 KiB
TypeScript
'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>
|
|
)
|
|
}
|