fix, feat: reduce UI size, change schedule to start from today, filter airing schedule, infinite scrolling resetting filters

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Miru",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
   "main": "src/index.js",
   "homepage": "https://github.com/ThaUnknown/miru#readme",

src/renderer/src/App.svelte

@@ -45,8 +45,8 @@
     --dm-link-text-color: var(--dm-muted-text-color) !important;
     --dm-link-text-color-hover: var(--dm-text-color) !important;
     --base-html-font-size: 50%;
-    --base-html-font-size-1600: 62.5%;
-    --base-html-font-size-1920: 70%;
+    --base-html-font-size-1600: 50%;
+    --base-html-font-size-1920: 62.5%;
     --tooltip-width: 17rem;
     --card-border-width: 0;
     --sidebar-border-width: 0;

src/renderer/src/lib/pages/Player.svelte

@@ -966,7 +966,7 @@
 
 <style>
   .stats {
-    font-size: 1.8rem !important;
+    font-size: 2.3rem !important;
     white-space: nowrap;
     align-self: center;
     font-weight: 600;
@@ -1025,8 +1025,8 @@
   }
 
   .material-icons {
-    font-size: 2.2rem;
-    padding: 1.2rem;
+    font-size: 2.6rem;
+    padding: 1.5rem;
     transition: all 0.2s ease;
     display: flex;
   }
@@ -1112,13 +1112,13 @@
     display: none !important;
   }
   .miniplayer .middle .ctrl[data-name='playPause'] {
-    font-size: 5rem;
+    font-size: 5.625rem;
   }
   .miniplayer:hover .middle {
     background: #00000066;
   }
   .middle .ctrl[data-name='playPause'] {
-    font-size: 6rem;
+    font-size: 6.75rem;
   }
 
   .middle .ctrl,
@@ -1211,7 +1211,7 @@
     width: 5vw;
     display: inline-block;
     transition: all 0.1s ease;
-    margin-right: 1rem;
+    margin-right: 1.125rem;
   }
 
   .bottom .volume input[type='range'] {
@@ -1223,7 +1223,7 @@
   .bottom [data-name='setProgress'] ~ .hover {
     pointer-events: none;
     opacity: 0;
-    top: 1.2rem;
+    top: 1.35rem;
     transform: translate(-50%, -100%);
     position: absolute;
     font-family: Roboto, Arial, Helvetica, sans-serif;
@@ -1239,11 +1239,11 @@
 
   .bottom div[data-name='progressWrapper'] .ts {
     color: #ececec;
-    font-size: 1.8rem !important;
+    font-size: 2.3rem !important;
     white-space: nowrap;
     align-self: center;
     line-height: var(--base-line-height);
-    padding: 0 1.2rem;
+    padding: 0 1.56rem;
     font-weight: 600;
   }
 

src/renderer/src/lib/pages/home/Home.svelte

@@ -27,6 +27,7 @@
   function customFilter(mediaList) {
     return mediaList?.filter(({ media }) => {
       let condition = true
+      if (!media) return condition
       if (search.genre && !media.genres?.includes(search.genre)) condition = false
       if (search.season && media.season !== search.season) condition = false
       if (search.year && media.seasonYear !== search.year) condition = false
@@ -53,15 +54,19 @@
     }
   }
 
+  async function loadCurrent(initial = true) {
+    page = 1
+    canScroll = false
+    const res = sections[current].load(1, 50, initial)
+    media = [res]
+    await res
+    canScroll = hasNext
+  }
+
   $: load(current)
   async function load(current) {
     if (sections[current]) {
-      page = 1
-      canScroll = false
-      const res = sections[current].load(1)
-      media = [res]
-      await res
-      canScroll = hasNext
+      loadCurrent()
     } else {
       if (container) container.scrollTop = 0
       media = []
@@ -102,17 +107,18 @@
             add(items[index].querySelector('link').textContent)
           }
         })
+        media.hasNext = hasNext
         return media
       }
     }
   }
-  const seasons = ['SUMMER', 'FALL', 'WINTER', 'SPRING']
+  const seasons = ['WINTER', 'SPRING', 'SUMMER', 'FALL']
   const getSeason = d => seasons[Math.floor((d.getMonth() / 12) * 4) % 4]
   const sections = {
     continue: {
       title: 'Continue Watching',
-      load: (page = 1, perPage = 50) => {
-        if (perPage !== 5) search.sort = 'UPDATED_TIME_DESC'
+      load: (page = 1, perPage = 50, initial = false) => {
+        if (initial) search.sort = 'UPDATED_TIME_DESC'
         return alRequest({ method: 'UserLists', status_in: 'CURRENT', page }).then(res => {
           hasNext = res?.data?.Page.pageInfo.hasNextPage
           return customFilter(
@@ -129,15 +135,15 @@
     releases: {
       title: 'New Releases',
       releases: true,
-      load: async (page = 1, perPage = 20, force = true) => {
-        if (perPage !== 5) search.sort = 'START_DATE_DESC'
+      load: async (page = 1, perPage = 20, initial = false, force = true) => {
+        if (initial) search.sort = 'START_DATE_DESC'
         return customFilter(await releasesCards(page, perPage, force))
       }
     },
     planning: {
       title: 'Your List',
-      load: (page = 1, perPage = 50) => {
-        if (perPage !== 5) search.sort = 'UPDATED_TIME_DESC'
+      load: (page = 1, perPage = 50, initial = false) => {
+        if (initial) search.sort = 'UPDATED_TIME_DESC'
         return alRequest({ method: 'UserLists', page, perPage, status_in: 'PLANNING' }).then(res => {
           hasNext = res?.data?.Page.pageInfo.hasNextPage
           return customFilter(res?.data?.Page.mediaList)
@@ -147,15 +153,36 @@
     },
     trending: {
       title: 'Trending Now',
-      load: (page = 1, perPage = 50) => {
-        if (perPage !== 5) search.sort = 'TRENDING_DESC'
+      load: (page = 1, perPage = 50, initial = false) => {
+        if (initial) search.sort = 'TRENDING_DESC'
         return alRequest({ method: 'Search', page, perPage, sort: 'TRENDING_DESC', ...sanitiseObject(search) }).then(res => processMedia(res))
       }
     },
+    seasonal: {
+      title: 'Popular This Season',
+      load: (page = 1, perPage = 50, initial = false) => {
+        const date = new Date()
+        if (initial) {
+          search.season = getSeason(date)
+          search.year = date.getFullYear()
+          search.sort = 'POPULARITY_DESC'
+        }
+        return alRequest({ method: 'Search', page, perPage, year: date.getFullYear(), season: getSeason(date), sort: 'POPULARITY_DESC', ...sanitiseObject(search) }).then(res =>
+          processMedia(res)
+        )
+      }
+    },
+    popular: {
+      title: 'All Time Popular',
+      load: (page = 1, perPage = 50, initial = false) => {
+        if (initial) search.sort = 'POPULARITY_DESC'
+        return alRequest({ method: 'Search', page, perPage, sort: 'POPULARITY_DESC', ...sanitiseObject(search) }).then(res => processMedia(res))
+      }
+    },
     romance: {
       title: 'Romance',
-      load: (page = 1, perPage = 50) => {
-        if (perPage !== 5) {
+      load: (page = 1, perPage = 50, initial = false) => {
+        if (initial) {
           search.sort = 'TRENDING_DESC'
           search.genre = 'Romance'
         }
@@ -164,8 +191,8 @@
     },
     action: {
       title: 'Action',
-      load: (page = 1, perPage = 50) => {
-        if (perPage !== 5) {
+      load: (page = 1, perPage = 50, initial = false) => {
+        if (initial) {
           search.sort = 'TRENDING_DESC'
           search.genre = 'Action'
         }
@@ -174,8 +201,8 @@
     },
     adventure: {
       title: 'Adventure',
-      load: (page = 1, perPage = 50) => {
-        if (perPage !== 5) {
+      load: (page = 1, perPage = 50, initial = false) => {
+        if (initial) {
           search.sort = 'TRENDING_DESC'
           search.genre = 'Adventure'
         }
@@ -184,8 +211,8 @@
     },
     fantasy: {
       title: 'Fantasy',
-      load: (page = 1, perPage = 50) => {
-        if (perPage !== 5) {
+      load: (page = 1, perPage = 50, initial = false) => {
+        if (initial) {
           search.sort = 'TRENDING_DESC'
           search.genre = 'Fantasy'
         }
@@ -194,8 +221,8 @@
     },
     comedy: {
       title: 'Comedy',
-      load: (page = 1, perPage = 50) => {
-        if (perPage !== 5) {
+      load: (page = 1, perPage = 50, initial = false) => {
+        if (initial) {
           search.sort = 'TRENDING_DESC'
           search.genre = 'Comedy'
         }
@@ -205,19 +232,20 @@
     schedule: {
       title: 'Schedule',
       hide: true,
-      load: (page = 1) => {
-        search.sort = 'START_DATE_DESC'
-        search.status = 'RELEASING'
+      load: (page = 1, perPage = 50, initial = false) => {
         const date = new Date()
-        search.season = getSeason(date)
-        search.year = date.getFullYear()
-        return alRequest({ method: 'AiringSchedule', page }).then(res => {
-          const entries = res?.data?.Page.airingSchedules.filter(entry => entry.media.countryOfOrigin !== 'CN' && !entry.media.isAdult) || []
+        if (initial) {
+          search.sort = 'START_DATE_DESC'
+          search.status = 'RELEASING'
+        }
+        if (perPage !== 6) date.setHours(0, 0, 0, 0)
+        return alRequest({ method: 'AiringSchedule', page, from: parseInt(date.getTime() / 1000) }).then(res => {
+          const entries = customFilter(res?.data?.Page.airingSchedules.filter(entry => entry.media.countryOfOrigin !== 'CN' && !entry.media.isAdult) || []).slice(0, perPage)
           const media = []
           hasNext = res?.data?.Page.pageInfo.hasNextPage
           let date = new Date()
           for (const entry of entries) {
-            if (entry.timeUntilAiring && (!lastDate || new Date(+date + entry.timeUntilAiring * 1000).getDay() !== lastDate.getDay())) {
+            if (entry.timeUntilAiring && perPage !== 6 && (!lastDate || new Date(+date + entry.timeUntilAiring * 1000).getDay() !== lastDate.getDay())) {
               lastDate = new Date(+date + entry.timeUntilAiring * 1000)
               media.push(lastDate.toLocaleDateString('en-US', { weekday: 'long' }))
             }
@@ -246,7 +274,7 @@
 
 <div class="d-flex h-full flex-column overflow-y-scroll root" on:scroll={infiniteScroll} bind:this={container}>
   <div class="h-full py-10">
-    <Search bind:media bind:search bind:current />
+    <Search bind:media bind:search bind:current {loadCurrent} />
     {#if media.length}
       <Gallery {media} />
     {:else}

src/renderer/src/lib/pages/home/Search.svelte

@@ -2,6 +2,7 @@
   export let search
   export let current
   export let media = null
+  export let loadCurrent
   let searchTimeout = null
 
   function searchClear() {
@@ -21,9 +22,11 @@
       clearTimeout(searchTimeout)
     }
     searchTimeout = setTimeout(() => {
-      const old = current
-      current = null
-      if (Object.values(search).filter(v => v).length) current = old || 'search'
+      if (current === null) {
+        if (Object.values(search).filter(v => v).length) current = 'search'
+      } else {
+        loadCurrent(false)
+      }
       searchTimeout = null
     }, 500)
   }

src/renderer/src/lib/pages/home/Section.svelte

@@ -3,11 +3,11 @@
 
   import Cards from './Cards.svelte'
   export let opts
-  let cards = opts.load(1, 5)
+  let cards = opts.load(1, 6)
   let interval = null
   if (opts.releases) {
     interval = setInterval(async () => {
-      const media = await opts.load(1, 5, false)
+      const media = await opts.load(1, 6, false, false)
       if (media) cards = media
     }, 30000)
   }
@@ -35,7 +35,7 @@
     padding: 2rem 4rem;
     position: relative;
     padding: 0.7rem 4rem;
-    grid-template-columns: repeat(5, 50rem);
+    grid-template-columns: repeat(6, 50rem);
   }
 
   .gallery :global(.empty) {

src/renderer/src/modules/anilist.js

@@ -89,7 +89,6 @@ async function handleRequest (opts) {
 }
 
 export function alEntry (filemedia) {
-  console.log(filemedia)
   // check if values exist
   if (filemedia.media && alToken) {
     const { media } = filemedia
@@ -306,12 +305,8 @@ query ($id: Int, $mediaId: Int){
 }`
       break
     } case 'AiringSchedule': {
-      const date = new Date()
-      const diff = date.getDay() >= 1 ? date.getDay() - 1 : 6 - date.getDay()
-      date.setDate(date.getDate() - diff)
-      date.setHours(0, 0, 0, 0)
-      variables.from = date.getTime() / 1000
-      variables.to = (date.getTime() + 7 * 24 * 60 * 60 * 1000) / 1000
+      variables.from = opts.from
+      variables.to = (variables.from + 7 * 24 * 60 * 60)
       query = ` 
 query ($page: Int, $perPage: Int, $from: Int, $to: Int) {
   Page (page: $page, perPage: $perPage) {