ani-auto 1.4.3 → 2.0.0

package/web/src/stores/update.js

@@ -0,0 +1,73 @@
+import { defineStore } from 'pinia'
+import { api } from '../api/client'
+
+export const useUpdateStore = defineStore('update', {
+  state: () => ({
+    checking: false,
+    currentVersion: '',
+    latestVersion: '',
+    updateAvailable: false,
+    checkError: null,
+    installing: false,
+    installProgress: 0,
+    installMessage: '',
+    installDone: false,
+    installError: null,
+  }),
+  actions: {
+    async check() {
+      this.checking = true
+      this.checkError = null
+      try {
+        const res = await api.update.check()
+        this.currentVersion = res.current
+        this.latestVersion = res.latest
+        this.updateAvailable = res.updateAvailable
+      } catch (e) {
+        this.checkError = e.message
+      } finally {
+        this.checking = false
+      }
+    },
+    async install() {
+      this.installing = true
+      this.installProgress = 0
+      this.installMessage = 'Starting...'
+      this.installDone = false
+      this.installError = null
+      try {
+        await api.update.install()
+      } catch (e) {
+        this.installError = e.message
+        this.installing = false
+      }
+    },
+    handleEvent(msg) {
+      switch (msg.type) {
+        case 'update:progress':
+          this.installProgress = msg.percent
+          this.installMessage = msg.message
+          break
+        case 'update:done':
+          this.installProgress = 100
+          this.installMessage = msg.message
+          this.installDone = true
+          this.installing = false
+          this.updateAvailable = false
+          this.latestVersion = msg.version
+          break
+        case 'update:error':
+          this.installError = msg.error
+          this.installing = false
+          break
+      }
+    },
+    reset() {
+      this.installing = false
+      this.installProgress = 0
+      this.installMessage = ''
+      this.installDone = false
+      this.installError = null
+    },
+  },
+})

package/web/src/views/About.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>About</h2>
+    </div>
+    <Card>
+      <template #content>
+        <div style="text-align:center;padding:40px">
+          <pre class="about-banner">{{ banner }}</pre>
+          <div style="font-size:12px;color:var(--ink-500);letter-spacing:3px;text-transform:uppercase;margin-bottom:20px">
+            Automatic Anime Downloader &mdash; v1.4.4
+          </div>
+          <div style="color:var(--text-dim);font-size:13px;max-width:400px;margin:0 auto;line-height:1.8">
+            Automatically downloads new anime episodes.<br />
+            Works with your AniList watching list or manual mode.
+          </div>
+        </div>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<script setup>
+const banner = `
+      █████╗ ███╗   ██╗██╗      █████╗ ██╗   ██╗████████╗ ██████╗
+     ██╔══██╗████╗  ██║██║     ██╔══██╗██║   ██║╚══██╔══╝██╔═══██╗
+     ███████║██╔██╗ ██║██║     ███████║██║   ██║   ██║   ██║   ██║
+     ██╔══██║██║╚██╗██║██║     ██╔══██║██║   ██║   ██║   ██║   ██║
+     ██║  ██║██║ ╚████║██║     ██║  ██║╚██████╔╝   ██║   ╚██████╔╝
+     ╚═╝  ╚═╝╚═╝  ╚═══╝╚═╝     ╚═╝  ╚═╝ ╚═════╝    ╚═╝    ╚═════╝
+`
+</script>
+
+<style scoped>
+.about-banner {
+  font-family: var(--font-logo);
+  font-size: 10px;
+  line-height: 1.2;
+  color: var(--red-primary);
+  margin-bottom: 16px;
+}
+</style>

package/web/src/views/AniListSync.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>AniList Sync</h2>
+      <div class="subtitle">Browse your AniList and add to tracking</div>
+    </div>
+
+    <div class="anilist-toolbar">
+      <Select v-model="selectedStatus" @change="fetchList" :options="statusOptions" optionValue="value" style="width:180px">
+        <template #value="{ value }">
+          {{ statusOptions.find(o => o.value === value)?.label || value }}
+        </template>
+        <template #option="{ option }">
+          {{ option.label }}
+        </template>
+      </Select>
+      <Button label="Refresh" @click="fetchList" />
+      <div style="flex:1;min-width:10px"></div>
+      <InputText v-model="manualTitle" placeholder="Search AniList..." style="width:220px" />
+      <Button label="Search" @click="searchAnilist" />
+    </div>
+
+    <Skeleton v-if="loading" width="100%" height="300px" />
+
+    <div v-else-if="searchResults.length">
+      <h3 style="color:var(--text-bright);font-size:14px;margin-bottom:12px">Search Results</h3>
+      <div class="list-group">
+        <div v-for="r in searchResults" :key="r.anilistId" class="anime-card-row" @click="addFromSearch(r)">
+          <img v-if="r.posterUrl" :src="r.posterUrl" class="anime-poster" @error="handleImgError" />
+          <div class="anime-info">
+            <div class="anime-title">{{ r.titles?.english || r.titles?.romaji }}</div>
+            <div class="anime-meta">{{ r.year || '?' }} &mdash; {{ r.episodes || '?' }} eps &mdash; {{ r.status }}</div>
+          </div>
+          <Button label="Add" severity="primary" size="small" @click.stop="addFromSearch(r)" />
+        </div>
+      </div>
+    </div>
+
+    <div v-else-if="anilistEntries.length">
+      <h3 style="color:var(--text-bright);font-size:14px;margin-bottom:12px">{{ selectedStatus }} ({{ anilistEntries.length }})</h3>
+      <div class="list-group">
+        <div v-for="entry in anilistEntries" :key="entry.anilistId" class="anime-card-row" @click="addEntry(entry)">
+          <img v-if="entry.posterUrl" :src="entry.posterUrl" class="anime-poster" @error="handleImgError" />
+          <div class="anime-info">
+            <div class="anime-title">{{ entry.titles?.english || entry.titles?.romaji }}</div>
+            <div class="anime-meta">{{ entry.progress || 0 }}/{{ entry.totalEpisodes || '?' }} eps &mdash; {{ entry.animeStatus }}</div>
+          </div>
+          <Button label="Track" severity="primary" size="small" @click.stop="addEntry(entry)" />
+        </div>
+      </div>
+    </div>
+
+    <Card v-else>
+      <template #content>
+        <div class="empty-content">
+          <h3>No entries found</h3>
+          <p>Connect AniList in Settings or add manually.</p>
+        </div>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { api } from '../api/client'
+
+const loading = ref(false)
+const selectedStatus = ref('CURRENT')
+const manualTitle = ref('')
+const anilistEntries = ref([])
+const searchResults = ref([])
+
+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
+}
+
+const statusOptions = [
+  { label: 'CURRENT (Watching)', value: 'CURRENT' },
+  { label: 'PLANNING', value: 'PLANNING' },
+  { label: 'PAUSED', value: 'PAUSED' },
+  { label: 'REPEATING', value: 'REPEATING' },
+]
+
+async function fetchList() {
+  loading.value = true
+  try {
+    anilistEntries.value = await api.anilist.list(selectedStatus.value)
+    searchResults.value = []
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function searchAnilist() {
+  if (!manualTitle.value) return
+  loading.value = true
+  try {
+    searchResults.value = await api.anilist.search(manualTitle.value)
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function addEntry(entry) {
+  const title = entry.titles?.english || entry.titles?.romaji
+  await api.anime.add({ title, anilistId: entry.anilistId, poster_url: entry.posterUrl })
+}
+
+async function addFromSearch(r) {
+  const title = r.titles?.english || r.titles?.romaji
+  await api.anime.add({ title, anilistId: r.anilistId, poster_url: r.posterUrl })
+}
+
+onMounted(fetchList)
+</script>

package/web/src/views/AnimeDetail.vue

@@ -0,0 +1,202 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>{{ anime?.anilist_title || anime?.title || 'Anime' }}</h2>
+      <div class="subtitle">
+        <router-link to="/anime">&larr; Back to Anime</router-link>
+      </div>
+    </div>
+
+    <Skeleton v-if="loading" width="100%" height="400px" />
+
+    <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 class="anime-detail-layout">
+            <img v-if="anime.poster_url" :src="anime.poster_url" class="anime-detail-poster" @error="handleImgError" />
+            <div style="flex:1">
+              <div style="margin-bottom:12px">
+                <Tag :value="anime.confirmed_site_title ? 'Matched' : 'Not Matched'" :severity="anime.confirmed_site_title ? 'success' : 'secondary'" />
+                <Tag :value="anime.enabled ? 'Enabled' : 'Disabled'" :severity="anime.enabled ? 'success' : 'danger'" style="margin-left:6px" />
+                <Tag :value="anime.source" severity="info" style="margin-left:6px" />
+              </div>
+              <div v-if="anime.confirmed_site_title" style="font-size:12px;color:var(--ink-500);margin-bottom:12px">
+                Matched to: {{ anime.confirmed_site_title }}
+                <a @click="$router.push(`/match/${anime.id}`)" style="margin-left:8px;cursor:pointer">change</a>
+              </div>
+              <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="overrideQuality" @change="setQuality" :options="qualityOptions" optionLabel="label" optionValue="value" fluid />
+                </div>
+                <div class="form-group" style="margin-bottom:0">
+                  <label>Language</label>
+                  <Select v-model="overrideLanguage" @change="setLanguage" :options="['sub', 'dub']" fluid />
+                </div>
+              </div>
+              <div style="display:flex;gap:8px;flex-wrap:wrap">
+                <Button label="Download Unwatched" severity="primary" @click="downloadAnime" />
+                <Button v-if="!anime.confirmed_site_title" label="Find Match" @click="$router.push(`/match/${anime.id}`)" />
+                <Button :label="anime.enabled ? 'Disable' : 'Enable'" @click="toggleEnabled" />
+                <Button label="Remove" severity="danger" @click="removeAnime" />
+              </div>
+            </div>
+          </div>
+        </template>
+      </Card>
+
+      <Tabs v-model:value="epFilter">
+        <TabList>
+          <Tab value="">All ({{ episodes.length }})</Tab>
+          <Tab value="done">Done ({{ stats.done }})</Tab>
+          <Tab value="failed">Failed ({{ stats.failed }})</Tab>
+          <Tab value="pending">Pending ({{ stats.pending }})</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel :value="epFilter">
+            <DataTable v-if="filteredEpisodes.length" :value="filteredEpisodes" dataKey="id" stripedRows>
+              <Column field="episode_num" header="EP">
+                <template #body="{ data }">
+                  <span style="font-family:var(--font-mono);font-size:12px">{{ data.episode_num }}</span>
+                </template>
+              </Column>
+              <Column field="status" header="Status">
+                <template #body="{ data }">
+                  <Tag :value="data.status" :severity="statusSeverity(data.status)" size="small" />
+                </template>
+              </Column>
+              <Column field="filename" header="Filename">
+                <template #body="{ data }">
+                  <span style="font-size:12px;color:var(--ink-700)">{{ data.filename || '-' }}</span>
+                </template>
+              </Column>
+              <Column field="downloaded_at" header="Downloaded">
+                <template #body="{ data }">
+                  <span style="font-size:12px;color:var(--ink-700)">{{ data.downloaded_at ? data.downloaded_at.slice(0, 10) : '-' }}</span>
+                </template>
+              </Column>
+              <Column header="">
+                <template #body="{ data }">
+                  <Button v-if="data.status === 'failed'" label="Retry" size="small" @click="retryEpisode(data)" />
+                </template>
+              </Column>
+            </DataTable>
+            <div v-else class="empty-content" style="padding:30px">
+              <h3>No {{ epFilter || '' }} episodes</h3>
+            </div>
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { api } from '../api/client'
+import { useDownloadStore } from '../stores/download'
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+import Tabs from 'primevue/tabs'
+import TabList from 'primevue/tablist'
+import Tab from 'primevue/tab'
+import TabPanels from 'primevue/tabpanels'
+import TabPanel from 'primevue/tabpanel'
+
+const props = defineProps({ id: String })
+const route = useRoute()
+const router = useRouter()
+const downloadStore = useDownloadStore()
+
+const loading = ref(true)
+const anime = ref(null)
+const episodes = ref([])
+const overrideQuality = ref(null)
+const overrideLanguage = ref('sub')
+const epFilter = ref('')
+
+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
+}
+
+const qualityOptions = [
+  { label: 'Default', value: null },
+  { label: '1080p', value: '1080p' },
+  { label: '720p', value: '720p' },
+  { label: '360p', value: '360p' },
+]
+
+const stats = computed(() => {
+  const all = episodes.value
+  return {
+    done: all.filter(e => e.status === 'done').length,
+    failed: all.filter(e => e.status === 'failed').length,
+    pending: all.filter(e => e.status === 'pending' || e.status === 'downloading').length,
+  }
+})
+
+const filteredEpisodes = computed(() => {
+  if (!epFilter.value) return episodes.value
+  return episodes.value.filter(e => e.status === epFilter.value)
+})
+
+function statusSeverity(status) {
+  switch (status) {
+    case 'done': return 'success'
+    case 'failed': return 'danger'
+    case 'downloading': return 'info'
+    default: return 'secondary'
+  }
+}
+
+async function loadAnime() {
+  const id = props.id || route.params.id
+  try {
+    anime.value = await api.anime.get(id)
+    episodes.value = await api.anime.episodes(id)
+    overrideQuality.value = anime.value.override_quality || anime.value.quality || null
+    overrideLanguage.value = anime.value.language || 'sub'
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+function setQuality() {
+  api.anime.setQuality(anime.value.id, overrideQuality.value)
+}
+
+function setLanguage() {
+  api.anime.setLanguage(anime.value.id, overrideLanguage.value)
+}
+
+async function downloadAnime() {
+  await downloadStore.downloadAnime(anime.value.id, overrideQuality.value, overrideLanguage.value)
+  router.push('/download')
+}
+
+async function toggleEnabled() {
+  const newState = !anime.value.enabled
+  await api.anime.setEnabled(anime.value.id, newState)
+  anime.value.enabled = newState
+}
+
+async function removeAnime() {
+  if (confirm(`Remove ${anime.value.title}?`)) {
+    await api.anime.remove(anime.value.id)
+    router.push('/anime')
+  }
+}
+
+onMounted(loadAnime)
+</script>

package/web/src/views/AnimeList.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Anime</h2>
+      <div class="subtitle">{{ filtered.length }} tracked</div>
+    </div>
+
+    <div class="anime-list-toolbar">
+      <InputText v-model="search" placeholder="Filter by title..." style="flex:1;max-width:320px" />
+      <Select v-model="statusFilter" :options="statusOptions" placeholder="Status" style="width:140px" />
+
+      <Tabs v-model:value="epFilter" style="flex:1">
+        <TabList>
+          <Tab value="">All</Tab>
+          <Tab value="done">Downloaded</Tab>
+          <Tab value="failed">Failed</Tab>
+          <Tab value="pending">Pending</Tab>
+        </TabList>
+      </Tabs>
+    </div>
+
+    <Skeleton v-if="loading" width="100%" height="300px" />
+
+    <Card v-else-if="filtered.length === 0">
+      <template #content>
+        <div class="empty-content"><h3>No anime found</h3></div>
+      </template>
+    </Card>
+
+    <div v-else class="anime-grid">
+      <div v-for="a in filtered" :key="a.id" class="anime-card" @click="$router.push(`/anime/${a.id}`)">
+        <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.source }}
+            <Tag :value="a.confirmed_site_title ? 'matched' : 'unmatched'" :severity="a.confirmed_site_title ? 'success' : 'secondary'" size="small" style="margin-left:6px" />
+          </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>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { api } from '../api/client'
+import Tabs from 'primevue/tabs'
+import TabList from 'primevue/tablist'
+import Tab from 'primevue/tab'
+
+const loading = ref(true)
+const allAnime = ref([])
+const search = ref('')
+const statusFilter = ref('')
+const epFilter = ref('')
+
+const statusOptions = ['All', 'Matched', 'Unmatched']
+
+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)
+}
+
+const filtered = computed(() => {
+  let list = allAnime.value
+  if (search.value) {
+    const s = search.value.toLowerCase()
+    list = list.filter((a) => (a.anilist_title || a.title).toLowerCase().includes(s))
+  }
+  if (statusFilter.value === 'Matched') {
+    list = list.filter((a) => a.confirmed_site_title)
+  } else if (statusFilter.value === 'Unmatched') {
+    list = list.filter((a) => !a.confirmed_site_title)
+  }
+  if (epFilter.value === 'done') {
+    list = list.filter((a) => (a.stats?.done || 0) > 0)
+  } else if (epFilter.value === 'failed') {
+    list = list.filter((a) => (a.stats?.failed || 0) > 0)
+  } else if (epFilter.value === 'pending') {
+    list = list.filter((a) => (a.stats?.pending || 0) > 0)
+  }
+  return list
+})
+
+onMounted(async () => {
+  try {
+    allAnime.value = await api.anime.list()
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+})
+</script>