From 304722566ca1323ce6aba306be801cf6a2e336aa Mon Sep 17 00:00:00 2001 From: zeppi Date: Sun, 22 Aug 2021 16:45:36 -0400 Subject: [PATCH] update collections from lists page --- package.json | 2 +- ui/component/claimPreviewTile/view.jsx | 11 ++-- .../collectionQuickUpdateButton/index.js | 16 ++++++ .../collectionQuickUpdateButton/view.jsx | 52 +++++++++++++++++++ .../previewOverlayProperties/view.jsx | 11 +--- ui/scss/component/_claim-list.scss | 27 ++++++++++ yarn.lock | 4 +- 7 files changed, 103 insertions(+), 20 deletions(-) create mode 100644 ui/component/collectionQuickUpdateButton/index.js create mode 100644 ui/component/collectionQuickUpdateButton/view.jsx diff --git a/package.json b/package.json index 301ccd167..2cb19f43c 100644 --- a/package.json +++ b/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", diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx index e9cf16805..00ff20a06 100644 --- a/ui/component/claimPreviewTile/view.jsx +++ b/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 && (
- {isPlayable && ( - - )} + {isPlayable && }
{/* @if TARGET='app' */} - {isStream && ( - - )} + {isStream && } {/* @endif */}
- + {isCollection && }
diff --git a/ui/component/collectionQuickUpdateButton/index.js b/ui/component/collectionQuickUpdateButton/index.js new file mode 100644 index 000000000..68e72a7b3 --- /dev/null +++ b/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); diff --git a/ui/component/collectionQuickUpdateButton/view.jsx b/ui/component/collectionQuickUpdateButton/view.jsx new file mode 100644 index 000000000..43dde0560 --- /dev/null +++ b/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, + 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 ( +
+
+ ); +} + +export default CollectionQuickUpdateButton; diff --git a/ui/component/previewOverlayProperties/view.jsx b/ui/component/previewOverlayProperties/view.jsx index b428a1c3f..cf665a6fd 100644 --- a/ui/component/previewOverlayProperties/view.jsx +++ b/ui/component/previewOverlayProperties/view.jsx @@ -45,7 +45,7 @@ export default function PreviewOverlayProperties(props: Props) { return (
{typeof properties === 'function' ? ( @@ -53,15 +53,6 @@ export default function PreviewOverlayProperties(props: Props) { ) : ( <> {!isStream && } - {editedCollection && ( - - )} {isCollection && claim && !iconOnly &&
{claimCount}
} {!iconOnly && isStream && } {isStream && } diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index dc963bd6b..ce2791895 100644 --- a/ui/scss/component/_claim-list.scss +++ b/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); diff --git a/yarn.lock b/yarn.lock index 0862f56f9..024e438bc 100644 --- a/yarn.lock +++ b/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"