ani-auto 1.4.4 → 2.0.0

package/web/src/views/CFResult.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="cf-result">
+    <h2>Cloudflare Bypass</h2>
+
+    <div v-if="loading" class="loading-state">
+      <i class="pi pi-spin pi-spinner" style="font-size:2rem" />
+      <p>Scanning browsers for AnimePahe cookies...</p>
+    </div>
+
+    <div v-else-if="error" class="result-card error-card">
+      <i class="pi pi-exclamation-triangle" style="font-size:2rem;color:var(--red-500)" />
+      <h3>Detection Failed</h3>
+      <p>{{ error }}</p>
+      <Button label="Retry" @click="detect" />
+    </div>
+
+    <div v-else-if="foundBrowser" class="result-card success-card">
+      <i class="pi pi-check-circle" style="font-size:2rem;color:var(--green-500)" />
+      <h3>Cookies Found in {{ browserLabel }}</h3>
+
+      <div class="cookie-display">
+        <label>cf_clearance Value</label>
+        <textarea ref="cookieTextarea" :value="cfClearanceValue" readonly rows="3" class="cookie-textarea" />
+        <Button label="Copy cf_clearance" icon="pi pi-copy" @click="copyToClipboard" :class="{ copied: copied }" />
+        <span v-if="copied" class="copied-msg">Copied!</span>
+      </div>
+
+      <div class="ua-hint">
+        <p><strong>Also need your User-Agent</strong> — it will be auto-filled. You can change it in Settings.</p>
+        <p class="ua-preview">UA: <code>{{ defaultUA }}</code></p>
+      </div>
+
+      <p class="hint">Go to Settings to paste and verify:</p>
+      <Button label="Go to Settings" severity="primary" @click="goToSettings" />
+    </div>
+
+    <div v-else class="result-card manual-card">
+      <i class="pi pi-info-circle" style="font-size:2rem;color:var(--blue-500)" />
+      <h3>No Cookies Auto-Detected</h3>
+
+      <div v-if="detectedBrowsers.length > 0" class="browser-list">
+        <p>Found profiles in these browsers but couldn't read cookies:</p>
+        <ul>
+          <li v-for="b in detectedBrowsers" :key="b.name">
+            <strong>{{ b.label }}</strong>: {{ b.error }}
+          </li>
+        </ul>
+      </div>
+
+      <div class="manual-steps">
+        <h4>Manual Steps:</h4>
+        <ol>
+          <li>Open <a :href="animepaheUrl" target="_blank">AnimePahe</a> in your browser</li>
+          <li>Solve the Cloudflare Turnstile challenge if prompted</li>
+          <li>Make sure you're logged in and can browse the site</li>
+          <li>Come back here and click "Retry"</li>
+        </ol>
+      </div>
+
+      <div class="manual-paste-hint">
+        <p>Alternatively, copy from your browser manually:</p>
+        <ol>
+          <li>Open AnimePahe in your browser and solve Turnstile</li>
+          <li>Open DevTools (F12) → Storage → Cookies → animepahe.pw</li>
+          <li>Copy the <code>cf_clearance</code> cookie value</li>
+          <li>Open DevTools → Network tab → click any request → find <code>User-Agent</code> in Request Headers</li>
+          <li>Go to Settings → paste both → Save & Verify</li>
+        </ol>
+      </div>
+
+      <div class="action-buttons">
+        <Button label="Retry" severity="secondary" @click="detect" />
+        <Button label="Go to Settings" severity="primary" @click="goToSettingsEmpty" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { api } from '../api/client'
+
+const router = useRouter()
+const loading = ref(true)
+const error = ref(null)
+const detectResult = ref(null)
+const copied = ref(false)
+const cookieTextarea = ref(null)
+
+const animepaheUrl = 'https://animepahe.pw'
+
+const browserLabels = {
+  firefox: 'Firefox',
+  chrome: 'Chrome',
+  chromium: 'Chromium',
+  brave: 'Brave',
+  edge: 'Edge',
+}
+
+const userAgentTemplates = {
+  firefox: 'Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0',
+  chrome: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36',
+  brave: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36',
+  edge: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36 Edg/101.0.1210.47',
+}
+
+const foundBrowser = computed(() => {
+  if (!detectResult.value?.browsers) return null
+  for (const [b, data] of Object.entries(detectResult.value.browsers)) {
+    if (data.found) return b
+  }
+  return null
+})
+
+const browserLabel = computed(() => browserLabels[foundBrowser.value] || foundBrowser.value)
+
+const defaultUA = computed(() => userAgentTemplates[foundBrowser.value] || userAgentTemplates.firefox)
+
+const cfClearanceValue = computed(() => {
+  if (!foundBrowser.value || !detectResult.value?.browsers?.[foundBrowser.value]) return ''
+  const cookies = detectResult.value.browsers[foundBrowser.value].cookies || {}
+  return cookies.cf_clearance || ''
+})
+
+const detectedBrowsers = computed(() => {
+  if (!detectResult.value?.browsers) return []
+  const list = []
+  for (const [b, data] of Object.entries(detectResult.value.browsers)) {
+    if (!data.found) {
+      list.push({ name: b, label: browserLabels[b] || b, error: data.error || 'Unknown' })
+    }
+  }
+  return list
+})
+
+async function detect() {
+  loading.value = true
+  error.value = null
+  detectResult.value = null
+  try {
+    detectResult.value = await api.cfBypass.detect()
+    if (!detectResult.value.ok) {
+      error.value = detectResult.value.error || 'Detection failed'
+    }
+  } catch (e) {
+    error.value = e.message
+  } finally {
+    loading.value = false
+  }
+}
+
+function copyToClipboard() {
+  if (!cookieTextarea.value) return
+  cookieTextarea.value.select()
+  navigator.clipboard.writeText(cookieString.value)
+  copied.value = true
+  setTimeout(() => copied.value = false, 2000)
+}
+
+function goToSettings() {
+  router.push({
+    name: 'settings',
+    state: { cfClearance: cfClearanceValue.value, userAgent: defaultUA.value },
+  })
+}
+
+function goToSettingsEmpty() {
+  router.push({ name: 'settings' })
+}
+
+onMounted(detect)
+</script>
+
+<style scoped>
+.cf-result {
+  max-width: 700px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+.cf-result h2 {
+  margin-bottom: 1.5rem;
+}
+
+.loading-state {
+  text-align: center;
+  padding: 3rem;
+}
+
+.loading-state p {
+  margin-top: 1rem;
+  color: var(--ink-400);
+}
+
+.result-card {
+  padding: 2rem;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  border: 1px solid var(--border-color);
+}
+
+.success-card {
+  border-color: var(--green-300);
+  background: color-mix(in srgb, var(--green-500) 5%, transparent);
+}
+
+.manual-card {
+  border-color: var(--blue-300);
+}
+
+.error-card {
+  border-color: var(--red-300);
+  background: color-mix(in srgb, var(--red-500) 5%, transparent);
+}
+
+.cookie-display {
+  margin: 1.5rem 0;
+}
+
+.cookie-display label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.cookie-textarea {
+  width: 100%;
+  font-family: monospace;
+  font-size: 12px;
+  padding: 0.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background: var(--ink-50);
+  color: var(--ink-800);
+  resize: vertical;
+}
+
+.ua-hint {
+  margin: 1rem 0;
+  padding: 0.75rem 1rem;
+  background: var(--ink-50);
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.ua-hint .ua-preview {
+  margin-top: 4px;
+  font-size: 12px;
+  word-break: break-all;
+}
+
+.ua-hint code {
+  background: var(--ink-100);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 11px;
+}
+
+.copied-msg {
+  margin-left: 8px;
+  color: var(--green-600);
+  font-weight: 600;
+}
+
+.hint {
+  color: var(--ink-400);
+  font-size: 13px;
+  margin: 1rem 0;
+}
+
+.browser-list {
+  margin: 1rem 0;
+}
+
+.browser-list ul {
+  padding-left: 1.5rem;
+}
+
+.browser-list li {
+  margin-bottom: 0.5rem;
+}
+
+.manual-steps, .manual-paste-hint {
+  margin: 1rem 0;
+  padding: 1rem;
+  border-radius: 6px;
+  background: var(--ink-50);
+}
+
+.manual-steps h4, .manual-paste-hint h4 {
+  margin-bottom: 0.5rem;
+}
+
+.manual-steps ol, .manual-paste-hint ol {
+  padding-left: 1.5rem;
+  line-height: 1.8;
+}
+
+.manual-paste-hint code {
+  background: var(--ink-100);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 12px;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+</style>

package/web/src/views/DaemonControl.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Daemon Control</h2>
+    </div>
+
+    <Skeleton v-if="loading" width="100%" height="300px" />
+
+    <Card v-else-if="notInstalled">
+      <template #content>
+        <div class="empty-content" style="padding:20px">
+          <div style="font-size:14px;color:var(--text-bright);margin-bottom:12px">Daemon Not Installed</div>
+          <p style="color:var(--ink-500);font-size:13px;margin-bottom:20px">The systemd service is not set up yet. Install it from the terminal:</p>
+          <pre style="background:var(--bg-primary);border:1px solid var(--ink-100);padding:12px 16px;font-family:var(--font-mono);font-size:12px;color:var(--text-primary);border-radius:var(--radius);display:inline-block">ani-auto daemon install</pre>
+        </div>
+      </template>
+    </Card>
+
+    <template v-else>
+      <Card style="margin-bottom:16px">
+        <template #content>
+          <div style="text-align:center;padding:16px">
+            <Tag :value="daemon.running ? 'RUNNING' : daemon.enabled ? 'IDLE' : 'DISABLED'"
+                 :severity="daemon.running ? 'success' : daemon.enabled ? 'secondary' : 'danger'"
+                 style="font-size:14px;font-weight:600;padding:8px 24px" />
+          </div>
+          <div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap">
+            <Button label="Start" severity="primary" size="small" @click="daemonAction('start')" :disabled="daemon.running || !daemon.enabled" />
+            <Button label="Stop" size="small" @click="daemonAction('stop')" :disabled="!daemon.running" />
+            <Button label="Restart" size="small" @click="daemonAction('restart')" :disabled="!daemon.running" />
+            <Button v-if="daemon.enabled" label="Disable" severity="danger" size="small" @click="daemonAction('disable')" />
+            <Button v-else label="Enable" severity="primary" size="small" @click="daemonAction('enable')" />
+          </div>
+        </template>
+      </Card>
+
+      <Card>
+        <template #title>
+          <span style="font-size:13px">Output</span>
+        </template>
+        <template #content>
+          <pre style="background:var(--bg-primary);border:1px solid var(--ink-100);border-radius:var(--radius);padding:12px;font-family:var(--font-mono);font-size:11px;max-height:300px;overflow-y:auto;white-space:pre-wrap;color:var(--ink-700)">{{ daemon.output || 'No output' }}</pre>
+        </template>
+      </Card>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { api } from '../api/client'
+
+const loading = ref(true)
+const daemon = ref({ enabled: false, running: false, output: '' })
+
+const notInstalled = computed(() =>
+  daemon.value.output?.toLowerCase().includes('could not be found') ||
+  daemon.value.output?.toLowerCase().includes('not found') ||
+  daemon.value.output?.toLowerCase().includes('unit not found')
+)
+
+async function loadStatus() {
+  try {
+    daemon.value = await api.daemon.status()
+  } catch (e) {
+    console.error(e)
+    daemon.value = { enabled: false, running: false, output: `Error: ${e.message}` }
+  } finally {
+    loading.value = false
+  }
+}
+
+async function daemonAction(action) {
+  try {
+    await api.daemon[action]()
+    await loadStatus()
+  } catch (e) {
+    alert(`Failed: ${e.message}`)
+  }
+}
+
+onMounted(loadStatus)
+</script>

package/web/src/views/Dashboard.vue

@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <div class="page-header">
+      <div>
+        <h2>Dashboard</h2>
+        <div class="subtitle" v-if="configStore.config?.anilistUsername">
+          {{ configStore.config.anilistUsername }}
+        </div>
+      </div>
+      <div class="page-header-actions">
+        <Button label="Download New Episodes" severity="primary" @click="startDownload" />
+        <Button label="Sync AniList" @click="$router.push('/anilist')" />
+        <Button label="Refresh Posters" severity="secondary" @click="refreshPosters" :disabled="refreshing" />
+      </div>
+    </div>
+
+    <Skeleton v-if="loading" width="100%" height="300px" />
+
+    <template v-else>
+      <div class="stat-row">
+        <Card>
+          <template #content>
+            <div class="stat-inner">
+              <div class="stat-value" style="color:var(--red-primary)">{{ trackedCount }}</div>
+              <div class="stat-label">Tracked</div>
+            </div>
+          </template>
+        </Card>
+        <Card>
+          <template #content>
+            <div class="stat-inner">
+              <div class="stat-value" style="color:var(--status-done)">{{ totalDownloaded }}</div>
+              <div class="stat-label">Downloaded</div>
+            </div>
+          </template>
+        </Card>
+        <Card>
+          <template #content>
+            <div class="stat-inner">
+              <div class="stat-value" style="color:var(--status-fail)">{{ totalFailed }}</div>
+              <div class="stat-label">Failed</div>
+            </div>
+          </template>
+        </Card>
+        <Card>
+          <template #content>
+            <div class="stat-inner">
+              <div class="stat-value" style="color:var(--ink-500)">{{ daemonStatus }}</div>
+              <div class="stat-label">Daemon</div>
+            </div>
+          </template>
+        </Card>
+      </div>
+
+      <div v-if="trackedAnime.length === 0">
+        <Card>
+          <template #content>
+            <div class="empty-content">
+              <h3>No anime tracked yet</h3>
+              <p>Sync your AniList list or add anime manually.</p>
+              <Button label="Sync AniList" @click="$router.push('/anilist')" style="margin-top:12px" />
+            </div>
+          </template>
+        </Card>
+      </div>
+
+      <div v-else>
+        <h3 style="color:var(--text-bright);font-size:14px;margin-bottom:12px">Currently Watching</h3>
+        <div class="anime-grid">
+          <div v-for="a in trackedAnime" :key="a.id" class="anime-card" @click="$router.push(`/anime/${a.id}`)">
+            <img :src="a.poster_url || FALLBACK_POSTER" class="anime-poster" @error="handleImgError" />
+            <div class="anime-info">
+              <div class="anime-title">{{ a.anilist_title || a.title }}</div>
+              <div class="anime-meta">
+                {{ a.source }} &mdash;
+                <Tag :value="a.confirmed_site_title ? 'matched' : 'unmatched'" :severity="a.confirmed_site_title ? 'success' : 'secondary'" size="small" />
+              </div>
+              <div class="anime-progress">
+                <div class="bar" :style="{ width: progressPercent(a) + '%' }"></div>
+              </div>
+              <div class="anime-stats">
+                <span class="done">{{ a.stats?.done || 0 }} done</span>
+                <span class="failed">{{ a.stats?.failed || 0 }} failed</span>
+                <span class="pending">{{ a.stats?.pending || 0 }} pending</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="recentRuns.length" style="margin-top:28px">
+        <h3 style="color:var(--text-bright);font-size:14px;margin-bottom:12px">Recent Runs</h3>
+        <DataTable :value="recentRuns" stripedRows>
+          <Column field="ran_at" header="Time">
+            <template #body="{ data }">
+              <span style="font-family:var(--font-mono);font-size:12px">{{ data.ran_at }}</span>
+            </template>
+          </Column>
+          <Column field="downloaded" header="Downloaded">
+            <template #body="{ data }">
+              <Tag v-if="data.downloaded > 0" :value="data.downloaded" severity="success" />
+              <span v-else style="color:var(--ink-500)">{{ data.downloaded }}</span>
+            </template>
+          </Column>
+          <Column field="skipped" header="Skipped">
+            <template #body="{ data }">
+              <span style="color:var(--ink-500)">{{ data.skipped }}</span>
+            </template>
+          </Column>
+          <Column field="failed" header="Failed">
+            <template #body="{ data }">
+              <Tag v-if="data.failed > 0" :value="data.failed" severity="danger" />
+              <span v-else style="color:var(--ink-500)">{{ data.failed }}</span>
+            </template>
+          </Column>
+        </DataTable>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useConfigStore } from '../stores/config'
+import { useDownloadStore } from '../stores/download'
+import { api } from '../api/client'
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+
+const router = useRouter()
+const configStore = useConfigStore()
+const downloadStore = useDownloadStore()
+
+const loading = ref(true)
+const refreshing = ref(false)
+const trackedAnime = ref([])
+const recentRuns = ref([])
+const daemonStatus = ref('--')
+
+const trackedCount = computed(() => trackedAnime.value.length)
+const totalDownloaded = computed(() => trackedAnime.value.reduce((s, a) => s + (a.stats?.done || 0), 0))
+const totalFailed = computed(() => trackedAnime.value.reduce((s, a) => s + (a.stats?.failed || 0), 0))
+
+const FALLBACK_POSTER = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='150' viewBox='0 0 100 150'%3E%3Crect fill='%23111111' width='100' height='150'/%3E%3Cpath fill='%23333333' d='M40 55l30 20-30 20z'/%3E%3C/svg%3E"
+
+function handleImgError(e) {
+  e.target.src = FALLBACK_POSTER
+}
+
+function progressPercent(a) {
+  const total = (a.stats?.done || 0) + (a.stats?.failed || 0) + (a.stats?.pending || 0)
+  if (!total) return 0
+  return Math.round(((a.stats?.done || 0) / total) * 100)
+}
+
+async function refreshPosters() {
+  refreshing.value = true
+  try {
+    const res = await fetch('/api/anime/refresh-posters', { method: 'POST' })
+    const data = await res.json()
+    trackedAnime.value = await api.anime.list()
+  } catch (e) {
+    console.error(e)
+  } finally {
+    refreshing.value = false
+  }
+}
+
+async function startDownload() {
+  downloadStore.startDownload()
+  router.push('/download')
+}
+
+onMounted(async () => {
+  try {
+    trackedAnime.value = await api.anime.list()
+    recentRuns.value = await api.runs.list(5)
+    const daemon = await api.daemon.status()
+    daemonStatus.value = daemon.running ? 'active' : daemon.enabled ? 'idle' : 'off'
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+})
+</script>