ani-auto 1.4.4 → 2.0.0

package/web/src/views/DownloadCenter.vue

@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Download Center</h2>
+      <div class="subtitle">Select anime and start downloading</div>
+    </div>
+
+    <Card style="margin-bottom:16px">
+      <template #content>
+        <div class="form-row" style="margin-bottom:12px;max-width:400px">
+          <div class="form-group" style="margin-bottom:0">
+            <label>Quality</label>
+            <Select v-model="quality" :options="['1080p', '720p', '360p']" fluid />
+          </div>
+          <div class="form-group" style="margin-bottom:0">
+            <label>Language</label>
+            <Select v-model="language" :options="['sub', 'dub']" fluid />
+          </div>
+        </div>
+        <div style="display:flex;gap:10px;flex-wrap:wrap">
+          <Button label="Download All New Episodes" severity="primary" @click="startDownload" :disabled="downloadStore.running" />
+          <Button label="Retry Failed" @click="retryFailed" :disabled="downloadStore.running" />
+        </div>
+      </template>
+    </Card>
+
+    <template v-if="downloadStore.running || downloadStore.summary">
+      <Card v-if="downloadStore.summary" style="border-color:var(--status-done);margin-bottom:12px">
+        <template #content>
+          <div style="display:flex;gap:20px;align-items:center">
+            <div><Tag :value="downloadStore.summary.downloaded + ' downloaded'" severity="success" /></div>
+            <div><span style="color:var(--ink-500)">{{ downloadStore.summary.skipped }} skipped</span></div>
+            <div><Tag v-if="downloadStore.summary.failed > 0" :value="downloadStore.summary.failed + ' failed'" severity="danger" /></div>
+            <Button label="Clear" size="small" @click="downloadStore.reset()" style="margin-left:auto" />
+          </div>
+        </template>
+      </Card>
+
+      <Card v-for="(prog, id) in downloadStore.progress" :key="id" style="margin-bottom:10px">
+        <template #content>
+          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
+            <strong style="color:var(--text-bright);font-size:13px">{{ prog.title }}</strong>
+            <span style="font-size:11px;color:var(--ink-500)">{{ prog.done }} done / {{ prog.failed }} failed</span>
+          </div>
+          <div v-for="(ep, num) in prog.episodes" :key="num" style="margin-bottom:4px">
+            <div style="display:flex;justify-content:space-between;font-size:11px;margin-bottom:1px">
+              <span>EP {{ num }}</span>
+              <span v-if="ep.done" style="color:var(--status-done)">Done</span>
+              <span v-else-if="ep.error" style="color:var(--status-fail)">Failed</span>
+              <span v-else>{{ ep.speed || '' }}</span>
+            </div>
+            <ProgressBar v-if="ep.percent !== undefined && !ep.done" :value="ep.percent" style="height:4px" />
+          </div>
+        </template>
+      </Card>
+    </template>
+
+    <Card v-if="downloadStore.logs.length" style="margin-top:16px">
+      <template #title>
+        <div style="display:flex;justify-content:space-between;align-items:center">
+          <span style="font-size:13px">Activity Log</span>
+          <Button label="Clear" size="small" @click="downloadStore.logs = []" />
+        </div>
+      </template>
+      <template #content>
+        <div ref="logContainer" style="max-height:300px;overflow-y:auto;font-family:var(--font-mono);font-size:11px;line-height:1.6;background:var(--bg-primary);padding:10px;border:1px solid var(--ink-100);border-radius:var(--radius)">
+          <div v-for="(l, i) in downloadStore.logs" :key="i" style="white-space:pre-wrap;word-break:break-all">
+            <span style="color:var(--ink-500)">{{ l.timestamp?.slice(11, 19) || '' }}</span>
+            <span :style="{ color: levelColor(l.level) }">[{{ l.level }}]</span>
+            {{ l.message }}
+          </div>
+        </div>
+      </template>
+    </Card>
+
+    <template v-if="!downloadStore.running && !downloadStore.summary">
+      <h3 style="color:var(--text-bright);font-size:14px;margin-bottom:10px">Tracked Anime</h3>
+      <Card v-if="animeList.length === 0">
+        <template #content>
+          <div class="empty-content">
+            <h3>No anime tracked</h3>
+            <p>Add anime first via AniList Sync or manually.</p>
+          </div>
+        </template>
+      </Card>
+      <div v-else class="list-group">
+        <div v-for="a in animeList" :key="a.id" class="anime-card-row">
+          <img v-if="a.poster_url" :src="a.poster_url" class="anime-poster" @error="handleImgError" />
+          <div class="anime-info">
+            <div class="anime-title">{{ a.anilist_title || a.title }}</div>
+            <div class="anime-meta">
+              {{ a.stats?.done || 0 }} done &middot;
+              {{ a.stats?.pending || 0 }} pending &middot;
+              {{ a.stats?.failed || 0 }} failed
+            </div>
+          </div>
+          <Button v-if="a.confirmed_site_title" label="Download" severity="primary" size="small" @click="downloadAnime(a)" />
+          <Tag v-else value="Unmatched" severity="secondary" size="small" />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick, onMounted } from 'vue'
+import { useDownloadStore } from '../stores/download'
+import { api } from '../api/client'
+
+const downloadStore = useDownloadStore()
+const animeList = ref([])
+const quality = ref('1080p')
+const language = ref('sub')
+const logContainer = ref(null)
+
+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 levelColor(level) {
+  switch (level) {
+    case 'ok': return 'var(--status-done)'
+    case 'warn': return 'var(--status-pending)'
+    case 'err': return 'var(--status-fail)'
+    default: return 'var(--text-dim)'
+  }
+}
+
+watch(() => downloadStore.logs.length, async () => {
+  await nextTick()
+  if (logContainer.value) logContainer.value.scrollTop = logContainer.value.scrollHeight
+})
+
+async function startDownload() {
+  await downloadStore.startDownload(quality.value, language.value)
+}
+
+async function downloadAnime(a) {
+  await downloadStore.downloadAnime(a.id, quality.value, language.value)
+}
+
+async function retryFailed() {
+  await downloadStore.retryFailed()
+}
+
+onMounted(async () => {
+  try {
+    animeList.value = await api.anime.list()
+  } catch (e) {}
+})
+</script>

package/web/src/views/MatchFinder.vue

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Match Anime</h2>
+      <div class="subtitle" v-if="anime">{{ anime.anilist_title || anime.title }}</div>
+    </div>
+
+    <Skeleton v-if="loading" width="100%" height="300px" />
+
+    <Card v-else-if="!anime">
+      <template #content>
+        <div class="empty-content"><h3>Anime not found</h3></div>
+      </template>
+    </Card>
+
+    <template v-else>
+      <Card style="margin-bottom:16px">
+        <template #content>
+          <div><strong style="color:var(--text-bright)">{{ anime.anilist_title || anime.title }}</strong></div>
+          <div style="color:var(--ink-500);font-size:12px;margin-top:4px">AniList ID: {{ anime.anilist_id || 'N/A' }}</div>
+        </template>
+      </Card>
+
+      <Card v-if="autoMatch" style="margin-bottom:16px;border-color:var(--status-done)">
+        <template #content>
+          <div style="display:flex;justify-content:space-between;align-items:center">
+            <div>
+              <Tag value="Auto Match Found" severity="success" style="margin-bottom:4px" />
+              <div style="color:var(--text-bright);font-size:16px;margin-top:4px">{{ autoMatch.title }}</div>
+              <div style="color:var(--ink-500);font-size:12px">{{ autoMatch.year || '?' }} &mdash; {{ autoMatch.episodes || '?' }} eps</div>
+            </div>
+            <Button label="Confirm Match" severity="primary" @click="confirmMatch(autoMatch)" />
+          </div>
+        </template>
+      </Card>
+
+      <Card>
+        <template #title>Manual Search</template>
+        <template #content>
+          <div style="display:flex;gap:10px;margin-bottom:16px">
+            <InputText v-model="searchQuery" placeholder="Search by title..." fluid />
+            <Button label="Search API" @click="search" />
+          </div>
+          <div v-if="searchResults.length">
+            <div v-for="r in searchResults" :key="r.session" class="match-result-card" @click="confirmMatch(r)">
+              <div style="display:flex;justify-content:space-between;align-items:center">
+                <div>
+                  <div style="color:var(--text-bright)">{{ r.title }}</div>
+                  <div style="color:var(--ink-500);font-size:12px">{{ r.year || '?' }} &mdash; {{ r.episodes || '?' }} eps</div>
+                </div>
+                <Button label="Select" severity="primary" size="small" @click.stop="confirmMatch(r)" />
+              </div>
+            </div>
+          </div>
+          <div v-else-if="searched" class="empty-content" style="padding:20px">
+            <h3>No results</h3>
+          </div>
+        </template>
+      </Card>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { api } from '../api/client'
+
+const props = defineProps({ animeId: String })
+const route = useRoute()
+const router = useRouter()
+
+const loading = ref(true)
+const anime = ref(null)
+const autoMatch = ref(null)
+const searchResults = ref([])
+const searchQuery = ref('')
+const searched = ref(false)
+
+async function load() {
+  const id = props.animeId || route.params.animeId
+  try {
+    anime.value = await api.anime.get(id)
+    searchQuery.value = anime.value.anilist_title || anime.value.title
+    await search()
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function search() {
+  searched.value = true
+  try {
+    const data = await api.match.search(searchQuery.value, anime.value?.anilist_id)
+    searchResults.value = data.results || []
+    autoMatch.value = data.autoMatch || null
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+async function confirmMatch(match) {
+  const title = anime.value.anilist_title || anime.value.title
+  await api.match.confirm({
+    anilistTitle: title,
+    session: match.session,
+    title: match.title,
+    anilistId: anime.value.anilist_id,
+  })
+  router.push(`/anime/${anime.value.id}`)
+}
+
+onMounted(load)
+</script>
+
+<style scoped>
+.match-result-card {
+  padding: 12px;
+  border: 1px solid var(--ink-100);
+  border-radius: var(--radius);
+  margin-bottom: 8px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+.match-result-card:hover {
+  border-color: var(--ink-300);
+  background: var(--bg-hover);
+}
+</style>

package/web/src/views/OAuthCallback.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="onboarding">
+    <div class="onboarding-box">
+      <div class="logo">ANI-AUTO</div>
+      <p v-if="status === 'processing'">Verifying token...</p>
+      <p v-if="status === 'done'" style="color:var(--status-done)">Connected! Closing window...</p>
+      <p v-if="status === 'error'" style="color:var(--status-fail)">Failed: {{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { api } from '../api/client'
+
+const status = ref('processing')
+const error = ref('')
+
+onMounted(async () => {
+  const hash = window.location.hash.substring(1)
+  const params = new URLSearchParams(hash)
+  const token = params.get('access_token')
+  if (!token) {
+    status.value = 'error'
+    error.value = 'No token found in URL'
+    return
+  }
+  try {
+    const res = await api.config.verifyToken(token)
+    if (res.ok) {
+      await api.config.update({ anilistToken: token, anilistUsername: res.name, anilistAvatar: res.avatar })
+      status.value = 'done'
+      window.opener?.postMessage({ type: 'anilist-token', token }, '*')
+      setTimeout(() => window.close(), 1000)
+    } else {
+      status.value = 'error'
+      error.value = res.error
+    }
+  } catch (e) {
+    status.value = 'error'
+    error.value = e.message
+  }
+})
+</script>

package/web/src/views/Onboarding.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="onboarding">
+    <div class="onboarding-box">
+      <div class="logo">ANI-AUTO</div>
+      <div class="logo-sub">Automatic Anime Downloader</div>
+
+      <div v-if="step === 'welcome'">
+        <h2>Welcome</h2>
+        <p>Connect your AniList account to sync your watch list and automatically download new episodes. Or skip and use manual mode.</p>
+        <div class="btn-group">
+          <Button label="Connect AniList" severity="primary" @click="connectAnilist" />
+          <Button label="Skip — Manual Mode" @click="skipAnilist" />
+        </div>
+      </div>
+
+      <div v-if="step === 'cf-bypass'">
+        <h2>Cloudflare Bypass</h2>
+        <p>AnimePahe requires a cf_clearance cookie to bypass Cloudflare. We'll help you get it.</p>
+        <div class="btn-group" style="margin-top:20px">
+          <Button label="Auto-Detect Cookies" severity="primary" @click="startCfBypass" />
+        </div>
+      </div>
+
+      <div v-if="step === 'telegram'">
+        <h2>Notifications</h2>
+        <p>Optional: Get Telegram notifications when episodes download.</p>
+        <div class="form-group" style="text-align:left">
+          <label>Telegram Chat ID</label>
+          <InputText v-model="telegramChatId" placeholder="e.g. 123456789" fluid />
+          <p style="color:var(--ink-500);font-size:11px;margin-top:4px">Message @userinfobot on Telegram to get your ID</p>
+        </div>
+        <div class="btn-group" style="margin-top:20px">
+          <Button label="Save &amp; Continue" severity="primary" @click="saveTelegram" />
+          <Button label="Skip Telegram" @click="finish" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { api } from '../api/client'
+import { useConfigStore } from '../stores/config'
+
+const router = useRouter()
+const configStore = useConfigStore()
+const step = ref('welcome')
+const telegramChatId = ref('')
+const tokenCaptured = ref(false)
+async function connectAnilist() {
+  const { url } = await api.config.oauthUrl()
+  const w = window.open(url, 'anilist-oauth', 'width=600,height=700')
+  const timer = setInterval(() => {
+    if (w.closed) {
+      clearInterval(timer)
+      if (!tokenCaptured.value) {
+        step.value = 'cf-bypass'
+      }
+    }
+  }, 500)
+}
+
+function skipAnilist() {
+  step.value = 'cf-bypass'
+}
+
+async function startCfBypass() {
+  router.push({ name: 'cf-result' })
+}
+
+async function saveTelegram() {
+  if (telegramChatId.value) {
+    await api.config.update({ telegramChatId: telegramChatId.value })
+  }
+  await finish()
+}
+
+async function finish() {
+  await api.config.update({ onboardingSkipped: true })
+  await configStore.fetch()
+  router.push('/')
+}
+
+window.addEventListener('message', async (e) => {
+  if (e.data?.type === 'anilist-token') {
+    tokenCaptured.value = true
+    await configStore.fetch()
+    step.value = 'cf-bypass'
+  }
+})
+</script>

package/web/src/views/RunHistory.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Run History</h2>
+      <div class="subtitle">{{ runs.length }} runs recorded</div>
+    </div>
+
+    <Skeleton v-if="loading" width="100%" height="300px" />
+
+    <template v-else-if="runs.length === 0">
+      <Card>
+        <template #content>
+          <div class="empty-content">
+            <h3>No runs yet</h3>
+            <p>Run a download cycle to see history here.</p>
+          </div>
+        </template>
+      </Card>
+    </template>
+
+    <template v-else>
+      <div class="stat-row">
+        <Card>
+          <template #content>
+            <div class="stat-inner">
+              <div class="stat-value" style="color:var(--status-done)">{{ totals.downloaded }}</div>
+              <div class="stat-label">Total Downloaded</div>
+            </div>
+          </template>
+        </Card>
+        <Card>
+          <template #content>
+            <div class="stat-inner">
+              <div class="stat-value" style="color:var(--status-fail)">{{ totals.failed }}</div>
+              <div class="stat-label">Total Failed</div>
+            </div>
+          </template>
+        </Card>
+        <Card>
+          <template #content>
+            <div class="stat-inner">
+              <div class="stat-value" style="color:var(--ink-500)">{{ totals.skipped }}</div>
+              <div class="stat-label">Total Skipped</div>
+            </div>
+          </template>
+        </Card>
+      </div>
+
+      <DataTable :value="runs" paginator :rows="20" :rowsPerPageOptions="[10,20,50]"
+                 dataKey="id" :sortField="sortField" :sortOrder="sortOrder" @sort="onSort"
+                 paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink"
+                 currentPageReportTemplate="{currentPage} of {totalPages}"
+                 stripedRows>
+        <Column field="id" header="#" sortable style="width:60px">
+          <template #body="{ data }">
+            <span style="font-family:var(--font-mono);color:var(--ink-500)">{{ data.id }}</span>
+          </template>
+        </Column>
+        <Column field="ran_at" header="Time" sortable>
+          <template #body="{ data }">
+            <span style="font-family:var(--font-mono);font-size:12px">{{ data.ran_at }}</span>
+          </template>
+        </Column>
+        <Column field="downloaded" header="Downloaded" sortable>
+          <template #body="{ data }">
+            <Tag :value="data.downloaded" severity="success" v-if="data.downloaded > 0" />
+            <span v-else style="color:var(--ink-500)">{{ data.downloaded }}</span>
+          </template>
+        </Column>
+        <Column field="skipped" header="Skipped" sortable>
+          <template #body="{ data }">
+            <span style="color:var(--ink-500)">{{ data.skipped }}</span>
+          </template>
+        </Column>
+        <Column field="failed" header="Failed" sortable>
+          <template #body="{ data }">
+            <Tag :value="data.failed" severity="danger" v-if="data.failed > 0" />
+            <span v-else style="color:var(--ink-500)">{{ data.failed }}</span>
+          </template>
+        </Column>
+        <Column field="notes" header="Notes">
+          <template #body="{ data }">
+            <span style="font-size:12px;color:var(--ink-700)">{{ data.notes || '-' }}</span>
+          </template>
+        </Column>
+      </DataTable>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { api } from '../api/client'
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+
+const loading = ref(true)
+const runs = ref([])
+const sortField = ref('ran_at')
+const sortOrder = ref(-1)
+
+const totals = computed(() => ({
+  downloaded: runs.value.reduce((s, r) => s + r.downloaded, 0),
+  skipped: runs.value.reduce((s, r) => s + r.skipped, 0),
+  failed: runs.value.reduce((s, r) => s + r.failed, 0),
+}))
+
+function onSort(event) {
+  sortField.value = event.sortField
+  sortOrder.value = event.sortOrder
+}
+
+onMounted(async () => {
+  try {
+    runs.value = await api.runs.list(50)
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+})
+</script>