Grid patch v1 (#1555)

* Patch v1

ui/component/claimList/view.jsx

@@ -61,7 +61,7 @@ type Props = {
   unavailableUris?: Array<string>,
   showMemberBadge?: boolean,
   inWatchHistory?: boolean,
-  onHidden: string,
+  onHidden: (string) => void,
 };
 
 export default function ClaimList(props: Props) {

ui/component/claimListDiscover/view.jsx

@@ -145,7 +145,6 @@ function ClaimListDiscover(props: Props) {
     header,
     name,
     claimType,
-    // pageSize,
     defaultClaimType,
     streamType,
     defaultStreamType,
@@ -214,6 +213,7 @@ function ClaimListDiscover(props: Props) {
   const mutedAndBlockedChannelIds = Array.from(
     new Set(mutedUris.concat(blockedUris).map((uri) => splitBySeparator(uri)[1]))
   );
+  const [hiddenBuffer, setHiddenBuffer] = React.useState([]);
 
   const langParam = urlParams.get(CS.LANGUAGE_KEY) || null;
   const searchInSelectedLang = searchInLanguage && !ignoreSearchInLanguage;
@@ -263,10 +263,8 @@ function ClaimListDiscover(props: Props) {
   const channelIdsParam = channelIdsInUrl ? channelIdsInUrl.split(',') : channelIds;
   const excludedIdsParam = excludedChannelIds;
   const feeAmountParam = urlParams.get('fee_amount') || feeAmount;
-  // const originalPageSize = pageSize || CS.PAGE_SIZE;
   const originalPageSize = 12;
-  // const dynamicPageSize = isLargeScreen ? Math.ceil(originalPageSize * (3 / 2)) : originalPageSize;
+  const dynamicPageSize = isLargeScreen ? Math.ceil((originalPageSize / 2) * 6) : Math.ceil((originalPageSize / 2) * 4);
-  const dynamicPageSize = isLargeScreen ? Math.ceil((originalPageSize / 2) * 6) : originalPageSize;
   const historyAction = history.action;
 
   let orderParam = orderBy || urlParams.get(CS.ORDER_BY_KEY) || defaultOrderBy || orderParamEntry;
@@ -656,6 +654,14 @@ function ClaimListDiscover(props: Props) {
     return uris;
   }
 
+  function onHidden(uri) {
+    if (hiddenBuffer.indexOf(uri) === -1) {
+      let newBuffer = hiddenBuffer;
+      newBuffer.push(uri);
+      setHiddenBuffer(newBuffer);
+    }
+  }
+
   // **************************************************************************
   // **************************************************************************
 
@@ -728,6 +734,7 @@ function ClaimListDiscover(props: Props) {
             maxClaimRender={maxClaimRender}
             loadedCallback={loadedCallback}
             swipeLayout={swipeLayout}
+            onHidden={onHidden}
           />
           {loading && useSkeletonScreen && (
             <div className="claim-grid">
@@ -768,6 +775,7 @@ function ClaimListDiscover(props: Props) {
             maxClaimRender={maxClaimRender}
             loadedCallback={loadedCallback}
             swipeLayout={swipeLayout}
+            onHidden={onHidden}
           />
           {loading &&
             useSkeletonScreen &&

ui/page/discover/livestreamSection.jsx

@@ -109,20 +109,12 @@ export default function LivestreamSection(props: Props) {
 
   return (
     <div className="livestream-list">
-      {liveTilesOverLimit && liveSection === SECTION.EXPANDED && (
-        <div className="livestream-list--view-more">
-          <Button
-            label={__('Show fewer livestreams')}
-            button="link"
-            iconRight={ICONS.UP}
-            className="claim-grid__title--secondary"
-            onClick={collapseSection}
-          />
-        </div>
-      )}
-
       <ClaimListDiscover
-        uris={liveSection === SECTION.COLLAPSED ? livestreamUris.slice(0, initialLiveTileLimit) : livestreamUris}
+        uris={
+          liveSection === SECTION.COLLAPSED
+            ? livestreamUris.slice(0, initialLiveTileLimit)
+            : livestreamUris.slice(0, initialLiveTileLimit * 2)
+        }
         tileLayout={tileLayout}
         showHeader={false}
         hideFilters