Show on content page if a file is part of a playlist already

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Add watch later to hover action for last used playlist on popup _community pr!_ ([#6274](https://github.com/lbryio/lbry-desktop/pull/6274))
 - Open in desktop (web feature) _community pr!_ ([#6667](https://github.com/lbryio/lbry-desktop/pull/6667))
 - Add confirmation on comment removal  _community pr!_ ([#6563](https://github.com/lbryio/lbry-desktop/pull/6563))
+- Show on content page if a file is part of a playlist already  _community pr!_([#6393](https://github.com/lbryio/lbry-desktop/pull/6393))
 
 ### Changed
 - Use Canonical Url for copy link ([#6500](https://github.com/lbryio/lbry-desktop/pull/6500))

ui/component/claimCollectionAddButton/index.js

@@ -1,11 +1,17 @@
 import { connect } from 'react-redux';
 import { doOpenModal } from 'redux/actions/app';
 import CollectionAddButton from './view';
-import { makeSelectClaimForUri } from 'lbry-redux';
+import { makeSelectClaimForUri, makeSelectClaimUrlInCollection } from 'lbry-redux';
 
-const select = (state, props) => ({
-  claim: makeSelectClaimForUri(props.uri)(state),
-});
+const select = (state, props) => {
+  const claim = makeSelectClaimForUri(props.uri)(state);
+  const permanentUrl = claim && claim.permanent_url;
+
+  return {
+    claim,
+    isSaved: makeSelectClaimUrlInCollection(permanentUrl)(state),
+  };
+};
 
 export default connect(select, {
   doOpenModal,

ui/component/claimCollectionAddButton/view.jsx

@@ -11,10 +11,11 @@ type Props = {
   fileAction?: boolean,
   type?: boolean,
   claim: Claim,
+  isSaved: boolean,
 };
 
 export default function CollectionAddButton(props: Props) {
-  const { doOpenModal, uri, fileAction, type = 'playlist', claim } = props;
+  const { doOpenModal, uri, fileAction, type = 'playlist', claim, isSaved } = props;
 
   // $FlowFixMe
   const streamType = (claim && claim.value && claim.value.stream_type) || '';
@@ -24,10 +25,14 @@ export default function CollectionAddButton(props: Props) {
   return (
     <Button
       button={fileAction ? undefined : 'alt'}
-      className={classnames({ 'button--file-action': fileAction })}
-      icon={fileAction ? ICONS.ADD : ICONS.LIBRARY}
+      className={classnames({
+        'button--file-action': fileAction,
+        'button--file-action-active': fileAction && isSaved,
+      })}
+      icon={fileAction ? (!isSaved ? ICONS.ADD : ICONS.STACK) : ICONS.LIBRARY}
       iconSize={fileAction ? 22 : undefined}
-      label={uri ? __('Save') : __('New List')}
+      iconColor={isSaved && 'green'}
+      label={uri ? (!isSaved ? __('Save') : __('Saved')) : __('New List')}
       requiresAuth={IS_WEB}
       title={__('Add this claim to a list')}
       onClick={(e) => {

ui/scss/component/_button.scss

@@ -240,6 +240,11 @@
   }
 }
 
+.button--file-action-active {
+  @extend .button--file-action;
+  color: var(--color-link);
+}
+
 .button--fire {
   color: var(--color-fire);
   position: relative;