feature(Catalog): added release progress line in catalog

src/renderer/store/app/watch/appWatchStore.js

@@ -45,6 +45,25 @@ export default {
      */
     getWatchData: state => ({releaseId = 0, episodeId = 0} = {}) => __get(state, ['items', `${releaseId}:${episodeId}`]) || null,
 
+
+    /**
+     * Get release total progress
+     *
+     * @param state
+     * @param getters
+     * @return {function({releaseId?: *, totalEpisodesNumber?: *}=): number}
+     */
+    getReleaseProgress: (state, getters) => ({releaseId = 0, totalEpisodesNumber = 0} = {}) => {
+      const watched_episodes = [];
+      for(let i = 1; i <= totalEpisodesNumber; i++){
+        watched_episodes.push(getters.getWatchData({releaseId, episodeId: i}))
+      }
+
+      return totalEpisodesNumber > 0
+        ? (watched_episodes.filter(episode => episode).length / totalEpisodesNumber) * 100
+        : 0;
+    }
+
   },
 
   actions: {

src/renderer/store/catalog/catalogStore.js

@@ -1,5 +1,5 @@
 import AnilibriaProxy from "@proxies/anilibria";
-import AnilibriaCatalogTransformer from "@transformers/anilibria/catalog";
+import AnilibriaReleaseTransformer from "@transformers/anilibria/release";
 
 import {Main} from '@main/utils/windows'
 import __capitalize from 'lodash/capitalize'
@@ -171,7 +171,7 @@ export default {
         // Get items from server
         // Transform items
         const {items} = await new AnilibriaProxy().getCatalogItems({sort, genres, years, page, perPage});
-        const releases = AnilibriaCatalogTransformer.fetchCollection(items);
+        const releases = await AnilibriaReleaseTransformer.fetchCollection(items);
 
         // Collect all poster images
         await Promise.allSettled(

src/renderer/views/catalog/components/item/CatalogItem.vue

@@ -1,8 +1,9 @@
 <template>
   <v-card color="transparent" @click="$emit('click')">
     <v-layout align-start>
-      <v-card width="160" height="240">
+      <v-card width="160" height="240" min-width="160" min-height="240" :style="{position: 'relative'}">
         <v-img width="160" height="240" :src="image"/>
+        <v-progress-linear color="secondary" :value="progress" :style="{position: 'absolute', bottom: 0}"/>
       </v-card>
       <div>
         <v-card-title v-text="title"/>
@@ -29,7 +30,12 @@
   import __get from 'lodash/get'
   import VClamp from 'vue-clamp'
 
+
   const props = {
+    id: {
+      type: Number,
+      default: null
+    },
     poster: {
       type: Object,
       default: null
@@ -53,6 +59,10 @@
     type: {
       type: String,
       default: null,
+    },
+    episodes: {
+      type: Array,
+      default: null
     }
   };
 
@@ -90,7 +100,19 @@
        */
       subtitle() {
         return __get(this.names, 'original')
+      },
+
+
+      /**
+       * Get release watch progress
+       *
+       * @return {number}
+       */
+      progress() {
+        const getReleaseProgress = this.$store.getters['app/watch/getReleaseProgress'];
+        return getReleaseProgress({releaseId: this.id, totalEpisodesNumber: (this.episodes || []).length});
       }
+
     }
   }