feat(media): ✨ add comment counter

JamesIves · Jan 2, 2025 · c13ee28 · c13ee28
1 parent 1629d55
commit c13ee28
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 18 deletions.
diff --git a/src/app/components/media/media.component.html b/src/app/components/media/media.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="content" class="pb-[32px] h-[{{ size }}px] block overflow-hidden">
-  <div class="h-full w-full rounded-lg bg-slate-200 p-2 pb-7 sm:p-4 sm:pb-7">
+  <div class="h-full w-full rounded-lg bg-slate-200 p-2 pb-9 sm:p-4 sm:pb-9">
     <img
       class="h-full w-full bg-slate-950 object-contain"
       data-testid="media-image"
@@ -38,22 +38,56 @@
       [src]="content.secure_media_embed.media_domain_url | trustResource"
     ></iframe>
 
-    <div class="overflow-hidden truncate text-sm font-bold text-slate-600">
-      <a
-        class="inline-block text-indigo-700 transition-colors hover:text-indigo-500"
-        rel="noopener noreferrer"
-        target="_blank"
-        [href]="content.url"
-        >Source </a
-      >,
-      <a
-        class="inline-block text-indigo-700 transition-colors hover:text-indigo-500"
-        rel="noopener noreferrer"
-        target="_blank"
-        href="https://reddit.com/u/{{ content.author }}"
-        >u/{{ content.author }}</a
+    <div
+      class="mt-1 inline-flex w-full max-w-full items-center justify-between gap-x-1 overflow-hidden truncate"
+    >
+      <div
+        class="max-w-full overflow-hidden truncate text-xs font-medium text-slate-900"
       >
-      - {{ content.title }}
+        {{ content.title }}
+      </div>
+      <div class="flex items-center gap-x-1">
+        <a
+          href="https://www.reddit.com/user/{{ content.author }}"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center rounded border border-indigo-400 bg-transparent px-2.5 py-0.5 text-xs font-medium text-indigo-800 transition-all hover:border-indigo-800 focus:border-indigo-800"
+        >
+          <svg
+            class="me-1.5 h-2.5 w-2.5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z"
+            />
+          </svg>
+          /u/{{ content.author }}
+        </a>
+
+        <a
+          [href]="content.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center rounded border border-indigo-400 bg-transparent px-2.5 py-0.5 text-xs font-medium text-indigo-800 transition-all hover:border-indigo-800 focus:border-indigo-800"
+        >
+          <svg
+            class="me-1.5 h-2.5 w-2.5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z"
+            />
+          </svg>
+          {{ content.num_comments | number }}
+          {{ content.num_comments === 1 ? 'Comment' : 'Comments' }}
+        </a>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/app/components/media/media.component.spec.ts b/src/app/components/media/media.component.spec.ts
@@ -36,6 +36,7 @@ describe('MediaComponent', () => {
       id: '1337',
       over_18: false,
       title: 'Cool image',
+      num_comments: 1337,
       subreddit: 'cats',
       post_hint: RedditPostHint.IMAGE,
       author: 'not a real author',
@@ -63,6 +64,7 @@ describe('MediaComponent', () => {
       id: '1337',
       over_18: false,
       title: 'Cool image',
+      num_comments: 1337,
       subreddit: 'cats',
       post_hint: RedditPostHint.LINK,
       author: 'not a real author',
@@ -93,6 +95,7 @@ describe('MediaComponent', () => {
       id: '1337',
       over_18: false,
       title: 'Cool image',
+      num_comments: 1337,
       subreddit: 'cats',
       post_hint: RedditPostHint.RICH_VIDEO,
       author: 'not a real author',

diff --git a/src/app/components/media/media.component.ts b/src/app/components/media/media.component.ts
@@ -5,7 +5,7 @@ import {
   OnChanges,
   SimpleChanges
 } from '@angular/core'
-import {CommonModule} from '@angular/common'
+import {CommonModule, DecimalPipe} from '@angular/common'
 import {IRedditResult, RedditPostHint} from 'src/app/models/reddit.model'
 import {TrustResourcePipe} from 'src/app/pipes/trust-resource/trust-resource.pipe'
 
@@ -15,7 +15,7 @@ import {TrustResourcePipe} from 'src/app/pipes/trust-resource/trust-resource.pip
  */
 @Component({
   selector: 'app-media',
-  imports: [CommonModule, TrustResourcePipe],
+  imports: [CommonModule, TrustResourcePipe, DecimalPipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './media.component.html'
 })

diff --git a/src/app/models/reddit.model.ts b/src/app/models/reddit.model.ts
@@ -106,6 +106,7 @@ export interface IRedditResult {
   }
   post_hint: RedditPostHint
   subreddit: string
+  num_comments: number
 }
 
 export interface IRedditResultNatural {