Initial commit: IP Monitor - Modern Windows Desktop Application
Features: - IP/Country detection from public APIs - M3U8 playlist parsing and channel management - Single URL channel support - Live stream monitoring with HLS.js video player - Ping/TCP health checks - Stream error detection (CONNRESET, 404, timeout) - Windows Toast notifications - Telegram Bot notifications - Email (SMTP) notifications - Auto/Manual notification options - MONITOR_API_GUIDE panel integration - System tray support - Persistent settings (portable mode support) - Modern dark UI with Tailwind CSS Tech Stack: - Electron 28 - React 18 + TypeScript - Vite - Tailwind CSS + Framer Motion - HLS.js for video playback - electron-store for persistent data
This commit is contained in:
alper
commit
adb574e68e
|
|
@ -0,0 +1,34 @@
|
|||
# Dependencies
|
||||
node_modules/
|
||||
|
||||
# Build outputs
|
||||
dist/
|
||||
release/
|
||||
*.exe
|
||||
*.dmg
|
||||
*.AppImage
|
||||
|
||||
# IDE
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
# OS files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Environment
|
||||
.env
|
||||
.env.local
|
||||
|
||||
# Electron Store data
|
||||
config.json
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
# IP Monitor
|
||||
|
||||
Modern Windows masaüstü uygulaması - IP izleme, m3u8 kanal kontrolü ve bildirim sistemi.
|
||||
|
||||
## Özellikler
|
||||
|
||||
### 🌐 IP Bilgileri
|
||||
- Public IP adresinizi otomatik tespit
|
||||
- Ülke, şehir ve ISP bilgilerini görüntüleme
|
||||
- ip-api.com ve ipify.org API entegrasyonu
|
||||
|
||||
### 📺 M3U8 Kanal Yönetimi
|
||||
- M3U8/M3U playlist URL'lerini içe aktarma
|
||||
- Kanal listesi görüntüleme ve gruplandırma
|
||||
- İzlemek istediğiniz kanalları seçme
|
||||
- Kanal logolarını ve metadata'sını gösterme
|
||||
|
||||
### 📊 Canlı İzleme
|
||||
- Seçili kanalların ping ve stream kontrolü
|
||||
- HTTP durum kodları takibi (404, 502, vb.)
|
||||
- Bağlantı hataları tespiti (ERR_CONNRESET, ECONNREFUSED)
|
||||
- Gerçek zamanlı durum güncellemeleri
|
||||
- Gecikme (latency) ölçümü
|
||||
|
||||
### 🔔 Bildirim Sistemi
|
||||
- **Windows Toast**: Yerel Windows bildirimleri
|
||||
- **Telegram Bot**: Telegram üzerinden anlık bildirim
|
||||
- **Email (SMTP)**: E-posta ile hata raporları
|
||||
- Otomatik veya manuel bildirim seçeneği
|
||||
- Özelleştirilebilir bildirim kuralları
|
||||
|
||||
### 🔧 Panel Entegrasyonu
|
||||
- MONITOR_API_GUIDE uyumlu API entegrasyonu
|
||||
- IP listesi çekme (REST/SSE)
|
||||
- Burn vote gönderme
|
||||
- Health check raporlama
|
||||
|
||||
## Kurulum
|
||||
|
||||
```bash
|
||||
# Bağımlılıkları yükle
|
||||
npm install
|
||||
|
||||
# Geliştirme modunda çalıştır
|
||||
npm run dev
|
||||
|
||||
# Production build
|
||||
npm run build
|
||||
|
||||
# Electron uygulaması oluştur
|
||||
npm run build:electron
|
||||
```
|
||||
|
||||
## Gereksinimler
|
||||
|
||||
- Node.js 18+
|
||||
- npm veya yarn
|
||||
- Windows 10/11 (64-bit)
|
||||
|
||||
## Teknoloji Stack
|
||||
|
||||
- **Electron 28** - Desktop framework
|
||||
- **React 18** - UI library
|
||||
- **TypeScript** - Type safety
|
||||
- **Tailwind CSS** - Styling
|
||||
- **Framer Motion** - Animations
|
||||
- **Zustand** - State management
|
||||
- **Axios** - HTTP client
|
||||
- **electron-store** - Settings persistence
|
||||
|
||||
## Konfigürasyon
|
||||
|
||||
### Telegram Bildirimleri
|
||||
1. [@BotFather](https://t.me/BotFather) ile yeni bot oluşturun
|
||||
2. Bot token'ı alın
|
||||
3. Chat ID'nizi [@userinfobot](https://t.me/userinfobot) ile öğrenin
|
||||
4. Ayarlar sayfasından bilgileri girin
|
||||
|
||||
### Email Bildirimleri
|
||||
1. SMTP sunucu bilgilerini girin (Gmail, Outlook, vb.)
|
||||
2. Gmail için App Password kullanmanız gerekebilir
|
||||
3. Test butonuyla bağlantıyı kontrol edin
|
||||
|
||||
### Panel API
|
||||
1. Panel URL'sini girin
|
||||
2. Monitor ID tanımlayın
|
||||
3. Auth token'ı girin (panel'den alınır)
|
||||
|
||||
## Lisans
|
||||
|
||||
MIT
|
||||
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"$schema": "https://raw.githubusercontent.com/electron-userland/electron-builder/master/packages/app-builder-lib/scheme.json",
|
||||
"appId": "com.ipmonitor.app",
|
||||
"productName": "IP Monitor",
|
||||
"directories": {
|
||||
"output": "release",
|
||||
"buildResources": "assets"
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"index.html"
|
||||
],
|
||||
"extraMetadata": {
|
||||
"main": "dist/main/main/index.js"
|
||||
},
|
||||
"asar": true,
|
||||
"win": {
|
||||
"target": [
|
||||
{
|
||||
"target": "portable",
|
||||
"arch": ["x64"]
|
||||
}
|
||||
],
|
||||
"artifactName": "${productName}-Portable-${version}.${ext}",
|
||||
"signAndEditExecutable": false
|
||||
},
|
||||
"portable": {
|
||||
"artifactName": "${productName}-Portable-${version}.${ext}"
|
||||
},
|
||||
"publish": null
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="tr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self' blob: data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: http:; media-src 'self' blob: data: https: http: *; connect-src 'self' https: http: ws: wss: *">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<title>IP Monitor</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/renderer/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,61 @@
|
|||
{
|
||||
"name": "ip-monitor",
|
||||
"version": "1.0.0",
|
||||
"description": "Modern IP Monitor Desktop Application",
|
||||
"main": "dist/main/main/index.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "concurrently \"npm run dev:vite\" \"npm run dev:electron\"",
|
||||
"dev:vite": "vite",
|
||||
"dev:electron": "wait-on tcp:5173 && cross-env NODE_ENV=development electron .",
|
||||
"build": "npm run build:main && npm run build:renderer",
|
||||
"build:main": "tsc -p tsconfig.main.json",
|
||||
"build:renderer": "vite build",
|
||||
"build:electron": "npm run build && electron-builder --win",
|
||||
"build:portable": "npm run build && electron-builder --win portable",
|
||||
"pack": "npm run build && electron-builder --dir",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"keywords": [
|
||||
"electron",
|
||||
"ip-monitor",
|
||||
"m3u8",
|
||||
"streaming"
|
||||
],
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.10.0",
|
||||
"@types/node-telegram-bot-api": "^0.64.13",
|
||||
"@types/nodemailer": "^7.0.4",
|
||||
"@types/react": "^18.2.42",
|
||||
"@types/react-dom": "^18.2.17",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"concurrently": "^8.2.2",
|
||||
"cross-env": "^10.1.0",
|
||||
"electron": "^28.0.0",
|
||||
"electron-builder": "^24.9.1",
|
||||
"postcss": "^8.4.32",
|
||||
"tailwindcss": "^3.3.6",
|
||||
"typescript": "^5.3.2",
|
||||
"vite": "^5.0.6",
|
||||
"wait-on": "^7.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.6.2",
|
||||
"electron-store": "^8.1.0",
|
||||
"framer-motion": "^10.16.16",
|
||||
"hls.js": "^1.6.15",
|
||||
"lucide-react": "^0.294.0",
|
||||
"m3u8-parser": "^7.1.0",
|
||||
"node-telegram-bot-api": "^0.64.0",
|
||||
"nodemailer": "^6.9.7",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-player": "^3.4.0",
|
||||
"react-router-dom": "^6.21.0",
|
||||
"tcp-ping": "^0.1.1",
|
||||
"zustand": "^4.4.7"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,353 @@
|
|||
import { app, BrowserWindow, ipcMain, Tray, Menu, nativeImage } from 'electron'
|
||||
import * as path from 'path'
|
||||
import {
|
||||
getStore,
|
||||
getSettings,
|
||||
saveSettings,
|
||||
getChannels,
|
||||
saveChannels,
|
||||
getErrorLog,
|
||||
addErrorLog,
|
||||
clearErrorLog,
|
||||
getWindowBounds,
|
||||
saveWindowBounds,
|
||||
defaultSettings,
|
||||
isPortableMode
|
||||
} from './store'
|
||||
import { IpService } from './services/IpService'
|
||||
import { PingService } from './services/PingService'
|
||||
import { StreamChecker } from './services/StreamChecker'
|
||||
import { NotificationService } from './services/NotificationService'
|
||||
import { PanelService } from './services/PanelService'
|
||||
import { M3u8Parser } from './services/M3u8Parser'
|
||||
import { IPC_CHANNELS } from '../shared/types'
|
||||
import type { AppSettings, Channel, ErrorLogEntry } from '../shared/types'
|
||||
|
||||
// App quitting flag
|
||||
let isAppQuitting = false
|
||||
|
||||
// Services
|
||||
let ipService: IpService
|
||||
let pingService: PingService
|
||||
let streamChecker: StreamChecker
|
||||
let notificationService: NotificationService
|
||||
let panelService: PanelService
|
||||
let m3u8Parser: M3u8Parser
|
||||
|
||||
// Window and tray
|
||||
let mainWindow: BrowserWindow | null = null
|
||||
let tray: Tray | null = null
|
||||
|
||||
function createWindow() {
|
||||
const bounds = getWindowBounds()
|
||||
|
||||
mainWindow = new BrowserWindow({
|
||||
width: bounds.width,
|
||||
height: bounds.height,
|
||||
x: bounds.x,
|
||||
y: bounds.y,
|
||||
minWidth: 1200,
|
||||
minHeight: 700,
|
||||
frame: false,
|
||||
backgroundColor: '#0f0f12',
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'preload.js'),
|
||||
contextIsolation: true,
|
||||
nodeIntegration: false,
|
||||
},
|
||||
icon: path.join(__dirname, '../../../assets/icon.png'),
|
||||
})
|
||||
|
||||
// Save window bounds on resize/move
|
||||
mainWindow.on('resize', () => {
|
||||
if (mainWindow && !mainWindow.isMaximized()) {
|
||||
const bounds = mainWindow.getBounds()
|
||||
saveWindowBounds(bounds)
|
||||
}
|
||||
})
|
||||
|
||||
mainWindow.on('move', () => {
|
||||
if (mainWindow && !mainWindow.isMaximized()) {
|
||||
const bounds = mainWindow.getBounds()
|
||||
saveWindowBounds(bounds)
|
||||
}
|
||||
})
|
||||
|
||||
// Load the app
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
mainWindow.loadURL('http://localhost:5173')
|
||||
mainWindow.webContents.openDevTools()
|
||||
} else {
|
||||
mainWindow.loadFile(path.join(__dirname, '../../renderer/index.html'))
|
||||
}
|
||||
|
||||
mainWindow.on('close', (event) => {
|
||||
const settings = getSettings()
|
||||
if (settings.general.minimizeToTray && !isAppQuitting) {
|
||||
event.preventDefault()
|
||||
mainWindow?.hide()
|
||||
}
|
||||
})
|
||||
|
||||
mainWindow.on('closed', () => {
|
||||
mainWindow = null
|
||||
})
|
||||
}
|
||||
|
||||
function createTray() {
|
||||
// Create a simple tray icon
|
||||
const iconPath = path.join(__dirname, '../../../assets/tray-icon.png')
|
||||
let icon: Electron.NativeImage
|
||||
|
||||
try {
|
||||
icon = nativeImage.createFromPath(iconPath)
|
||||
if (icon.isEmpty()) {
|
||||
icon = nativeImage.createEmpty()
|
||||
}
|
||||
} catch {
|
||||
icon = nativeImage.createEmpty()
|
||||
}
|
||||
|
||||
tray = new Tray(icon)
|
||||
|
||||
const contextMenu = Menu.buildFromTemplate([
|
||||
{
|
||||
label: 'Göster',
|
||||
click: () => {
|
||||
mainWindow?.show()
|
||||
mainWindow?.focus()
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'İzlemeyi Başlat',
|
||||
click: () => {
|
||||
streamChecker?.start()
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'İzlemeyi Durdur',
|
||||
click: () => {
|
||||
streamChecker?.stop()
|
||||
},
|
||||
},
|
||||
{ type: 'separator' },
|
||||
{
|
||||
label: isPortableMode() ? 'Portable Mod ✓' : 'Normal Mod',
|
||||
enabled: false,
|
||||
},
|
||||
{ type: 'separator' },
|
||||
{
|
||||
label: 'Çıkış',
|
||||
click: () => {
|
||||
isAppQuitting = true
|
||||
app.quit()
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
tray.setToolTip('IP Monitor')
|
||||
tray.setContextMenu(contextMenu)
|
||||
|
||||
tray.on('double-click', () => {
|
||||
mainWindow?.show()
|
||||
mainWindow?.focus()
|
||||
})
|
||||
}
|
||||
|
||||
function initializeServices() {
|
||||
const settings = getSettings()
|
||||
|
||||
ipService = new IpService()
|
||||
pingService = new PingService(settings.monitoring.timeout)
|
||||
m3u8Parser = new M3u8Parser()
|
||||
notificationService = new NotificationService(settings.notifications)
|
||||
panelService = new PanelService(settings.panel)
|
||||
|
||||
streamChecker = new StreamChecker(
|
||||
settings.monitoring,
|
||||
(result) => {
|
||||
// Send result to renderer
|
||||
mainWindow?.webContents.send(IPC_CHANNELS.MONITORING_UPDATE, result)
|
||||
|
||||
// Auto notify on error
|
||||
if (settings.notifications.autoNotify && result.status === 'error') {
|
||||
const channels = getChannels()
|
||||
const channel = channels.find(c => c.id === result.channelId)
|
||||
if (channel) {
|
||||
// Add to error log
|
||||
const errorEntry: ErrorLogEntry = {
|
||||
id: Date.now().toString(),
|
||||
timestamp: Date.now(),
|
||||
channelName: channel.name,
|
||||
channelId: channel.id,
|
||||
errorType: result.errorType || 'UNKNOWN',
|
||||
errorMessage: result.error || 'Bilinmeyen hata',
|
||||
httpStatus: result.httpStatus,
|
||||
notified: true,
|
||||
}
|
||||
addErrorLog(errorEntry)
|
||||
|
||||
// Send notification
|
||||
notificationService.sendNotification(
|
||||
`🔴 ${channel.name} - Yayın Hatası`,
|
||||
result.error || 'Bilinmeyen hata'
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
console.log('[App] Services initialized')
|
||||
console.log('[App] Portable mode:', isPortableMode())
|
||||
}
|
||||
|
||||
function setupIpcHandlers() {
|
||||
// Window controls
|
||||
ipcMain.on('window:minimize', () => mainWindow?.minimize())
|
||||
ipcMain.on('window:maximize', () => {
|
||||
if (mainWindow?.isMaximized()) {
|
||||
mainWindow.unmaximize()
|
||||
} else {
|
||||
mainWindow?.maximize()
|
||||
}
|
||||
})
|
||||
ipcMain.on('window:close', () => mainWindow?.close())
|
||||
|
||||
// IP Service
|
||||
ipcMain.handle(IPC_CHANNELS.GET_IP_INFO, async () => {
|
||||
return await ipService.getIpInfo()
|
||||
})
|
||||
|
||||
// Channel Management
|
||||
ipcMain.handle(IPC_CHANNELS.PARSE_M3U8, async (_, url: string) => {
|
||||
const newChannels = await m3u8Parser.parse(url)
|
||||
const existingChannels = getChannels()
|
||||
saveChannels([...existingChannels, ...newChannels])
|
||||
return newChannels
|
||||
})
|
||||
|
||||
ipcMain.handle(IPC_CHANNELS.GET_CHANNELS, async () => {
|
||||
return getChannels()
|
||||
})
|
||||
|
||||
ipcMain.handle(IPC_CHANNELS.UPDATE_CHANNEL, async (_, channel: Channel) => {
|
||||
const channels = getChannels()
|
||||
const index = channels.findIndex(c => c.id === channel.id)
|
||||
if (index !== -1) {
|
||||
channels[index] = channel
|
||||
saveChannels(channels)
|
||||
}
|
||||
})
|
||||
|
||||
ipcMain.handle(IPC_CHANNELS.SET_MONITORED, async (_, channelId: string, monitored: boolean) => {
|
||||
const channels = getChannels()
|
||||
const channel = channels.find(c => c.id === channelId)
|
||||
if (channel) {
|
||||
channel.isMonitored = monitored
|
||||
saveChannels(channels)
|
||||
}
|
||||
})
|
||||
|
||||
// Monitoring
|
||||
ipcMain.handle(IPC_CHANNELS.START_MONITORING, async () => {
|
||||
const channels = getChannels()
|
||||
const monitoredChannels = channels.filter(c => c.isMonitored)
|
||||
streamChecker.setChannels(monitoredChannels)
|
||||
streamChecker.start()
|
||||
})
|
||||
|
||||
ipcMain.handle(IPC_CHANNELS.STOP_MONITORING, async () => {
|
||||
streamChecker.stop()
|
||||
})
|
||||
|
||||
ipcMain.handle(IPC_CHANNELS.GET_MONITORING_STATUS, async () => {
|
||||
return { isRunning: streamChecker.isRunning() }
|
||||
})
|
||||
|
||||
// Ping
|
||||
ipcMain.handle(IPC_CHANNELS.PING_HOST, async (_, host: string) => {
|
||||
return await pingService.ping(host)
|
||||
})
|
||||
|
||||
// Notifications
|
||||
ipcMain.handle(IPC_CHANNELS.SEND_NOTIFICATION, async (_, title: string, body: string, type?: string) => {
|
||||
await notificationService.sendNotification(title, body, type as 'windows' | 'telegram' | 'email')
|
||||
})
|
||||
|
||||
ipcMain.handle(IPC_CHANNELS.TEST_NOTIFICATION, async (_, type: string) => {
|
||||
return await notificationService.testNotification(type as 'windows' | 'telegram' | 'email')
|
||||
})
|
||||
|
||||
// Panel API
|
||||
ipcMain.handle(IPC_CHANNELS.PANEL_REGISTER, async (_, config) => {
|
||||
panelService.updateConfig(config)
|
||||
return await panelService.register()
|
||||
})
|
||||
|
||||
ipcMain.handle(IPC_CHANNELS.PANEL_GET_IPS, async () => {
|
||||
return await panelService.getIpPool()
|
||||
})
|
||||
|
||||
ipcMain.handle(IPC_CHANNELS.PANEL_SEND_VOTE, async (_, vote) => {
|
||||
return await panelService.sendBurnVote(vote)
|
||||
})
|
||||
|
||||
// Settings
|
||||
ipcMain.handle(IPC_CHANNELS.GET_SETTINGS, async () => {
|
||||
return getSettings()
|
||||
})
|
||||
|
||||
ipcMain.handle(IPC_CHANNELS.SAVE_SETTINGS, async (_, settings: AppSettings) => {
|
||||
saveSettings(settings)
|
||||
// Update services with new settings
|
||||
notificationService.updateSettings(settings.notifications)
|
||||
panelService.updateConfig(settings.panel)
|
||||
streamChecker.updateConfig(settings.monitoring)
|
||||
})
|
||||
|
||||
// Error Log
|
||||
ipcMain.handle('errorlog:get', async () => {
|
||||
return getErrorLog()
|
||||
})
|
||||
|
||||
ipcMain.handle('errorlog:clear', async () => {
|
||||
clearErrorLog()
|
||||
})
|
||||
|
||||
// App Info
|
||||
ipcMain.handle('app:info', async () => {
|
||||
return {
|
||||
version: app.getVersion(),
|
||||
isPortable: isPortableMode(),
|
||||
dataPath: getStore().path,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// App lifecycle
|
||||
app.whenReady().then(() => {
|
||||
// Initialize store first
|
||||
getStore()
|
||||
|
||||
initializeServices()
|
||||
createWindow()
|
||||
createTray()
|
||||
setupIpcHandlers()
|
||||
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) {
|
||||
createWindow()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin') {
|
||||
app.quit()
|
||||
}
|
||||
})
|
||||
|
||||
app.on('before-quit', () => {
|
||||
isAppQuitting = true
|
||||
streamChecker?.stop()
|
||||
})
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import { contextBridge, ipcRenderer } from 'electron'
|
||||
import { IPC_CHANNELS } from '../shared/types'
|
||||
import type { Channel, AppSettings, BurnVote, NotificationType } from '../shared/types'
|
||||
|
||||
// Expose protected methods to renderer
|
||||
contextBridge.exposeInMainWorld('electron', {
|
||||
// Window controls
|
||||
minimize: () => ipcRenderer.send('window:minimize'),
|
||||
maximize: () => ipcRenderer.send('window:maximize'),
|
||||
close: () => ipcRenderer.send('window:close'),
|
||||
|
||||
// IP Service
|
||||
getIpInfo: () => ipcRenderer.invoke(IPC_CHANNELS.GET_IP_INFO),
|
||||
|
||||
// Channel Management
|
||||
parseM3u8: (url: string) => ipcRenderer.invoke(IPC_CHANNELS.PARSE_M3U8, url),
|
||||
getChannels: () => ipcRenderer.invoke(IPC_CHANNELS.GET_CHANNELS),
|
||||
updateChannel: (channel: Channel) => ipcRenderer.invoke(IPC_CHANNELS.UPDATE_CHANNEL, channel),
|
||||
setChannelMonitored: (channelId: string, monitored: boolean) =>
|
||||
ipcRenderer.invoke(IPC_CHANNELS.SET_MONITORED, channelId, monitored),
|
||||
|
||||
// Monitoring
|
||||
startMonitoring: () => ipcRenderer.invoke(IPC_CHANNELS.START_MONITORING),
|
||||
stopMonitoring: () => ipcRenderer.invoke(IPC_CHANNELS.STOP_MONITORING),
|
||||
getMonitoringStatus: () => ipcRenderer.invoke(IPC_CHANNELS.GET_MONITORING_STATUS),
|
||||
onMonitoringUpdate: (callback: (result: unknown) => void) => {
|
||||
const handler = (_event: Electron.IpcRendererEvent, result: unknown) => callback(result)
|
||||
ipcRenderer.on(IPC_CHANNELS.MONITORING_UPDATE, handler)
|
||||
return () => ipcRenderer.removeListener(IPC_CHANNELS.MONITORING_UPDATE, handler)
|
||||
},
|
||||
|
||||
// Ping
|
||||
pingHost: (host: string) => ipcRenderer.invoke(IPC_CHANNELS.PING_HOST, host),
|
||||
|
||||
// Notifications
|
||||
sendNotification: (title: string, body: string, type?: NotificationType) =>
|
||||
ipcRenderer.invoke(IPC_CHANNELS.SEND_NOTIFICATION, title, body, type),
|
||||
testNotification: (type: NotificationType) =>
|
||||
ipcRenderer.invoke(IPC_CHANNELS.TEST_NOTIFICATION, type),
|
||||
|
||||
// Panel API
|
||||
panelRegister: (config: unknown) => ipcRenderer.invoke(IPC_CHANNELS.PANEL_REGISTER, config),
|
||||
panelGetIps: () => ipcRenderer.invoke(IPC_CHANNELS.PANEL_GET_IPS),
|
||||
panelSendVote: (vote: BurnVote) => ipcRenderer.invoke(IPC_CHANNELS.PANEL_SEND_VOTE, vote),
|
||||
|
||||
// Settings
|
||||
getSettings: () => ipcRenderer.invoke(IPC_CHANNELS.GET_SETTINGS),
|
||||
saveSettings: (settings: AppSettings) => ipcRenderer.invoke(IPC_CHANNELS.SAVE_SETTINGS, settings),
|
||||
|
||||
// Error Log
|
||||
getErrorLog: () => ipcRenderer.invoke('errorlog:get'),
|
||||
clearErrorLog: () => ipcRenderer.invoke('errorlog:clear'),
|
||||
|
||||
// App Info
|
||||
getAppInfo: () => ipcRenderer.invoke('app:info'),
|
||||
})
|
||||
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
import * as nodemailer from 'nodemailer'
|
||||
|
||||
export interface EmailConfig {
|
||||
smtpHost: string
|
||||
smtpPort: number
|
||||
smtpUser: string
|
||||
smtpPass: string
|
||||
fromEmail: string
|
||||
toEmail: string
|
||||
}
|
||||
|
||||
export class EmailService {
|
||||
private config: EmailConfig
|
||||
private transporter: nodemailer.Transporter | null = null
|
||||
|
||||
constructor(config: EmailConfig) {
|
||||
this.config = config
|
||||
this.initTransporter()
|
||||
}
|
||||
|
||||
updateConfig(config: EmailConfig): void {
|
||||
this.config = config
|
||||
this.initTransporter()
|
||||
}
|
||||
|
||||
private initTransporter(): void {
|
||||
if (!this.config.smtpHost || !this.config.smtpUser) {
|
||||
this.transporter = null
|
||||
return
|
||||
}
|
||||
|
||||
this.transporter = nodemailer.createTransport({
|
||||
host: this.config.smtpHost,
|
||||
port: this.config.smtpPort,
|
||||
secure: this.config.smtpPort === 465,
|
||||
auth: {
|
||||
user: this.config.smtpUser,
|
||||
pass: this.config.smtpPass,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async sendEmail(subject: string, text: string, html?: string): Promise<boolean> {
|
||||
if (!this.transporter) {
|
||||
console.warn('Email transporter not configured')
|
||||
return false
|
||||
}
|
||||
|
||||
try {
|
||||
await this.transporter.sendMail({
|
||||
from: this.config.fromEmail || this.config.smtpUser,
|
||||
to: this.config.toEmail,
|
||||
subject: `[IP Monitor] ${subject}`,
|
||||
text,
|
||||
html: html || this.generateHtml(subject, text),
|
||||
})
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('Failed to send email:', error)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
async sendAlert(title: string, message: string): Promise<boolean> {
|
||||
return this.sendEmail(title, message)
|
||||
}
|
||||
|
||||
async testConnection(): Promise<{ success: boolean; error?: string }> {
|
||||
if (!this.transporter) {
|
||||
return { success: false, error: 'Email not configured' }
|
||||
}
|
||||
|
||||
try {
|
||||
await this.transporter.verify()
|
||||
return { success: true }
|
||||
} catch (error) {
|
||||
return { success: false, error: (error as Error).message }
|
||||
}
|
||||
}
|
||||
|
||||
private generateHtml(title: string, content: string): string {
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background-color: #0f0f12;
|
||||
color: #e4e4e7;
|
||||
padding: 20px;
|
||||
}
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #18181b;
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
border: 1px solid #27272a;
|
||||
}
|
||||
h1 {
|
||||
color: #e06c75;
|
||||
border-bottom: 2px solid #e06c75;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.content {
|
||||
background: #1e1e22;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #27272a;
|
||||
}
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
color: #a1a1aa;
|
||||
}
|
||||
.footer {
|
||||
margin-top: 20px;
|
||||
color: #71717a;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>${title}</h1>
|
||||
<div class="content">
|
||||
<pre>${content}</pre>
|
||||
</div>
|
||||
<p class="footer">
|
||||
IP Monitor - ${new Date().toLocaleString('tr-TR')}
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import axios from 'axios'
|
||||
import type { IpInfo } from '../../shared/types'
|
||||
|
||||
export class IpService {
|
||||
private cache: IpInfo | null = null
|
||||
private cacheTime: number = 0
|
||||
private cacheDuration = 5 * 60 * 1000 // 5 minutes
|
||||
|
||||
async getIpInfo(): Promise<IpInfo> {
|
||||
// Return cached data if still valid
|
||||
if (this.cache && Date.now() - this.cacheTime < this.cacheDuration) {
|
||||
return this.cache
|
||||
}
|
||||
|
||||
try {
|
||||
// Try ip-api.com first (more detailed info, free)
|
||||
const response = await axios.get('http://ip-api.com/json/', {
|
||||
timeout: 10000,
|
||||
params: {
|
||||
fields: 'status,message,country,countryCode,city,isp,query,timezone'
|
||||
}
|
||||
})
|
||||
|
||||
if (response.data.status === 'success') {
|
||||
const info: IpInfo = {
|
||||
ip: response.data.query,
|
||||
country: response.data.country,
|
||||
countryCode: response.data.countryCode,
|
||||
city: response.data.city,
|
||||
isp: response.data.isp,
|
||||
timezone: response.data.timezone
|
||||
}
|
||||
|
||||
this.cache = info
|
||||
this.cacheTime = Date.now()
|
||||
return info
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('ip-api.com failed:', error)
|
||||
}
|
||||
|
||||
// Fallback to ipify + ipapi
|
||||
try {
|
||||
const ipResponse = await axios.get('https://api.ipify.org?format=json', {
|
||||
timeout: 10000
|
||||
})
|
||||
const ip = ipResponse.data.ip
|
||||
|
||||
const geoResponse = await axios.get(`https://ipapi.co/${ip}/json/`, {
|
||||
timeout: 10000
|
||||
})
|
||||
|
||||
const info: IpInfo = {
|
||||
ip: ip,
|
||||
country: geoResponse.data.country_name || 'Unknown',
|
||||
countryCode: geoResponse.data.country_code || 'XX',
|
||||
city: geoResponse.data.city,
|
||||
isp: geoResponse.data.org,
|
||||
timezone: geoResponse.data.timezone
|
||||
}
|
||||
|
||||
this.cache = info
|
||||
this.cacheTime = Date.now()
|
||||
return info
|
||||
} catch (error) {
|
||||
console.error('Fallback IP lookup failed:', error)
|
||||
throw new Error('Failed to get IP information')
|
||||
}
|
||||
}
|
||||
|
||||
clearCache(): void {
|
||||
this.cache = null
|
||||
this.cacheTime = 0
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
import axios from 'axios'
|
||||
import type { Channel } from '../../shared/types'
|
||||
import { randomUUID } from 'crypto'
|
||||
|
||||
interface M3u8Entry {
|
||||
name: string
|
||||
url: string
|
||||
group?: string
|
||||
logo?: string
|
||||
tvgId?: string
|
||||
tvgName?: string
|
||||
}
|
||||
|
||||
export class M3u8Parser {
|
||||
/**
|
||||
* Parse M3U8/M3U playlist from URL
|
||||
*/
|
||||
async parse(url: string): Promise<Channel[]> {
|
||||
try {
|
||||
const response = await axios.get(url, {
|
||||
timeout: 30000,
|
||||
headers: {
|
||||
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
|
||||
},
|
||||
responseType: 'text'
|
||||
})
|
||||
|
||||
const content = response.data as string
|
||||
return this.parseContent(content)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch M3U8:', error)
|
||||
throw new Error(`Failed to fetch playlist: ${(error as Error).message}`)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse M3U8/M3U content string
|
||||
*/
|
||||
parseContent(content: string): Channel[] {
|
||||
const lines = content.split('\n').map(line => line.trim())
|
||||
const entries: M3u8Entry[] = []
|
||||
|
||||
let currentEntry: Partial<M3u8Entry> | null = null
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i]
|
||||
|
||||
// Skip empty lines and M3U header
|
||||
if (!line || line === '#EXTM3U') continue
|
||||
|
||||
// Parse EXTINF line
|
||||
if (line.startsWith('#EXTINF:')) {
|
||||
currentEntry = this.parseExtInf(line)
|
||||
continue
|
||||
}
|
||||
|
||||
// Parse additional attributes
|
||||
if (line.startsWith('#EXTGRP:') && currentEntry) {
|
||||
currentEntry.group = line.replace('#EXTGRP:', '').trim()
|
||||
continue
|
||||
}
|
||||
|
||||
// Skip other comments
|
||||
if (line.startsWith('#')) continue
|
||||
|
||||
// This should be a URL
|
||||
if (currentEntry && this.isValidUrl(line)) {
|
||||
currentEntry.url = line
|
||||
entries.push(currentEntry as M3u8Entry)
|
||||
currentEntry = null
|
||||
} else if (this.isValidUrl(line)) {
|
||||
// URL without EXTINF
|
||||
entries.push({
|
||||
name: this.extractNameFromUrl(line),
|
||||
url: line
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return entries.map(entry => this.entryToChannel(entry))
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse #EXTINF line and extract metadata
|
||||
*/
|
||||
private parseExtInf(line: string): Partial<M3u8Entry> {
|
||||
const entry: Partial<M3u8Entry> = {}
|
||||
|
||||
// Remove #EXTINF: prefix
|
||||
let content = line.replace('#EXTINF:', '')
|
||||
|
||||
// Extract duration (usually -1 for live streams)
|
||||
const durationMatch = content.match(/^-?\d+/)
|
||||
if (durationMatch) {
|
||||
content = content.substring(durationMatch[0].length)
|
||||
}
|
||||
|
||||
// Parse attributes in format: key="value"
|
||||
const attrRegex = /(\w+(?:-\w+)*)=["']([^"']*)["']/g
|
||||
let match
|
||||
|
||||
while ((match = attrRegex.exec(content)) !== null) {
|
||||
const [, key, value] = match
|
||||
|
||||
switch (key.toLowerCase()) {
|
||||
case 'tvg-id':
|
||||
entry.tvgId = value
|
||||
break
|
||||
case 'tvg-name':
|
||||
entry.tvgName = value
|
||||
break
|
||||
case 'tvg-logo':
|
||||
case 'logo':
|
||||
entry.logo = value
|
||||
break
|
||||
case 'group-title':
|
||||
entry.group = value
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// Extract channel name (after last comma)
|
||||
const nameMatch = content.match(/,(.+)$/)
|
||||
if (nameMatch) {
|
||||
entry.name = nameMatch[1].trim()
|
||||
} else {
|
||||
// Try to use tvg-name if no name after comma
|
||||
entry.name = entry.tvgName || 'Unknown Channel'
|
||||
}
|
||||
|
||||
return entry
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert M3U entry to Channel object
|
||||
*/
|
||||
private entryToChannel(entry: M3u8Entry): Channel {
|
||||
return {
|
||||
id: randomUUID(),
|
||||
name: entry.name,
|
||||
url: entry.url,
|
||||
group: entry.group,
|
||||
logo: entry.logo,
|
||||
isMonitored: false,
|
||||
status: 'unknown'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if string is a valid URL
|
||||
*/
|
||||
private isValidUrl(str: string): boolean {
|
||||
try {
|
||||
new URL(str)
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract channel name from URL
|
||||
*/
|
||||
private extractNameFromUrl(url: string): string {
|
||||
try {
|
||||
const parsed = new URL(url)
|
||||
const pathParts = parsed.pathname.split('/')
|
||||
const lastPart = pathParts[pathParts.length - 1] || pathParts[pathParts.length - 2]
|
||||
|
||||
// Remove file extension
|
||||
const name = lastPart.replace(/\.(m3u8?|ts|mp4)$/i, '')
|
||||
|
||||
// Clean up the name
|
||||
return name
|
||||
.replace(/[_-]/g, ' ')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim() || parsed.hostname
|
||||
} catch {
|
||||
return 'Unknown Channel'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get unique groups from channels
|
||||
*/
|
||||
static getGroups(channels: Channel[]): string[] {
|
||||
const groups = new Set<string>()
|
||||
channels.forEach(channel => {
|
||||
if (channel.group) {
|
||||
groups.add(channel.group)
|
||||
}
|
||||
})
|
||||
return Array.from(groups).sort()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
import { Notification, app } from 'electron'
|
||||
import axios from 'axios'
|
||||
import * as nodemailer from 'nodemailer'
|
||||
import type { NotificationSettings, NotificationType } from '../../shared/types'
|
||||
|
||||
export class NotificationService {
|
||||
private settings: NotificationSettings
|
||||
private emailTransporter: nodemailer.Transporter | null = null
|
||||
|
||||
constructor(settings: NotificationSettings) {
|
||||
this.settings = settings
|
||||
this.initializeEmailTransporter()
|
||||
}
|
||||
|
||||
updateSettings(settings: NotificationSettings): void {
|
||||
this.settings = settings
|
||||
this.initializeEmailTransporter()
|
||||
}
|
||||
|
||||
private initializeEmailTransporter(): void {
|
||||
if (this.settings.email.enabled && this.settings.email.smtpHost) {
|
||||
this.emailTransporter = nodemailer.createTransport({
|
||||
host: this.settings.email.smtpHost,
|
||||
port: this.settings.email.smtpPort,
|
||||
secure: this.settings.email.smtpPort === 465,
|
||||
auth: {
|
||||
user: this.settings.email.smtpUser,
|
||||
pass: this.settings.email.smtpPass,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Send notification through all enabled channels
|
||||
*/
|
||||
async sendNotification(title: string, body: string, specificType?: NotificationType): Promise<void> {
|
||||
if (!this.settings.enabled) return
|
||||
|
||||
const promises: Promise<void>[] = []
|
||||
|
||||
if (specificType) {
|
||||
// Send to specific channel
|
||||
switch (specificType) {
|
||||
case 'windows':
|
||||
if (this.settings.windows.enabled) {
|
||||
promises.push(this.sendWindowsNotification(title, body))
|
||||
}
|
||||
break
|
||||
case 'telegram':
|
||||
if (this.settings.telegram.enabled) {
|
||||
promises.push(this.sendTelegramNotification(title, body))
|
||||
}
|
||||
break
|
||||
case 'email':
|
||||
if (this.settings.email.enabled) {
|
||||
promises.push(this.sendEmailNotification(title, body))
|
||||
}
|
||||
break
|
||||
}
|
||||
} else {
|
||||
// Send to all enabled channels
|
||||
if (this.settings.windows.enabled) {
|
||||
promises.push(this.sendWindowsNotification(title, body))
|
||||
}
|
||||
if (this.settings.telegram.enabled) {
|
||||
promises.push(this.sendTelegramNotification(title, body))
|
||||
}
|
||||
if (this.settings.email.enabled) {
|
||||
promises.push(this.sendEmailNotification(title, body))
|
||||
}
|
||||
}
|
||||
|
||||
await Promise.allSettled(promises)
|
||||
}
|
||||
|
||||
/**
|
||||
* Send Windows toast notification
|
||||
*/
|
||||
async sendWindowsNotification(title: string, body: string): Promise<void> {
|
||||
if (!Notification.isSupported()) {
|
||||
console.warn('Notifications not supported on this system')
|
||||
return
|
||||
}
|
||||
|
||||
const notification = new Notification({
|
||||
title,
|
||||
body,
|
||||
icon: undefined, // Will use app icon
|
||||
silent: false,
|
||||
})
|
||||
|
||||
notification.show()
|
||||
}
|
||||
|
||||
/**
|
||||
* Send Telegram notification
|
||||
*/
|
||||
async sendTelegramNotification(title: string, body: string): Promise<void> {
|
||||
const { botToken, chatId } = this.settings.telegram
|
||||
|
||||
if (!botToken || !chatId) {
|
||||
throw new Error('Telegram bot token or chat ID not configured')
|
||||
}
|
||||
|
||||
const message = `*${this.escapeMarkdown(title)}*\n\n${this.escapeMarkdown(body)}`
|
||||
|
||||
const url = `https://api.telegram.org/bot${botToken}/sendMessage`
|
||||
|
||||
await axios.post(url, {
|
||||
chat_id: chatId,
|
||||
text: message,
|
||||
parse_mode: 'Markdown',
|
||||
disable_web_page_preview: true,
|
||||
}, {
|
||||
timeout: 10000
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Send email notification
|
||||
*/
|
||||
async sendEmailNotification(title: string, body: string): Promise<void> {
|
||||
if (!this.emailTransporter) {
|
||||
throw new Error('Email transporter not configured')
|
||||
}
|
||||
|
||||
const { fromEmail, toEmail } = this.settings.email
|
||||
|
||||
if (!fromEmail || !toEmail) {
|
||||
throw new Error('Email addresses not configured')
|
||||
}
|
||||
|
||||
await this.emailTransporter.sendMail({
|
||||
from: fromEmail,
|
||||
to: toEmail,
|
||||
subject: `[IP Monitor] ${title}`,
|
||||
text: body,
|
||||
html: `
|
||||
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
|
||||
<h2 style="color: #e06c75; border-bottom: 2px solid #e06c75; padding-bottom: 10px;">
|
||||
${title}
|
||||
</h2>
|
||||
<div style="background: #f5f5f5; padding: 15px; border-radius: 8px; margin-top: 15px;">
|
||||
<pre style="white-space: pre-wrap; font-family: 'Courier New', monospace;">${body}</pre>
|
||||
</div>
|
||||
<p style="color: #888; font-size: 12px; margin-top: 20px;">
|
||||
Sent by IP Monitor at ${new Date().toLocaleString('tr-TR')}
|
||||
</p>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Test notification for a specific channel
|
||||
*/
|
||||
async testNotification(type: NotificationType): Promise<{ success: boolean; error?: string }> {
|
||||
const title = 'Test Bildirimi'
|
||||
const body = `Bu bir test bildirimidir.\nZaman: ${new Date().toLocaleString('tr-TR')}`
|
||||
|
||||
try {
|
||||
switch (type) {
|
||||
case 'windows':
|
||||
await this.sendWindowsNotification(title, body)
|
||||
break
|
||||
case 'telegram':
|
||||
await this.sendTelegramNotification(title, body)
|
||||
break
|
||||
case 'email':
|
||||
await this.sendEmailNotification(title, body)
|
||||
break
|
||||
}
|
||||
return { success: true }
|
||||
} catch (error) {
|
||||
return { success: false, error: (error as Error).message }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape special characters for Telegram Markdown
|
||||
*/
|
||||
private escapeMarkdown(text: string): string {
|
||||
return text.replace(/[_*[\]()~`>#+=|{}.!-]/g, '\\$&')
|
||||
}
|
||||
|
||||
/**
|
||||
* Format error for notification
|
||||
*/
|
||||
static formatErrorNotification(
|
||||
channelName: string,
|
||||
errorType: string,
|
||||
errorMessage: string,
|
||||
httpStatus?: number
|
||||
): { title: string; body: string } {
|
||||
let statusEmoji = '🔴'
|
||||
if (errorType === 'TIMEOUT') statusEmoji = '⏱️'
|
||||
if (errorType === 'CONNRESET') statusEmoji = '🔌'
|
||||
if (httpStatus === 404) statusEmoji = '❌'
|
||||
|
||||
const title = `${statusEmoji} ${channelName} - Yayın Hatası`
|
||||
|
||||
let body = `Hata Tipi: ${errorType}\n`
|
||||
if (httpStatus) body += `HTTP Status: ${httpStatus}\n`
|
||||
body += `Detay: ${errorMessage}\n`
|
||||
body += `Zaman: ${new Date().toLocaleString('tr-TR')}`
|
||||
|
||||
return { title, body }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
import axios, { AxiosInstance } from 'axios'
|
||||
import type { PanelConfig, PanelIpPool, BurnVote } from '../../shared/types'
|
||||
|
||||
export class PanelService {
|
||||
private config: PanelConfig
|
||||
private client: AxiosInstance | null = null
|
||||
|
||||
constructor(config: PanelConfig) {
|
||||
this.config = config
|
||||
this.initializeClient()
|
||||
}
|
||||
|
||||
updateConfig(config: PanelConfig): void {
|
||||
this.config = config
|
||||
this.initializeClient()
|
||||
}
|
||||
|
||||
private initializeClient(): void {
|
||||
if (!this.config.apiUrl) {
|
||||
this.client = null
|
||||
return
|
||||
}
|
||||
|
||||
this.client = axios.create({
|
||||
baseURL: this.config.apiUrl,
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(this.config.authToken && {
|
||||
'Authorization': `Bearer ${this.config.authToken}`
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Register monitor with panel
|
||||
* Based on MONITOR_API_GUIDE.md
|
||||
*/
|
||||
async register(): Promise<{ success: boolean; authToken?: string; error?: string }> {
|
||||
if (!this.client) {
|
||||
return { success: false, error: 'Panel not configured' }
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await this.client.post('/api.php?endpoint=servers', {
|
||||
server_id: this.config.monitorId,
|
||||
server_type: 'monitor',
|
||||
hostname: require('os').hostname(),
|
||||
ip_address: await this.getLocalIp(),
|
||||
country_code: 'TR' // Could be detected dynamically
|
||||
})
|
||||
|
||||
if (response.data.success) {
|
||||
return {
|
||||
success: true,
|
||||
authToken: response.data.auth_token
|
||||
}
|
||||
}
|
||||
|
||||
return { success: false, error: response.data.message }
|
||||
} catch (error) {
|
||||
return { success: false, error: (error as Error).message }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get IP pool from panel
|
||||
* Based on MONITOR_API_GUIDE.md - Option A: REST API (Polling)
|
||||
*/
|
||||
async getIpPool(): Promise<PanelIpPool> {
|
||||
if (!this.client || !this.config.enabled) {
|
||||
return { active: [], honeypot: [] }
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await this.client.get('/api.php', {
|
||||
params: {
|
||||
endpoint: 'ip-pool',
|
||||
for_monitor: true
|
||||
}
|
||||
})
|
||||
|
||||
if (response.data.success) {
|
||||
return response.data.ips || { active: [], honeypot: [] }
|
||||
}
|
||||
|
||||
console.error('Failed to get IP pool:', response.data.message)
|
||||
return { active: [], honeypot: [] }
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch IP pool:', error)
|
||||
return { active: [], honeypot: [] }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Send burn vote
|
||||
* Based on MONITOR_API_GUIDE.md - Section 2: Burn Bildirimi
|
||||
*/
|
||||
async sendBurnVote(vote: BurnVote): Promise<{ success: boolean; error?: string }> {
|
||||
if (!this.client || !this.config.enabled) {
|
||||
return { success: false, error: 'Panel not enabled' }
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await this.client.post('/api.php?endpoint=burn-vote', {
|
||||
ip_address: vote.ip_address,
|
||||
vote: vote.vote,
|
||||
reason: vote.reason,
|
||||
evidence: {
|
||||
...vote.evidence,
|
||||
monitor_id: this.config.monitorId,
|
||||
timestamp: Math.floor(Date.now() / 1000)
|
||||
}
|
||||
})
|
||||
|
||||
if (response.data.success) {
|
||||
console.log('Burn vote submitted:', {
|
||||
ip: vote.ip_address,
|
||||
vote: vote.vote,
|
||||
current_votes: response.data.current_votes
|
||||
})
|
||||
return { success: true }
|
||||
}
|
||||
|
||||
return { success: false, error: response.data.message }
|
||||
} catch (error) {
|
||||
return { success: false, error: (error as Error).message }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Report IP health status
|
||||
*/
|
||||
async reportHealth(
|
||||
ipAddress: string,
|
||||
isWorking: boolean,
|
||||
checkResult: {
|
||||
checkType: string
|
||||
port?: number
|
||||
latencyMs?: number
|
||||
error?: string
|
||||
}
|
||||
): Promise<void> {
|
||||
const vote: BurnVote = {
|
||||
ip_address: ipAddress,
|
||||
vote: isWorking ? 'ok' : 'burn',
|
||||
reason: isWorking ? 'IP working normally' : checkResult.error || 'Check failed',
|
||||
evidence: {
|
||||
check_type: checkResult.checkType,
|
||||
port: checkResult.port,
|
||||
response_time_ms: checkResult.latencyMs,
|
||||
error_message: checkResult.error,
|
||||
timestamp: Math.floor(Date.now() / 1000),
|
||||
monitor_id: this.config.monitorId
|
||||
}
|
||||
}
|
||||
|
||||
await this.sendBurnVote(vote)
|
||||
}
|
||||
|
||||
/**
|
||||
* Get local IP address
|
||||
*/
|
||||
private async getLocalIp(): Promise<string> {
|
||||
const os = require('os')
|
||||
const interfaces = os.networkInterfaces()
|
||||
|
||||
for (const name of Object.keys(interfaces)) {
|
||||
for (const iface of interfaces[name] || []) {
|
||||
if (iface.family === 'IPv4' && !iface.internal) {
|
||||
return iface.address
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return '127.0.0.1'
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if panel is configured and enabled
|
||||
*/
|
||||
isEnabled(): boolean {
|
||||
return this.config.enabled && !!this.config.apiUrl && !!this.config.authToken
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
import * as net from 'net'
|
||||
import * as dns from 'dns'
|
||||
import { promisify } from 'util'
|
||||
import type { PingResult } from '../../shared/types'
|
||||
|
||||
const dnsLookup = promisify(dns.lookup)
|
||||
|
||||
export class PingService {
|
||||
private timeout: number
|
||||
|
||||
constructor(timeout: number = 5000) {
|
||||
this.timeout = timeout
|
||||
}
|
||||
|
||||
/**
|
||||
* Ping a host using TCP connection (works without admin privileges)
|
||||
*/
|
||||
async ping(host: string, port: number = 80): Promise<PingResult> {
|
||||
const startTime = Date.now()
|
||||
|
||||
try {
|
||||
// Resolve hostname first
|
||||
let ip = host
|
||||
if (!this.isIpAddress(host)) {
|
||||
try {
|
||||
const result = await dnsLookup(host)
|
||||
ip = result.address
|
||||
} catch (dnsError) {
|
||||
return {
|
||||
host,
|
||||
alive: false,
|
||||
error: `DNS lookup failed: ${(dnsError as Error).message}`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TCP connection test
|
||||
const alive = await this.tcpPing(ip, port)
|
||||
const time = Date.now() - startTime
|
||||
|
||||
return {
|
||||
host,
|
||||
alive,
|
||||
time: alive ? time : undefined,
|
||||
error: alive ? undefined : 'Connection failed'
|
||||
}
|
||||
} catch (error) {
|
||||
return {
|
||||
host,
|
||||
alive: false,
|
||||
error: (error as Error).message
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private tcpPing(host: string, port: number): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
const socket = new net.Socket()
|
||||
|
||||
socket.setTimeout(this.timeout)
|
||||
|
||||
socket.on('connect', () => {
|
||||
socket.destroy()
|
||||
resolve(true)
|
||||
})
|
||||
|
||||
socket.on('timeout', () => {
|
||||
socket.destroy()
|
||||
resolve(false)
|
||||
})
|
||||
|
||||
socket.on('error', () => {
|
||||
socket.destroy()
|
||||
resolve(false)
|
||||
})
|
||||
|
||||
socket.connect(port, host)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Ping multiple hosts in parallel
|
||||
*/
|
||||
async pingMultiple(hosts: string[], port: number = 80): Promise<PingResult[]> {
|
||||
const results = await Promise.all(
|
||||
hosts.map(host => this.ping(host, port))
|
||||
)
|
||||
return results
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if string is an IP address
|
||||
*/
|
||||
private isIpAddress(str: string): boolean {
|
||||
const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}$/
|
||||
const ipv6Regex = /^([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$/
|
||||
return ipv4Regex.test(str) || ipv6Regex.test(str)
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract host from URL
|
||||
*/
|
||||
static extractHost(url: string): string {
|
||||
try {
|
||||
const parsed = new URL(url)
|
||||
return parsed.hostname
|
||||
} catch {
|
||||
return url
|
||||
}
|
||||
}
|
||||
|
||||
updateTimeout(timeout: number): void {
|
||||
this.timeout = timeout
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
import axios, { AxiosError } from 'axios'
|
||||
import type { Channel, MonitoringResult, ChannelStatus } from '../../shared/types'
|
||||
|
||||
interface MonitoringConfig {
|
||||
pingInterval: number
|
||||
streamCheckInterval: number
|
||||
timeout: number
|
||||
retryCount: number
|
||||
}
|
||||
|
||||
type MonitoringCallback = (result: MonitoringResult) => void
|
||||
|
||||
export class StreamChecker {
|
||||
private config: MonitoringConfig
|
||||
private channels: Channel[] = []
|
||||
private callback: MonitoringCallback
|
||||
private intervalId: NodeJS.Timeout | null = null
|
||||
private running = false
|
||||
|
||||
constructor(config: MonitoringConfig, callback: MonitoringCallback) {
|
||||
this.config = config
|
||||
this.callback = callback
|
||||
}
|
||||
|
||||
setChannels(channels: Channel[]): void {
|
||||
this.channels = channels
|
||||
}
|
||||
|
||||
start(): void {
|
||||
if (this.running) return
|
||||
|
||||
this.running = true
|
||||
this.checkAllChannels()
|
||||
|
||||
this.intervalId = setInterval(() => {
|
||||
this.checkAllChannels()
|
||||
}, this.config.streamCheckInterval * 1000)
|
||||
}
|
||||
|
||||
stop(): void {
|
||||
this.running = false
|
||||
if (this.intervalId) {
|
||||
clearInterval(this.intervalId)
|
||||
this.intervalId = null
|
||||
}
|
||||
}
|
||||
|
||||
isRunning(): boolean {
|
||||
return this.running
|
||||
}
|
||||
|
||||
updateConfig(config: MonitoringConfig): void {
|
||||
this.config = config
|
||||
|
||||
// Restart if running with new interval
|
||||
if (this.running) {
|
||||
this.stop()
|
||||
this.start()
|
||||
}
|
||||
}
|
||||
|
||||
private async checkAllChannels(): Promise<void> {
|
||||
for (const channel of this.channels) {
|
||||
if (!this.running) break
|
||||
|
||||
const result = await this.checkChannel(channel)
|
||||
this.callback(result)
|
||||
|
||||
// Small delay between checks to prevent overwhelming
|
||||
await this.delay(500)
|
||||
}
|
||||
}
|
||||
|
||||
async checkChannel(channel: Channel): Promise<MonitoringResult> {
|
||||
const startTime = Date.now()
|
||||
|
||||
// Notify checking status
|
||||
this.callback({
|
||||
channelId: channel.id,
|
||||
timestamp: startTime,
|
||||
status: 'checking'
|
||||
})
|
||||
|
||||
let lastError: string | undefined
|
||||
let errorType: MonitoringResult['errorType']
|
||||
let httpStatus: number | undefined
|
||||
|
||||
for (let attempt = 0; attempt < this.config.retryCount; attempt++) {
|
||||
try {
|
||||
const response = await axios.head(channel.url, {
|
||||
timeout: this.config.timeout,
|
||||
headers: {
|
||||
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
|
||||
},
|
||||
maxRedirects: 5,
|
||||
validateStatus: () => true // Accept any status
|
||||
})
|
||||
|
||||
httpStatus = response.status
|
||||
const latency = Date.now() - startTime
|
||||
|
||||
// Check for successful response
|
||||
if (response.status >= 200 && response.status < 400) {
|
||||
return {
|
||||
channelId: channel.id,
|
||||
timestamp: Date.now(),
|
||||
status: 'online',
|
||||
latency,
|
||||
httpStatus
|
||||
}
|
||||
}
|
||||
|
||||
// HTTP error status
|
||||
lastError = `HTTP ${response.status} ${response.statusText}`
|
||||
errorType = 'HTTP_ERROR'
|
||||
|
||||
if (response.status === 404) {
|
||||
return {
|
||||
channelId: channel.id,
|
||||
timestamp: Date.now(),
|
||||
status: 'offline',
|
||||
httpStatus,
|
||||
error: lastError,
|
||||
errorType
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
const axiosError = error as AxiosError
|
||||
|
||||
if (axiosError.code === 'ECONNRESET') {
|
||||
lastError = 'ERR_CONNECTION_RESET'
|
||||
errorType = 'CONNRESET'
|
||||
} else if (axiosError.code === 'ECONNREFUSED') {
|
||||
lastError = 'ERR_CONNECTION_REFUSED'
|
||||
errorType = 'CONNREFUSED'
|
||||
} else if (axiosError.code === 'ETIMEDOUT' || axiosError.code === 'ECONNABORTED') {
|
||||
lastError = 'Connection timeout'
|
||||
errorType = 'TIMEOUT'
|
||||
} else if (axiosError.code === 'ENOTFOUND') {
|
||||
lastError = 'DNS lookup failed'
|
||||
errorType = 'UNKNOWN'
|
||||
} else {
|
||||
lastError = axiosError.message
|
||||
errorType = 'UNKNOWN'
|
||||
}
|
||||
}
|
||||
|
||||
// Wait before retry
|
||||
if (attempt < this.config.retryCount - 1) {
|
||||
await this.delay(1000 * (attempt + 1)) // Exponential backoff
|
||||
}
|
||||
}
|
||||
|
||||
// All retries failed
|
||||
return {
|
||||
channelId: channel.id,
|
||||
timestamp: Date.now(),
|
||||
status: 'error',
|
||||
httpStatus,
|
||||
error: lastError,
|
||||
errorType
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if M3U8 playlist is valid and can be parsed
|
||||
*/
|
||||
async checkM3u8Content(url: string): Promise<{ valid: boolean; error?: string }> {
|
||||
try {
|
||||
const response = await axios.get(url, {
|
||||
timeout: this.config.timeout,
|
||||
headers: {
|
||||
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
|
||||
},
|
||||
maxRedirects: 5
|
||||
})
|
||||
|
||||
const content = response.data as string
|
||||
|
||||
// Check for M3U8 header
|
||||
if (!content.includes('#EXTM3U')) {
|
||||
return { valid: false, error: 'Not a valid M3U8 file' }
|
||||
}
|
||||
|
||||
// Check for segments or variants
|
||||
const hasContent = content.includes('#EXTINF') || content.includes('#EXT-X-STREAM-INF')
|
||||
|
||||
if (!hasContent) {
|
||||
return { valid: false, error: 'M3U8 file has no content' }
|
||||
}
|
||||
|
||||
return { valid: true }
|
||||
} catch (error) {
|
||||
const axiosError = error as AxiosError
|
||||
return { valid: false, error: axiosError.message }
|
||||
}
|
||||
}
|
||||
|
||||
private delay(ms: number): Promise<void> {
|
||||
return new Promise(resolve => setTimeout(resolve, ms))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import axios from 'axios'
|
||||
|
||||
export interface TelegramConfig {
|
||||
botToken: string
|
||||
chatId: string
|
||||
}
|
||||
|
||||
export class TelegramBot {
|
||||
private config: TelegramConfig
|
||||
private baseUrl: string
|
||||
|
||||
constructor(config: TelegramConfig) {
|
||||
this.config = config
|
||||
this.baseUrl = `https://api.telegram.org/bot${config.botToken}`
|
||||
}
|
||||
|
||||
updateConfig(config: TelegramConfig): void {
|
||||
this.config = config
|
||||
this.baseUrl = `https://api.telegram.org/bot${config.botToken}`
|
||||
}
|
||||
|
||||
async sendMessage(text: string, parseMode: 'Markdown' | 'HTML' = 'Markdown'): Promise<boolean> {
|
||||
if (!this.config.botToken || !this.config.chatId) {
|
||||
console.warn('Telegram bot not configured')
|
||||
return false
|
||||
}
|
||||
|
||||
try {
|
||||
await axios.post(`${this.baseUrl}/sendMessage`, {
|
||||
chat_id: this.config.chatId,
|
||||
text,
|
||||
parse_mode: parseMode,
|
||||
disable_web_page_preview: true
|
||||
}, {
|
||||
timeout: 10000
|
||||
})
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('Failed to send Telegram message:', error)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
async sendAlert(title: string, message: string): Promise<boolean> {
|
||||
const formattedMessage = `*${this.escapeMarkdown(title)}*\n\n${this.escapeMarkdown(message)}`
|
||||
return this.sendMessage(formattedMessage)
|
||||
}
|
||||
|
||||
async testConnection(): Promise<{ success: boolean; error?: string }> {
|
||||
if (!this.config.botToken) {
|
||||
return { success: false, error: 'Bot token not configured' }
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.get(`${this.baseUrl}/getMe`, { timeout: 10000 })
|
||||
if (response.data.ok) {
|
||||
return { success: true }
|
||||
}
|
||||
return { success: false, error: 'Invalid bot token' }
|
||||
} catch (error) {
|
||||
return { success: false, error: (error as Error).message }
|
||||
}
|
||||
}
|
||||
|
||||
private escapeMarkdown(text: string): string {
|
||||
return text.replace(/[_*[\]()~`>#+=|{}.!-]/g, '\\$&')
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
import Store from 'electron-store'
|
||||
import { app } from 'electron'
|
||||
import * as path from 'path'
|
||||
import * as fs from 'fs'
|
||||
import type { AppSettings, Channel, ErrorLogEntry } from '../shared/types'
|
||||
|
||||
// Default settings
|
||||
export const defaultSettings: AppSettings = {
|
||||
general: {
|
||||
startMinimized: false,
|
||||
minimizeToTray: true,
|
||||
autoStart: false,
|
||||
language: 'tr',
|
||||
},
|
||||
monitoring: {
|
||||
pingInterval: 30,
|
||||
streamCheckInterval: 60,
|
||||
timeout: 5000,
|
||||
retryCount: 2,
|
||||
},
|
||||
notifications: {
|
||||
enabled: true,
|
||||
windows: { enabled: true },
|
||||
telegram: {
|
||||
enabled: false,
|
||||
botToken: '',
|
||||
chatId: '',
|
||||
},
|
||||
email: {
|
||||
enabled: false,
|
||||
smtpHost: '',
|
||||
smtpPort: 587,
|
||||
smtpUser: '',
|
||||
smtpPass: '',
|
||||
fromEmail: '',
|
||||
toEmail: '',
|
||||
},
|
||||
autoNotify: true,
|
||||
notifyOnPingFail: true,
|
||||
notifyOnStreamError: true,
|
||||
notifyOn404: true,
|
||||
notifyOnConnReset: true,
|
||||
},
|
||||
panel: {
|
||||
apiUrl: '',
|
||||
authToken: '',
|
||||
monitorId: '',
|
||||
enabled: false,
|
||||
},
|
||||
}
|
||||
|
||||
// Check if running in portable mode
|
||||
function isPortableMode(): boolean {
|
||||
// Check for portable marker file next to exe
|
||||
const exePath = app.getPath('exe')
|
||||
const exeDir = path.dirname(exePath)
|
||||
const portableMarker = path.join(exeDir, 'portable.txt')
|
||||
const portableDataDir = path.join(exeDir, 'data')
|
||||
|
||||
// Portable mode if:
|
||||
// 1. portable.txt exists next to exe
|
||||
// 2. OR data folder exists next to exe
|
||||
// 3. OR running from a removable drive (simplified check)
|
||||
if (fs.existsSync(portableMarker) || fs.existsSync(portableDataDir)) {
|
||||
return true
|
||||
}
|
||||
|
||||
// Check if exe name contains "Portable"
|
||||
if (exePath.toLowerCase().includes('portable')) {
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
// Get the data directory for storing config
|
||||
function getDataDirectory(): string {
|
||||
if (isPortableMode()) {
|
||||
const exeDir = path.dirname(app.getPath('exe'))
|
||||
const dataDir = path.join(exeDir, 'data')
|
||||
|
||||
// Create data directory if it doesn't exist
|
||||
if (!fs.existsSync(dataDir)) {
|
||||
fs.mkdirSync(dataDir, { recursive: true })
|
||||
}
|
||||
|
||||
return dataDir
|
||||
}
|
||||
|
||||
// Use default app data location
|
||||
return app.getPath('userData')
|
||||
}
|
||||
|
||||
// Store schema
|
||||
interface StoreSchema {
|
||||
settings: AppSettings
|
||||
channels: Channel[]
|
||||
errorLog: ErrorLogEntry[]
|
||||
windowBounds: {
|
||||
x?: number
|
||||
y?: number
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
}
|
||||
|
||||
// Create store instance
|
||||
let storeInstance: Store<StoreSchema> | null = null
|
||||
|
||||
export function getStore(): Store<StoreSchema> {
|
||||
if (!storeInstance) {
|
||||
const dataDir = getDataDirectory()
|
||||
|
||||
storeInstance = new Store<StoreSchema>({
|
||||
name: 'ip-monitor-config',
|
||||
cwd: dataDir,
|
||||
defaults: {
|
||||
settings: defaultSettings,
|
||||
channels: [],
|
||||
errorLog: [],
|
||||
windowBounds: {
|
||||
width: 1400,
|
||||
height: 900,
|
||||
},
|
||||
},
|
||||
// Enable encryption for sensitive data
|
||||
encryptionKey: 'ip-monitor-v1-key',
|
||||
// Clear invalid config
|
||||
clearInvalidConfig: true,
|
||||
})
|
||||
|
||||
console.log(`[Store] Config location: ${dataDir}`)
|
||||
console.log(`[Store] Portable mode: ${isPortableMode()}`)
|
||||
}
|
||||
|
||||
return storeInstance
|
||||
}
|
||||
|
||||
// Helper functions for common operations
|
||||
export function getSettings(): AppSettings {
|
||||
return getStore().get('settings', defaultSettings)
|
||||
}
|
||||
|
||||
export function saveSettings(settings: AppSettings): void {
|
||||
getStore().set('settings', settings)
|
||||
}
|
||||
|
||||
export function getChannels(): Channel[] {
|
||||
return getStore().get('channels', [])
|
||||
}
|
||||
|
||||
export function saveChannels(channels: Channel[]): void {
|
||||
getStore().set('channels', channels)
|
||||
}
|
||||
|
||||
export function addChannel(channel: Channel): void {
|
||||
const channels = getChannels()
|
||||
channels.push(channel)
|
||||
saveChannels(channels)
|
||||
}
|
||||
|
||||
export function updateChannel(channelId: string, updates: Partial<Channel>): void {
|
||||
const channels = getChannels()
|
||||
const index = channels.findIndex(c => c.id === channelId)
|
||||
if (index !== -1) {
|
||||
channels[index] = { ...channels[index], ...updates }
|
||||
saveChannels(channels)
|
||||
}
|
||||
}
|
||||
|
||||
export function removeChannel(channelId: string): void {
|
||||
const channels = getChannels().filter(c => c.id !== channelId)
|
||||
saveChannels(channels)
|
||||
}
|
||||
|
||||
export function getErrorLog(): ErrorLogEntry[] {
|
||||
return getStore().get('errorLog', [])
|
||||
}
|
||||
|
||||
export function addErrorLog(entry: ErrorLogEntry): void {
|
||||
const log = getErrorLog()
|
||||
log.unshift(entry) // Add to beginning
|
||||
// Keep only last 100 entries
|
||||
if (log.length > 100) {
|
||||
log.length = 100
|
||||
}
|
||||
getStore().set('errorLog', log)
|
||||
}
|
||||
|
||||
export function clearErrorLog(): void {
|
||||
getStore().set('errorLog', [])
|
||||
}
|
||||
|
||||
export function getWindowBounds() {
|
||||
return getStore().get('windowBounds')
|
||||
}
|
||||
|
||||
export function saveWindowBounds(bounds: { x?: number; y?: number; width: number; height: number }): void {
|
||||
getStore().set('windowBounds', bounds)
|
||||
}
|
||||
|
||||
// Export portable mode check
|
||||
export { isPortableMode }
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import { HashRouter, Routes, Route } from 'react-router-dom'
|
||||
import { AnimatePresence } from 'framer-motion'
|
||||
import Layout from './components/Layout'
|
||||
import Dashboard from './pages/Dashboard'
|
||||
import Channels from './pages/Channels'
|
||||
import Monitoring from './pages/Monitoring'
|
||||
import Settings from './pages/Settings'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<HashRouter>
|
||||
<Layout>
|
||||
<AnimatePresence mode="wait">
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/channels" element={<Channels />} />
|
||||
<Route path="/monitoring" element={<Monitoring />} />
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
</Routes>
|
||||
</AnimatePresence>
|
||||
</Layout>
|
||||
</HashRouter>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { ReactNode } from 'react'
|
||||
import Sidebar from './Sidebar'
|
||||
import TitleBar from './TitleBar'
|
||||
|
||||
interface LayoutProps {
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export default function Layout({ children }: LayoutProps) {
|
||||
return (
|
||||
<div className="h-screen w-screen flex flex-col bg-dark-900 overflow-hidden">
|
||||
<TitleBar />
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className="flex-1 overflow-auto p-6">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import { NavLink } from 'react-router-dom'
|
||||
import { motion } from 'framer-motion'
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Tv2,
|
||||
Activity,
|
||||
Settings,
|
||||
Globe
|
||||
} from 'lucide-react'
|
||||
|
||||
const navItems = [
|
||||
{ path: '/', icon: LayoutDashboard, label: 'Dashboard' },
|
||||
{ path: '/channels', icon: Tv2, label: 'Kanallar' },
|
||||
{ path: '/monitoring', icon: Activity, label: 'İzleme' },
|
||||
{ path: '/settings', icon: Settings, label: 'Ayarlar' },
|
||||
]
|
||||
|
||||
export default function Sidebar() {
|
||||
return (
|
||||
<nav className="w-64 bg-dark-800 border-r border-dark-700 flex flex-col">
|
||||
{/* Navigation Items */}
|
||||
<div className="flex-1 py-4 px-3 space-y-1">
|
||||
{navItems.map((item) => (
|
||||
<NavLink
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 group relative ${
|
||||
isActive
|
||||
? 'bg-gradient-to-r from-accent-blue/20 to-accent-purple/10 text-accent-blue'
|
||||
: 'text-dark-300 hover:text-dark-100 hover:bg-dark-700'
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
{isActive && (
|
||||
<motion.div
|
||||
layoutId="sidebar-active"
|
||||
className="absolute left-0 w-1 h-8 bg-accent-blue rounded-r-full"
|
||||
initial={false}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
|
||||
/>
|
||||
)}
|
||||
<item.icon className="w-5 h-5" />
|
||||
<span className="font-medium text-sm">{item.label}</span>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Status Footer */}
|
||||
<div className="p-4 border-t border-dark-700">
|
||||
<div className="flex items-center gap-2 text-xs text-dark-400">
|
||||
<Globe className="w-4 h-4" />
|
||||
<span>Bağlantı durumu</span>
|
||||
<span className="ml-auto flex items-center gap-1">
|
||||
<span className="w-2 h-2 rounded-full bg-accent-green status-online" />
|
||||
Aktif
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import { Minus, Square, X, Radio } from 'lucide-react'
|
||||
|
||||
export default function TitleBar() {
|
||||
const handleMinimize = () => {
|
||||
window.electron?.minimize()
|
||||
}
|
||||
|
||||
const handleMaximize = () => {
|
||||
window.electron?.maximize()
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
window.electron?.close()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-10 bg-dark-800 flex items-center justify-between px-4 titlebar-drag border-b border-dark-700">
|
||||
{/* App Logo & Title */}
|
||||
<div className="flex items-center gap-2 titlebar-no-drag">
|
||||
<div className="w-6 h-6 rounded-lg bg-gradient-to-br from-accent-blue to-accent-purple flex items-center justify-center">
|
||||
<Radio className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<span className="font-display font-semibold text-sm text-dark-100">
|
||||
IP Monitor
|
||||
</span>
|
||||
<span className="text-xs text-dark-400 ml-2">v1.0.0</span>
|
||||
</div>
|
||||
|
||||
{/* Window Controls */}
|
||||
<div className="flex items-center gap-1 titlebar-no-drag">
|
||||
<button
|
||||
onClick={handleMinimize}
|
||||
className="w-8 h-8 flex items-center justify-center rounded hover:bg-dark-600 transition-colors"
|
||||
>
|
||||
<Minus className="w-4 h-4 text-dark-300" />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleMaximize}
|
||||
className="w-8 h-8 flex items-center justify-center rounded hover:bg-dark-600 transition-colors"
|
||||
>
|
||||
<Square className="w-3 h-3 text-dark-300" />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="w-8 h-8 flex items-center justify-center rounded hover:bg-accent-red transition-colors group"
|
||||
>
|
||||
<X className="w-4 h-4 text-dark-300 group-hover:text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,592 @@
|
|||
import { useEffect, useRef, useState, useCallback } from 'react'
|
||||
import Hls from 'hls.js'
|
||||
import {
|
||||
Play,
|
||||
Pause,
|
||||
Volume2,
|
||||
VolumeX,
|
||||
Maximize,
|
||||
Minimize,
|
||||
RefreshCw,
|
||||
X,
|
||||
Tv2,
|
||||
AlertCircle,
|
||||
Bug
|
||||
} from 'lucide-react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
|
||||
interface VideoPlayerProps {
|
||||
url: string
|
||||
title?: string
|
||||
onClose?: () => void
|
||||
autoPlay?: boolean
|
||||
}
|
||||
|
||||
interface DebugInfo {
|
||||
hlsSupported: boolean
|
||||
nativeHlsSupported: boolean
|
||||
url: string
|
||||
videoState: string
|
||||
hlsState: string
|
||||
error: string | null
|
||||
bufferLength: number
|
||||
}
|
||||
|
||||
export default function VideoPlayer({
|
||||
url,
|
||||
title = 'Canlı Yayın',
|
||||
onClose,
|
||||
autoPlay = true
|
||||
}: VideoPlayerProps) {
|
||||
const videoRef = useRef<HTMLVideoElement>(null)
|
||||
const hlsRef = useRef<Hls | null>(null)
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const [isPlaying, setIsPlaying] = useState(false)
|
||||
const [isMuted, setIsMuted] = useState(false)
|
||||
const [isFullscreen, setIsFullscreen] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [showControls, setShowControls] = useState(true)
|
||||
const [volume, setVolume] = useState(1)
|
||||
const [showDebug, setShowDebug] = useState(false)
|
||||
const [debugInfo, setDebugInfo] = useState<DebugInfo>({
|
||||
hlsSupported: Hls.isSupported(),
|
||||
nativeHlsSupported: false,
|
||||
url: url,
|
||||
videoState: 'init',
|
||||
hlsState: 'none',
|
||||
error: null,
|
||||
bufferLength: 0
|
||||
})
|
||||
|
||||
const updateDebug = useCallback((updates: Partial<DebugInfo>) => {
|
||||
setDebugInfo(prev => ({ ...prev, ...updates }))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const video = videoRef.current
|
||||
if (!video) return
|
||||
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
updateDebug({ url, videoState: 'loading', error: null })
|
||||
|
||||
// Check native HLS support
|
||||
const nativeHls = video.canPlayType('application/vnd.apple.mpegurl') !== ''
|
||||
updateDebug({ nativeHlsSupported: nativeHls })
|
||||
|
||||
// Determine stream type
|
||||
const isHlsStream = url.includes('.m3u8')
|
||||
const isTsStream = url.includes('.ts')
|
||||
const isLiveStream = url.includes('/live/')
|
||||
|
||||
console.log('[VideoPlayer] Stream info:', { url, isHlsStream, isTsStream, isLiveStream, hlsSupported: Hls.isSupported(), nativeHls })
|
||||
|
||||
// Cleanup previous HLS instance
|
||||
if (hlsRef.current) {
|
||||
hlsRef.current.destroy()
|
||||
hlsRef.current = null
|
||||
}
|
||||
|
||||
if ((isHlsStream || isLiveStream) && Hls.isSupported()) {
|
||||
// Use HLS.js for m3u8/live streams
|
||||
updateDebug({ hlsState: 'initializing' })
|
||||
|
||||
const hls = new Hls({
|
||||
enableWorker: true,
|
||||
lowLatencyMode: true,
|
||||
backBufferLength: 90,
|
||||
maxBufferLength: 30,
|
||||
maxMaxBufferLength: 60,
|
||||
startLevel: -1, // Auto quality
|
||||
debug: false,
|
||||
xhrSetup: (xhr, urlToLoad) => {
|
||||
// Add headers if needed
|
||||
xhr.withCredentials = false
|
||||
}
|
||||
})
|
||||
|
||||
hlsRef.current = hls
|
||||
|
||||
hls.on(Hls.Events.MEDIA_ATTACHED, () => {
|
||||
console.log('[HLS] Media attached')
|
||||
updateDebug({ hlsState: 'attached' })
|
||||
hls.loadSource(url)
|
||||
})
|
||||
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, (_, data) => {
|
||||
console.log('[HLS] Manifest parsed, levels:', data.levels.length)
|
||||
updateDebug({ hlsState: 'manifest_parsed', videoState: 'ready' })
|
||||
setIsLoading(false)
|
||||
if (autoPlay) {
|
||||
video.play().catch(e => {
|
||||
console.warn('[HLS] Autoplay blocked:', e)
|
||||
setIsPlaying(false)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
hls.on(Hls.Events.MANIFEST_LOADING, () => {
|
||||
updateDebug({ hlsState: 'loading_manifest' })
|
||||
})
|
||||
|
||||
hls.on(Hls.Events.LEVEL_LOADED, (_, data) => {
|
||||
console.log('[HLS] Level loaded, duration:', data.details.totalduration)
|
||||
})
|
||||
|
||||
hls.on(Hls.Events.FRAG_LOADED, () => {
|
||||
updateDebug({ videoState: 'buffering' })
|
||||
})
|
||||
|
||||
hls.on(Hls.Events.BUFFER_APPENDED, () => {
|
||||
if (video.buffered.length > 0) {
|
||||
const bufferEnd = video.buffered.end(video.buffered.length - 1)
|
||||
updateDebug({ bufferLength: bufferEnd - video.currentTime })
|
||||
}
|
||||
})
|
||||
|
||||
hls.on(Hls.Events.ERROR, (_, data) => {
|
||||
console.error('[HLS] Error:', data.type, data.details, data)
|
||||
updateDebug({ hlsState: `error_${data.type}`, error: data.details })
|
||||
|
||||
if (data.fatal) {
|
||||
switch (data.type) {
|
||||
case Hls.ErrorTypes.NETWORK_ERROR:
|
||||
setError(`Ağ hatası: ${data.details}`)
|
||||
// Try to recover
|
||||
setTimeout(() => {
|
||||
console.log('[HLS] Attempting recovery from network error')
|
||||
hls.startLoad()
|
||||
}, 2000)
|
||||
break
|
||||
case Hls.ErrorTypes.MEDIA_ERROR:
|
||||
setError(`Medya hatası: ${data.details}`)
|
||||
console.log('[HLS] Attempting recovery from media error')
|
||||
hls.recoverMediaError()
|
||||
break
|
||||
default:
|
||||
setError(`Stream yüklenemedi: ${data.details}`)
|
||||
break
|
||||
}
|
||||
setIsLoading(false)
|
||||
}
|
||||
})
|
||||
|
||||
hls.attachMedia(video)
|
||||
|
||||
} else if (nativeHls && isHlsStream) {
|
||||
// Native HLS support (Safari)
|
||||
console.log('[VideoPlayer] Using native HLS')
|
||||
updateDebug({ hlsState: 'native' })
|
||||
video.src = url
|
||||
|
||||
video.addEventListener('loadedmetadata', () => {
|
||||
setIsLoading(false)
|
||||
updateDebug({ videoState: 'ready' })
|
||||
if (autoPlay) video.play().catch(() => setIsPlaying(false))
|
||||
})
|
||||
|
||||
} else {
|
||||
// Direct source (ts, mp4, etc.)
|
||||
console.log('[VideoPlayer] Using direct source')
|
||||
updateDebug({ hlsState: 'direct' })
|
||||
video.src = url
|
||||
|
||||
const handleCanPlay = () => {
|
||||
console.log('[Video] Can play')
|
||||
setIsLoading(false)
|
||||
updateDebug({ videoState: 'ready' })
|
||||
if (autoPlay) {
|
||||
video.play().catch(e => {
|
||||
console.warn('[Video] Autoplay blocked:', e)
|
||||
setIsPlaying(false)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleError = (e: Event) => {
|
||||
const videoError = video.error
|
||||
console.error('[Video] Error:', videoError)
|
||||
let errorMsg = 'Video yüklenemedi'
|
||||
|
||||
if (videoError) {
|
||||
switch (videoError.code) {
|
||||
case MediaError.MEDIA_ERR_ABORTED:
|
||||
errorMsg = 'Video yüklemesi iptal edildi'
|
||||
break
|
||||
case MediaError.MEDIA_ERR_NETWORK:
|
||||
errorMsg = 'Ağ hatası - Video indirilemedi'
|
||||
break
|
||||
case MediaError.MEDIA_ERR_DECODE:
|
||||
errorMsg = 'Codec hatası - Video çözümlenemedi'
|
||||
break
|
||||
case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
|
||||
errorMsg = 'Format desteklenmiyor veya CORS hatası'
|
||||
break
|
||||
}
|
||||
if (videoError.message) {
|
||||
errorMsg += `: ${videoError.message}`
|
||||
}
|
||||
}
|
||||
|
||||
setError(errorMsg)
|
||||
updateDebug({ videoState: 'error', error: errorMsg })
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
video.addEventListener('canplay', handleCanPlay)
|
||||
video.addEventListener('error', handleError)
|
||||
|
||||
return () => {
|
||||
video.removeEventListener('canplay', handleCanPlay)
|
||||
video.removeEventListener('error', handleError)
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (hlsRef.current) {
|
||||
hlsRef.current.destroy()
|
||||
hlsRef.current = null
|
||||
}
|
||||
}
|
||||
}, [url, autoPlay, updateDebug])
|
||||
|
||||
// Video event handlers
|
||||
useEffect(() => {
|
||||
const video = videoRef.current
|
||||
if (!video) return
|
||||
|
||||
const handlePlay = () => {
|
||||
setIsPlaying(true)
|
||||
updateDebug({ videoState: 'playing' })
|
||||
}
|
||||
const handlePause = () => {
|
||||
setIsPlaying(false)
|
||||
updateDebug({ videoState: 'paused' })
|
||||
}
|
||||
const handleVolumeChange = () => {
|
||||
setVolume(video.volume)
|
||||
setIsMuted(video.muted)
|
||||
}
|
||||
const handleWaiting = () => {
|
||||
updateDebug({ videoState: 'buffering' })
|
||||
}
|
||||
|
||||
video.addEventListener('play', handlePlay)
|
||||
video.addEventListener('pause', handlePause)
|
||||
video.addEventListener('volumechange', handleVolumeChange)
|
||||
video.addEventListener('waiting', handleWaiting)
|
||||
|
||||
return () => {
|
||||
video.removeEventListener('play', handlePlay)
|
||||
video.removeEventListener('pause', handlePause)
|
||||
video.removeEventListener('volumechange', handleVolumeChange)
|
||||
video.removeEventListener('waiting', handleWaiting)
|
||||
}
|
||||
}, [updateDebug])
|
||||
|
||||
// Auto-hide controls
|
||||
useEffect(() => {
|
||||
let timeout: NodeJS.Timeout
|
||||
|
||||
const handleMouseMove = () => {
|
||||
setShowControls(true)
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(() => setShowControls(false), 3000)
|
||||
}
|
||||
|
||||
const container = containerRef.current
|
||||
if (container) {
|
||||
container.addEventListener('mousemove', handleMouseMove)
|
||||
container.addEventListener('mouseenter', handleMouseMove)
|
||||
}
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeout)
|
||||
if (container) {
|
||||
container.removeEventListener('mousemove', handleMouseMove)
|
||||
container.removeEventListener('mouseenter', handleMouseMove)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
const togglePlay = () => {
|
||||
const video = videoRef.current
|
||||
if (!video) return
|
||||
|
||||
if (isPlaying) {
|
||||
video.pause()
|
||||
} else {
|
||||
video.play().catch(e => console.error('Play failed:', e))
|
||||
}
|
||||
}
|
||||
|
||||
const toggleMute = () => {
|
||||
const video = videoRef.current
|
||||
if (!video) return
|
||||
video.muted = !video.muted
|
||||
}
|
||||
|
||||
const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const video = videoRef.current
|
||||
if (!video) return
|
||||
const newVolume = parseFloat(e.target.value)
|
||||
video.volume = newVolume
|
||||
video.muted = newVolume === 0
|
||||
}
|
||||
|
||||
const toggleFullscreen = () => {
|
||||
const container = containerRef.current
|
||||
if (!container) return
|
||||
|
||||
if (!document.fullscreenElement) {
|
||||
container.requestFullscreen()
|
||||
setIsFullscreen(true)
|
||||
} else {
|
||||
document.exitFullscreen()
|
||||
setIsFullscreen(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleReload = () => {
|
||||
const video = videoRef.current
|
||||
if (!video) return
|
||||
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
|
||||
if (hlsRef.current) {
|
||||
hlsRef.current.destroy()
|
||||
|
||||
const hls = new Hls({
|
||||
enableWorker: true,
|
||||
lowLatencyMode: true,
|
||||
})
|
||||
hlsRef.current = hls
|
||||
hls.loadSource(url)
|
||||
hls.attachMedia(video)
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
setIsLoading(false)
|
||||
video.play()
|
||||
})
|
||||
} else {
|
||||
video.src = url
|
||||
video.load()
|
||||
video.play().catch(() => {})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={containerRef}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
className="relative bg-black rounded-xl overflow-hidden group"
|
||||
style={{ aspectRatio: '16/9' }}
|
||||
>
|
||||
{/* Video Element */}
|
||||
<video
|
||||
ref={videoRef}
|
||||
className="w-full h-full object-contain"
|
||||
playsInline
|
||||
crossOrigin="anonymous"
|
||||
onClick={togglePlay}
|
||||
/>
|
||||
|
||||
{/* Loading Overlay */}
|
||||
<AnimatePresence>
|
||||
{isLoading && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="absolute inset-0 bg-dark-900/80 flex items-center justify-center"
|
||||
>
|
||||
<div className="text-center">
|
||||
<RefreshCw className="w-12 h-12 text-accent-blue spinner mx-auto" />
|
||||
<p className="text-dark-300 mt-3">Yayın yükleniyor...</p>
|
||||
<p className="text-dark-500 text-xs mt-1">{debugInfo.hlsState}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Error Overlay */}
|
||||
<AnimatePresence>
|
||||
{error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="absolute inset-0 bg-dark-900/90 flex items-center justify-center"
|
||||
>
|
||||
<div className="text-center max-w-md px-4">
|
||||
<AlertCircle className="w-12 h-12 text-accent-red mx-auto" />
|
||||
<p className="text-accent-red mt-3 font-medium">{error}</p>
|
||||
<p className="text-dark-400 text-xs mt-2 break-all">{url}</p>
|
||||
<div className="flex gap-2 justify-center mt-4">
|
||||
<button
|
||||
onClick={handleReload}
|
||||
className="px-4 py-2 bg-accent-blue text-white rounded-lg hover:bg-accent-blue/80 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
Tekrar Dene
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowDebug(!showDebug)}
|
||||
className="px-4 py-2 bg-dark-700 text-dark-300 rounded-lg hover:bg-dark-600 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Bug className="w-4 h-4" />
|
||||
Debug
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Debug Panel */}
|
||||
<AnimatePresence>
|
||||
{showDebug && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 20 }}
|
||||
className="absolute top-12 right-4 bg-dark-900/95 border border-dark-600 rounded-lg p-4 text-xs font-mono max-w-xs z-50"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-accent-blue font-semibold">Debug Info</span>
|
||||
<button onClick={() => setShowDebug(false)} className="text-dark-400 hover:text-white">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-1 text-dark-300">
|
||||
<p><span className="text-dark-500">HLS.js:</span> {debugInfo.hlsSupported ? '✅' : '❌'}</p>
|
||||
<p><span className="text-dark-500">Native HLS:</span> {debugInfo.nativeHlsSupported ? '✅' : '❌'}</p>
|
||||
<p><span className="text-dark-500">State:</span> {debugInfo.hlsState}</p>
|
||||
<p><span className="text-dark-500">Video:</span> {debugInfo.videoState}</p>
|
||||
<p><span className="text-dark-500">Buffer:</span> {debugInfo.bufferLength.toFixed(1)}s</p>
|
||||
{debugInfo.error && (
|
||||
<p className="text-accent-red"><span className="text-dark-500">Error:</span> {debugInfo.error}</p>
|
||||
)}
|
||||
<p className="text-dark-500 break-all mt-2">URL: {debugInfo.url.substring(0, 50)}...</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Controls Overlay */}
|
||||
<AnimatePresence>
|
||||
{showControls && !isLoading && !error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-black/40"
|
||||
>
|
||||
{/* Top Bar */}
|
||||
<div className="absolute top-0 left-0 right-0 p-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Tv2 className="w-5 h-5 text-accent-red" />
|
||||
<span className="text-white font-medium">{title}</span>
|
||||
<span className="px-2 py-0.5 bg-accent-red text-white text-xs rounded">CANLI</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setShowDebug(!showDebug)}
|
||||
className={`p-2 rounded-lg transition-colors ${showDebug ? 'bg-accent-blue/30 text-accent-blue' : 'bg-dark-800/50 hover:bg-dark-700 text-white'}`}
|
||||
title="Debug Paneli"
|
||||
>
|
||||
<Bug className="w-4 h-4" />
|
||||
</button>
|
||||
{onClose && (
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 rounded-lg bg-dark-800/50 hover:bg-dark-700 transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5 text-white" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Center Play Button */}
|
||||
{!isPlaying && (
|
||||
<button
|
||||
onClick={togglePlay}
|
||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-20 h-20 rounded-full bg-accent-blue/80 hover:bg-accent-blue flex items-center justify-center transition-colors"
|
||||
>
|
||||
<Play className="w-10 h-10 text-white ml-1" fill="white" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Bottom Controls */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Play/Pause */}
|
||||
<button
|
||||
onClick={togglePlay}
|
||||
className="p-2 rounded-lg bg-dark-800/50 hover:bg-dark-700 transition-colors"
|
||||
>
|
||||
{isPlaying ? (
|
||||
<Pause className="w-5 h-5 text-white" />
|
||||
) : (
|
||||
<Play className="w-5 h-5 text-white" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Volume */}
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={toggleMute}
|
||||
className="p-2 rounded-lg bg-dark-800/50 hover:bg-dark-700 transition-colors"
|
||||
>
|
||||
{isMuted || volume === 0 ? (
|
||||
<VolumeX className="w-5 h-5 text-white" />
|
||||
) : (
|
||||
<Volume2 className="w-5 h-5 text-white" />
|
||||
)}
|
||||
</button>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.1"
|
||||
value={isMuted ? 0 : volume}
|
||||
onChange={handleVolumeChange}
|
||||
className="w-20 h-1 bg-dark-600 rounded-full appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Reload */}
|
||||
<button
|
||||
onClick={handleReload}
|
||||
className="p-2 rounded-lg bg-dark-800/50 hover:bg-dark-700 transition-colors"
|
||||
title="Yeniden Yükle"
|
||||
>
|
||||
<RefreshCw className="w-5 h-5 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Fullscreen */}
|
||||
<button
|
||||
onClick={toggleFullscreen}
|
||||
className="p-2 rounded-lg bg-dark-800/50 hover:bg-dark-700 transition-colors"
|
||||
>
|
||||
{isFullscreen ? (
|
||||
<Minimize className="w-5 h-5 text-white" />
|
||||
) : (
|
||||
<Maximize className="w-5 h-5 text-white" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App'
|
||||
import './styles/globals.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
|
||||
|
|
@ -0,0 +1,501 @@
|
|||
import { useState, useEffect } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import {
|
||||
Tv2,
|
||||
Plus,
|
||||
Search,
|
||||
Filter,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
AlertCircle,
|
||||
Loader2,
|
||||
Trash2,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Link2,
|
||||
FolderOpen,
|
||||
Play
|
||||
} from 'lucide-react'
|
||||
import { useStore } from '../store/useStore'
|
||||
import VideoPlayer from '../components/VideoPlayer'
|
||||
import type { Channel, ChannelStatus } from '@shared/types'
|
||||
|
||||
// Status Badge Component
|
||||
function StatusBadge({ status }: { status: ChannelStatus }) {
|
||||
const config = {
|
||||
online: { icon: CheckCircle2, text: 'Çevrimiçi', color: 'text-accent-green bg-accent-green/10' },
|
||||
offline: { icon: XCircle, text: 'Çevrimdışı', color: 'text-accent-red bg-accent-red/10' },
|
||||
error: { icon: AlertCircle, text: 'Hata', color: 'text-accent-orange bg-accent-orange/10' },
|
||||
checking: { icon: Loader2, text: 'Kontrol', color: 'text-accent-blue bg-accent-blue/10' },
|
||||
unknown: { icon: AlertCircle, text: 'Bilinmiyor', color: 'text-dark-400 bg-dark-600' },
|
||||
}
|
||||
|
||||
const { icon: Icon, text, color } = config[status]
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium ${color}`}>
|
||||
<Icon className={`w-3 h-3 ${status === 'checking' ? 'spinner' : ''}`} />
|
||||
{text}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
// Channel Row Component
|
||||
function ChannelRow({
|
||||
channel,
|
||||
onToggleMonitor,
|
||||
onWatch
|
||||
}: {
|
||||
channel: Channel
|
||||
onToggleMonitor: (id: string, monitored: boolean) => void
|
||||
onWatch: (channel: Channel) => void
|
||||
}) {
|
||||
return (
|
||||
<motion.div
|
||||
layout
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="bg-dark-700/50 border border-dark-600 rounded-lg p-4 hover:bg-dark-700 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Logo/Icon */}
|
||||
<div className="w-10 h-10 rounded-lg bg-dark-600 flex items-center justify-center overflow-hidden shrink-0">
|
||||
{channel.logo ? (
|
||||
<img src={channel.logo} alt="" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<Tv2 className="w-5 h-5 text-dark-400" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-medium text-dark-100 truncate">{channel.name}</h3>
|
||||
{channel.group && (
|
||||
<span className="text-xs bg-dark-600 text-dark-300 px-2 py-0.5 rounded">
|
||||
{channel.group}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-dark-400 truncate mt-1 font-mono">{channel.url}</p>
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
<StatusBadge status={channel.status} />
|
||||
|
||||
{/* Latency */}
|
||||
{channel.latency && (
|
||||
<span className="text-xs text-dark-400 font-mono w-16 text-right">
|
||||
{channel.latency}ms
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Watch Button */}
|
||||
<button
|
||||
onClick={() => onWatch(channel)}
|
||||
className="p-2 rounded-lg bg-accent-green/20 text-accent-green hover:bg-accent-green/30 transition-colors"
|
||||
title="Canlı İzle"
|
||||
>
|
||||
<Play className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
{/* Monitor Toggle */}
|
||||
<button
|
||||
onClick={() => onToggleMonitor(channel.id, !channel.isMonitored)}
|
||||
className={`p-2 rounded-lg transition-colors ${
|
||||
channel.isMonitored
|
||||
? 'bg-accent-blue/20 text-accent-blue hover:bg-accent-blue/30'
|
||||
: 'bg-dark-600 text-dark-400 hover:bg-dark-500'
|
||||
}`}
|
||||
title={channel.isMonitored ? 'İzlemeyi durdur' : 'İzlemeye başla'}
|
||||
>
|
||||
{channel.isMonitored ? <Eye className="w-4 h-4" /> : <EyeOff className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{channel.lastError && (
|
||||
<div className="mt-3 p-2 bg-accent-red/10 border border-accent-red/20 rounded-md">
|
||||
<p className="text-xs text-accent-red">{channel.lastError}</p>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
// Add Playlist/URL Modal
|
||||
function AddPlaylistModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
onAdd,
|
||||
onAddSingle
|
||||
}: {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onAdd: (url: string) => void
|
||||
onAddSingle: (name: string, url: string) => void
|
||||
}) {
|
||||
const [url, setUrl] = useState('')
|
||||
const [channelName, setChannelName] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [mode, setMode] = useState<'playlist' | 'single'>('playlist')
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!url.trim()) return
|
||||
|
||||
setLoading(true)
|
||||
if (mode === 'playlist') {
|
||||
await onAdd(url.trim())
|
||||
} else {
|
||||
await onAddSingle(channelName.trim() || 'Yeni Kanal', url.trim())
|
||||
}
|
||||
setLoading(false)
|
||||
setUrl('')
|
||||
setChannelName('')
|
||||
onClose()
|
||||
}
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
|
||||
onClick={onClose}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.95, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.95, opacity: 0 }}
|
||||
className="bg-dark-800 border border-dark-600 rounded-xl p-6 w-full max-w-lg"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h2 className="text-lg font-semibold text-dark-100 mb-4 flex items-center gap-2">
|
||||
<Link2 className="w-5 h-5 text-accent-blue" />
|
||||
Kanal/Playlist Ekle
|
||||
</h2>
|
||||
|
||||
{/* Mode Tabs */}
|
||||
<div className="flex gap-2 mb-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMode('playlist')}
|
||||
className={`flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
mode === 'playlist'
|
||||
? 'bg-accent-blue text-white'
|
||||
: 'bg-dark-700 text-dark-300 hover:bg-dark-600'
|
||||
}`}
|
||||
>
|
||||
M3U8 Playlist
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMode('single')}
|
||||
className={`flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
mode === 'single'
|
||||
? 'bg-accent-blue text-white'
|
||||
: 'bg-dark-700 text-dark-300 hover:bg-dark-600'
|
||||
}`}
|
||||
>
|
||||
Tek URL
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{mode === 'single' && (
|
||||
<div>
|
||||
<label className="block text-sm text-dark-300 mb-2">Kanal Adı</label>
|
||||
<input
|
||||
type="text"
|
||||
value={channelName}
|
||||
onChange={(e) => setChannelName(e.target.value)}
|
||||
placeholder="Örn: TRT 1 HD"
|
||||
className="w-full px-4 py-3 bg-dark-700 border border-dark-600 rounded-lg text-dark-100 placeholder-dark-500 focus:outline-none focus:border-accent-blue"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-dark-300 mb-2">
|
||||
{mode === 'playlist' ? 'Playlist URL' : 'Stream URL'}
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
placeholder={mode === 'playlist'
|
||||
? "https://example.com/playlist.m3u8"
|
||||
: "http://example.com:8080/live/stream.ts"
|
||||
}
|
||||
className="w-full px-4 py-3 bg-dark-700 border border-dark-600 rounded-lg text-dark-100 placeholder-dark-500 focus:outline-none focus:border-accent-blue"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-dark-300 hover:text-dark-100 transition-colors"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!url.trim() || loading}
|
||||
className="px-4 py-2 bg-accent-blue text-white rounded-lg hover:bg-accent-blue/80 transition-colors disabled:opacity-50 flex items-center gap-2"
|
||||
>
|
||||
{loading && <Loader2 className="w-4 h-4 spinner" />}
|
||||
{mode === 'playlist' ? 'Playlist Yükle' : 'Kanal Ekle'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Channels() {
|
||||
const { channels, setChannels, channelsLoading, setChannelsLoading } = useStore()
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [filterStatus, setFilterStatus] = useState<ChannelStatus | 'all'>('all')
|
||||
const [showMonitoredOnly, setShowMonitoredOnly] = useState(false)
|
||||
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||
const [watchingChannel, setWatchingChannel] = useState<Channel | null>(null)
|
||||
|
||||
// Load channels on mount
|
||||
useEffect(() => {
|
||||
const loadChannels = async () => {
|
||||
if (window.electron) {
|
||||
setChannelsLoading(true)
|
||||
try {
|
||||
const loadedChannels = await window.electron.getChannels()
|
||||
setChannels(loadedChannels)
|
||||
} catch (error) {
|
||||
console.error('Failed to load channels:', error)
|
||||
} finally {
|
||||
setChannelsLoading(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
loadChannels()
|
||||
}, [])
|
||||
|
||||
const handleAddPlaylist = async (url: string) => {
|
||||
if (window.electron) {
|
||||
setChannelsLoading(true)
|
||||
try {
|
||||
const newChannels = await window.electron.parseM3u8(url)
|
||||
setChannels([...channels, ...newChannels])
|
||||
} catch (error) {
|
||||
console.error('Failed to parse playlist:', error)
|
||||
} finally {
|
||||
setChannelsLoading(false)
|
||||
}
|
||||
} else {
|
||||
// Demo data
|
||||
const demoChannels: Channel[] = [
|
||||
{ id: '1', name: 'TRT 1 HD', url: 'https://tv-trt1.medya.trt.com.tr/master.m3u8', group: 'Ulusal', isMonitored: true, status: 'online', latency: 45 },
|
||||
{ id: '2', name: 'Show TV', url: 'https://ciner-live.daioncdn.net/showtv/showtv.m3u8', group: 'Ulusal', isMonitored: true, status: 'online', latency: 67 },
|
||||
{ id: '3', name: 'ATV', url: 'https://trkvz-live.ercdn.net/atvhd/atvhd.m3u8', group: 'Ulusal', isMonitored: false, status: 'unknown' },
|
||||
{ id: '4', name: 'TV8', url: 'https://tv8-live.ercdn.net/tv8/tv8.m3u8', group: 'Ulusal', isMonitored: true, status: 'error', lastError: 'ERR_CONNECTION_RESET' },
|
||||
{ id: '5', name: 'CNN Türk', url: 'https://cnn.com/live.m3u8', group: 'Haber', isMonitored: true, status: 'offline' },
|
||||
]
|
||||
setChannels([...channels, ...demoChannels])
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddSingleChannel = async (name: string, url: string) => {
|
||||
const newChannel: Channel = {
|
||||
id: Date.now().toString(),
|
||||
name,
|
||||
url,
|
||||
group: 'Manuel',
|
||||
isMonitored: true,
|
||||
status: 'unknown'
|
||||
}
|
||||
setChannels([...channels, newChannel])
|
||||
}
|
||||
|
||||
const handleToggleMonitor = async (channelId: string, monitored: boolean) => {
|
||||
if (window.electron) {
|
||||
await window.electron.setChannelMonitored(channelId, monitored)
|
||||
}
|
||||
setChannels(
|
||||
channels.map((c) =>
|
||||
c.id === channelId ? { ...c, isMonitored: monitored } : c
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
const handleWatch = (channel: Channel) => {
|
||||
setWatchingChannel(channel)
|
||||
}
|
||||
|
||||
// Filter channels
|
||||
const filteredChannels = channels.filter((channel) => {
|
||||
const matchesSearch = channel.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
channel.url.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
const matchesStatus = filterStatus === 'all' || channel.status === filterStatus
|
||||
const matchesMonitored = !showMonitoredOnly || channel.isMonitored
|
||||
return matchesSearch && matchesStatus && matchesMonitored
|
||||
})
|
||||
|
||||
// Group channels by group
|
||||
const groupedChannels = filteredChannels.reduce((acc, channel) => {
|
||||
const group = channel.group || 'Diğer'
|
||||
if (!acc[group]) acc[group] = []
|
||||
acc[group].push(channel)
|
||||
return acc
|
||||
}, {} as Record<string, Channel[]>)
|
||||
|
||||
const monitoredCount = channels.filter(c => c.isMonitored).length
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-display font-bold text-dark-100">Kanal Yönetimi</h1>
|
||||
<p className="text-dark-400 text-sm mt-1">
|
||||
{channels.length} kanal · {monitoredCount} izleniyor
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-accent-blue text-white rounded-lg hover:bg-accent-blue/80 transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Playlist Ekle
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-dark-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Kanal ara..."
|
||||
className="w-full pl-10 pr-4 py-2 bg-dark-700 border border-dark-600 rounded-lg text-dark-100 placeholder-dark-500 focus:outline-none focus:border-accent-blue"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<select
|
||||
value={filterStatus}
|
||||
onChange={(e) => setFilterStatus(e.target.value as ChannelStatus | 'all')}
|
||||
className="px-4 py-2 bg-dark-700 border border-dark-600 rounded-lg text-dark-100 focus:outline-none focus:border-accent-blue"
|
||||
>
|
||||
<option value="all">Tüm Durumlar</option>
|
||||
<option value="online">Çevrimiçi</option>
|
||||
<option value="offline">Çevrimdışı</option>
|
||||
<option value="error">Hatalı</option>
|
||||
<option value="unknown">Bilinmiyor</option>
|
||||
</select>
|
||||
|
||||
<button
|
||||
onClick={() => setShowMonitoredOnly(!showMonitoredOnly)}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg border transition-colors ${
|
||||
showMonitoredOnly
|
||||
? 'bg-accent-blue/20 border-accent-blue/30 text-accent-blue'
|
||||
: 'bg-dark-700 border-dark-600 text-dark-300 hover:text-dark-100'
|
||||
}`}
|
||||
>
|
||||
<Eye className="w-4 h-4" />
|
||||
Sadece İzlenen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Channel List */}
|
||||
{channelsLoading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<Loader2 className="w-8 h-8 text-accent-blue spinner" />
|
||||
</div>
|
||||
) : filteredChannels.length === 0 ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="flex flex-col items-center justify-center py-20 text-dark-400"
|
||||
>
|
||||
<FolderOpen className="w-16 h-16 mb-4 text-dark-600" />
|
||||
<p className="text-lg">Henüz kanal eklenmemiş</p>
|
||||
<p className="text-sm mt-2">M3U8 playlist URL'i ekleyerek başlayın</p>
|
||||
</motion.div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{Object.entries(groupedChannels).map(([group, groupChannels]) => (
|
||||
<div key={group}>
|
||||
<h3 className="text-sm font-medium text-dark-400 mb-3 flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-accent-purple" />
|
||||
{group}
|
||||
<span className="text-dark-500">({groupChannels.length})</span>
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{groupChannels.map((channel) => (
|
||||
<ChannelRow
|
||||
key={channel.id}
|
||||
channel={channel}
|
||||
onToggleMonitor={handleToggleMonitor}
|
||||
onWatch={handleWatch}
|
||||
/>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add Playlist Modal */}
|
||||
<AnimatePresence>
|
||||
{isModalOpen && (
|
||||
<AddPlaylistModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
onAdd={handleAddPlaylist}
|
||||
onAddSingle={handleAddSingleChannel}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Video Player Modal */}
|
||||
<AnimatePresence>
|
||||
{watchingChannel && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 p-8"
|
||||
onClick={() => setWatchingChannel(null)}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.9, opacity: 0 }}
|
||||
className="w-full max-w-5xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<VideoPlayer
|
||||
url={watchingChannel.url}
|
||||
title={watchingChannel.name}
|
||||
onClose={() => setWatchingChannel(null)}
|
||||
autoPlay={true}
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,294 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import {
|
||||
Globe,
|
||||
MapPin,
|
||||
Wifi,
|
||||
Tv2,
|
||||
AlertTriangle,
|
||||
CheckCircle2,
|
||||
RefreshCw,
|
||||
Activity,
|
||||
Clock,
|
||||
Bell
|
||||
} from 'lucide-react'
|
||||
import { useStore } from '../store/useStore'
|
||||
import type { IpInfo, ErrorLogEntry } from '@shared/types'
|
||||
|
||||
// Status Card Component
|
||||
function StatCard({
|
||||
icon: Icon,
|
||||
label,
|
||||
value,
|
||||
subValue,
|
||||
color = 'blue',
|
||||
delay = 0
|
||||
}: {
|
||||
icon: React.ElementType
|
||||
label: string
|
||||
value: string | number
|
||||
subValue?: string
|
||||
color?: 'blue' | 'green' | 'red' | 'yellow' | 'purple'
|
||||
delay?: number
|
||||
}) {
|
||||
const colorClasses = {
|
||||
blue: 'from-accent-blue/20 to-accent-blue/5 border-accent-blue/30 text-accent-blue',
|
||||
green: 'from-accent-green/20 to-accent-green/5 border-accent-green/30 text-accent-green',
|
||||
red: 'from-accent-red/20 to-accent-red/5 border-accent-red/30 text-accent-red',
|
||||
yellow: 'from-accent-yellow/20 to-accent-yellow/5 border-accent-yellow/30 text-accent-yellow',
|
||||
purple: 'from-accent-purple/20 to-accent-purple/5 border-accent-purple/30 text-accent-purple',
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay, duration: 0.3 }}
|
||||
className={`bg-gradient-to-br ${colorClasses[color]} border rounded-xl p-5 card-hover`}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<p className="text-dark-400 text-xs uppercase tracking-wider mb-1">{label}</p>
|
||||
<p className="text-2xl font-bold text-dark-100">{value}</p>
|
||||
{subValue && <p className="text-xs text-dark-400 mt-1">{subValue}</p>}
|
||||
</div>
|
||||
<div className={`p-2 rounded-lg bg-dark-800/50`}>
|
||||
<Icon className="w-5 h-5" />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
// IP Info Card Component
|
||||
function IpInfoCard({ ipInfo, loading, onRefresh }: {
|
||||
ipInfo: IpInfo | null
|
||||
loading: boolean
|
||||
onRefresh: () => void
|
||||
}) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="bg-dark-800 border border-dark-700 rounded-xl p-6 col-span-2"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-dark-100 flex items-center gap-2">
|
||||
<Globe className="w-5 h-5 text-accent-blue" />
|
||||
IP Bilgileri
|
||||
</h2>
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={loading}
|
||||
className="p-2 rounded-lg bg-dark-700 hover:bg-dark-600 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 text-dark-300 ${loading ? 'spinner' : ''}`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="w-8 h-8 border-2 border-accent-blue border-t-transparent rounded-full spinner" />
|
||||
</div>
|
||||
) : ipInfo ? (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-dark-700/50 rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 text-dark-400 text-xs mb-2">
|
||||
<Wifi className="w-4 h-4" />
|
||||
IP Adresi
|
||||
</div>
|
||||
<p className="text-xl font-mono font-bold text-accent-cyan">{ipInfo.ip}</p>
|
||||
</div>
|
||||
<div className="bg-dark-700/50 rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 text-dark-400 text-xs mb-2">
|
||||
<MapPin className="w-4 h-4" />
|
||||
Konum
|
||||
</div>
|
||||
<p className="text-xl font-semibold text-dark-100">
|
||||
{ipInfo.country}
|
||||
<span className="ml-2 text-sm bg-dark-600 px-2 py-0.5 rounded">
|
||||
{ipInfo.countryCode}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
{ipInfo.city && (
|
||||
<div className="bg-dark-700/50 rounded-lg p-4">
|
||||
<div className="text-dark-400 text-xs mb-2">Şehir</div>
|
||||
<p className="text-lg font-semibold text-dark-100">{ipInfo.city}</p>
|
||||
</div>
|
||||
)}
|
||||
{ipInfo.isp && (
|
||||
<div className="bg-dark-700/50 rounded-lg p-4">
|
||||
<div className="text-dark-400 text-xs mb-2">ISP</div>
|
||||
<p className="text-lg font-semibold text-dark-100 truncate">{ipInfo.isp}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-dark-400">
|
||||
IP bilgisi alınamadı
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
// Recent Errors Component
|
||||
function RecentErrors({ errors }: { errors: ErrorLogEntry[] }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="bg-dark-800 border border-dark-700 rounded-xl p-6"
|
||||
>
|
||||
<h2 className="text-lg font-semibold text-dark-100 flex items-center gap-2 mb-4">
|
||||
<AlertTriangle className="w-5 h-5 text-accent-red" />
|
||||
Son Hatalar
|
||||
</h2>
|
||||
|
||||
{errors.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-dark-400">
|
||||
<CheckCircle2 className="w-12 h-12 mb-3 text-accent-green" />
|
||||
<p>Hata bulunamadı</p>
|
||||
<p className="text-xs mt-1">Tüm sistemler normal çalışıyor</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2 max-h-64 overflow-auto">
|
||||
{errors.slice(0, 5).map((error, index) => (
|
||||
<motion.div
|
||||
key={error.id}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
className="bg-dark-700/50 border border-dark-600 rounded-lg p-3"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-dark-100 truncate">{error.channelName}</p>
|
||||
<p className="text-xs text-accent-red mt-1">{error.errorType}</p>
|
||||
<p className="text-xs text-dark-400 truncate mt-1">{error.errorMessage}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 ml-3">
|
||||
{error.notified && (
|
||||
<Bell className="w-3 h-3 text-accent-green" />
|
||||
)}
|
||||
<span className="text-xs text-dark-500">
|
||||
{new Date(error.timestamp).toLocaleTimeString('tr-TR')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Dashboard() {
|
||||
const {
|
||||
ipInfo,
|
||||
ipLoading,
|
||||
setIpInfo,
|
||||
setIpLoading,
|
||||
channels,
|
||||
errorLog,
|
||||
isMonitoring
|
||||
} = useStore()
|
||||
|
||||
const [lastUpdate, setLastUpdate] = useState<Date>(new Date())
|
||||
|
||||
const fetchIpInfo = async () => {
|
||||
setIpLoading(true)
|
||||
try {
|
||||
if (window.electron) {
|
||||
const info = await window.electron.getIpInfo()
|
||||
setIpInfo(info)
|
||||
} else {
|
||||
// Demo data for development
|
||||
setIpInfo({
|
||||
ip: '185.123.45.67',
|
||||
country: 'Turkey',
|
||||
countryCode: 'TR',
|
||||
city: 'Istanbul',
|
||||
isp: 'Turk Telekom'
|
||||
})
|
||||
}
|
||||
setLastUpdate(new Date())
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch IP info:', error)
|
||||
} finally {
|
||||
setIpLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchIpInfo()
|
||||
}, [])
|
||||
|
||||
const monitoredChannels = channels.filter(c => c.isMonitored)
|
||||
const onlineChannels = channels.filter(c => c.status === 'online')
|
||||
const errorChannels = channels.filter(c => c.status === 'error' || c.status === 'offline')
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-display font-bold text-dark-100">Dashboard</h1>
|
||||
<p className="text-dark-400 text-sm mt-1">
|
||||
Sistem durumu ve özet bilgiler
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-dark-400">
|
||||
<Clock className="w-4 h-4" />
|
||||
Son güncelleme: {lastUpdate.toLocaleTimeString('tr-TR')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
icon={Tv2}
|
||||
label="Toplam Kanal"
|
||||
value={channels.length}
|
||||
subValue={`${monitoredChannels.length} izleniyor`}
|
||||
color="blue"
|
||||
delay={0}
|
||||
/>
|
||||
<StatCard
|
||||
icon={CheckCircle2}
|
||||
label="Çevrimiçi"
|
||||
value={onlineChannels.length}
|
||||
subValue="Aktif yayınlar"
|
||||
color="green"
|
||||
delay={0.1}
|
||||
/>
|
||||
<StatCard
|
||||
icon={AlertTriangle}
|
||||
label="Hatalı"
|
||||
value={errorChannels.length}
|
||||
subValue={`${errorLog.length} log kaydı`}
|
||||
color="red"
|
||||
delay={0.2}
|
||||
/>
|
||||
<StatCard
|
||||
icon={Activity}
|
||||
label="İzleme Durumu"
|
||||
value={isMonitoring ? 'Aktif' : 'Pasif'}
|
||||
subValue={isMonitoring ? 'Otomatik kontrol' : 'Beklemede'}
|
||||
color={isMonitoring ? 'green' : 'yellow'}
|
||||
delay={0.3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
<IpInfoCard ipInfo={ipInfo} loading={ipLoading} onRefresh={fetchIpInfo} />
|
||||
<RecentErrors errors={errorLog} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,405 @@
|
|||
import { useState, useEffect } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import {
|
||||
Activity,
|
||||
Play,
|
||||
Pause,
|
||||
RefreshCw,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
Wifi,
|
||||
Bell,
|
||||
BellOff,
|
||||
Loader2,
|
||||
Signal,
|
||||
TrendingUp,
|
||||
Tv2,
|
||||
X
|
||||
} from 'lucide-react'
|
||||
import { useStore } from '../store/useStore'
|
||||
import VideoPlayer from '../components/VideoPlayer'
|
||||
import type { Channel, MonitoringResult } from '@shared/types'
|
||||
|
||||
// Live Status Indicator
|
||||
function LiveIndicator({ isLive }: { isLive: boolean }) {
|
||||
return (
|
||||
<div className={`flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium ${
|
||||
isLive ? 'bg-accent-green/20 text-accent-green' : 'bg-dark-600 text-dark-400'
|
||||
}`}>
|
||||
<span className={`w-2 h-2 rounded-full ${isLive ? 'bg-accent-green status-online' : 'bg-dark-500'}`} />
|
||||
{isLive ? 'Canlı İzleme' : 'Durduruldu'}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Channel Status Card
|
||||
function ChannelStatusCard({
|
||||
channel,
|
||||
result,
|
||||
onManualNotify,
|
||||
onWatch
|
||||
}: {
|
||||
channel: Channel
|
||||
result?: MonitoringResult
|
||||
onManualNotify: (channel: Channel) => void
|
||||
onWatch: (channel: Channel) => void
|
||||
}) {
|
||||
const statusConfig = {
|
||||
online: { icon: CheckCircle2, color: 'text-accent-green', bg: 'bg-accent-green/10 border-accent-green/20' },
|
||||
offline: { icon: XCircle, color: 'text-accent-red', bg: 'bg-accent-red/10 border-accent-red/20' },
|
||||
error: { icon: AlertTriangle, color: 'text-accent-orange', bg: 'bg-accent-orange/10 border-accent-orange/20' },
|
||||
checking: { icon: Loader2, color: 'text-accent-blue', bg: 'bg-accent-blue/10 border-accent-blue/20' },
|
||||
unknown: { icon: Signal, color: 'text-dark-400', bg: 'bg-dark-700 border-dark-600' },
|
||||
}
|
||||
|
||||
const status = result?.status || channel.status
|
||||
const config = statusConfig[status]
|
||||
const Icon = config.icon
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
layout
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
className={`border rounded-xl p-4 ${config.bg} card-hover`}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-2 rounded-lg bg-dark-800/50`}>
|
||||
<Icon className={`w-5 h-5 ${config.color} ${status === 'checking' ? 'spinner' : ''}`} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-dark-100">{channel.name}</h3>
|
||||
<p className="text-xs text-dark-400 mt-0.5">{channel.group || 'Genel'}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Watch Button */}
|
||||
<button
|
||||
onClick={() => onWatch(channel)}
|
||||
className="p-2 rounded-lg bg-accent-blue/20 hover:bg-accent-blue/30 transition-colors"
|
||||
title="Canlı İzle"
|
||||
>
|
||||
<Tv2 className="w-4 h-4 text-accent-blue" />
|
||||
</button>
|
||||
|
||||
{/* Manual Notify Button */}
|
||||
{(status === 'error' || status === 'offline') && (
|
||||
<button
|
||||
onClick={() => onManualNotify(channel)}
|
||||
className="p-2 rounded-lg bg-dark-800/50 hover:bg-dark-700 transition-colors"
|
||||
title="Manuel Bildirim Gönder"
|
||||
>
|
||||
<Bell className="w-4 h-4 text-accent-yellow" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="mt-4 grid grid-cols-2 gap-3">
|
||||
<div className="bg-dark-800/30 rounded-lg p-2">
|
||||
<div className="text-xs text-dark-400 flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
Gecikme
|
||||
</div>
|
||||
<p className="text-sm font-mono text-dark-100 mt-1">
|
||||
{result?.latency ? `${result.latency}ms` : channel.latency ? `${channel.latency}ms` : '---'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-dark-800/30 rounded-lg p-2">
|
||||
<div className="text-xs text-dark-400 flex items-center gap-1">
|
||||
<Wifi className="w-3 h-3" />
|
||||
HTTP
|
||||
</div>
|
||||
<p className={`text-sm font-mono mt-1 ${
|
||||
result?.httpStatus === 200 ? 'text-accent-green' :
|
||||
result?.httpStatus ? 'text-accent-red' : 'text-dark-400'
|
||||
}`}>
|
||||
{result?.httpStatus || '---'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{result?.error && (
|
||||
<div className="mt-3 p-2 bg-dark-800/50 rounded-lg border border-dark-600">
|
||||
<p className="text-xs text-accent-red font-mono">{result.errorType}</p>
|
||||
<p className="text-xs text-dark-400 mt-1 truncate">{result.error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Last Check Time */}
|
||||
<div className="mt-3 flex items-center justify-between text-xs text-dark-500">
|
||||
<span>Son kontrol:</span>
|
||||
<span>
|
||||
{result?.timestamp
|
||||
? new Date(result.timestamp).toLocaleTimeString('tr-TR')
|
||||
: channel.lastCheck
|
||||
? new Date(channel.lastCheck).toLocaleTimeString('tr-TR')
|
||||
: '---'
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
// Stats Overview
|
||||
function StatsOverview({
|
||||
total,
|
||||
online,
|
||||
offline,
|
||||
errors
|
||||
}: {
|
||||
total: number
|
||||
online: number
|
||||
offline: number
|
||||
errors: number
|
||||
}) {
|
||||
return (
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<div className="bg-dark-800 border border-dark-700 rounded-xl p-4">
|
||||
<div className="flex items-center gap-2 text-dark-400 text-xs">
|
||||
<Signal className="w-4 h-4" />
|
||||
Toplam İzlenen
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-dark-100 mt-2">{total}</p>
|
||||
</div>
|
||||
<div className="bg-accent-green/10 border border-accent-green/20 rounded-xl p-4">
|
||||
<div className="flex items-center gap-2 text-accent-green text-xs">
|
||||
<CheckCircle2 className="w-4 h-4" />
|
||||
Çevrimiçi
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-accent-green mt-2">{online}</p>
|
||||
</div>
|
||||
<div className="bg-accent-red/10 border border-accent-red/20 rounded-xl p-4">
|
||||
<div className="flex items-center gap-2 text-accent-red text-xs">
|
||||
<XCircle className="w-4 h-4" />
|
||||
Çevrimdışı
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-accent-red mt-2">{offline}</p>
|
||||
</div>
|
||||
<div className="bg-accent-orange/10 border border-accent-orange/20 rounded-xl p-4">
|
||||
<div className="flex items-center gap-2 text-accent-orange text-xs">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
Hata
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-accent-orange mt-2">{errors}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Monitoring() {
|
||||
const {
|
||||
channels,
|
||||
isMonitoring,
|
||||
setIsMonitoring,
|
||||
monitoringResults,
|
||||
updateMonitoringResult,
|
||||
settings
|
||||
} = useStore()
|
||||
|
||||
const [lastRefresh, setLastRefresh] = useState<Date>(new Date())
|
||||
const [watchingChannel, setWatchingChannel] = useState<Channel | null>(null)
|
||||
|
||||
const monitoredChannels = channels.filter(c => c.isMonitored)
|
||||
|
||||
// Subscribe to monitoring updates
|
||||
useEffect(() => {
|
||||
if (window.electron) {
|
||||
const unsubscribe = window.electron.onMonitoringUpdate((result) => {
|
||||
updateMonitoringResult(result)
|
||||
setLastRefresh(new Date())
|
||||
})
|
||||
return () => unsubscribe()
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleToggleMonitoring = async () => {
|
||||
if (window.electron) {
|
||||
if (isMonitoring) {
|
||||
await window.electron.stopMonitoring()
|
||||
} else {
|
||||
await window.electron.startMonitoring()
|
||||
}
|
||||
}
|
||||
setIsMonitoring(!isMonitoring)
|
||||
}
|
||||
|
||||
const handleManualRefresh = async () => {
|
||||
// Trigger immediate check of all channels
|
||||
if (window.electron && isMonitoring) {
|
||||
// This would trigger a manual check cycle
|
||||
}
|
||||
setLastRefresh(new Date())
|
||||
}
|
||||
|
||||
const handleManualNotify = async (channel: Channel) => {
|
||||
if (window.electron) {
|
||||
const result = monitoringResults.get(channel.id)
|
||||
await window.electron.sendNotification(
|
||||
`🔴 ${channel.name} - Yayın Hatası`,
|
||||
result?.error || channel.lastError || 'Yayın erişilemez durumda'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const handleWatch = (channel: Channel) => {
|
||||
setWatchingChannel(channel)
|
||||
}
|
||||
|
||||
// Calculate stats
|
||||
const stats = {
|
||||
total: monitoredChannels.length,
|
||||
online: monitoredChannels.filter(c => {
|
||||
const result = monitoringResults.get(c.id)
|
||||
return (result?.status || c.status) === 'online'
|
||||
}).length,
|
||||
offline: monitoredChannels.filter(c => {
|
||||
const result = monitoringResults.get(c.id)
|
||||
return (result?.status || c.status) === 'offline'
|
||||
}).length,
|
||||
errors: monitoredChannels.filter(c => {
|
||||
const result = monitoringResults.get(c.id)
|
||||
return (result?.status || c.status) === 'error'
|
||||
}).length,
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-display font-bold text-dark-100 flex items-center gap-3">
|
||||
<Activity className="w-7 h-7 text-accent-purple" />
|
||||
Canlı İzleme
|
||||
</h1>
|
||||
<p className="text-dark-400 text-sm mt-1">
|
||||
Son güncelleme: {lastRefresh.toLocaleTimeString('tr-TR')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<LiveIndicator isLive={isMonitoring} />
|
||||
|
||||
<button
|
||||
onClick={handleManualRefresh}
|
||||
disabled={!isMonitoring}
|
||||
className="p-2 rounded-lg bg-dark-700 hover:bg-dark-600 disabled:opacity-50 transition-colors"
|
||||
title="Yenile"
|
||||
>
|
||||
<RefreshCw className="w-5 h-5 text-dark-300" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleToggleMonitoring}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
|
||||
isMonitoring
|
||||
? 'bg-accent-red/20 text-accent-red hover:bg-accent-red/30'
|
||||
: 'bg-accent-green text-white hover:bg-accent-green/80'
|
||||
}`}
|
||||
>
|
||||
{isMonitoring ? (
|
||||
<>
|
||||
<Pause className="w-4 h-4" />
|
||||
Durdur
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play className="w-4 h-4" />
|
||||
Başlat
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Overview */}
|
||||
<StatsOverview {...stats} />
|
||||
|
||||
{/* Auto Notification Status */}
|
||||
<div className="flex items-center justify-between bg-dark-800 border border-dark-700 rounded-xl p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{settings?.notifications.autoNotify ? (
|
||||
<Bell className="w-5 h-5 text-accent-green" />
|
||||
) : (
|
||||
<BellOff className="w-5 h-5 text-dark-400" />
|
||||
)}
|
||||
<div>
|
||||
<p className="font-medium text-dark-100">Otomatik Bildirimler</p>
|
||||
<p className="text-xs text-dark-400 mt-0.5">
|
||||
{settings?.notifications.autoNotify
|
||||
? 'Hata durumunda otomatik bildirim gönderilecek'
|
||||
: 'Otomatik bildirimler kapalı - Ayarlardan etkinleştirin'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<TrendingUp className={`w-5 h-5 ${settings?.notifications.autoNotify ? 'text-accent-green' : 'text-dark-500'}`} />
|
||||
</div>
|
||||
|
||||
{/* Monitored Channels Grid */}
|
||||
{monitoredChannels.length === 0 ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="flex flex-col items-center justify-center py-20 text-dark-400"
|
||||
>
|
||||
<Activity className="w-16 h-16 mb-4 text-dark-600" />
|
||||
<p className="text-lg">Henüz izlenen kanal yok</p>
|
||||
<p className="text-sm mt-2">Kanallar sayfasından izlemek istediğiniz kanalları seçin</p>
|
||||
</motion.div>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{monitoredChannels.map((channel) => (
|
||||
<ChannelStatusCard
|
||||
key={channel.id}
|
||||
channel={channel}
|
||||
result={monitoringResults.get(channel.id)}
|
||||
onManualNotify={handleManualNotify}
|
||||
onWatch={handleWatch}
|
||||
/>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Video Player Modal */}
|
||||
<AnimatePresence>
|
||||
{watchingChannel && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 p-8"
|
||||
onClick={() => setWatchingChannel(null)}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.9, opacity: 0 }}
|
||||
className="w-full max-w-5xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<VideoPlayer
|
||||
url={watchingChannel.url}
|
||||
title={watchingChannel.name}
|
||||
onClose={() => setWatchingChannel(null)}
|
||||
autoPlay={true}
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,518 @@
|
|||
import { useState, useEffect } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import {
|
||||
Settings as SettingsIcon,
|
||||
Bell,
|
||||
Mail,
|
||||
MessageCircle,
|
||||
Monitor,
|
||||
Server,
|
||||
Save,
|
||||
TestTube,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Loader2,
|
||||
Clock,
|
||||
Shield,
|
||||
HardDrive,
|
||||
Info
|
||||
} from 'lucide-react'
|
||||
import { useStore } from '../store/useStore'
|
||||
import type { AppSettings, NotificationType } from '@shared/types'
|
||||
|
||||
// Section Component
|
||||
function SettingsSection({
|
||||
title,
|
||||
icon: Icon,
|
||||
children
|
||||
}: {
|
||||
title: string
|
||||
icon: React.ElementType
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="bg-dark-800 border border-dark-700 rounded-xl p-6"
|
||||
>
|
||||
<h2 className="text-lg font-semibold text-dark-100 flex items-center gap-2 mb-4">
|
||||
<Icon className="w-5 h-5 text-accent-purple" />
|
||||
{title}
|
||||
</h2>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
// Toggle Switch
|
||||
function Toggle({
|
||||
enabled,
|
||||
onChange
|
||||
}: {
|
||||
enabled: boolean
|
||||
onChange: (value: boolean) => void
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => onChange(!enabled)}
|
||||
className={`relative w-12 h-6 rounded-full transition-colors ${
|
||||
enabled ? 'bg-accent-blue' : 'bg-dark-600'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-transform ${
|
||||
enabled ? 'left-7' : 'left-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
// Input Field
|
||||
function InputField({
|
||||
label,
|
||||
type = 'text',
|
||||
value,
|
||||
onChange,
|
||||
placeholder
|
||||
}: {
|
||||
label: string
|
||||
type?: string
|
||||
value: string | number
|
||||
onChange: (value: string) => void
|
||||
placeholder?: string
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<label className="block text-sm text-dark-300 mb-2">{label}</label>
|
||||
<input
|
||||
type={type}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className="w-full px-4 py-2 bg-dark-700 border border-dark-600 rounded-lg text-dark-100 placeholder-dark-500 focus:outline-none focus:border-accent-blue"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Test Button
|
||||
function TestButton({
|
||||
type,
|
||||
onTest
|
||||
}: {
|
||||
type: NotificationType
|
||||
onTest: (type: NotificationType) => Promise<void>
|
||||
}) {
|
||||
const [testing, setTesting] = useState(false)
|
||||
const [result, setResult] = useState<'success' | 'error' | null>(null)
|
||||
|
||||
const handleTest = async () => {
|
||||
setTesting(true)
|
||||
setResult(null)
|
||||
try {
|
||||
await onTest(type)
|
||||
setResult('success')
|
||||
} catch {
|
||||
setResult('error')
|
||||
} finally {
|
||||
setTesting(false)
|
||||
setTimeout(() => setResult(null), 3000)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleTest}
|
||||
disabled={testing}
|
||||
className="flex items-center gap-2 px-3 py-1.5 bg-dark-600 text-dark-300 rounded-lg hover:bg-dark-500 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{testing ? (
|
||||
<Loader2 className="w-4 h-4 spinner" />
|
||||
) : result === 'success' ? (
|
||||
<CheckCircle2 className="w-4 h-4 text-accent-green" />
|
||||
) : result === 'error' ? (
|
||||
<XCircle className="w-4 h-4 text-accent-red" />
|
||||
) : (
|
||||
<TestTube className="w-4 h-4" />
|
||||
)}
|
||||
Test
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Settings() {
|
||||
const { settings, setSettings } = useStore()
|
||||
const [localSettings, setLocalSettings] = useState<AppSettings | null>(settings)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [saved, setSaved] = useState(false)
|
||||
const [appInfo, setAppInfo] = useState<{ version: string; isPortable: boolean; dataPath: string } | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
setLocalSettings(settings)
|
||||
}, [settings])
|
||||
|
||||
useEffect(() => {
|
||||
const loadAppInfo = async () => {
|
||||
if (window.electron?.getAppInfo) {
|
||||
const info = await window.electron.getAppInfo()
|
||||
setAppInfo(info)
|
||||
}
|
||||
}
|
||||
loadAppInfo()
|
||||
}, [])
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!localSettings) return
|
||||
|
||||
setSaving(true)
|
||||
try {
|
||||
if (window.electron) {
|
||||
await window.electron.saveSettings(localSettings)
|
||||
}
|
||||
setSettings(localSettings)
|
||||
setSaved(true)
|
||||
setTimeout(() => setSaved(false), 2000)
|
||||
} catch (error) {
|
||||
console.error('Failed to save settings:', error)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleTestNotification = async (type: NotificationType) => {
|
||||
if (window.electron) {
|
||||
await window.electron.testNotification(type)
|
||||
}
|
||||
}
|
||||
|
||||
const updateSettings = (path: string, value: unknown) => {
|
||||
if (!localSettings) return
|
||||
|
||||
const keys = path.split('.')
|
||||
const newSettings = { ...localSettings }
|
||||
let current: Record<string, unknown> = newSettings as Record<string, unknown>
|
||||
|
||||
for (let i = 0; i < keys.length - 1; i++) {
|
||||
current[keys[i]] = { ...(current[keys[i]] as Record<string, unknown>) }
|
||||
current = current[keys[i]] as Record<string, unknown>
|
||||
}
|
||||
current[keys[keys.length - 1]] = value
|
||||
|
||||
setLocalSettings(newSettings as AppSettings)
|
||||
}
|
||||
|
||||
if (!localSettings) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<Loader2 className="w-8 h-8 text-accent-blue spinner" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-display font-bold text-dark-100 flex items-center gap-3">
|
||||
<SettingsIcon className="w-7 h-7 text-accent-purple" />
|
||||
Ayarlar
|
||||
</h1>
|
||||
<p className="text-dark-400 text-sm mt-1">
|
||||
Uygulama ve bildirim ayarlarını yapılandırın
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-accent-blue text-white rounded-lg hover:bg-accent-blue/80 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{saving ? (
|
||||
<Loader2 className="w-4 h-4 spinner" />
|
||||
) : saved ? (
|
||||
<CheckCircle2 className="w-4 h-4" />
|
||||
) : (
|
||||
<Save className="w-4 h-4" />
|
||||
)}
|
||||
{saved ? 'Kaydedildi!' : 'Kaydet'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{/* General Settings */}
|
||||
<SettingsSection title="Genel Ayarlar" icon={Monitor}>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-dark-100">Başlangıçta minimize</p>
|
||||
<p className="text-xs text-dark-400">Uygulama açıldığında küçültülmüş başla</p>
|
||||
</div>
|
||||
<Toggle
|
||||
enabled={localSettings.general.startMinimized}
|
||||
onChange={(v) => updateSettings('general.startMinimized', v)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-dark-100">Tray'e küçült</p>
|
||||
<p className="text-xs text-dark-400">Kapatma yerine system tray'e taşı</p>
|
||||
</div>
|
||||
<Toggle
|
||||
enabled={localSettings.general.minimizeToTray}
|
||||
onChange={(v) => updateSettings('general.minimizeToTray', v)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
|
||||
{/* Monitoring Settings */}
|
||||
<SettingsSection title="İzleme Ayarları" icon={Clock}>
|
||||
<div className="space-y-4">
|
||||
<InputField
|
||||
label="Ping Aralığı (saniye)"
|
||||
type="number"
|
||||
value={localSettings.monitoring.pingInterval}
|
||||
onChange={(v) => updateSettings('monitoring.pingInterval', parseInt(v) || 30)}
|
||||
/>
|
||||
<InputField
|
||||
label="Stream Kontrol Aralığı (saniye)"
|
||||
type="number"
|
||||
value={localSettings.monitoring.streamCheckInterval}
|
||||
onChange={(v) => updateSettings('monitoring.streamCheckInterval', parseInt(v) || 60)}
|
||||
/>
|
||||
<InputField
|
||||
label="Zaman Aşımı (ms)"
|
||||
type="number"
|
||||
value={localSettings.monitoring.timeout}
|
||||
onChange={(v) => updateSettings('monitoring.timeout', parseInt(v) || 5000)}
|
||||
/>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
|
||||
{/* Windows Notifications */}
|
||||
<SettingsSection title="Windows Bildirimleri" icon={Bell}>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-dark-100">Etkin</p>
|
||||
<p className="text-xs text-dark-400">Windows toast bildirimleri</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<TestButton type="windows" onTest={handleTestNotification} />
|
||||
<Toggle
|
||||
enabled={localSettings.notifications.windows.enabled}
|
||||
onChange={(v) => updateSettings('notifications.windows.enabled', v)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
|
||||
{/* Telegram Settings */}
|
||||
<SettingsSection title="Telegram Bildirimleri" icon={MessageCircle}>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-dark-100">Etkin</p>
|
||||
<p className="text-xs text-dark-400">Telegram bot bildirimleri</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<TestButton type="telegram" onTest={handleTestNotification} />
|
||||
<Toggle
|
||||
enabled={localSettings.notifications.telegram.enabled}
|
||||
onChange={(v) => updateSettings('notifications.telegram.enabled', v)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<InputField
|
||||
label="Bot Token"
|
||||
value={localSettings.notifications.telegram.botToken}
|
||||
onChange={(v) => updateSettings('notifications.telegram.botToken', v)}
|
||||
placeholder="123456:ABC-DEF..."
|
||||
/>
|
||||
<InputField
|
||||
label="Chat ID"
|
||||
value={localSettings.notifications.telegram.chatId}
|
||||
onChange={(v) => updateSettings('notifications.telegram.chatId', v)}
|
||||
placeholder="-1001234567890"
|
||||
/>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
|
||||
{/* Email Settings */}
|
||||
<SettingsSection title="Email Bildirimleri" icon={Mail}>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-dark-100">Etkin</p>
|
||||
<p className="text-xs text-dark-400">SMTP email bildirimleri</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<TestButton type="email" onTest={handleTestNotification} />
|
||||
<Toggle
|
||||
enabled={localSettings.notifications.email.enabled}
|
||||
onChange={(v) => updateSettings('notifications.email.enabled', v)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<InputField
|
||||
label="SMTP Sunucu"
|
||||
value={localSettings.notifications.email.smtpHost}
|
||||
onChange={(v) => updateSettings('notifications.email.smtpHost', v)}
|
||||
placeholder="smtp.gmail.com"
|
||||
/>
|
||||
<InputField
|
||||
label="Port"
|
||||
type="number"
|
||||
value={localSettings.notifications.email.smtpPort}
|
||||
onChange={(v) => updateSettings('notifications.email.smtpPort', parseInt(v) || 587)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<InputField
|
||||
label="Kullanıcı"
|
||||
value={localSettings.notifications.email.smtpUser}
|
||||
onChange={(v) => updateSettings('notifications.email.smtpUser', v)}
|
||||
/>
|
||||
<InputField
|
||||
label="Şifre"
|
||||
type="password"
|
||||
value={localSettings.notifications.email.smtpPass}
|
||||
onChange={(v) => updateSettings('notifications.email.smtpPass', v)}
|
||||
/>
|
||||
</div>
|
||||
<InputField
|
||||
label="Alıcı Email"
|
||||
value={localSettings.notifications.email.toEmail}
|
||||
onChange={(v) => updateSettings('notifications.email.toEmail', v)}
|
||||
placeholder="admin@example.com"
|
||||
/>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
|
||||
{/* Panel Integration */}
|
||||
<SettingsSection title="Panel Entegrasyonu" icon={Server}>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-dark-100">Etkin</p>
|
||||
<p className="text-xs text-dark-400">Monitor API entegrasyonu</p>
|
||||
</div>
|
||||
<Toggle
|
||||
enabled={localSettings.panel.enabled}
|
||||
onChange={(v) => updateSettings('panel.enabled', v)}
|
||||
/>
|
||||
</div>
|
||||
<InputField
|
||||
label="API URL"
|
||||
value={localSettings.panel.apiUrl}
|
||||
onChange={(v) => updateSettings('panel.apiUrl', v)}
|
||||
placeholder="https://panel.example.com/attacker_detection"
|
||||
/>
|
||||
<InputField
|
||||
label="Monitor ID"
|
||||
value={localSettings.panel.monitorId}
|
||||
onChange={(v) => updateSettings('panel.monitorId', v)}
|
||||
placeholder="monitor-1"
|
||||
/>
|
||||
<InputField
|
||||
label="Auth Token"
|
||||
type="password"
|
||||
value={localSettings.panel.authToken}
|
||||
onChange={(v) => updateSettings('panel.authToken', v)}
|
||||
/>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
|
||||
{/* Notification Rules */}
|
||||
<SettingsSection title="Bildirim Kuralları" icon={Shield}>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-dark-100">Otomatik Bildirim</p>
|
||||
<p className="text-xs text-dark-400">Hata anında otomatik bildir</p>
|
||||
</div>
|
||||
<Toggle
|
||||
enabled={localSettings.notifications.autoNotify}
|
||||
onChange={(v) => updateSettings('notifications.autoNotify', v)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-dark-100">Ping Hatası</p>
|
||||
<p className="text-xs text-dark-400">Ping başarısız olduğunda</p>
|
||||
</div>
|
||||
<Toggle
|
||||
enabled={localSettings.notifications.notifyOnPingFail}
|
||||
onChange={(v) => updateSettings('notifications.notifyOnPingFail', v)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-dark-100">404 Hatası</p>
|
||||
<p className="text-xs text-dark-400">HTTP 404 alındığında</p>
|
||||
</div>
|
||||
<Toggle
|
||||
enabled={localSettings.notifications.notifyOn404}
|
||||
onChange={(v) => updateSettings('notifications.notifyOn404', v)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-dark-100">Bağlantı Hatası</p>
|
||||
<p className="text-xs text-dark-400">ERR_CONNRESET gibi hatalar</p>
|
||||
</div>
|
||||
<Toggle
|
||||
enabled={localSettings.notifications.notifyOnConnReset}
|
||||
onChange={(v) => updateSettings('notifications.notifyOnConnReset', v)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
|
||||
{/* App Info */}
|
||||
<SettingsSection title="Uygulama Bilgisi" icon={Info}>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-dark-100">Versiyon</p>
|
||||
<p className="text-xs text-dark-400">IP Monitor</p>
|
||||
</div>
|
||||
<span className="text-accent-blue font-mono">v{appInfo?.version || '1.0.0'}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<HardDrive className="w-4 h-4 text-dark-400" />
|
||||
<div>
|
||||
<p className="text-dark-100">Çalışma Modu</p>
|
||||
<p className="text-xs text-dark-400">Ayarların saklandığı konum</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium ${
|
||||
appInfo?.isPortable
|
||||
? 'bg-accent-green/20 text-accent-green'
|
||||
: 'bg-accent-blue/20 text-accent-blue'
|
||||
}`}>
|
||||
{appInfo?.isPortable ? 'Portable' : 'Normal'}
|
||||
</span>
|
||||
</div>
|
||||
{appInfo?.dataPath && (
|
||||
<div className="bg-dark-700/50 rounded-lg p-3">
|
||||
<p className="text-xs text-dark-400 mb-1">Veri Konumu:</p>
|
||||
<p className="text-xs text-dark-300 font-mono break-all">{appInfo.dataPath}</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-xs text-dark-500 mt-2">
|
||||
<p>💡 Portable mod için exe yanına <code className="bg-dark-700 px-1 rounded">portable.txt</code> dosyası oluşturun veya <code className="bg-dark-700 px-1 rounded">data</code> klasörü açın.</p>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
import { create } from 'zustand'
|
||||
import type { Channel, IpInfo, ErrorLogEntry, AppSettings, MonitoringResult } from '@shared/types'
|
||||
|
||||
interface AppState {
|
||||
// IP Info
|
||||
ipInfo: IpInfo | null
|
||||
ipLoading: boolean
|
||||
setIpInfo: (info: IpInfo | null) => void
|
||||
setIpLoading: (loading: boolean) => void
|
||||
|
||||
// Channels
|
||||
channels: Channel[]
|
||||
channelsLoading: boolean
|
||||
setChannels: (channels: Channel[]) => void
|
||||
updateChannel: (channel: Channel) => void
|
||||
setChannelsLoading: (loading: boolean) => void
|
||||
|
||||
// Monitoring
|
||||
isMonitoring: boolean
|
||||
monitoringResults: Map<string, MonitoringResult>
|
||||
setIsMonitoring: (running: boolean) => void
|
||||
updateMonitoringResult: (result: MonitoringResult) => void
|
||||
clearMonitoringResults: () => void
|
||||
|
||||
// Error Log
|
||||
errorLog: ErrorLogEntry[]
|
||||
addErrorLog: (entry: ErrorLogEntry) => void
|
||||
setErrorLog: (log: ErrorLogEntry[]) => void
|
||||
clearErrorLog: () => void
|
||||
|
||||
// Settings
|
||||
settings: AppSettings | null
|
||||
setSettings: (settings: AppSettings) => void
|
||||
|
||||
// UI State
|
||||
sidebarCollapsed: boolean
|
||||
toggleSidebar: () => void
|
||||
}
|
||||
|
||||
const defaultSettings: AppSettings = {
|
||||
general: {
|
||||
startMinimized: false,
|
||||
minimizeToTray: true,
|
||||
autoStart: false,
|
||||
language: 'tr',
|
||||
},
|
||||
monitoring: {
|
||||
pingInterval: 30,
|
||||
streamCheckInterval: 60,
|
||||
timeout: 5000,
|
||||
retryCount: 2,
|
||||
},
|
||||
notifications: {
|
||||
enabled: true,
|
||||
windows: { enabled: true },
|
||||
telegram: {
|
||||
enabled: false,
|
||||
botToken: '',
|
||||
chatId: '',
|
||||
},
|
||||
email: {
|
||||
enabled: false,
|
||||
smtpHost: '',
|
||||
smtpPort: 587,
|
||||
smtpUser: '',
|
||||
smtpPass: '',
|
||||
fromEmail: '',
|
||||
toEmail: '',
|
||||
},
|
||||
autoNotify: true,
|
||||
notifyOnPingFail: true,
|
||||
notifyOnStreamError: true,
|
||||
notifyOn404: true,
|
||||
notifyOnConnReset: true,
|
||||
},
|
||||
panel: {
|
||||
apiUrl: '',
|
||||
authToken: '',
|
||||
monitorId: '',
|
||||
enabled: false,
|
||||
},
|
||||
}
|
||||
|
||||
export const useStore = create<AppState>((set) => ({
|
||||
// IP Info
|
||||
ipInfo: null,
|
||||
ipLoading: false,
|
||||
setIpInfo: (info) => set({ ipInfo: info }),
|
||||
setIpLoading: (loading) => set({ ipLoading: loading }),
|
||||
|
||||
// Channels
|
||||
channels: [],
|
||||
channelsLoading: false,
|
||||
setChannels: (channels) => set({ channels }),
|
||||
updateChannel: (channel) =>
|
||||
set((state) => ({
|
||||
channels: state.channels.map((c) =>
|
||||
c.id === channel.id ? channel : c
|
||||
),
|
||||
})),
|
||||
setChannelsLoading: (loading) => set({ channelsLoading: loading }),
|
||||
|
||||
// Monitoring
|
||||
isMonitoring: false,
|
||||
monitoringResults: new Map(),
|
||||
setIsMonitoring: (running) => set({ isMonitoring: running }),
|
||||
updateMonitoringResult: (result) =>
|
||||
set((state) => {
|
||||
const newResults = new Map(state.monitoringResults)
|
||||
newResults.set(result.channelId, result)
|
||||
return { monitoringResults: newResults }
|
||||
}),
|
||||
clearMonitoringResults: () => set({ monitoringResults: new Map() }),
|
||||
|
||||
// Error Log
|
||||
errorLog: [],
|
||||
addErrorLog: (entry) =>
|
||||
set((state) => ({
|
||||
errorLog: [entry, ...state.errorLog].slice(0, 100), // Keep last 100
|
||||
})),
|
||||
setErrorLog: (log) => set({ errorLog: log }),
|
||||
clearErrorLog: () => set({ errorLog: [] }),
|
||||
|
||||
// Settings
|
||||
settings: defaultSettings,
|
||||
setSettings: (settings) => set({ settings }),
|
||||
|
||||
// UI State
|
||||
sidebarCollapsed: false,
|
||||
toggleSidebar: () =>
|
||||
set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed })),
|
||||
}))
|
||||
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--color-bg-primary: #0f0f12;
|
||||
--color-bg-secondary: #18181b;
|
||||
--color-bg-tertiary: #1e1e22;
|
||||
--color-text-primary: #e4e4e7;
|
||||
--color-text-secondary: #a1a1aa;
|
||||
--color-accent: #61afef;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
background-color: var(--color-bg-primary);
|
||||
color: var(--color-text-primary);
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-bg-secondary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #3f3f46;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #52525b;
|
||||
}
|
||||
|
||||
/* Title bar drag region */
|
||||
.titlebar-drag {
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.titlebar-no-drag {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
/* Glassmorphism effect */
|
||||
.glass {
|
||||
background: rgba(30, 30, 34, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Status dot animation */
|
||||
@keyframes pulse-online {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.7; transform: scale(1.1); }
|
||||
}
|
||||
|
||||
.status-online {
|
||||
animation: pulse-online 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Gradient text */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #61afef 0%, #c678dd 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Card hover effect */
|
||||
.card-hover {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Input focus styles */
|
||||
input:focus, textarea:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 0 0 2px rgba(97, 175, 239, 0.2);
|
||||
}
|
||||
|
||||
/* Button active state */
|
||||
button:active:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
/* Fade in animation */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Slide in from left */
|
||||
@keyframes slideInLeft {
|
||||
from { opacity: 0; transform: translateX(-20px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
.animate-slide-in {
|
||||
animation: slideInLeft 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
export interface ElectronAPI {
|
||||
// Window controls
|
||||
minimize: () => void
|
||||
maximize: () => void
|
||||
close: () => void
|
||||
|
||||
// IP Service
|
||||
getIpInfo: () => Promise<import('@shared/types').IpInfo>
|
||||
|
||||
// Channel Management
|
||||
parseM3u8: (url: string) => Promise<import('@shared/types').Channel[]>
|
||||
getChannels: () => Promise<import('@shared/types').Channel[]>
|
||||
updateChannel: (channel: import('@shared/types').Channel) => Promise<void>
|
||||
setChannelMonitored: (channelId: string, monitored: boolean) => Promise<void>
|
||||
|
||||
// Monitoring
|
||||
startMonitoring: () => Promise<void>
|
||||
stopMonitoring: () => Promise<void>
|
||||
getMonitoringStatus: () => Promise<{ isRunning: boolean }>
|
||||
onMonitoringUpdate: (callback: (result: import('@shared/types').MonitoringResult) => void) => () => void
|
||||
|
||||
// Ping
|
||||
pingHost: (host: string) => Promise<import('@shared/types').PingResult>
|
||||
|
||||
// Notifications
|
||||
sendNotification: (title: string, body: string, type?: import('@shared/types').NotificationType) => Promise<void>
|
||||
testNotification: (type: import('@shared/types').NotificationType) => Promise<{ success: boolean; error?: string }>
|
||||
|
||||
// Panel API
|
||||
panelRegister: (config: import('@shared/types').PanelConfig) => Promise<{ success: boolean; authToken?: string }>
|
||||
panelGetIps: () => Promise<import('@shared/types').PanelIpPool>
|
||||
panelSendVote: (vote: import('@shared/types').BurnVote) => Promise<{ success: boolean }>
|
||||
|
||||
// Settings
|
||||
getSettings: () => Promise<import('@shared/types').AppSettings>
|
||||
saveSettings: (settings: import('@shared/types').AppSettings) => Promise<void>
|
||||
|
||||
// Error Log
|
||||
getErrorLog: () => Promise<import('@shared/types').ErrorLogEntry[]>
|
||||
clearErrorLog: () => Promise<void>
|
||||
|
||||
// App Info
|
||||
getAppInfo: () => Promise<{ version: string; isPortable: boolean; dataPath: string }>
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
electron: ElectronAPI
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
// Channel Types
|
||||
export interface Channel {
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
group?: string;
|
||||
logo?: string;
|
||||
isMonitored: boolean;
|
||||
status: ChannelStatus;
|
||||
lastCheck?: number;
|
||||
lastError?: string;
|
||||
latency?: number;
|
||||
}
|
||||
|
||||
export type ChannelStatus = 'online' | 'offline' | 'error' | 'unknown' | 'checking';
|
||||
|
||||
// IP Info Types
|
||||
export interface IpInfo {
|
||||
ip: string;
|
||||
country: string;
|
||||
countryCode: string;
|
||||
city?: string;
|
||||
isp?: string;
|
||||
timezone?: string;
|
||||
}
|
||||
|
||||
// Monitoring Types
|
||||
export interface MonitoringResult {
|
||||
channelId: string;
|
||||
timestamp: number;
|
||||
status: ChannelStatus;
|
||||
latency?: number;
|
||||
httpStatus?: number;
|
||||
error?: string;
|
||||
errorType?: 'TIMEOUT' | 'CONNRESET' | 'CONNREFUSED' | 'HTTP_ERROR' | 'PARSE_ERROR' | 'UNKNOWN';
|
||||
}
|
||||
|
||||
export interface PingResult {
|
||||
host: string;
|
||||
alive: boolean;
|
||||
time?: number;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
// Notification Types
|
||||
export type NotificationType = 'windows' | 'telegram' | 'email';
|
||||
|
||||
export interface NotificationSettings {
|
||||
enabled: boolean;
|
||||
windows: {
|
||||
enabled: boolean;
|
||||
};
|
||||
telegram: {
|
||||
enabled: boolean;
|
||||
botToken: string;
|
||||
chatId: string;
|
||||
};
|
||||
email: {
|
||||
enabled: boolean;
|
||||
smtpHost: string;
|
||||
smtpPort: number;
|
||||
smtpUser: string;
|
||||
smtpPass: string;
|
||||
fromEmail: string;
|
||||
toEmail: string;
|
||||
};
|
||||
autoNotify: boolean;
|
||||
notifyOnPingFail: boolean;
|
||||
notifyOnStreamError: boolean;
|
||||
notifyOn404: boolean;
|
||||
notifyOnConnReset: boolean;
|
||||
}
|
||||
|
||||
// Panel API Types (from MONITOR_API_GUIDE)
|
||||
export interface PanelConfig {
|
||||
apiUrl: string;
|
||||
authToken: string;
|
||||
monitorId: string;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
export interface PanelIpInfo {
|
||||
ip_address: string;
|
||||
server_id: string;
|
||||
check_priority: 'high' | 'normal' | 'low';
|
||||
}
|
||||
|
||||
export interface PanelIpPool {
|
||||
active: PanelIpInfo[];
|
||||
honeypot: PanelIpInfo[];
|
||||
}
|
||||
|
||||
export interface BurnVote {
|
||||
ip_address: string;
|
||||
vote: 'burn' | 'ok' | 'abstain';
|
||||
reason: string;
|
||||
evidence: {
|
||||
check_type: string;
|
||||
port?: number;
|
||||
response_time_ms?: number;
|
||||
error_message?: string;
|
||||
timestamp: number;
|
||||
monitor_id: string;
|
||||
};
|
||||
}
|
||||
|
||||
// App Settings
|
||||
export interface AppSettings {
|
||||
general: {
|
||||
startMinimized: boolean;
|
||||
minimizeToTray: boolean;
|
||||
autoStart: boolean;
|
||||
language: 'tr' | 'en';
|
||||
};
|
||||
monitoring: {
|
||||
pingInterval: number; // seconds
|
||||
streamCheckInterval: number; // seconds
|
||||
timeout: number; // ms
|
||||
retryCount: number;
|
||||
};
|
||||
notifications: NotificationSettings;
|
||||
panel: PanelConfig;
|
||||
}
|
||||
|
||||
// IPC Channel Names
|
||||
export const IPC_CHANNELS = {
|
||||
// IP Service
|
||||
GET_IP_INFO: 'ip:get-info',
|
||||
|
||||
// Channel Management
|
||||
PARSE_M3U8: 'channel:parse-m3u8',
|
||||
GET_CHANNELS: 'channel:get-all',
|
||||
UPDATE_CHANNEL: 'channel:update',
|
||||
SET_MONITORED: 'channel:set-monitored',
|
||||
|
||||
// Monitoring
|
||||
START_MONITORING: 'monitor:start',
|
||||
STOP_MONITORING: 'monitor:stop',
|
||||
GET_MONITORING_STATUS: 'monitor:status',
|
||||
MONITORING_UPDATE: 'monitor:update',
|
||||
|
||||
// Ping
|
||||
PING_HOST: 'ping:host',
|
||||
|
||||
// Notifications
|
||||
SEND_NOTIFICATION: 'notify:send',
|
||||
TEST_NOTIFICATION: 'notify:test',
|
||||
|
||||
// Panel API
|
||||
PANEL_REGISTER: 'panel:register',
|
||||
PANEL_GET_IPS: 'panel:get-ips',
|
||||
PANEL_SEND_VOTE: 'panel:send-vote',
|
||||
|
||||
// Settings
|
||||
GET_SETTINGS: 'settings:get',
|
||||
SAVE_SETTINGS: 'settings:save',
|
||||
|
||||
// Window
|
||||
MINIMIZE_TO_TRAY: 'window:minimize-tray',
|
||||
} as const;
|
||||
|
||||
// Error Log Entry
|
||||
export interface ErrorLogEntry {
|
||||
id: string;
|
||||
timestamp: number;
|
||||
channelName: string;
|
||||
channelId: string;
|
||||
errorType: string;
|
||||
errorMessage: string;
|
||||
httpStatus?: number;
|
||||
notified: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/renderer/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// Custom dark theme inspired by One Dark
|
||||
dark: {
|
||||
50: '#e4e4e7',
|
||||
100: '#c8c8cd',
|
||||
200: '#a1a1aa',
|
||||
300: '#71717a',
|
||||
400: '#52525b',
|
||||
500: '#3f3f46',
|
||||
600: '#27272a',
|
||||
700: '#1e1e22',
|
||||
800: '#18181b',
|
||||
900: '#0f0f12',
|
||||
950: '#09090b',
|
||||
},
|
||||
accent: {
|
||||
blue: '#61afef',
|
||||
purple: '#c678dd',
|
||||
green: '#98c379',
|
||||
red: '#e06c75',
|
||||
orange: '#d19a66',
|
||||
cyan: '#56b6c2',
|
||||
yellow: '#e5c07b',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['JetBrains Mono', 'Fira Code', 'monospace'],
|
||||
display: ['Space Grotesk', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
animation: {
|
||||
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
'glow': 'glow 2s ease-in-out infinite alternate',
|
||||
},
|
||||
keyframes: {
|
||||
glow: {
|
||||
'0%': { boxShadow: '0 0 5px rgba(97, 175, 239, 0.5)' },
|
||||
'100%': { boxShadow: '0 0 20px rgba(97, 175, 239, 0.8)' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/renderer/*"],
|
||||
"@shared/*": ["src/shared/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/renderer/**/*", "src/shared/**/*", "src/vite-env.d.ts"]
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "CommonJS",
|
||||
"moduleResolution": "node",
|
||||
"lib": ["ES2022"],
|
||||
"outDir": "dist/main",
|
||||
"rootDir": "src",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"resolveJsonModule": true,
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@shared/*": ["src/shared/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/main/**/*", "src/shared/**/*"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import path from 'path'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
base: './',
|
||||
root: '.',
|
||||
build: {
|
||||
outDir: 'dist/renderer',
|
||||
emptyOutDir: true,
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src/renderer'),
|
||||
'@shared': path.resolve(__dirname, './src/shared'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
port: 5173,
|
||||
strictPort: true,
|
||||
},
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue