feat: forums skeleloaders

fix: thread child comments [again]
feat: proper port support check

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui",
-	"version": "6.0.18",
+	"version": "6.0.19",
 	"license": "BUSL-1.1",
 	"private": true,
 	"packageManager": "pnpm@9.14.4",

src/app.d.ts

@@ -85,7 +85,7 @@ export interface Native {
   setPlayBackState: (paused: 'none' | 'paused' | 'playing') => Promise<void>
   setActionHandler: (action: MediaSessionAction | 'enterpictureinpicture', handler: MediaSessionActionHandler | null) => void
   checkAvailableSpace: (_?: unknown) => Promise<number>
-  checkIncomingConnections: (_?: unknown) => Promise<boolean>
+  checkIncomingConnections: (port: number) => Promise<boolean>
   updatePeerCounts: (hashes: string[]) => Promise<Array<{ hash: string, complete: string, downloaded: string, incomplete: string }>>
   playTorrent: (id: string) => Promise<TorrentFile[]>
   attachments: (hash: string, id: number) => Promise<Attachment[]>

src/lib/components/ui/forums/Comments.svelte

@@ -9,8 +9,44 @@
   export let threadId: number
 </script>
 
-{#each $comments.data?.Page?.threadComments ?? [] as comment, i (comment?.id ?? i)}
+{#if $comments.fetching}
-  {#if comment}
+  {#each Array.from({ length: 4 }) as _, i (i)}
-    <Comment {comment} {isLocked} {threadId} />
+    <div class='px-4 py-[18px] shrink-0 h-28 w-full bg-neutral-950 rounded-md flex flex-col'>
-  {/if}
+      <div class='mb-3 h-2 w-[150px] bg-primary/5 animate-pulse rounded' />
-{/each}
+      <div class='bg-primary/5 animate-pulse rounded h-1.5 w-28 mb-3' />
+      <div class='bg-primary/5 animate-pulse rounded h-1.5 w-20' />
+      <div class='mt-auto bg-primary/5 animate-pulse rounded h-2 w-24' />
+    </div>
+  {/each}
+{:else if $comments.error}
+  <div class='p-5 flex items-center justify-center w-full h-80'>
+    <div>
+      <div class='mb-1 font-bold text-4xl text-center '>
+        Ooops!
+      </div>
+      <div class='text-lg text-center text-muted-foreground'>
+        Looks like something went wrong!
+      </div>
+      <div class='text-lg text-center text-muted-foreground'>
+        {$comments.error.message}
+      </div>
+    </div>
+  </div>
+{:else}
+  {#each $comments.data?.Page?.threadComments ?? [] as comment, i (comment?.id ?? i)}
+    {#if comment}
+      <Comment {comment} {isLocked} {threadId} />
+    {/if}
+  {:else}
+    <div class='p-5 flex items-center justify-center w-full h-80'>
+      <div>
+        <div class='mb-1 font-bold text-4xl text-center '>
+          Ooops!
+        </div>
+        <div class='text-lg text-center text-muted-foreground'>
+          Looks like there's nothing here yet!
+        </div>
+      </div>
+    </div>
+  {/each}
+{/if}

src/lib/components/ui/forums/Threads.svelte

@@ -37,7 +37,12 @@
   <div class='pt-3'>
     <div class='grid grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(500px,1fr))] place-items-center gap-x-10 gap-y-7 justify-center align-middle'>
       {#if $currentPageStore.fetching}
-        Loading threads...
+        {#each Array.from({ length: 4 }) as _, i (i)}
+          <div class='px-4 py-[18px] shrink-0 h-[75px] w-full bg-neutral-950 rounded-md flex flex-col'>
+            <div class='bg-primary/5 animate-pulse rounded h-2 w-28' />
+            <div class='mt-auto bg-primary/5 animate-pulse rounded h-2 w-20' />
+          </div>
+        {/each}
       {:else if $currentPageStore.error}
         <div class='p-5 flex items-center justify-center w-full h-80'>
           <div>
@@ -93,6 +98,17 @@
               </div>
             </a>
           {/if}
+        {:else}
+          <div class='p-5 flex items-center justify-center w-full h-80'>
+            <div>
+              <div class='mb-1 font-bold text-4xl text-center '>
+                Ooops!
+              </div>
+              <div class='text-lg text-center text-muted-foreground'>
+                Looks like there's nothing here yet!
+              </div>
+            </div>
+          </div>
         {/each}
       {/if}
     </div>

src/lib/components/ui/player/resolver.ts

@@ -89,7 +89,7 @@ const TYPE_EXCLUSIONS = ['ED', 'ENDING', 'NCED', 'NCOP', 'OP', 'OPENING', 'PREVI
 // find best media in batch to play
 // currently in progress or unwatched
 // tv, movie, ona, ova
-// TODO: load magnets manually
+
 // function findPreferredPlaybackMedia (videoFiles) {
 //   for (const { media } of videoFiles) {
 //     if (media.media?.mediaListEntry?.status === 'CURRENT') return { media: media.media, episode: (media.media.mediaListEntry.progress || 0) + 1 }

src/lib/index.ts

@@ -3,4 +3,4 @@
 export const CHANGELOG_URL = 'https://api.github.com/repos/ThaUnknown/miru/releases'
 export const WEB_URL = 'https://miru.watch'
 export const DEFAULT_EXTENSIONS = 'gh:hayase-app/extensions'
-export const SETUP_VERSION = 1
+export const SETUP_VERSION = 2

src/lib/modules/anilist/queries.ts

@@ -383,7 +383,7 @@ export const CommentFrag = gql(`
   }
 `, [UserFrag])
 
-// AL in their infinite wisdom decided to make childComments infer the schema of the parent comment, so we can't use the CommentFrag here
+// AL in their infinite wisdom decided to make childComments infer the schema of the parent comment, but fragments break it, so we can't use any fragments here
 export const Comments = gql(`
   query Comments($threadId: Int, $page: Int) {
     Page(page: $page, perPage: 15) {
@@ -397,14 +397,38 @@ export const Comments = gql(`
         likeCount,
         createdAt,
         user {
-          ...UserFrag
+          id,
+          bannerImage,
+          about,
+          isFollowing,
+          isFollower,
+          donatorBadge,
+          options {
+            profileColor
+          },
+          createdAt,
+          name,
+          avatar {
+            medium
+          },
+          statistics {
+            anime {
+              count,
+              minutesWatched,
+              episodesWatched,
+              genres(limit: 3, sort: COUNT_DESC) {
+                genre,
+                count
+              }
+            }
+          }
         },
         childComments,
         isLocked
       }
     }
   }
-`, [UserFrag])
+`)
 
 export const ToggleLike = gql(`
   mutation ToggleLike ($id: Int!, $type: LikeableType!) {