use short_url for channels and files

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",

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);

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;

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}
+              <ClaimUri uri={uri} />
-              {claimId && `#${claimId}`}
             </h2>
           </div>
         </header>

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(

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">
+          <div className="media__actions media__actions--between">
-            <Button
+            <ClaimUri uri={uri} />
-              className="media__uri"
-              button="alt"
-              label={uri}
-              onClick={() => {
-                clipboard.writeText(uri);
-                showToast({
-                  message: __('Copied'),
-                });
-              }}
-            />
             <div className="file-properties">
               {isRewardContent && <Icon size={20} iconColor="red" icon={icons.FEATURED} />}
               {nsfw && <div className="badge badge--mature">{__('Mature')}</div>}

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,

src/ui/scss/component/_main.scss

@@ -57,8 +57,7 @@
   }
   .grid-area--related {
     grid-area: related;
-    min-width: 30rem;
+    width: 35rem;
-    max-width: 35rem;
   }
 
   @media (max-width: 600px) {

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;

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"