Merge pull request #2437 from lbryio/fixes

General fixes from routing/lbry.tv changes

src/ui/component/cardMedia/view.jsx

@@ -15,7 +15,7 @@ class CardMedia extends React.PureComponent<Props> {
         style={
           thumbnail
             ? { backgroundImage: `url('${thumbnail}')` }
-            : { backgroundImage: `url(/${Placeholder})` }
+            : { backgroundImage: `url(${Placeholder})` }
         }
         className="media__thumb"
       />

src/ui/component/fileDetails/view.jsx

@@ -104,6 +104,7 @@ class FileDetails extends PureComponent<Props> {
                 {__('Downloaded to')}
                 {': '}
                 <Button
+                  constrict
                   button="link"
                   onClick={() => openFolder(downloadPath)}
                   label={downloadNote || downloadPath}

src/ui/component/sideBar/index.js

@@ -1,9 +1,11 @@
 import { connect } from 'react-redux';
 import { selectUnreadAmount } from 'redux/selectors/subscriptions';
+import { selectShouldShowInviteGuide } from 'redux/selectors/app';
 import SideBar from './view';
 
 const select = state => ({
   unreadSubscriptionTotal: selectUnreadAmount(state),
+  shouldShowInviteGuide: selectShouldShowInviteGuide(state),
 });
 
 const perform = () => ({});

src/ui/component/sideBar/view.jsx

@@ -6,37 +6,46 @@ import Button from 'component/button';
 import classnames from 'classnames';
 import Tooltip from 'component/common/tooltip';
 
-type SideBarLink = {
-  label: string,
-  path: string,
-  active: boolean,
-  icon: ?string,
-  subLinks: Array<SideBarLink>,
-  guide: ?string,
-};
-
 type Props = {
   unreadSubscriptionTotal: number,
+  shouldShowInviteGuide: string,
 };
 
 class SideBar extends React.PureComponent<Props> {
   render() {
-    const { unreadSubscriptionTotal } = this.props;
+    const { unreadSubscriptionTotal, shouldShowInviteGuide } = this.props;
-    const buildLink = (path, label, icon) => ({
+    const buildLink = (path, label, icon, guide) => ({
       navigate: path ? `$/${path}` : '/',
       label,
       icon,
+      guide,
     });
 
-    const renderLink = (linkProps, index) => (
+    const renderLink = (linkProps, index) => {
-      <li key={index}>
+      const { guide } = linkProps;
+
+      const inner = (
         <Button
           {...linkProps}
-          className="navigation__link"
+          className={classnames('navigation__link', {
+            'navigation__link--guide': guide,
+          })}
           activeClass="navigation__link--active"
         />
+      );
+
+      return (
+        <li key={index}>
+          {guide ? (
+            <Tooltip key={guide} alwaysVisible direction="right" body={guide}>
+              {inner}
+            </Tooltip>
+          ) : (
+            inner
+          )}
         </li>
       );
+    };
 
     return (
       <nav className="navigation">
@@ -70,7 +79,12 @@ class SideBar extends React.PureComponent<Props> {
               ...buildLink(PAGES.ACCOUNT, 'Overview', ICONS.ACCOUNT),
             },
             {
-              ...buildLink(PAGES.INVITE, 'Invite', ICONS.INVITE),
+              ...buildLink(
+                PAGES.INVITE,
+                'Invite',
+                ICONS.INVITE,
+                shouldShowInviteGuide && __('Check this out!')
+              ),
             },
             {
               ...buildLink(PAGES.REWARDS, 'Rewards', ICONS.FEATURED),

src/ui/component/wunderbar/index.js

@@ -23,7 +23,7 @@ const select = state => ({
 
 const perform = (dispatch, ownProps) => ({
   onSearch: query => {
-    ownProps.history.push({ pathname: `/$/search`, search: `?q=${query}` });
+    ownProps.history.push({ pathname: `/$/search`, search: `?q=${encodeURIComponent(query)}` });
     analytics.apiLogSearch();
   },
   onSubmit: uri => {

src/ui/index.jsx

@@ -26,11 +26,14 @@ import pjson from 'package.json';
 import app from './app';
 import analytics from './analytics';
 import doLogWarningConsoleMessage from './logWarningConsoleMessage';
-import { ConnectedRouter } from 'connected-react-router';
+import { ConnectedRouter, push } from 'connected-react-router';
 import cookie from 'cookie';
-import(/* webpackChunkName: "styles" */
+import { formatLbryUriForWeb } from 'util/uri';
-/* webpackPrefetch: true */
+
-'scss/all.scss');
+// Import our app styles
+// If a style is not necessary for the initial page load, it should be removed from `all.scss`
+// and loaded dynamically in the component that consumes it
+import 'scss/all.scss';
 
 const APPPAGEURL = 'lbry://?';
 
@@ -47,16 +50,6 @@ if (process.env.SEARCH_API_URL) {
   setSearchApi(process.env.SEARCH_API_URL);
 }
 
-// @if TARGET='app'
-ipcRenderer.on('navigate-backward', () => {
-  // app.store.dispatch(doHistoryBack());
-});
-
-ipcRenderer.on('navigate-forward', () => {
-  // app.store.dispatch(doHistoryForward());
-});
-// @endif
-
 // @if TARGET='web'
 const SDK_API_URL = process.env.SDK_API_URL || 'https://api.piratebay.com/api/proxy';
 Lbry.setDaemonConnectionString(SDK_API_URL);
@@ -66,7 +59,6 @@ Lbry.setDaemonConnectionString(SDK_API_URL);
 // We interect with ipcRenderer to get the auth key from a users keyring
 // We keep a local variable for authToken beacuse `ipcRenderer.send` does not
 // contain a response, so there is no way to know when it's been set
-
 let authToken;
 Lbryio.setOverride(
   'setAuthToken',
@@ -141,9 +133,10 @@ ipcRenderer.on('open-uri-requested', (event, uri, newSession) => {
       app.store.dispatch(doConditionalAuthNavigate(newSession));
     } else if (uri.startsWith(APPPAGEURL)) {
       const navpage = uri.replace(APPPAGEURL, '').toLowerCase();
-      // app.store.dispatch(doNavigate(`/${navpage}`));
+      app.store.dispatch(push(`/$/${navpage}`));
     } else if (isURIValid(uri)) {
-      // app.store.dispatch(doNavigate('/show', { uri }));
+      const formattedUri = formatLbryUriForWeb(uri);
+      app.store.dispatch(push(formattedUri));
     } else {
       app.store.dispatch(
         doToast({
@@ -156,7 +149,7 @@ ipcRenderer.on('open-uri-requested', (event, uri, newSession) => {
 
 ipcRenderer.on('open-menu', (event, uri) => {
   if (uri && uri.startsWith('/help')) {
-    // app.store.dispatch(doNavigate('/help'));
+    app.store.dispatch(push('/$/help'));
   }
 });
 

src/ui/modal/modalRemoveFile/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doDeleteFileAndGoBack } from 'redux/actions/file';
+import { doDeleteFileAndMaybeGoBack } from 'redux/actions/file';
 import { makeSelectTitleForUri, makeSelectClaimIsMine, makeSelectFileInfoForUri } from 'lbry-redux';
 import { doHideModal } from 'redux/actions/app';
 import ModalRemoveFile from './view';
@@ -13,7 +13,7 @@ const select = (state, props) => ({
 const perform = dispatch => ({
   closeModal: () => dispatch(doHideModal()),
   deleteFile: (fileInfo, deleteFromComputer, abandonClaim) => {
-    dispatch(doDeleteFileAndGoBack(fileInfo, deleteFromComputer, abandonClaim));
+    dispatch(doDeleteFileAndMaybeGoBack(fileInfo, deleteFromComputer, abandonClaim));
   },
 });
 

src/ui/page/file/view.jsx

@@ -151,7 +151,7 @@ class FilePage extends React.Component<Props> {
       mediaType,
       contentType,
       fileName,
-    })
+    });
     const showFile =
       PLAYABLE_MEDIA_TYPES.includes(mediaType) || PREVIEW_MEDIA_TYPES.includes(mediaType);
 
@@ -176,14 +176,12 @@ class FilePage extends React.Component<Props> {
       editUri = buildURI(uriObject);
     }
 
-    const insufficientCredits = costInfo && costInfo.cost > balance;
+    const insufficientCredits = !claimIsMine && costInfo && costInfo.cost > balance;
 
     return (
       <Page notContained className="main--file-page">
         <div className="grid-area--content">
-          <h1 className="media__uri">
+          <h1 className="media__uri">{uri}</h1>
-            <Button navigate={uri} label={uri} />
-          </h1>
           {insufficientCredits && (
             <div className="media__insufficient-credits help--warning">
               {__(

src/ui/page/rewards/view.jsx

@@ -56,6 +56,7 @@ class RewardsPage extends PureComponent<Props> {
       }
       return (
         <section className="card card--section">
+          <div className="card__content">
             <p>
               {__(
                 'This account must undergo review before you can participate in the rewards program.'
@@ -69,13 +70,14 @@ class RewardsPage extends PureComponent<Props> {
               )}
             </p>
             <p>
-            {`${__('If you continue to see this message, send us an email to help@lbry.com.')} ${__(
+              {`${__(
-              'Please enjoy free content in the meantime!'
+                'If you continue to see this message, send us an email to help@lbry.com.'
-            )}`}
+              )} ${__('Please enjoy free content in the meantime!')}`}
             </p>
-          <p>
+          </div>
+          <div className="card__actions">
             <Button navigate="/" button="primary" label="Return Home" />
-          </p>
+          </div>
         </section>
       );
     }

src/ui/page/search/view.jsx

@@ -10,6 +10,7 @@ import Page from 'component/page';
 import ToolTip from 'component/common/tooltip';
 import Icon from 'component/common/icon';
 import SearchOptions from 'component/searchOptions';
+import Button from 'component/button';
 
 type Props = { doSearch: string => void, location: UrlLocation };
 
@@ -43,7 +44,9 @@ export default function SearchPage(props: Props) {
           <Fragment>
             {isValid && (
               <header className="search__header">
-                <h1 className="media__uri">{uri}</h1>
+                <Button navigate={uri} className="media__uri">
+                  {uri}
+                </Button>
                 {isChannel ? (
                   <ChannelTile size="large" isSearchResult uri={uri} />
                 ) : (

src/ui/redux/actions/file.js

@@ -10,6 +10,7 @@ import {
   selectFileInfosByOutpoint,
 } from 'lbry-redux';
 import { doHideModal } from 'redux/actions/app';
+import { goBack } from 'connected-react-router';
 
 export function doOpenFileInFolder(path) {
   return () => {
@@ -58,11 +59,14 @@ export function doDeleteFile(outpoint, deleteFromComputer, abandonClaim) {
   };
 }
 
-export function doDeleteFileAndGoBack(fileInfo, deleteFromComputer, abandonClaim) {
+export function doDeleteFileAndMaybeGoBack(fileInfo, deleteFromComputer, abandonClaim) {
   return dispatch => {
     const actions = [];
     actions.push(doHideModal());
     actions.push(doDeleteFile(fileInfo, deleteFromComputer, abandonClaim));
     dispatch(batchActions(...actions));
+    if (abandonClaim) {
+      dispatch(goBack());
+    }
   };
 }

src/ui/redux/selectors/app.js

@@ -138,3 +138,11 @@ export const selectSearchOptionsExpanded = createSelector(
   selectState,
   state => state.searchOptionsExpanded
 );
+
+export const selectShouldShowInviteGuide = createSelector(
+  makeSelectClientSetting(SETTINGS.FIRST_RUN_COMPLETED),
+  makeSelectClientSetting(SETTINGS.INVITE_ACKNOWLEDGED),
+  (firstRunCompleted, inviteAcknowledged) => {
+    return firstRunCompleted ? !inviteAcknowledged : false;
+  }
+);

src/ui/scss/all.scss

@@ -28,7 +28,6 @@
 @import 'component/markdown-editor';
 @import 'component/markdown-preview';
 @import 'component/media';
-@import 'component/menu';
 @import 'component/modal';
 @import 'component/navigation';
 @import 'component/notice';

src/ui/scss/component/_banner.scss

@@ -7,6 +7,7 @@
 
 .banner--first-run {
   height: 310px;
+  padding-right: var(--spacing-vertical-medium);
 
   // Adjust this class inside other `.banner--xxx` styles for control over animation
   .banner__item--static-for-animation {

src/ui/scss/component/_file-render.scss

@@ -6,7 +6,6 @@
 
   overflow: hidden;
   position: absolute;
-  z-index: 1;
 
   html[data-mode='dark'] & {
     border: 1px solid rgba($lbry-gray-1, 0.3);

src/ui/scss/component/_media.scss

@@ -35,13 +35,12 @@
   }
 
   .media__thumb {
+    flex-shrink: 0;
     width: 20rem;
   }
 
   .media__info {
     margin-left: var(--spacing-vertical-medium);
-    width: calc(80% - 20rem);
-    min-width: 40rem;
   }
 }
 
@@ -49,12 +48,11 @@
   font-size: 2rem;
 
   .media__thumb {
-    width: 30rem;
+    width: 25rem;
   }
 
   .media__info {
     margin-left: var(--spacing-vertical-large);
-    flex: 1;
   }
 
   .media__subtext {
@@ -73,12 +71,6 @@
     width: 11em;
   }
 
-  .media__info {
-    width: calc(100% - 10em);
-    min-width: auto;
-    position: relative;
-  }
-
   .media__title {
     margin-bottom: var(--spacing-vertical-small);
   }
@@ -153,6 +145,7 @@
   font-size: 1.1rem;
   padding-bottom: 5px;
   opacity: 0.6;
+  user-select: all;
 }
 
 .media__insufficient-credits {

src/ui/scss/component/_menu.scss

@@ -1,10 +0,0 @@
-.menu-container {
-  display: inline-block;
-
-  .menu {
-    padding-top: var(--spacing-vertical-medium);
-    position: absolute;
-    white-space: nowrap;
-    z-index: 1;
-  }
-}

src/ui/scss/component/_navigation.scss

@@ -4,12 +4,13 @@
   height: calc(100vh - var(--header-height));
   display: flex;
   flex-direction: column;
-  overflow-y: overlay;
+  overflow: visible;
   background-color: $lbry-white;
   border-right: 1px solid rgba($lbry-gray-1, 0.9);
   padding-top: var(--spacing-vertical-large);
   padding-right: var(--spacing-vertical-small);
   font-size: 1.2rem;
+  z-index: 2;
 
   html[data-mode='dark'] & {
     background-color: $lbry-black;
@@ -41,7 +42,6 @@
     );
     content: '';
     position: absolute;
-    z-index: 0;
 
     html[data-mode='dark'] & {
       background-image: linear-gradient(

src/ui/scss/component/_scrollbar.scss

@@ -20,4 +20,8 @@
 
 ::-webkit-scrollbar-track {
   background-color: transparent;
+
+  html[data-mode='dark'] & {
+    background-color: $lbry-black;
+  }
 }

src/ui/scss/component/_search.scss

@@ -1,7 +1,6 @@
 .search__header {
   background-color: $lbry-black;
   color: $lbry-white;
-  min-height: 300px;
   padding: var(--spacing-vertical-large);
 
   .placeholder {
@@ -14,6 +13,7 @@
 
   .media__subtitle {
     color: rgba($lbry-white, 0.9);
+    font-size: 0.7em;
   }
 
   html[data-mode='dark'] & {

src/ui/scss/component/_tooltip.scss

@@ -3,8 +3,6 @@
   position: relative;
 
   .tooltip__body {
-    z-index: 2;
-
     visibility: hidden;
   }