Merge pull request #2614 from lbryio/fixes

use short_url for channels and files and a couple fixes

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/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}>

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}
-              {claimId && `#${claimId}`}
+              <ClaimUri uri={uri} />
             </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
@@ -221,7 +219,8 @@ class FilePage extends React.Component<Props> {
             ))}
         </div>
 
-        <div className="grid-area--info media__content media__content--large">
+        <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">
@@ -298,18 +297,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 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>}
@@ -318,6 +307,7 @@ class FilePage extends React.Component<Props> {
             </div>
             <RecommendedContent uri={uri} />
           </div>
+        </div>
       </Page>
     );
   }

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,
@@ -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);
 }

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 {

src/ui/scss/component/_main.scss

@@ -36,41 +36,15 @@
 }
 
 .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;
-  }
-  .grid-area--related {
-    grid-area: related;
-    min-width: 30rem;
-    max-width: 35rem;
+    margin-right: var(--spacing-large);
+    width: 50%;
   }
 
-  @media (max-width: 600px) {
-    grid-template-areas:
-      'content'
-      'info'
-      'related';
-
   .grid-area--related {
-      grid-area: related;
-      width: auto;
-    }
+    width: calc(50% - var(--spacing-large));
   }
 }
 

src/ui/scss/component/_media.scss

@@ -56,18 +56,14 @@
 
 .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);
 }
 
-.media__uri-wrapper {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: var(--spacing-small);
-}
-
 .media__uri {
   font-size: 1.1rem;
   min-width: 0;
@@ -92,6 +88,10 @@
   justify-content: space-between;
 }
 
+.media__actions--nowrap {
+  flex-wrap: nowrap;
+}
+
 .media__action-group {
   > *:not(:last-child) {
     margin-right: var(--spacing-medium);
@@ -116,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
 //

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

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"