fix playlist resolving collectionurls (#7178)

* fix playlist resolving collectionurls

* Update CHANGELOG.md

Co-authored-by: Thomas Zarebczan <tzarebczan@users.noreply.github.com>

CHANGELOG.md

@@ -23,6 +23,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Fix floating player stopping on markdown or image files ([#7073](https://github.com/lbryio/lbry-desktop/pull/7073))
 - Fix list thumbnail upload ([#7074](https://github.com/lbryio/lbry-desktop/pull/7074))
 - Stream Key is now hidden _community pr!_ ([#7127](https://github.com/lbryio/lbry-desktop/pull/7127))
+- Fix playlist preview thumbnail ([#7178](https://github.com/lbryio/lbry-desktop/pull/7178)
 - Fixed “Your Account” popup on mobile ([#7172](https://github.com/lbryio/lbry-desktop/pull/7172))
 
 ## [0.51.2] - [2021-08-20]

ui/component/collectionPreviewOverlay/index.js

@@ -7,6 +7,7 @@ import {
   makeSelectNameForCollectionId,
   makeSelectPendingCollectionForId,
   makeSelectCountForCollectionId,
+  doFetchItemsInCollection,
 } from 'lbry-redux';
 import CollectionPreviewOverlay from './view';
 
@@ -27,4 +28,8 @@ const select = (state, props) => {
   };
 };
 
-export default connect(select)(CollectionPreviewOverlay);
+const perform = (dispatch) => ({
+  fetchCollectionItems: (claimId) => dispatch(doFetchItemsInCollection({ collectionId: claimId })), // if collection not resolved, resolve it
+});
+
+export default connect(select, perform)(CollectionPreviewOverlay);

ui/component/collectionPreviewOverlay/view.jsx

@@ -12,10 +12,17 @@ type Props = {
   pendingCollection?: Collection,
   claim: ?Claim,
   collectionItemUrls: Array<string>,
+  fetchCollectionItems: (string) => void,
 };
 
 function CollectionPreviewOverlay(props: Props) {
-  const { collectionItemUrls } = props;
+  const { collectionId, collectionItemUrls, fetchCollectionItems } = props;
+
+  React.useEffect(() => {
+    if (!collectionItemUrls) {
+      fetchCollectionItems(collectionId);
+    }
+  }, [collectionId, collectionItemUrls, fetchCollectionItems]);
 
   if (collectionItemUrls && collectionItemUrls.length > 0) {
     return (