update collections from lists page

package.json

@@ -152,7 +152,7 @@
     "imagesloaded": "^4.1.4",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#e4d0662100a5f4b28bb1bf3cbc1e51b2eebab5b6",
+    "lbry-redux": "lbryio/lbry-redux#34b20795e387957b073a5beeb8e8e1725598a178",
     "lbryinc": "lbryio/lbryinc#8f9a58bfc8312a65614fd7327661cdcc502c4e59",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",

ui/component/claimPreviewTile/view.jsx

@@ -18,6 +18,7 @@ import FileWatchLaterLink from 'component/fileWatchLaterLink';
 import ClaimRepostAuthor from 'component/claimRepostAuthor';
 import ClaimMenuList from 'component/claimMenuList';
 import CollectionPreviewOverlay from 'component/collectionPreviewOverlay';
+import CollectionQuickUpdateButton from 'component/collectionQuickUpdateButton';
 // $FlowFixMe cannot resolve ...
 import PlaceholderTx from 'static/img/placeholderTx.gif';
 
@@ -209,18 +210,14 @@ function ClaimPreviewTile(props: Props) {
           {!isChannel && (
             <React.Fragment>
               <div className="claim-preview__hover-actions">
-                {isPlayable && (
-                  <FileWatchLaterLink focusable={false} uri={uri} />
-                )}
+                {isPlayable && <FileWatchLaterLink focusable={false} uri={uri} />}
               </div>
               <div className="claim-preview__hover-actions">
                 {/* @if TARGET='app' */}
-                {isStream && (
-                  <FileDownloadLink focusable={false} uri={canonicalUrl} hideOpenButton />
-                )}
+                {isStream && <FileDownloadLink focusable={false} uri={canonicalUrl} hideOpenButton />}
                 {/* @endif */}
               </div>
-
+              {isCollection && <CollectionQuickUpdateButton collectionId={listId} />}
               <div className="claim-preview__file-property-overlay">
                 <PreviewOverlayProperties uri={uri} properties={liveProperty || properties} />
               </div>

ui/component/collectionQuickUpdateButton/index.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import { doCollectionPublishUpdate, makeSelectEditedCollectionForId, selectUpdatingCollection } from 'lbry-redux';
+import CollectionQuickUpdateButton from './view';
+import { doToast } from 'redux/actions/notifications';
+
+const select = (state, props) => ({
+  isEdit: Boolean(makeSelectEditedCollectionForId(props.collectionId)(state)),
+  isUpdatingCollection: selectUpdatingCollection(state),
+});
+
+const perform = (dispatch) => ({
+  doToast: (props) => dispatch(doToast(props)),
+  collectionPublishUpdate: (options) => dispatch(doCollectionPublishUpdate(options, true)),
+});
+
+export default connect(select, perform)(CollectionQuickUpdateButton);

ui/component/collectionQuickUpdateButton/view.jsx

@@ -0,0 +1,52 @@
+// @flow
+import * as ICONS from 'constants/icons';
+import React from 'react';
+import Button from 'component/button';
+
+type Props = {
+  collectionId: string,
+  isEdit: boolean,
+  doToast: ({ message: string }) => void,
+  collectionPublishUpdate: (any) => Promise<any>,
+  isUpdatingCollection: boolean,
+};
+
+function CollectionQuickUpdateButton(props: Props) {
+  const { collectionId, isEdit, doToast, collectionPublishUpdate, isUpdatingCollection } = props;
+
+  const options = { claim_id: collectionId };
+  function handleQuickUpdate(e) {
+    e.preventDefault();
+
+    collectionPublishUpdate(options)
+      .then(() => {
+        doToast({
+          message: __('Playlist updated'),
+        });
+      })
+      .catch(() => {
+        doToast({
+          message: __('Something went wrong with your update'),
+        });
+      });
+  }
+
+  if (!isEdit) {
+    return null;
+  }
+  return (
+    <div className="claim-preview__collection-property-overlay">
+      <Button
+        requiresAuth={IS_WEB}
+        className="button--file-action"
+        icon={isUpdatingCollection ? ICONS.TIME : ICONS.PUBLISH}
+        iconColor={'red'}
+        disabled={isUpdatingCollection}
+        onClick={(e) => handleQuickUpdate(e)}
+        aria-label={__('Publish Update')}
+      />
+    </div>
+  );
+}
+
+export default CollectionQuickUpdateButton;

ui/component/previewOverlayProperties/view.jsx

@@ -45,7 +45,7 @@ export default function PreviewOverlayProperties(props: Props) {
   return (
     <div
       className={classnames('claim-preview__overlay-properties', {
-        '.claim-preview__overlay-properties--small': small,
+        'claim-preview__overlay-properties--small': small,
       })}
     >
       {typeof properties === 'function' ? (
@@ -53,15 +53,6 @@ export default function PreviewOverlayProperties(props: Props) {
       ) : (
         <>
           {!isStream && <ClaimType uri={uri} small={small} />}
-          {editedCollection && (
-            <Icon
-              customTooltipText={__('Unpublished Edits')}
-              tooltip
-              iconColor="red"
-              size={size}
-              icon={ICONS.PUBLISH}
-            />
-          )}
           {isCollection && claim && !iconOnly && <div>{claimCount}</div>}
           {!iconOnly && isStream && <VideoDuration uri={uri} />}
           {isStream && <FileType uri={uri} small={small} />}

ui/scss/component/_claim-list.scss

@@ -616,6 +616,33 @@
   }
 }
 
+.claim-preview__collection-property-overlay {
+  position: absolute;
+  top: var(--spacing-xxs);
+  right: var(--spacing-xxs);
+  background-color: var(--color-black);
+  border-radius: var(--border-radius);
+  opacity: 1;
+  z-index: 3;
+  .button--file-action {
+    display: block;
+    margin: 0 0;
+    padding: var(--spacing-xxs) var(--spacing-xxs);
+    height: unset;
+    &:hover {
+      .button__label {
+        display: inline;
+      }
+      opacity: 1;
+    }
+    button {
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
 .claim-preview__claim-property-overlay {
   position: absolute;
   bottom: var(--spacing-xxs);

yarn.lock

@@ -10129,9 +10129,9 @@ lazy-val@^1.0.4:
     yargs "^13.2.2"
     zstd-codec "^0.1.1"
 
-lbry-redux@lbryio/lbry-redux#e4d0662100a5f4b28bb1bf3cbc1e51b2eebab5b6:
+lbry-redux@lbryio/lbry-redux#34b20795e387957b073a5beeb8e8e1725598a178:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/e4d0662100a5f4b28bb1bf3cbc1e51b2eebab5b6"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/34b20795e387957b073a5beeb8e8e1725598a178"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"