show currently active playing item on playlist: #6204

ui/component/claimList/view.jsx

@@ -21,6 +21,7 @@ type Props = {
   headerAltControls: Node,
   loading: boolean,
   type: string,
+  activeUri?: string,
   empty?: string,
   defaultSort?: boolean,
   onScrollBottom?: (any) => void,
@@ -50,6 +51,7 @@ type Props = {
 
 export default function ClaimList(props: Props) {
   const {
+    activeUri,
     uris,
     headerAltControls,
     loading,
@@ -190,6 +192,7 @@ export default function ClaimList(props: Props) {
               <ClaimPreview
                 uri={uri}
                 type={type}
+                active={activeUri && uri === activeUri}
                 hideMenu={hideMenu}
                 includeSupportAction={includeSupportAction}
                 showUnresolvedClaim={showUnresolvedClaims}

ui/component/claimPreview/view.jsx

@@ -36,6 +36,7 @@ const AbandonedChannelPreview = lazyImport(() =>
 type Props = {
   uri: string,
   claim: ?Claim,
+  active: boolean,
   obscureNsfw: boolean,
   showUserBlocked: boolean,
   claimIsMine: boolean,
@@ -113,6 +114,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     pending,
     empty,
     // modifiers
+    active,
     customShouldHide,
     showNullPlaceholder,
     // value from show mature content user setting
@@ -293,6 +295,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
         'claim-preview__wrapper--inline': type === 'inline',
         'claim-preview__wrapper--small': type === 'small',
         'claim-preview__live': live,
+        'claim-preview__active': active,
       })}
     >
       <>

ui/component/collectionContentSidebar/index.js

@@ -4,19 +4,19 @@ import {
   makeSelectUrlsForCollectionId,
   makeSelectNameForCollectionId,
   makeSelectCollectionForId,
-  makeSelectClaimForClaimId,
+  makeSelectClaimForUri,
   makeSelectClaimIsMine,
 } from 'lbry-redux';
 
 const select = (state, props) => {
-  const claim = makeSelectClaimForClaimId(props.id)(state);
+  const claim = makeSelectClaimForUri(props.uri)(state);
   const url = claim && claim.permanent_url;
 
   return {
+    url,
     collection: makeSelectCollectionForId(props.id)(state),
     collectionUrls: makeSelectUrlsForCollectionId(props.id)(state),
     collectionName: makeSelectNameForCollectionId(props.id)(state),
-    claim,
     isMine: makeSelectClaimIsMine(url)(state),
   };
 };

ui/component/collectionContentSidebar/view.jsx

@@ -9,18 +9,17 @@ import * as ICONS from 'constants/icons';
 import { COLLECTIONS_CONSTS } from 'lbry-redux';
 
 type Props = {
+  id: string,
+  url: string,
+  isMine: boolean,
   collectionUrls: Array<Claim>,
   collectionName: string,
   collection: any,
   createUnpublishedCollection: (string, Array<any>, ?string) => void,
-  id: string,
-  claim: Claim,
-  isMine: boolean,
 };
 
 export default function CollectionContent(props: Props) {
-  const { collectionUrls, collectionName, id } = props;
-
+  const { collectionUrls, collectionName, id, url } = props;
   return (
     <Card
       isBodyList
@@ -40,7 +39,16 @@ export default function CollectionContent(props: Props) {
           <Button label={'View List'} button="link" navigate={`/$/${PAGES.LIST}/${id}`} />
         </>
       }
-      body={<ClaimList isCardBody type="small" uris={collectionUrls} collectionId={id} empty={__('List is Empty')} />}
+      body={
+        <ClaimList
+          isCardBody
+          type="small"
+          activeUri={url}
+          uris={collectionUrls}
+          collectionId={id}
+          empty={__('List is Empty')}
+        />
+      }
     />
   );
 }

ui/scss/component/_claim-list.scss

@@ -705,6 +705,10 @@
   }
 }
 
+.claim-preview__active {
+  background-color: var(--color-card-background-highlighted);
+}
+
 .claim-preview__live {
   .claim-preview__file-property-overlay {
     opacity: 1; // The original 0.7 is not visible over bright thumbnails