fix: studios property

common/modules/al.d.ts

@@ -67,6 +67,11 @@ export type Media = {
       day: number
     }
   }
+  studios?: {
+    nodes: {
+      name: string
+    }[]
+  }
   airingSchedule?: {
     nodes?: {
       episode: number

common/modules/anilist.js

@@ -94,6 +94,11 @@ countryOfOrigin,
 isAdult,
 bannerImage,
 synonyms,
+studios(sort: NAME, isMain: true) {
+  nodes {
+    name
+  }
+},
 stats {
   scoreDistribution {
     score,
@@ -609,6 +614,11 @@ class AnilistClient {
         Media(id: $id, type: ANIME) {
           id,
           idMal,
+          studios(sort: NAME, isMain: true) {
+            nodes {
+              name
+            }
+          },
           recommendations {
             edges {
               node {

common/views/ViewAnime/Details.svelte

@@ -1,10 +1,11 @@
 <script>
   export let media = null
+  export let alt = null
 
   const detailsMap = [
     { property: 'season', label: 'Season', icon: 'spa', custom: 'property' },
     { property: 'status', label: 'Status', icon: 'live_tv' },
-    { property: 'nodes', label: 'Studio', icon: 'business' },
+    { property: 'studios', label: 'Studio', icon: 'business', custom: 'property' },
     { property: 'source', label: 'Source', icon: 'source' },
     { property: 'countryOfOrigin', label: 'Country', icon: 'public', custom: 'property' },
     { property: 'isAdult', label: 'Adult', icon: '18_up_rating' },
@@ -12,7 +13,7 @@
     { property: 'romaji', label: 'Romaji', icon: 'translate' },
     { property: 'native', label: 'Native', icon: '語', custom: 'icon' }
   ]
-  function getCustomProperty (detail, media) {
+  async function getCustomProperty (detail, media) {
     if (detail.property === 'averageScore') {
       return media.averageScore + '%'
     } else if (detail.property === 'season') {
@@ -24,6 +25,8 @@
         US: 'United States'
       }
       return countryMap[media.countryOfOrigin] || 'Unknown'
+    } else if (detail.property === 'studios') { // has to be manually fetched as studios returned by user lists are broken.
+      return ((await alt)?.data?.Media || media)?.studios?.nodes?.map(node => node.name).filter(name => name).join(', ') || 'Unknown'
     } else {
       return media[detail.property]
     }
@@ -51,9 +54,11 @@
         <div class='d-flex flex-column justify-content-center text-nowrap'>
           <div class='font-weight-bold select-all'>
             {#if detail.custom === 'property'}
-              {getCustomProperty(detail, media)}
-            {:else if property.constructor === Array}
-              {property === 'nodes' ? property[0] && property[0].name : property.join(', ').replace(/_/g, ' ').toLowerCase()}
+              {#await getCustomProperty(detail, media)}
+                Fetching...
+              {:then res }
+                {res}
+              {/await}
             {:else}
               {property.toString().replace(/_/g, ' ').toLowerCase()}
             {/if}

common/views/ViewAnime/ViewAnime.svelte

@@ -46,7 +46,7 @@
   let modal
   let container = null
   let mediaList = []
-  $: media = $view
+  $: media = anilistClient.mediaCache[$view?.id] || $view
   $: mediaRecommendation = media && anilistClient.recommendations({ id: media.id })
   $: media && (modal?.focus(), overlay = 'viewanime', saveMedia(), (container && container.dispatchEvent(new Event('scrolltop'))))
   function checkClose ({ keyCode }) {
@@ -180,7 +180,7 @@
               </div>
             </div>
           </div>
-          <Details {media} />
+          <Details {media} alt={mediaRecommendation} />
           <div class='m-0 px-20 pb-0 pt-10 d-flex flex-row text-nowrap overflow-x-scroll text-capitalize align-items-start'>
             {#each media.tags as tag}
               <div class='bg-dark px-20 py-10 mr-10 rounded text-nowrap'>