feat: date since last ep

src/renderer/components/cards/EpisodeCard.svelte

@@ -1,6 +1,7 @@
 <script>
   import { statusColorMap } from '@/modules/anime.js'
   import EpisodePreviewCard from './EpisodePreviewCard.svelte'
+  import { since } from '@/modules/util'
   export let data
 
   let preview = false
@@ -23,21 +24,24 @@
       </div>
     </div>
     <div class='row pt-15'>
-      <div class='col-7'>
+      <div class='col pr-10'>
         <div class='text-white font-weight-very-bold font-size-16 title overflow-hidden'>
           {#if data.media?.mediaListEntry?.status}
             <div style:--statusColor={statusColorMap[data.media.mediaListEntry.status]} class='list-status-circle d-inline-flex overflow-hidden mr-5' title={data.media.mediaListEntry.status} />
           {/if}
           {data.media?.title.userPreferred || data.parseObject.anime_title}
         </div>
+        <div class='text-muted font-size-12 title overflow-hidden'>
+          {data.episodeData?.title.en || ''}
+        </div>
       </div>
       {#if data.episode}
-        <div class='col-5 d-flex flex-column align-items-end text-right'>
-          <div class='text-white'>
+        <div class='col-auto d-flex flex-column align-items-end text-right'>
+          <div class='text-white font-weight-bold'>
             Episode {data.episode}
           </div>
           <div class='text-muted font-size-12 title overflow-hidden'>
-            {data.episodeData?.title.en || ''}
+            {since(data.date)}
           </div>
         </div>
       {/if}
@@ -51,7 +55,7 @@
   }
   .title {
     display: -webkit-box;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
   }
   .image:after {

src/renderer/components/cards/EpisodePreviewCard.svelte

@@ -1,5 +1,6 @@
 <script>
   import { statusColorMap, formatMap } from '@/modules/anime.js'
+  import { since } from '@/modules/util'
   export let data
 
   const media = data.media
@@ -19,30 +20,33 @@
   </div>
   <div class='w-full d-flex flex-column flex-grow-1 px-20 pb-15'>
     <div class='row pt-15'>
-      <div class='col-7'>
-        <div class='text-white font-weight-very-bold font-size-16 title overflow-hidden'>
+      <div class='col pr-10'>
+        <div class='text-white font-weight-very-bold font-size-16 title overflow-hidden' title={data.media?.title.userPreferred || data.parseObject.anime_title}>
           {#if media?.mediaListEntry?.status}
             <div style:--statusColor={statusColorMap[media.mediaListEntry.status]} class='list-status-circle d-inline-flex overflow-hidden mr-5' title={media.mediaListEntry.status} />
           {/if}
           {data.media?.title.userPreferred || data.parseObject.anime_title}
         </div>
+        <div class='text-muted font-size-12 title overflow-hidden' title={data.episodeData?.title.en}>
+          {data.episodeData?.title.en || ''}
+        </div>
       </div>
       {#if data.episode}
-        <div class='col-5 d-flex flex-column align-items-end text-right'>
-          <div class='text-white'>
+        <div class='col-auto d-flex flex-column align-items-end text-right'>
+          <div class='text-white font-weight-bold'>
             Episode {data.episode}
           </div>
           <div class='text-muted font-size-12 title overflow-hidden'>
-            {data.episodeData?.title.en || ''}
+            {since(data.date)}
           </div>
         </div>
       {/if}
     </div>
-    <div class='w-full text-muted description overflow-hidden pt-10'>
+    <div class='w-full text-muted description overflow-hidden pt-15'>
       {data.episodeData?.description || media?.description?.replace(/<[^>]*>/g, '') || ''}
     </div>
     {#if media}
-      <div class='d-flex flex-row pt-10 font-weight-medium justify-content-between w-full text-muted'>
+      <div class='d-flex flex-row pt-15 font-weight-medium justify-content-between w-full text-muted'>
         <div class='d-flex align-items-center' style='margin-left: -3px'>
           <span class='material-symbols-outlined font-size-24 pr-5'>calendar_month</span>
           {media.seasonYear || 'N/A'}
@@ -85,7 +89,7 @@
   }
   .title {
     display: -webkit-box;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
   }
   .image:after {

src/renderer/components/cards/EpisodeSkeletonCard.svelte

@@ -19,6 +19,6 @@
     width: 36rem
   }
   .wrapper {
-    height: 29.2rem;
+    height: 27.7rem;
   }
 </style>

src/renderer/modules/rss.js

@@ -97,17 +97,18 @@ class RSSMediaManager {
     return result
   }
 
-  resolveAnimeFromRSSItem ({ title, link }) {
-    this.lastResult = this.queueResolve(title, link)
+  resolveAnimeFromRSSItem (item) {
+    this.lastResult = this.queueResolve(item)
     return this.lastResult
   }
 
-  async queueResolve (title, link) {
+  async queueResolve ({ title, link, date }) {
     await this.lastResult
     const res = (await resolveFileMedia(title))[0]
     if (res.media?.id) {
       res.episodeData = (await getEpisodeMetadataForMedia(res.media))?.[res.episode]
     }
+    res.date = date
     res.onclick = () => add(link)
     return res
   }

src/renderer/views/Player/Player.svelte

@@ -874,6 +874,7 @@
   class:immersed
   class:buffering={src && buffering}
   bind:this={container}
+  role='none'
   on:mousemove={resetImmerse}
   on:touchmove={resetImmerse}
   on:keypress={resetImmerse}