From 277f6d01a6fdfac106af8874da631416b77bbce7 Mon Sep 17 00:00:00 2001
From: saltrafael <a657ee92-7eb9-46eb-97d2-6735799df838@aleeas.com>
Date: Fri, 23 Jul 2021 11:24:32 -0300
Subject: [PATCH] Show on content page if a file is part of a playlist already

---
 CHANGELOG.md                                   |  1 +
 ui/component/claimCollectionAddButton/index.js | 14 ++++++++++----
 ui/component/claimCollectionAddButton/view.jsx | 13 +++++++++----
 ui/scss/component/_button.scss                 |  5 +++++
 4 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b75535d5..4f7ad50af 100644
--- a/CHANGELOG.md
+++ b/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))
diff --git a/ui/component/claimCollectionAddButton/index.js b/ui/component/claimCollectionAddButton/index.js
index 191edf6aa..57e05a763 100644
--- a/ui/component/claimCollectionAddButton/index.js
+++ b/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,
diff --git a/ui/component/claimCollectionAddButton/view.jsx b/ui/component/claimCollectionAddButton/view.jsx
index e9077127c..43f2d3e0b 100644
--- a/ui/component/claimCollectionAddButton/view.jsx
+++ b/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) => {
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index d1ea4e3b3..297dab029 100644
--- a/ui/scss/component/_button.scss
+++ b/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;