From 90bf9487e82d511bb6348a8ebfb5fddef228dfe7 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 8 Jul 2019 14:58:33 -0400
Subject: [PATCH 1/4] use short_url for channels and files

---
 package.json                        |  2 +-
 src/ui/component/claimUri/index.js  | 14 ++++++++++++++
 src/ui/component/claimUri/view.jsx  | 30 +++++++++++++++++++++++++++++
 src/ui/page/channel/view.jsx        |  6 +++---
 src/ui/page/file/index.js           |  2 --
 src/ui/page/file/view.jsx           | 18 +++--------------
 src/ui/scss/component/_channel.scss |  2 +-
 src/ui/scss/component/_main.scss    |  3 +--
 src/ui/scss/component/_media.scss   |  6 ------
 yarn.lock                           |  4 ++--
 10 files changed, 55 insertions(+), 32 deletions(-)
 create mode 100644 src/ui/component/claimUri/index.js
 create mode 100644 src/ui/component/claimUri/view.jsx

diff --git a/package.json b/package.json
index d3cbd8313..2c2b052ac 100644
--- a/package.json
+++ b/package.json
@@ -124,7 +124,7 @@
     "jsmediatags": "^3.8.1",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#c83489e78ed368d368ad25552fce25e7de2d64b5",
+    "lbry-redux": "lbryio/lbry-redux#bb82aed61a5569e565daa784eb25fc1d639c0c22",
     "lbryinc": "lbryio/lbryinc#43d382d9b74d396a581a74d87e4c53105e04f845",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",
diff --git a/src/ui/component/claimUri/index.js b/src/ui/component/claimUri/index.js
new file mode 100644
index 000000000..85a69cb1a
--- /dev/null
+++ b/src/ui/component/claimUri/index.js
@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import { makeSelectShortUrlForUri, doToast } from 'lbry-redux';
+import ClaimUri from './view';
+
+const select = (state, props) => ({
+  shortUrl: makeSelectShortUrlForUri(props.uri)(state),
+});
+
+export default connect(
+  select,
+  {
+    doToast,
+  }
+)(ClaimUri);
diff --git a/src/ui/component/claimUri/view.jsx b/src/ui/component/claimUri/view.jsx
new file mode 100644
index 000000000..e48c205d8
--- /dev/null
+++ b/src/ui/component/claimUri/view.jsx
@@ -0,0 +1,30 @@
+// @flow
+import React from 'react';
+import { clipboard } from 'electron';
+import Button from 'component/button';
+
+type Props = {
+  shortUrl: ?string,
+  uri: string,
+  doToast: ({ message: string }) => void,
+};
+
+function ClaimUri(props: Props) {
+  const { shortUrl, uri, doToast } = props;
+
+  return (
+    <Button
+      className="media__uri"
+      button="alt"
+      label={shortUrl || uri}
+      onClick={() => {
+        clipboard.writeText(shortUrl || uri);
+        doToast({
+          message: __('Copied'),
+        });
+      }}
+    />
+  );
+}
+
+export default ClaimUri;
diff --git a/src/ui/page/channel/view.jsx b/src/ui/page/channel/view.jsx
index afcd2d665..522c98cdc 100644
--- a/src/ui/page/channel/view.jsx
+++ b/src/ui/page/channel/view.jsx
@@ -12,6 +12,7 @@ import ChannelContent from 'component/channelContent';
 import ChannelAbout from 'component/channelAbout';
 import ChannelThumbnail from 'component/channelThumbnail';
 import ChannelEdit from 'component/channelEdit';
+import ClaimUri from 'component/claimUri';
 import * as ICONS from 'constants/icons';
 
 const PAGE_VIEW_QUERY = `view`;
@@ -31,7 +32,7 @@ type Props = {
 
 function ChannelPage(props: Props) {
   const { uri, title, cover, history, location, page, channelIsMine, thumbnail } = props;
-  const { channelName, claimName, claimId } = parseURI(uri);
+  const { channelName } = parseURI(uri);
   const { search } = location;
   const urlParams = new URLSearchParams(search);
   const currentView = urlParams.get(PAGE_VIEW_QUERY) || undefined;
@@ -79,8 +80,7 @@ function ChannelPage(props: Props) {
               )}
             </h1>
             <h2 className="channel__url">
-              {claimName}
-              {claimId && `#${claimId}`}
+              <ClaimUri uri={uri} />
             </h2>
           </div>
         </header>
diff --git a/src/ui/page/file/index.js b/src/ui/page/file/index.js
index 03107eb03..5fae5063b 100644
--- a/src/ui/page/file/index.js
+++ b/src/ui/page/file/index.js
@@ -16,7 +16,6 @@ import {
   makeSelectTitleForUri,
   makeSelectThumbnailForUri,
   makeSelectClaimIsNsfw,
-  doToast,
 } from 'lbry-redux';
 import { doFetchViewCount, makeSelectViewCountForUri, makeSelectCostInfoForUri, doFetchCostInfoForUri } from 'lbryinc';
 import { selectShowNsfw, makeSelectClientSetting } from 'redux/selectors/settings';
@@ -54,7 +53,6 @@ const perform = dispatch => ({
   setViewed: uri => dispatch(doSetContentHistoryItem(uri)),
   markSubscriptionRead: (channel, uri) => dispatch(doRemoveUnreadSubscription(channel, uri)),
   fetchViewCount: claimId => dispatch(doFetchViewCount(claimId)),
-  showToast: options => dispatch(doToast(options)),
 });
 
 export default connect(
diff --git a/src/ui/page/file/view.jsx b/src/ui/page/file/view.jsx
index f9c4a52db..4b0e0394a 100644
--- a/src/ui/page/file/view.jsx
+++ b/src/ui/page/file/view.jsx
@@ -2,7 +2,6 @@
 import * as MODALS from 'constants/modal_types';
 import * as icons from 'constants/icons';
 import * as React from 'react';
-import { clipboard } from 'electron';
 import { buildURI, normalizeURI } from 'lbry-redux';
 import FileViewer from 'component/fileViewer';
 import Thumbnail from 'component/common/thumbnail';
@@ -23,6 +22,7 @@ import ClaimTags from 'component/claimTags';
 import CommentsList from 'component/commentsList';
 import CommentCreate from 'component/commentCreate';
 import VideoDuration from 'component/videoDuration';
+import ClaimUri from 'component/claimUri';
 
 type Props = {
   claim: StreamClaim,
@@ -48,7 +48,6 @@ type Props = {
   title: string,
   thumbnail: ?string,
   nsfw: boolean,
-  showToast: ({}) => void,
 };
 
 class FilePage extends React.Component<Props> {
@@ -150,7 +149,6 @@ class FilePage extends React.Component<Props> {
       title,
       thumbnail,
       nsfw,
-      showToast,
     } = this.props;
 
     // File info
@@ -298,18 +296,8 @@ class FilePage extends React.Component<Props> {
           </div>
         </div>
         <div className="grid-area--related">
-          <div className="media__uri-wrapper">
-            <Button
-              className="media__uri"
-              button="alt"
-              label={uri}
-              onClick={() => {
-                clipboard.writeText(uri);
-                showToast({
-                  message: __('Copied'),
-                });
-              }}
-            />
+          <div className="media__actions media__actions--between">
+            <ClaimUri uri={uri} />
             <div className="file-properties">
               {isRewardContent && <Icon size={20} iconColor="red" icon={icons.FEATURED} />}
               {nsfw && <div className="badge badge--mature">{__('Mature')}</div>}
diff --git a/src/ui/scss/component/_channel.scss b/src/ui/scss/component/_channel.scss
index b81abb78e..5c5d7dc68 100644
--- a/src/ui/scss/component/_channel.scss
+++ b/src/ui/scss/component/_channel.scss
@@ -16,7 +16,7 @@ $metadata-z-index: 1;
   align-self: flex-start;
   position: absolute;
   object-fit: cover;
-  filter: brightness(50%);
+  filter: brightness(40%);
 }
 
 .channel-cover,
diff --git a/src/ui/scss/component/_main.scss b/src/ui/scss/component/_main.scss
index d0f1e476d..51bb7dbcd 100644
--- a/src/ui/scss/component/_main.scss
+++ b/src/ui/scss/component/_main.scss
@@ -57,8 +57,7 @@
   }
   .grid-area--related {
     grid-area: related;
-    min-width: 30rem;
-    max-width: 35rem;
+    width: 35rem;
   }
 
   @media (max-width: 600px) {
diff --git a/src/ui/scss/component/_media.scss b/src/ui/scss/component/_media.scss
index bf9cbed3a..d6dfd06de 100644
--- a/src/ui/scss/component/_media.scss
+++ b/src/ui/scss/component/_media.scss
@@ -62,12 +62,6 @@
   margin-right: var(--spacing-small);
 }
 
-.media__uri-wrapper {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: var(--spacing-small);
-}
-
 .media__uri {
   font-size: 1.1rem;
   min-width: 0;
diff --git a/yarn.lock b/yarn.lock
index 5d8fa8d07..b863207ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6646,9 +6646,9 @@ lazy-val@^1.0.3, lazy-val@^1.0.4:
     yargs "^13.2.2"
     zstd-codec "^0.1.1"
 
-lbry-redux@lbryio/lbry-redux#c83489e78ed368d368ad25552fce25e7de2d64b5:
+lbry-redux@lbryio/lbry-redux#bb82aed61a5569e565daa784eb25fc1d639c0c22:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/c83489e78ed368d368ad25552fce25e7de2d64b5"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/bb82aed61a5569e565daa784eb25fc1d639c0c22"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"

From 5a8b31fb1eaa586509ba763d40e58afb9baf6687 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 8 Jul 2019 21:19:46 -0400
Subject: [PATCH 2/4] fix: claim preview style

---
 src/ui/scss/component/_channel.scss    |  2 +-
 src/ui/scss/component/_claim-list.scss | 18 +++++-------------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/ui/scss/component/_channel.scss b/src/ui/scss/component/_channel.scss
index 5c5d7dc68..4a79d7e71 100644
--- a/src/ui/scss/component/_channel.scss
+++ b/src/ui/scss/component/_channel.scss
@@ -28,7 +28,7 @@ $metadata-z-index: 1;
 .channel-thumbnail {
   display: flex;
   height: 5rem;
-  width: 6rem;
+  width: 5rem;
   background-size: cover;
   margin-right: var(--spacing-medium);
 }
diff --git a/src/ui/scss/component/_claim-list.scss b/src/ui/scss/component/_claim-list.scss
index 4db23e906..0bd17e228 100644
--- a/src/ui/scss/component/_claim-list.scss
+++ b/src/ui/scss/component/_claim-list.scss
@@ -82,20 +82,13 @@
 }
 
 .claim-preview {
+  @include mediaThumbHoverZoom;
   display: flex;
   position: relative;
+  overflow: visible;
+  cursor: pointer;
   font-size: 1.3rem;
   padding: var(--spacing-medium);
-  cursor: pointer;
-  overflow: hidden;
-
-  &:hover {
-    background-color: darken($lbry-white, 5%);
-
-    [data-mode='dark'] & {
-      background-color: var(--dm-color-04);
-    }
-  }
 
   .media__thumb {
     width: var(--file-list-thumbnail-width);
@@ -122,11 +115,10 @@
 }
 
 .claim-preview--large {
-  @include mediaThumbHoverZoom;
   font-size: 1.6rem;
   border-bottom: 0;
   padding: 0;
-  padding-bottom: var(--spacing-medium);
+  margin: var(--spacing-small) 0;
 
   &:hover {
     background-color: transparent;
@@ -153,7 +145,7 @@
 .claim-preview-metadata {
   display: flex;
   flex-direction: column;
-  width: 100%;
+  flex: 1;
 }
 
 .claim-preview-info {

From c8a6f4cfc78997c555db76140c87d4c49d9b5b42 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 8 Jul 2019 22:41:48 -0400
Subject: [PATCH 3/4] fix: file page with large titles

---
 src/ui/page/file/view.jsx         | 156 +++++++++++++++---------------
 src/ui/scss/component/_main.scss  |  40 ++------
 src/ui/scss/component/_media.scss |  15 ++-
 3 files changed, 96 insertions(+), 115 deletions(-)

diff --git a/src/ui/page/file/view.jsx b/src/ui/page/file/view.jsx
index 4b0e0394a..89df2f8ff 100644
--- a/src/ui/page/file/view.jsx
+++ b/src/ui/page/file/view.jsx
@@ -219,92 +219,94 @@ class FilePage extends React.Component<Props> {
             ))}
         </div>
 
-        <div className="grid-area--info media__content media__content--large">
-          <h1 className="media__title media__title--large">{title}</h1>
-          <div className="media__subtext media__subtext--large">
-            <div className="media__subtitle__channel">
-              <UriIndicator uri={uri} link />
+        <div className="columns">
+          <div className="grid-area--info">
+            <h1 className="media__title media__title--large">{title}</h1>
+            <div className="media__subtext media__subtext--large">
+              <div className="media__subtitle__channel">
+                <UriIndicator uri={uri} link />
+              </div>
             </div>
-          </div>
-          <div className="media__actions media__actions--between">
-            <div className="media__action-group--large">
-              {claimIsMine && (
-                <Button
-                  button="primary"
-                  icon={icons.EDIT}
-                  label={__('Edit')}
-                  navigate="/$/publish"
-                  onClick={() => {
-                    prepareEdit(claim, editUri, fileInfo);
-                  }}
-                />
-              )}
-              {!claimIsMine && (
-                <React.Fragment>
-                  {channelUri && <SubscribeButton uri={channelUri} channelName={channelName} />}
-
+            <div className="media__actions media__actions--between">
+              <div className="media__action-group--large">
+                {claimIsMine && (
                   <Button
-                    button="alt"
-                    icon={icons.TIP}
-                    label={__('Send a tip')}
-                    onClick={() => openModal(MODALS.SEND_TIP, { uri })}
+                    button="primary"
+                    icon={icons.EDIT}
+                    label={__('Edit')}
+                    navigate="/$/publish"
+                    onClick={() => {
+                      prepareEdit(claim, editUri, fileInfo);
+                    }}
                   />
-                </React.Fragment>
-              )}
-              <Button
-                button="alt"
-                icon={icons.SHARE}
-                label={__('Share')}
-                onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable })}
-              />
+                )}
+                {!claimIsMine && (
+                  <React.Fragment>
+                    {channelUri && <SubscribeButton uri={channelUri} channelName={channelName} />}
+
+                    <Button
+                      button="alt"
+                      icon={icons.TIP}
+                      label={__('Send a tip')}
+                      onClick={() => openModal(MODALS.SEND_TIP, { uri })}
+                    />
+                  </React.Fragment>
+                )}
+                <Button
+                  button="alt"
+                  icon={icons.SHARE}
+                  label={__('Share')}
+                  onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable })}
+                />
+              </div>
+
+              <div className="media__action-group--large">
+                <FileDownloadLink uri={uri} />
+                <FileActions
+                  uri={uri}
+                  claimId={claim.claim_id}
+                  showFullscreen={isPreviewType}
+                  viewerContainer={this.viewerContainer}
+                />
+              </div>
             </div>
 
-            <div className="media__action-group--large">
-              <FileDownloadLink uri={uri} />
-              <FileActions
-                uri={uri}
-                claimId={claim.claim_id}
-                showFullscreen={isPreviewType}
-                viewerContainer={this.viewerContainer}
-              />
+            <div className="media__actions media__actions--between">
+              <div className="media__subtext media__subtext--large">
+                <DateTime uri={uri} show={DateTime.SHOW_DATE} />
+              </div>
+
+              <div className="media__subtext media__subtext--large">
+                <VideoDuration uri={uri} />
+
+                {claimIsMine && (
+                  <p>
+                    {viewCount} {viewCount !== 1 ? __('Views') : __('View')}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            <div className="media__info--large">
+              <ClaimTags uri={uri} type="large" />
+              <FileDetails uri={uri} />
+
+              <div className="media__info-title">{__('Comments')}</div>
+              <CommentCreate uri={uri} />
+              <CommentsList uri={uri} />
             </div>
           </div>
-
-          <div className="media__actions media__actions--between">
-            <div className="media__subtext media__subtext--large">
-              <DateTime uri={uri} show={DateTime.SHOW_DATE} />
-            </div>
-
-            <div className="media__subtext media__subtext--large">
-              <VideoDuration uri={uri} />
-
-              {claimIsMine && (
-                <p>
-                  {viewCount} {viewCount !== 1 ? __('Views') : __('View')}
-                </p>
-              )}
+          <div className="grid-area--related">
+            <div className="media__actions media__actions--between media__actions--nowrap">
+              <ClaimUri uri={uri} />
+              <div className="file-properties">
+                {isRewardContent && <Icon size={20} iconColor="red" icon={icons.FEATURED} />}
+                {nsfw && <div className="badge badge--mature">{__('Mature')}</div>}
+                <FilePrice badge uri={normalizeURI(uri)} />
+              </div>
             </div>
+            <RecommendedContent uri={uri} />
           </div>
-
-          <div className="media__info--large">
-            <ClaimTags uri={uri} type="large" />
-            <FileDetails uri={uri} />
-
-            <div className="media__info-title">{__('Comments')}</div>
-            <CommentCreate uri={uri} />
-            <CommentsList uri={uri} />
-          </div>
-        </div>
-        <div className="grid-area--related">
-          <div className="media__actions media__actions--between">
-            <ClaimUri uri={uri} />
-            <div className="file-properties">
-              {isRewardContent && <Icon size={20} iconColor="red" icon={icons.FEATURED} />}
-              {nsfw && <div className="badge badge--mature">{__('Mature')}</div>}
-              <FilePrice badge uri={normalizeURI(uri)} />
-            </div>
-          </div>
-          <RecommendedContent uri={uri} />
         </div>
       </Page>
     );
diff --git a/src/ui/scss/component/_main.scss b/src/ui/scss/component/_main.scss
index 51bb7dbcd..614e78273 100644
--- a/src/ui/scss/component/_main.scss
+++ b/src/ui/scss/component/_main.scss
@@ -35,41 +35,21 @@
   }
 }
 
+.grid-wrapper {
+  display: flex;
+  position: relative;
+}
+
 .main--file-page {
-  display: grid;
-  grid-template-rows: auto 1fr;
-  grid-template-columns: 1fr auto;
-  max-width: calc(100% - var(--side-nav-width) - var(--spacing-main-padding));
+  position: relative;
 
-  grid-template-areas:
-    'content content'
-    'info related';
-
-  .grid-area--content {
-    width: 100%;
-  }
-
-  .grid-area--content {
-    grid-area: content;
-  }
   .grid-area--info {
-    grid-area: info;
+    margin-right: var(--spacing-large);
+    width: 50%;
   }
+
   .grid-area--related {
-    grid-area: related;
-    width: 35rem;
-  }
-
-  @media (max-width: 600px) {
-    grid-template-areas:
-      'content'
-      'info'
-      'related';
-
-    .grid-area--related {
-      grid-area: related;
-      width: auto;
-    }
+    width: calc(50% - var(--spacing-large));
   }
 }
 
diff --git a/src/ui/scss/component/_media.scss b/src/ui/scss/component/_media.scss
index d6dfd06de..6c6e1432b 100644
--- a/src/ui/scss/component/_media.scss
+++ b/src/ui/scss/component/_media.scss
@@ -56,7 +56,9 @@
 
 .media__title--large {
   cursor: default;
-  display: inline;
+  overflow: hidden;
+  width: 100%;
+  text-overflow: ellipsis;
   font-size: 2rem;
   line-height: 1.33;
   margin-right: var(--spacing-small);
@@ -86,6 +88,10 @@
   justify-content: space-between;
 }
 
+.media__actions--nowrap {
+  flex-wrap: nowrap;
+}
+
 .media__action-group {
   > *:not(:last-child) {
     margin-right: var(--spacing-medium);
@@ -110,13 +116,6 @@
   }
 }
 
-//  M E D I A
-//  C O N T E N T
-
-.media__content--large {
-  padding-right: var(--spacing-large);
-}
-
 // M E D I A
 // S U B T E X T
 //

From 461e632262a5ff16dd8b6ae3f52a5986b7a63b03 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 8 Jul 2019 23:16:06 -0400
Subject: [PATCH 4/4] fix: claim list not resetting after scrolling down

---
 src/ui/component/claimListDiscover/view.jsx | 16 +++++++++++++---
 src/ui/scss/component/_main.scss            |  5 -----
 static/locales/en.json                      |  1 -
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/ui/component/claimListDiscover/view.jsx b/src/ui/component/claimListDiscover/view.jsx
index f911e9e3c..b20b3ec5d 100644
--- a/src/ui/component/claimListDiscover/view.jsx
+++ b/src/ui/component/claimListDiscover/view.jsx
@@ -98,6 +98,10 @@ function ClaimListDiscover(props: Props) {
     return type === SEARCH_SORT_YOU ? __('Tags You Follow') : __('Channels You Follow');
   }
 
+  function resetList() {
+    setPage(1);
+  }
+
   const header = (
     <h1 className="card__title--flex">
       <FormField
@@ -105,7 +109,10 @@ function ClaimListDiscover(props: Props) {
         type="select"
         name="trending_sort"
         value={typeSort}
-        onChange={e => setTypeSort(e.target.value)}
+        onChange={e => {
+          resetList();
+          setTypeSort(e.target.value);
+        }}
       >
         {SEARCH_TYPES.map(type => (
           <option key={type} value={type}>
@@ -123,7 +130,7 @@ function ClaimListDiscover(props: Props) {
           className="claim-list__dropdown"
           value={personalSort}
           onChange={e => {
-            setPage(1);
+            resetList();
             setPersonalSort(e.target.value);
           }}
         >
@@ -140,7 +147,10 @@ function ClaimListDiscover(props: Props) {
           type="select"
           name="trending_time"
           value={timeSort}
-          onChange={e => setTimeSort(e.target.value)}
+          onChange={e => {
+            resetList();
+            setTimeSort(e.target.value);
+          }}
         >
           {SEARCH_TIMES.map(time => (
             <option key={time} value={time}>
diff --git a/src/ui/scss/component/_main.scss b/src/ui/scss/component/_main.scss
index 614e78273..a1f56037e 100644
--- a/src/ui/scss/component/_main.scss
+++ b/src/ui/scss/component/_main.scss
@@ -35,11 +35,6 @@
   }
 }
 
-.grid-wrapper {
-  display: flex;
-  position: relative;
-}
-
 .main--file-page {
   position: relative;
 
diff --git a/static/locales/en.json b/static/locales/en.json
index 9561007b3..9f01cc257 100644
--- a/static/locales/en.json
+++ b/static/locales/en.json
@@ -482,7 +482,6 @@
   "Rendering document.": "Rendering document.",
   "Sorry, looks like we can't load the document.": "Sorry, looks like we can't load the document.",
   "Tag Search": "Tag Search",
-  "Disabled": "Disabled",
   "Rewards are currently disabled for your account. Turn on diagnostic data sharing, in": "Rewards are currently disabled for your account. Turn on diagnostic data sharing, in",
   ", in order to re-enable them.": ", in order to re-enable them.",
   "Humans Only": "Humans Only",