GIF support (#5)

Reviewed-on: #5

src/App.svelte

@@ -57,12 +57,7 @@
       {#each posts as postObject}
         <PostComponent post={postObject as Post} />
       {/each}
-      {#if screen.availWidth > 600}
+        <InfiniteLoading on:infinite={onInfinite} distance={3000} />
-        <InfiniteLoading on:infinite={onInfinite} distance={3000} forceUseInfiniteWrapper="#Feed" />
-      {/if}
-      {#if screen.availWidth <= 600}
-        <InfiniteLoading on:infinite={onInfinite} distance={3000} forceUseInfiniteWrapper=false />
-      {/if}
       <div id="spacer"></div>
     </div>
   </div>
@@ -83,9 +78,9 @@
     color: var(--text-color);
   }
   #Feed {
+    overflow-y: scroll;
     width: 65%;
     height: 100vh;
-    overflow-y: scroll;
     padding: 20px;
     padding-bottom: 0;
     padding-top: 0;
@@ -143,13 +138,12 @@
       height: auto;
     }
     #Feed {
-      overflow-y: scroll;
       width: 95%;
       margin: 0px;
       margin-left: 10%;
       margin-right: 10%;
       padding: 0px;
-      height: auto;
+      overflow-y: visible;
     }
 
     #spacer {

src/lib/PostComponent.svelte

@@ -141,6 +141,13 @@
         controls
       ></video>
     {/if}
+    {#if post.gifLink}
+      <img
+        id="embedVideo"
+        src="{post.gifLink}"
+        alt="Post GIF"
+      />
+    {/if}
   </div>
 </div>
 

src/lib/pdsfetch.ts

@@ -46,6 +46,7 @@ class Post {
   replyingUri: atUriObject | null;
   imagesCid: string[] | null;
   videosLinkCid: string | null;
+  gifLink: string | null;
 
   constructor(
     record: ComAtprotoRepoListRecords.Record,
@@ -69,6 +70,7 @@ class Post {
     this.quotingUri = null;
     this.imagesCid = null;
     this.videosLinkCid = null;
+    this.gifLink = null;
     switch (post.embed?.$type) {
       case "app.bsky.embed.images":
         this.imagesCid = post.embed.images.map(
@@ -96,6 +98,9 @@ class Post {
             break;
         }
         break;
+      case "app.bsky.embed.external": // assuming that external embeds are gifs for now
+        this.gifLink = post.embed.external.uri;
+        break;
     }
   }
 }