Merge branch 'master' into patch-nonstream-1

CHANGELOG.md

@@ -17,6 +17,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Channel selector alignment on creator analytics page _community pr!_ ([#4157](https://github.com/lbryio/lbry-desktop/pull/4157))
 - Error opening certain files with special characters in name #2777 _community pr!_ ([#4161](https://github.com/lbryio/lbry-desktop/pull/4161))
 - Comic-book file page shows download button first, and then viewer after download _community pr!_ ([#4161](https://github.com/lbryio/lbry-desktop/pull/4161))
+- Fix inconsistent relative-date string for claims, comments, etc. ([#4172](https://github.com/lbryio/lbry-desktop/pull/4172))
 
 ## [0.45.1] - [2020-05-06]
 
@@ -30,7 +31,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Changed
 
-- Updated lbry-sdk to [0.72.9](https://github.com/lbryio/lbry-sdk/releases/tag/v0.72.0)
+- Updated lbry-sdk to [0.72.0](https://github.com/lbryio/lbry-sdk/releases/tag/v0.72.0)
 - Show 'elapsed/total' instead of countdown timer on video player _community pr!_ ([#4049](https://github.com/lbryio/lbry-desktop/pull/4049))
 - Modified app strings about wallet backup, to emphasize that the wallet also controls claims _community pr!_ ([#4056](https://github.com/lbryio/lbry-desktop/pull/4056))
 - Add confirmation when sending tip respecting "Purchase and Tip Confirmation" (formerly "Purchase Confirmation") setting, now visible in lbry.tv _community pr!_ ([#4051](https://github.com/lbryio/lbry-desktop/pull/4051))

CONTRIBUTING.md

@@ -68,7 +68,7 @@ Although all contributions should have good UX, the [UX label, when applied in c
 
 ## Code Overview
 
-The entry point for this application is [`src/platforms/electron/index.js`](src/platforms/electron/index.js).
+The entry point for this application is [`electron/index.js`](https://github.com/lbryio/lbry-desktop/blob/master/electron/index.js).
 
 This application is primarily written in JavaScript and is built on [Electron](https://electronjs.org)
 while utilizing [React](https://reactjs.org) and [Redux](https://redux.js.org) for UI and

package.json

@@ -52,6 +52,7 @@
     "electron-updater": "^4.2.4",
     "express": "^4.17.1",
     "if-env": "^1.0.4",
+    "remark-breaks": "^1.0.5",
     "videojs-logo": "^2.0.0"
   },
   "devDependencies": {
@@ -69,7 +70,7 @@
     "@babel/register": "^7.0.0",
     "@exponent/electron-cookies": "^2.0.0",
     "@hot-loader/react-dom": "^16.8",
-    "@lbry/components": "^4.1.4",
+    "@lbry/components": "^4.1.5",
     "@reach/menu-button": "0.7.4",
     "@reach/rect": "^0.2.1",
     "@reach/tabs": "^0.1.5",
@@ -131,7 +132,7 @@
     "imagesloaded": "^4.1.4",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#3be6fa52ac1cb6224cf9de45623183e62c2b24ab",
+    "lbry-redux": "lbryio/lbry-redux#cd9c15567f2934ddc82de364d88b378ff04d5571",
     "lbryinc": "lbryio/lbryinc#cc62a4eec10845cc0b31da7d0f27287cfa7c4866",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",

static/app-strings.json

@@ -1203,5 +1203,17 @@
   "Go Home": "Go Home",
   "Sorry, looks like we can't load the archive.": "Sorry, looks like we can't load the archive."
   "Uploading (%progress%%) ": "Uploading (%progress%%) ",
-  "Confirming": "Confirming"
-}
+  "Confirming": "Confirming",
+  "%duration% years ago": "%duration% years ago",
+  "%duration% year ago": "%duration% year ago",
+  "%duration% months ago": "%duration% months ago",
+  "%duration% month ago": "%duration% month ago",
+  "%duration% days ago": "%duration% days ago",
+  "%duration% day ago": "%duration% day ago",
+  "%duration% hours ago": "%duration% hours ago",
+  "%duration% hour ago": "%duration% hour ago",
+  "%duration% minutes ago": "%duration% minutes ago",
+  "%duration% minute ago": "%duration% minute ago",
+  "%duration% seconds ago": "%duration% seconds ago",
+  "%duration% second ago": "%duration% second ago"
+}

ui/component/claimList/view.jsx

@@ -26,7 +26,6 @@ type Props = {
   // If using the default header, this is a unique ID needed to persist the state of the filter setting
   persistedStorageKey?: string,
   showHiddenByUser: boolean,
-  headerLabel?: string | Node,
   showUnresolvedClaims?: boolean,
   renderProperties: ?(Claim) => Node,
   includeSupportAction?: boolean,
@@ -51,7 +50,6 @@ export default function ClaimList(props: Props) {
     page,
     id,
     showHiddenByUser,
-    headerLabel,
     showUnresolvedClaims,
     renderProperties,
     includeSupportAction,
@@ -105,12 +103,10 @@ export default function ClaimList(props: Props) {
     <section
       className={classnames('claim-list', {
         'claim-list--small': type === 'small',
-        'claim-list--card-body': isCardBody,
       })}
     >
       {header !== false && (
         <React.Fragment>
-          {headerLabel && <label className="claim-list__header-label">{headerLabel}</label>}
           {header && (
             <div className={classnames('claim-list__header', { 'section__title--small': type === 'small' })}>
               {header}
@@ -139,6 +135,7 @@ export default function ClaimList(props: Props) {
         <ul
           className={classnames('ul--no-style', {
             card: !isCardBody,
+            'claim-list--card-body': isCardBody,
           })}
         >
           {sortedUris.map((uri, index) => (

ui/component/claimListDiscover/view.jsx

@@ -13,6 +13,7 @@ import ClaimPreview from 'component/claimPreview';
 import { toCapitalCase } from 'util/string';
 import I18nMessage from 'component/i18nMessage';
 import * as ICONS from 'constants/icons';
+import Card from 'component/common/card';
 
 type Props = {
   uris: Array<string>,
@@ -595,30 +596,32 @@ function ClaimListDiscover(props: Props) {
 
   return (
     <React.Fragment>
-      <ClaimList
-        id={claimSearchCacheQuery}
-        loading={loading}
-        uris={claimSearchResult}
-        header={header || defaultHeader}
-        headerLabel={headerLabel}
-        headerAltControls={meta}
-        onScrollBottom={handleScrollBottom}
-        page={page}
-        pageSize={CS.PAGE_SIZE}
-        timedOutMessage={timedOutMessage}
-        renderProperties={renderProperties}
-        includeSupportAction={includeSupportAction}
-        hideBlock={hideBlock}
-        injectedItem={injectedItem}
+      {headerLabel && <label className="claim-list__header-label">{headerLabel}</label>}
+      <Card
+        title={header || defaultHeader}
+        titleActions={meta && <div className="card__actions--inline">{meta}</div>}
+        isBodyList
+        body={
+          <>
+            <ClaimList
+              isCardBody
+              id={claimSearchCacheQuery}
+              loading={loading}
+              uris={claimSearchResult}
+              onScrollBottom={handleScrollBottom}
+              page={page}
+              pageSize={CS.PAGE_SIZE}
+              timedOutMessage={timedOutMessage}
+              renderProperties={renderProperties}
+              includeSupportAction={includeSupportAction}
+              hideBlock={hideBlock}
+              injectedItem={injectedItem}
+            />
+            {loading &&
+              new Array(pageSize || CS.PAGE_SIZE).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}
+          </>
+        }
       />
-
-      {loading && (
-        <div className="card">
-          {new Array(pageSize || CS.PAGE_SIZE).fill(1).map((x, i) => (
-            <ClaimPreview key={i} placeholder="loading" />
-          ))}
-        </div>
-      )}
     </React.Fragment>
   );
 }

ui/component/claimPreview/index.js

@@ -12,6 +12,7 @@ import {
   selectChannelIsBlocked,
   doFileGet,
   makeSelectReflectingClaimForUri,
+  makeSelectClaimWasPurchased,
 } from 'lbry-redux';
 import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
 import { selectShowMatureContent } from 'redux/selectors/settings';
@@ -36,6 +37,7 @@ const select = (state, props) => ({
   channelIsBlocked: props.uri && selectChannelIsBlocked(props.uri)(state),
   isSubscribed: props.uri && makeSelectIsSubscribed(props.uri, true)(state),
   streamingUrl: props.uri && makeSelectStreamingUrlForUriWebProxy(props.uri)(state),
+  wasPurchased: props.uri && makeSelectClaimWasPurchased(props.uri)(state),
 });
 
 const perform = dispatch => ({

ui/component/claimPreview/view.jsx

@@ -248,7 +248,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
           </UriIndicator>
         ) : (
           <>
-            {!pending ? (
+            {showPublishLink ? null : !pending ? (
               <NavLink {...navLinkProps}>
                 <FileThumbnail thumbnail={thumbnailUrl}>
                   {/* @if TARGET='app' */}

ui/component/claimTags/view.jsx

@@ -52,7 +52,7 @@ export default function ClaimTags(props: Props) {
   }
 
   return (
-    <div className={classnames('file-properties', { 'file-properties--large': type === 'large' })}>
+    <div className={classnames('file-properties--small', { 'file-properties--large': type === 'large' })}>
       {tagsToDisplay.map(tag => (
         <Tag key={tag} title={tag} name={tag} />
       ))}

ui/component/comment/view.jsx

@@ -1,7 +1,7 @@
 // @flow
 import React, { useEffect, useState } from 'react';
 import { isEmpty } from 'util/object';
-import relativeDate from 'tiny-relative-date';
+import DateTime from 'component/dateTime';
 import Button from 'component/button';
 import Expandable from 'component/expandable';
 import MarkdownPreview from 'component/common/markdown-preview';
@@ -147,7 +147,7 @@ function Comment(props: Props) {
               />
             )}
             <time className="comment__time" dateTime={timePosted}>
-              {relativeDate(timePosted)}
+              {DateTime.getTimeAgoStr(timePosted)}
             </time>
           </div>
           <div className="comment__menu">

ui/component/common/credit-amount.jsx

@@ -13,6 +13,7 @@ type Props = {
   showLBC?: boolean,
   fee?: boolean,
   badge?: boolean,
+  className?: string,
 };
 
 class CreditAmount extends React.PureComponent<Props> {
@@ -26,7 +27,18 @@ class CreditAmount extends React.PureComponent<Props> {
   };
 
   render() {
-    const { amount, precision, showFullPrice, showFree, showPlus, isEstimate, fee, showLBC, badge } = this.props;
+    const {
+      amount,
+      precision,
+      showFullPrice,
+      showFree,
+      showPlus,
+      isEstimate,
+      fee,
+      showLBC,
+      badge,
+      className,
+    } = this.props;
 
     const minimumRenderableAmount = 10 ** (-1 * precision);
     const fullPrice = formatFullPrice(amount, 2);
@@ -64,13 +76,13 @@ class CreditAmount extends React.PureComponent<Props> {
     return (
       <span
         title={fullPrice}
-        className={classnames({
+        className={classnames(className, {
           badge,
           'badge--cost': badge && amount > 0,
           'badge--free': badge && isFree,
         })}
       >
-        {amountText}
+        <span>{amountText}</span>
 
         {isEstimate ? (
           <span className="credit-amount__estimate" title={__('This is an estimate and does not include data fees')}>

ui/component/common/icon-custom.jsx

@@ -618,4 +618,9 @@ export const icons = {
       viewBox: '0 0 60 60',
     }
   ),
+  [ICONS.PURCHASED]: buildIcon(
+    <g>
+      <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
+    </g>
+  ),
 };

ui/component/common/markdown-preview.jsx

@@ -4,6 +4,7 @@ import remark from 'remark';
 import remarkAttr from 'remark-attr';
 import remarkStrip from 'strip-markdown';
 import remarkEmoji from 'remark-emoji';
+import remarkBreaks from 'remark-breaks';
 import reactRenderer from 'remark-react';
 import ExternalLink from 'component/externalLink';
 import defaultSchema from 'hast-util-sanitize/lib/github.json';
@@ -147,6 +148,8 @@ const MarkdownPreview = (props: MarkdownProps) => {
           .use(inlineLinks)
           // Emojis
           .use(remarkEmoji)
+          // Render new lines without needing spaces.
+          .use(remarkBreaks)
           .use(reactRenderer, remarkOptions)
           .processSync(strippedContent).contents
       }

ui/component/dateTime/view.jsx

@@ -14,6 +14,32 @@ class DateTime extends React.PureComponent<Props> {
   static SHOW_TIME = 'time';
   static SHOW_BOTH = 'both';
 
+  static getTimeAgoStr(date: any) {
+    const suffixList = ['years', 'months', 'days', 'hours', 'minutes', 'seconds', ''];
+    var duration = 0;
+
+    for (var i = 0; i < suffixList.length; ++i) {
+      // moment() is very liberal with it's rounding.
+      // Always round down dates for better youtube parity.
+      duration = Math.floor(moment().diff(date, suffixList[i]));
+      if (duration > 0) {
+        break;
+      }
+    }
+
+    if (i === suffixList.length) {
+      // This should never happen since we are handling up to 'seconds' now,
+      // but display the English version just in case it does.
+      return moment(date).from(moment());
+    }
+
+    // Strip off the 's' for the singular suffix, construct the string ID,
+    // then load the localized version.
+    const suffix = duration === 1 ? suffixList[i].substr(0, suffixList[i].length - 1) : suffixList[i];
+    const strId = '%duration% ' + suffix + ' ago';
+    return __(strId, { duration });
+  }
+
   render() {
     const { date, timeAgo } = this.props;
     const show = this.props.show || DateTime.SHOW_BOTH;
@@ -23,32 +49,7 @@ class DateTime extends React.PureComponent<Props> {
         return null;
       }
 
-      // Moment is very liberal with it's rounding
-      // Wait to show "two years ago" until it's actually been two years (or higher)
-      const numberOfYearsSincePublish = Math.floor(moment().diff(date, 'years'));
-
-      if (numberOfYearsSincePublish === 1) {
-        return <span>{__('%numberOfYearsSincePublish% year ago', { numberOfYearsSincePublish })}</span>;
-      } else if (numberOfYearsSincePublish > 1) {
-        return <span>{__('%numberOfYearsSincePublish% years ago', { numberOfYearsSincePublish })}</span>;
-      }
-
-      const numberOfMonthsSincePublish = Math.floor(moment().diff(date, 'months'));
-      if (numberOfMonthsSincePublish === 1) {
-        return <span>{__('%numberOfMonthsSincePublish% month ago', { numberOfMonthsSincePublish })}</span>;
-      } else if (numberOfMonthsSincePublish > 1) {
-        return <span>{__('%numberOfMonthsSincePublish% months ago', { numberOfMonthsSincePublish })}</span>;
-      }
-
-      const numberOfDaysSincePublish = Math.floor(moment().diff(date, 'days'));
-      if (numberOfDaysSincePublish === 1) {
-        return <span>{__('%numberOfDaysSincePublish% day ago', { numberOfDaysSincePublish })}</span>;
-      } else if (numberOfDaysSincePublish > 1) {
-        return <span>{__('%numberOfDaysSincePublish% days ago', { numberOfDaysSincePublish })}</span>;
-      }
-
-      // "just now", "a few minutes ago"
-      return <span>{moment(date).from(moment())}</span>;
+      return <span>{DateTime.getTimeAgoStr(date)}</span>;
     }
 
     return (

ui/component/filePrice/view.jsx

@@ -14,6 +14,7 @@ type Props = {
   inheritStyle?: boolean,
   showLBC?: boolean,
   hideFree?: boolean, // hide the file price if it's free
+  className?: string,
 };
 
 class FilePrice extends React.PureComponent<Props> {
@@ -38,7 +39,7 @@ class FilePrice extends React.PureComponent<Props> {
   };
 
   render() {
-    const { costInfo, showFullPrice, badge, inheritStyle, showLBC, hideFree } = this.props;
+    const { costInfo, showFullPrice, badge, inheritStyle, showLBC, hideFree, className } = this.props;
     if (costInfo && (!costInfo.cost || (!costInfo.cost && hideFree))) {
       return null;
     }
@@ -52,6 +53,7 @@ class FilePrice extends React.PureComponent<Props> {
         amount={costInfo.cost}
         isEstimate={!costInfo.includesData}
         showFullPrice={showFullPrice}
+        className={className}
       />
     ) : null;
   }