move to canonical_url and allow pasting lbry.tv links in wunderbar

src/ui/component/channelContent/view.jsx

@@ -43,7 +43,7 @@ function ChannelContent(props: Props) {
       {!channelIsMine && <HiddenNsfwClaims className="card__subtitle" uri={uri} />}
 
       {hasContent && !channelIsBlocked && (
-        <ClaimList header={false} uris={claimsInChannel.map(claim => claim.permanent_url)} />
+        <ClaimList header={false} uris={claimsInChannel.map(claim => claim.canonical_url)} />
       )}
       {!channelIsBlocked && (
         <Paginate

src/ui/component/claimList/view.jsx

@@ -111,13 +111,13 @@ export default function ClaimList(props: Props) {
           </div>
         </div>
       )}
+
+      {injectedItem && <div>{injectedItem}</div>}
+
       {urisLength > 0 && (
         <ul className="ul--no-style">
           {sortedUris.map((uri, index) => (
-            <React.Fragment key={uri}>
-              <ClaimPreview uri={uri} type={type} showUserBlocked={showHiddenByUser} />
-              {index === 4 && injectedItem && injectedItem}
-            </React.Fragment>
+            <ClaimPreview key={uri} uri={uri} type={type} showUserBlocked={showHiddenByUser} />
           ))}
         </ul>
       )}

src/ui/component/claimListDiscover/index.js

@@ -2,7 +2,7 @@ import * as SETTINGS from 'constants/settings';
 import { connect } from 'react-redux';
 import {
   doClaimSearch,
-  selectClaimSearchByQuery,
+  selectClaimSearchByQueryCanonical,
   selectFetchingClaimSearch,
   doToggleTagFollow,
   selectBlockedChannels,
@@ -12,7 +12,7 @@ import { makeSelectClientSetting } from 'redux/selectors/settings';
 import ClaimListDiscover from './view';
 
 const select = state => ({
-  claimSearchByQuery: selectClaimSearchByQuery(state),
+  claimSearchByQuery: selectClaimSearchByQueryCanonical(state),
   loading: selectFetchingClaimSearch(state),
   subscribedChannels: selectSubscriptions(state),
   showNsfw: makeSelectClientSetting(SETTINGS.SHOW_NSFW)(state),

src/ui/component/claimPreview/index.js

@@ -23,20 +23,20 @@ import { push } from 'connected-react-router';
 import ClaimPreview from './view';
 
 const select = (state, props) => ({
-  pending: makeSelectClaimIsPending(props.uri)(state),
-  claim: makeSelectClaimForUri(props.uri)(state),
+  pending: props.uri && makeSelectClaimIsPending(props.uri)(state),
+  claim: props.uri && makeSelectClaimForUri(props.uri)(state),
   obscureNsfw: !selectShowMatureContent(state),
-  claimIsMine: makeSelectClaimIsMine(props.uri)(state),
-  isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
-  thumbnail: makeSelectThumbnailForUri(props.uri)(state),
-  title: makeSelectTitleForUri(props.uri)(state),
-  nsfw: makeSelectClaimIsNsfw(props.uri)(state),
+  claimIsMine: props.uri && makeSelectClaimIsMine(props.uri)(state),
+  isResolvingUri: props.uri && makeSelectIsUriResolving(props.uri)(state),
+  thumbnail: props.uri && makeSelectThumbnailForUri(props.uri)(state),
+  title: props.uri && makeSelectTitleForUri(props.uri)(state),
+  nsfw: props.uri && makeSelectClaimIsNsfw(props.uri)(state),
   blackListedOutpoints: selectBlackListedOutpoints(state),
   filteredOutpoints: selectFilteredOutpoints(state),
   blockedChannelUris: selectBlockedChannels(state),
-  hasVisitedUri: makeSelectHasVisitedUri(props.uri)(state),
-  channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
-  isSubscribed: makeSelectIsSubscribed(props.uri, true)(state),
+  hasVisitedUri: props.uri && makeSelectHasVisitedUri(props.uri)(state),
+  channelIsBlocked: props.uri && selectChannelIsBlocked(props.uri)(state),
+  isSubscribed: props.uri && makeSelectIsSubscribed(props.uri, true)(state),
 });
 
 const perform = dispatch => ({

src/ui/component/claimPreview/view.jsx

@@ -78,13 +78,15 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
   const includeChannelTooltip = type !== 'inline' && type !== 'tooltip';
   const hideActions = type === 'small' || type === 'tooltip';
 
-  let isValid;
   let name;
-  try {
-    ({ claimName: name } = parseURI(uri));
-    isValid = true;
-  } catch (e) {
-    isValid = false;
+  let isValid = false;
+  if (uri) {
+    try {
+      ({ claimName: name } = parseURI(uri));
+      isValid = true;
+    } catch (e) {
+      isValid = false;
+    }
   }
 
   const isChannel = isValid ? parseURI(uri).isChannel : false;

src/ui/component/claimUri/index.js

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
-import { makeSelectShortUrlForUri, doToast } from 'lbry-redux';
+import { makeSelectCanonicalUrlForUri, doToast } from 'lbry-redux';
 import ClaimUri from './view';
 
 const select = (state, props) => ({
-  shortUrl: makeSelectShortUrlForUri(props.uri)(state),
+  shortUrl: makeSelectCanonicalUrlForUri(props.uri)(state),
 });
 
 export default connect(

src/ui/component/wunderbar/view.jsx

@@ -11,6 +11,9 @@ import Tag from 'component/tag';
 
 const L_KEY_CODE = 76;
 const ESC_KEY_CODE = 27;
+const WEB_DEV_PREFIX = 'http://localhost:1337/';
+const WEB_PROD_PREFIX = 'https://beta.lbry.tv/';
+const SEARCH_PREFIX = `$/${PAGES.SEARCH}q=`;
 
 type Props = {
   searchQuery: ?string,
@@ -95,12 +98,37 @@ class WunderBar extends React.PureComponent<Props, State> {
 
   handleSubmit(value: string, suggestion?: { value: string, type: string }) {
     const { onSubmit, onSearch, doShowSnackBar, history } = this.props;
+    let query = value.trim();
 
-    const query = value.trim();
     const showSnackError = () => {
       doShowSnackBar('Invalid LBRY URL entered. Only A-Z, a-z, 0-9, and "-" allowed.');
     };
 
+    // Allow copying a lbry.tv url and pasting it into the search bar
+    const includesLbryTvProd = query.includes(WEB_PROD_PREFIX);
+    const includesLbryTvDev = query.includes(WEB_DEV_PREFIX);
+    const wasCopiedFromWeb = includesLbryTvDev || includesLbryTvProd;
+
+    if (wasCopiedFromWeb) {
+      if (includesLbryTvDev) {
+        query = query.slice(WEB_DEV_PREFIX.length);
+      } else {
+        query = query.slice(WEB_PROD_PREFIX.length);
+      }
+
+      query = query.replace(/:/g, '#');
+
+      if (query.includes(SEARCH_PREFIX)) {
+        query = query.slice(SEARCH_PREFIX.length);
+        onSearch(query);
+        return;
+      } else {
+        query = `lbry://${query}`;
+        onSubmit(query);
+        return;
+      }
+    }
+
     // User selected a suggestion
     if (suggestion) {
       if (suggestion.type === SEARCH_TYPES.SEARCH) {

src/ui/page/show/index.js

@@ -5,26 +5,23 @@ import {
   makeSelectClaimForUri,
   makeSelectIsUriResolving,
   makeSelectTotalPagesForChannel,
-  buildURI,
+  normalizeURI,
 } from 'lbry-redux';
 import { selectBlackListedOutpoints } from 'lbryinc';
 import ShowPage from './view';
 
 const select = (state, props) => {
   const { pathname } = props.location;
-  const urlParts = pathname.split('/');
-  const claimName = urlParts[1];
-  const claimId = urlParts[2];
-
-  // claimName and claimId come from the url `lbry.tv/{claimName}/{claimId}"
-  const uri = buildURI({ contentName: claimName, claimId: claimId });
+  // Remove the leading "/" added by the browser
+  const path = pathname.slice(1).replace(/:/g, '#');
+  const uri = normalizeURI(path);
 
   return {
     claim: makeSelectClaimForUri(uri)(state),
     isResolvingUri: makeSelectIsUriResolving(uri)(state),
     blackListedOutpoints: selectBlackListedOutpoints(state),
     totalPages: makeSelectTotalPagesForChannel(uri, PAGE_SIZE)(state),
-    uri: uri,
+    uri,
   };
 };
 

src/ui/scss/component/_claim-list.scss

@@ -109,7 +109,7 @@ $border-color--dark: var(--dm-color-04);
 
 .claim-preview--injected,
 .claim-preview {
-  border-bottom: 1px solid $border-color;
+  border-top: 1px solid $border-color;
 
   &:only-of-type {
     border: none;

src/ui/util/uri.js

@@ -1,17 +1,9 @@
 // @flow
-import { parseURI } from 'lbry-redux';
 
 const LBRY_INC_DOMAINS = ['lbry.io', 'lbry.com', 'lbry.tv', 'lbry.tech', 'lbry.fund', 'spee.ch'];
 
 export const formatLbryUriForWeb = (uri: string) => {
-  const { claimName, claimId } = parseURI(uri);
-
-  let webUrl = `/${claimName}`;
-  if (claimId) {
-    webUrl += `/${claimId}`;
-  }
-
-  return webUrl;
+  return uri.replace('lbry://', '/').replace(/#/g, ':');
 };
 
 export const formatPathForWeb = (path: string) => {