fix(state): Media Info Auth State

* added isAuthenticated boolean to MediaInfo selector to show dynamic buttons depending on whethe the user is logged in or not * Added hover state to cast images to convey to the user that they can navigate to a dedicated page to view actor details
faizanalibugti · Dec 31, 2023 · 5bc3442 · 5bc3442
1 parent 2770a7d
commit 5bc3442
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/apps/filmpire/src/app/+state/media-info/models/media-info.model.ts b/apps/filmpire/src/app/+state/media-info/models/media-info.model.ts
@@ -9,5 +9,6 @@ export interface MediaInfoPage {
   mediaInfo: MovieDetail | TvShowDetail;
   accountState: AccountStates;
   currentMedia: SelectedMedia;
+  isLoggedIn: boolean;
   loaded: boolean;
 }
diff --git a/apps/filmpire/src/app/+state/media-info/views/media-info-view.selectors.ts b/apps/filmpire/src/app/+state/media-info/views/media-info-view.selectors.ts
@@ -6,17 +6,20 @@ import {
 } from '../media-info.selectors';
 import { selectCurrentMedia } from '../../global/global.selectors';
 import { MediaInfoPage } from '../models/media-info.model';
+import { selectIsAuthenticated } from '../../auth/auth.selectors';
 
 export const selectMediaInfoPage = createSelector(
   selectMediaInfo,
   selectAccountState,
   selectCurrentMedia,
+  selectIsAuthenticated,
   selectMediaInfoLoaded,
-  (mediaInfo, accountState, currentMedia, loaded) =>
+  (mediaInfo, accountState, currentMedia, isLoggedIn, loaded) =>
     ({
       mediaInfo,
       accountState,
       currentMedia,
+      isLoggedIn,
       loaded,
     } as MediaInfoPage)
 );
diff --git a/apps/filmpire/src/app/media-info/media-info.component.html b/apps/filmpire/src/app/media-info/media-info.component.html
@@ -167,7 +167,7 @@ <h2 class="text-2xl font-semibold">Top Cast</h2>
                           : 'assets/actor_avatar_placeholder.jpg'
                       "
                       alt="{{ actor.name }}"
-                      class="mx-auto h-[150px] w-full max-w-[100px] rounded-lg object-cover"
+                      class="mx-auto h-[150px] w-full max-w-[100px] rounded-lg object-cover hover:scale-105"
                       loading="lazy"
                     />
                     <p class="mt-1 text-center text-sm">{{ actor.name }}</p>
@@ -195,7 +195,7 @@ <h2 class="text-2xl font-semibold">Top Cast</h2>
             </a>
 
             <a
-              *ngIf="media.mediaInfo.imdb_id"
+              *ngIf="media.mediaInfo.imdb_id && !media.isLoggedIn"
               class="bg-[#1976d2] dark:bg-[#dc1a28]"
               href="https://www.imdb.com/title/{{ media.mediaInfo.imdb_id }}"
               matTooltip="Visit imDB page"