added quality selector

pages/addanime.vue

@@ -165,8 +165,8 @@
           </button>
         </div>
       </div>
-
-      <div class="relative flex flex-col">
+      <div class="flex flex-row gap-5">
+        <div class="relative flex flex-col w-full">
           <select v-model="hardsub" name="episode" class="bg-[#5c5b5b] focus:outline-none px-3 py-2 rounded-xl text-sm text-center cursor-pointer" :disabled="isHardsubDisabled">
             <option :value="false" class="text-sm text-slate-200">Hardsub: false</option>
             <option :value="true" class="text-sm text-slate-200">Hardsub: true</option>
@@ -179,6 +179,17 @@
             <div class="text-sm">Loading</div></div
           >
         </div>
+        <div class="relative flex flex-col w-full">
+          <select v-model="quality" name="quality" class="bg-[#5c5b5b] focus:outline-none px-3 py-2 rounded-xl text-sm text-center cursor-pointer">
+            <option :value="1080" class="text-sm text-slate-200">1080p</option>
+            <option :value="720" class="text-sm text-slate-200">720p</option>
+            <option :value="480" class="text-sm text-slate-200">480p</option>
+            <option :value="360" class="text-sm text-slate-200">360p</option>
+            <option :value="240" class="text-sm text-slate-200">240p</option>
+          </select>
+        </div>
+      </div>
+
       <!-- {{ CRselectedShow?.Subs.map(s=> { return locales.find(l => l.locale === s)?.name }) }}
       {{ CRselectedShow?.Dubs.map(s=> { return locales.find(l => l.locale === s)?.name }) }} -->
       <div v-if="!added" class="relative flex flex-col mt-auto">
@@ -267,6 +278,7 @@ const selectedEndEpisode = ref<CrunchyEpisode>()
 const hardsub = ref<boolean>(false)
 const added = ref<boolean>(false)
 const isHardsubDisabled = ref<boolean>(true)
+const quality = ref<1080 | 720 | 480 | 360 | 240>(1080)
 
 const isFetchingSeasons = ref<number>(0)
 const isFetchingEpisodes = ref<number>(0)
@@ -461,7 +473,8 @@ const addToPlaylist = async () => {
     dubs: selectedDubs.value,
     subs: selectedSubs.value,
     dir: path.value,
-    hardsub: hardsub.value
+    hardsub: hardsub.value,
+    quality: quality.value
   }
 
   const { error } = await useFetch('http://localhost:8080/api/crunchyroll/playlist', {

pages/index.vue

@@ -5,7 +5,7 @@
       <!-- <button @click="deletePlaylist">
         Delete Playlist
       </button> -->
-      <div v-for="p in playlist" class="flex flex-row gap-4 h-40 p-5 bg-[#636363]">
+      <div v-for="p in playlist" class="flex flex-row gap-4 h-40 p-5 bg-[#636363] border-b-[1px] border-gray-400">
         <div class="flex min-w-52 w-52">
           <img :src="p.media.images.thumbnail[0].find((p) => p.height === 1080)?.source" alt="Image" class="object-cover rounded-xl" />
         </div>
@@ -25,7 +25,7 @@
           </div>
           <div class="flex h-full"> </div>
           <div class="flex flex-row gap-2 mt-2">
-            <div class="text-sm">1080p</div>
+            <div class="text-sm">{{ p.quality }}p</div>
             <div class="text-sm">Dubs: {{ p.dub.map((t) => t.name).join(', ') }}</div>
             <div class="text-sm">Subs: {{ p.sub.length !== 0 ? p.sub.map((t) => t.name).join(', ') : '-' }}</div>
             <div v-if="p.partsleft && p.status === 'downloading'" class="text-sm">{{ p.partsdownloaded }}/{{ p.partsleft }}</div>
@@ -51,6 +51,7 @@ const playlist = ref<
     partsleft: number
     partsdownloaded: number
     downloadspeed: number
+    quality: number
   }>
 >()
 
@@ -66,6 +67,7 @@ const getPlaylist = async () => {
       partsleft: number
       partsdownloaded: number
       downloadspeed: number
+      quality: number
     }>
   >('http://localhost:8080/api/crunchyroll/playlist')
 
@@ -83,7 +85,7 @@ const getPlaylist = async () => {
 
 const deletePlaylist = async () => {
   const { data, error } = await useFetch('http://localhost:8080/api/crunchyroll/playlist', {
-    method: "delete"
+    method: 'delete'
   })
 
   if (error.value) {

src/api/db/database.ts

@@ -33,6 +33,7 @@ interface PlaylistAttributes {
   dub: Array<string>
   sub: Array<string>
   hardsub: boolean,
+  quality: 1080 | 720 | 480 | 360 | 240,
   dir: string,
   failedreason: string
 }
@@ -42,6 +43,7 @@ interface PlaylistCreateAttributes {
   dub: Array<string>
   sub: Array<string>
   dir: string,
+  quality: 1080 | 720 | 480 | 360 | 240,
   hardsub: boolean,
   status: 'waiting' | 'preparing' | 'downloading' | 'merging' | 'completed' | 'failed'
 }
@@ -110,6 +112,10 @@ const Playlist: ModelDefined<PlaylistAttributes, PlaylistCreateAttributes> = seq
     allowNull: true,
     type: DataTypes.STRING
   },
+  quality: {
+    allowNull: true,
+    type: DataTypes.BOOLEAN
+  },
   createdAt: {
     allowNull: false,
     type: DataTypes.DATE

src/api/routes/crunchyroll/crunchyroll.controller.ts

@@ -66,44 +66,36 @@ export async function addPlaylistController(
       episodes: CrunchyEpisodes
       dubs: Array<string>
       subs: Array<string>
-      dir: string,
+      dir: string
       hardsub: boolean
+      quality: 1080 | 720 | 480 | 360 | 240
     }
   }>,
   reply: FastifyReply
 ) {
-
-  const body = request.body;
+  const body = request.body
 
   for (const e of body.episodes) {
-    await addEpisodeToPlaylist(e, body.subs, body.dubs, body.dir, body.hardsub, "waiting")
+    await addEpisodeToPlaylist(e, body.subs, body.dubs, body.dir, body.hardsub, 'waiting', body.quality)
   }
 
   return reply.code(201).send()
 }
 
-export async function deleteCompletePlaylistController(
-  request: FastifyRequest,
-  reply: FastifyReply
-) {
-
+export async function deleteCompletePlaylistController(request: FastifyRequest, reply: FastifyReply) {
   await deletePlaylist()
 
   return reply.code(200).send()
 }
 
-export async function getPlaylistController(
-  request: FastifyRequest,
-  reply: FastifyReply
-) {
-
+export async function getPlaylistController(request: FastifyRequest, reply: FastifyReply) {
   const playlist = await getPlaylist()
 
   for (const v of playlist) {
     if (v.dataValues.status === 'downloading') {
       const found = await getDownloading(v.dataValues.id)
       if (found) {
-        (v as any).dataValues = {
+        ;(v as any).dataValues = {
           ...v.dataValues,
           partsleft: found.partsToDownload,
           partsdownloaded: found.downloadedParts,
@@ -115,4 +107,3 @@ export async function getPlaylistController(
 
   return reply.code(200).send(playlist.reverse())
 }
-

src/api/routes/crunchyroll/crunchyroll.service.ts

@@ -139,7 +139,8 @@ export async function addEpisodeToPlaylist(
   d: Array<string>,
   dir: string,
   hardsub: boolean,
-  status: 'waiting' | 'preparing' | 'downloading' | 'merging' | 'completed' | 'failed'
+  status: 'waiting' | 'preparing' | 'downloading' | 'merging' | 'completed' | 'failed',
+  quality: 1080 | 720 | 480 | 360 | 240
 ) {
   const episode = await Playlist.create({
     media: e,
@@ -147,7 +148,8 @@ export async function addEpisodeToPlaylist(
     dub: d,
     dir: dir,
     hardsub: hardsub,
-    status
+    status: status,
+    quality: quality
   })
 
   return episode.get()
@@ -194,7 +196,8 @@ async function checkPlaylists() {
         e.dataValues.id,
         e.dataValues.media.series_title,
         e.dataValues.media.season_number,
-        e.dataValues.media.episode_number
+        e.dataValues.media.episode_number,
+        e.dataValues.quality
       )
     }
   }
@@ -319,7 +322,7 @@ var downloading: Array<{
   downloadSpeed: number
 }> = []
 
-export async function downloadPlaylist(e: string, dubs: Array<string>, subs: Array<string>, hardsub: boolean, downloadID: number, name: string, season: number, episode: number) {
+export async function downloadPlaylist(e: string, dubs: Array<string>, subs: Array<string>, hardsub: boolean, downloadID: number, name: string, season: number, episode: number, quality: 1080 | 720 | 480 | 360 | 240) {
   downloading.push({
     id: downloadID,
     downloadedParts: 0,
@@ -534,7 +537,7 @@ export async function downloadPlaylist(e: string, dubs: Array<string>, subs: Arr
 
     if (!mdp) return
 
-    var hq = mdp.playlists.find((i) => i.attributes.RESOLUTION?.width === 1920)
+    var hq = mdp.playlists.find((i) => i.attributes.RESOLUTION?.height === quality)
 
     if (!hq) return