feat(collections): Added an indicator to the collection media card th…

…at an item was added manually
jorenn92 · Jan 22, 2024 · 12a4cb2 · 12a4cb2
1 parent 262eac1
commit 12a4cb2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/ui/src/components/Collection/CollectionDetail/index.tsx b/ui/src/components/Collection/CollectionDetail/index.tsx
@@ -90,9 +90,10 @@ const CollectionDetail: React.FC<ICollectionDetail> = (
 
     setData([
       ...dataRef.current,
-      ...resp.items.map((el) =>
-        el.plexData ? el.plexData : ({} as IPlexMetadata),
-      ),
+      ...resp.items.map((el) => {
+        el.plexData!.maintainerrIsManual = el.isManual ? el.isManual : false
+        return el.plexData ? el.plexData : ({} as IPlexMetadata)
+      }),
     ])
     loadingRef.current = false
     loadingExtraRef.current = false

diff --git a/ui/src/components/Common/MediaCard/index.tsx b/ui/src/components/Common/MediaCard/index.tsx
@@ -27,6 +27,7 @@ interface IMediaCard {
   exclusionId?: number
   exclusionType?: 'global' | 'specific' | undefined
   collectionId?: number
+  isManual?: boolean
   onRemove?: (id: string) => void
 }
 
@@ -45,6 +46,7 @@ const MediaCard: React.FC<IMediaCard> = ({
   canExpand = false,
   collectionPage = false,
   exclusionType = undefined,
+  isManual = false,
   onRemove = (id: string) => {},
 }) => {
   const isTouch = useIsTouch()
@@ -177,6 +179,27 @@ const MediaCard: React.FC<IMediaCard> = ({
             </div>
           ) : undefined}
 
+          {/* on collection page and for manually added */}
+          {collectionPage && isManual && !showDetail ? (
+            <div className="absolute left-1/2 transform -translate-x-1/2 bottom-0 flex items-center justify-between p-2">
+              <div
+                className={`pointer-events-none z-40 rounded-full shadow ${
+                  mediaType === 'movie'
+                    ? 'bg-zinc-900'
+                    : mediaType === 'show'
+                      ? 'bg-amber-900'
+                      : mediaType === 'season'
+                        ? 'bg-yellow-700'
+                        : 'bg-rose-900'
+                }`}
+              >
+                <div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-zinc-200 sm:h-5">
+                  {'MANUAL'}
+                </div>
+              </div>
+            </div>
+          ) : undefined}
+
           {/* on collection page and for the media items */}
           {collectionPage && !exclusionType && daysLeft !== 999 ? (
             <div className="absolute right-0 flex items-center justify-between p-2">

diff --git a/ui/src/components/Overview/Content/index.tsx b/ui/src/components/Overview/Content/index.tsx
@@ -70,6 +70,7 @@ export interface IPlexMetadata {
   index?: number
   maintainerrExclusionType?: 'specific' | 'global' // this is added by Maintainerr, not a Plex type
   maintainerrExclusionId?: number // this is added by Maintainerr, not a Plex type
+  maintainerrIsManual?: boolean // this is added by Maintainerr, not a Plex type
 }
 
 const OverviewContent = (props: IOverviewContent) => {
@@ -203,6 +204,7 @@ const OverviewContent = (props: IOverviewContent) => {
               exclusionType={el.maintainerrExclusionType}
               onRemove={props.onRemove}
               collectionId={props.collectionId}
+              isManual={el.maintainerrIsManual ? el.maintainerrIsManual : false}
               {...(props.collectionInfo
                 ? {
                     daysLeft: getDaysLeft(+el.ratingKey),