Merge pull request #2022 from lbryio/placeholder

Add content placeholders and add time info to FileCard/FileTile

CHANGELOG.md

@@ -9,6 +9,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
  * Allow typing of encryption password without clicking entry box ([#1977](https://github.com/lbryio/lbry-desktop/pull/1977))
  * Focus on search bar with {cmd,ctrl} + "l" ([#2003](https://github.com/lbryio/lbry-desktop/pull/2003))
  * Add support for clickable channel names on explore page headings ([#2023](https://github.com/lbryio/lbry-desktop/pull/2023))
+ * Content loading placeholder styles on FileCard/FileTile ([#2022](https://github.com/lbryio/lbry-desktop/pull/2022))
+ 
 ### Changed
  * Make tooltip smarter ([#1979](https://github.com/lbryio/lbry-desktop/pull/1979))
  * Change channel pages to have 48 items instead of 10 ([#2002](https://github.com/lbryio/lbry-desktop/pull/2002))

src/renderer/component/common/tooltip.jsx

@@ -11,7 +11,11 @@ type Props = {
   onComponent?: boolean, // extra padding to account for button/form field size
 };
 
-class ToolTip extends React.PureComponent<Props> {
+type State = {
+  direction: string,
+};
+
+class ToolTip extends React.PureComponent<Props, State> {
   static defaultProps = {
     direction: 'bottom',
   };
@@ -34,6 +38,9 @@ class ToolTip extends React.PureComponent<Props> {
 
     // Get parent-container
     const viewport = document.getElementById('content');
+    if (!viewport) {
+      throw Error('Document must contain parent div with #content');
+    }
 
     const visibility = {
       top: rect.top >= 0,

src/renderer/component/dateTime/view.jsx

@@ -1,6 +1,15 @@
+// @flow
 import React from 'react';
+import moment from 'moment';
 
-class DateTime extends React.PureComponent {
+type Props = {
+  date?: number,
+  timeAgo?: boolean,
+  formatOptions: {},
+  show?: string,
+};
+
+class DateTime extends React.PureComponent<Props> {
   static SHOW_DATE = 'date';
   static SHOW_TIME = 'time';
   static SHOW_BOTH = 'both';
@@ -29,18 +38,24 @@ class DateTime extends React.PureComponent {
   }
 
   render() {
-    const { date, formatOptions } = this.props;
+    const { date, formatOptions, timeAgo } = this.props;
     const show = this.props.show || DateTime.SHOW_BOTH;
     const locale = app.i18n.getLocale();
 
+    // If !date, it's currently being fetched
+
+    if (timeAgo) {
+      return date ? <span>{moment(date).from(moment())}</span> : <span />;
+    }
+
     return (
       <span>
         {date &&
-          (show == DateTime.SHOW_BOTH || show === DateTime.SHOW_DATE) &&
+          (show === DateTime.SHOW_BOTH || show === DateTime.SHOW_DATE) &&
           date.toLocaleDateString([locale, 'en-US'], formatOptions)}
-        {show == DateTime.SHOW_BOTH && ' '}
+        {show === DateTime.SHOW_BOTH && ' '}
         {date &&
-          (show == DateTime.SHOW_BOTH || show === DateTime.SHOW_TIME) &&
+          (show === DateTime.SHOW_BOTH || show === DateTime.SHOW_TIME) &&
           date.toLocaleTimeString()}
         {!date && '...'}
       </span>

src/renderer/component/fileCard/index.js

@@ -14,6 +14,8 @@ import {
 } from 'redux/selectors/content';
 import { selectShowNsfw } from 'redux/selectors/settings';
 import { selectPendingPublish } from 'redux/selectors/publish';
+import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
+import { doClearContentHistoryUri } from 'redux/actions/content';
 import FileCard from './view';
 
 const select = (state, props) => {
@@ -36,6 +38,7 @@ const select = (state, props) => {
     ...fileCardInfo,
     pending: !!pendingPublish,
     position: makeSelectContentPositionForUri(props.uri)(state),
+    isSubscribed: makeSelectIsSubscribed(props.uri)(state),
   };
 };
 

src/renderer/component/fileCard/view.jsx

@@ -10,6 +10,7 @@ import * as icons from 'constants/icons';
 import classnames from 'classnames';
 import FilePrice from 'component/filePrice';
 import { openCopyLinkMenu } from 'util/contextMenu';
+import DateTime from 'component/dateTime';
 
 type Props = {
   uri: string,
@@ -24,15 +25,11 @@ type Props = {
   /* eslint-disable react/no-unused-prop-types */
   resolveUri: string => void,
   isResolvingUri: boolean,
-  showPrice: boolean,
   /* eslint-enable react/no-unused-prop-types */
+  isSubscribed: boolean,
 };
 
 class FileCard extends React.PureComponent<Props> {
-  static defaultProps = {
-    showPrice: true,
-  };
-
   componentWillMount() {
     this.resolve(this.props);
   }
@@ -59,9 +56,20 @@ class FileCard extends React.PureComponent<Props> {
       obscureNsfw,
       claimIsMine,
       pending,
-      showPrice,
+      isSubscribed,
     } = this.props;
 
+    if (!claim && !pending) {
+      return (
+        <div className="card card--small">
+          <div className="card--placeholder card__media" />
+          <div className="card--placeholder placeholder__title" />
+          <div className="card--placeholder placeholder__channel" />
+          <div className="card--placeholder placeholder__date" />
+        </div>
+      );
+    }
+
     const shouldHide = !claimIsMine && !pending && obscureNsfw && metadata && metadata.nsfw;
     if (shouldHide) {
       return null;
@@ -71,6 +79,7 @@ class FileCard extends React.PureComponent<Props> {
     const title = metadata && metadata.title ? metadata.title : uri;
     const thumbnail = metadata && metadata.thumbnail ? metadata.thumbnail : null;
     const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
+    const height = claim && claim.height;
     const handleContextMenu = event => {
       event.preventDefault();
       event.stopPropagation();
@@ -97,10 +106,15 @@ class FileCard extends React.PureComponent<Props> {
         <div className="card__subtitle">
           {pending ? <div>Pending...</div> : <UriIndicator uri={uri} link />}
         </div>
-        <div className="card__file-properties">
+        <div className="card__subtitle card--space-between">
-          {showPrice && <FilePrice hideFree uri={uri} />}
+          <DateTime timeAgo block={height} />
-          {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
+
-          {fileInfo && <Icon icon={icons.LOCAL} />}
+          <div className="card__file-properties">
+            <FilePrice hideFree uri={uri} />
+            {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
+            {isSubscribed && <Icon icon={icons.HEART} />}
+            {fileInfo && <Icon icon={icons.LOCAL} />}
+          </div>
         </div>
       </section>
     );

src/renderer/component/fileTile/index.js

@@ -11,6 +11,7 @@ import { selectShowNsfw } from 'redux/selectors/settings';
 import { doNavigate } from 'redux/actions/navigation';
 import { doClearPublish, doUpdatePublishForm } from 'redux/actions/publish';
 import { selectRewardContentClaimIds } from 'redux/selectors/content';
+import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
 import FileTile from './view';
 
 const select = (state, props) => ({
@@ -21,6 +22,7 @@ const select = (state, props) => ({
   rewardedContentClaimIds: selectRewardContentClaimIds(state, props),
   obscureNsfw: !selectShowNsfw(state),
   claimIsMine: makeSelectClaimIsMine(props.uri)(state),
+  isSubscribed: makeSelectIsSubscribed(props.uri)(state),
 });
 
 const perform = dispatch => ({

src/renderer/component/fileTile/view.jsx

@@ -10,10 +10,9 @@ import Button from 'component/button';
 import classnames from 'classnames';
 import FilePrice from 'component/filePrice';
 import UriIndicator from 'component/uriIndicator';
+import DateTime from 'component/dateTime';
 
 type Props = {
-  showUri: boolean,
-  showLocal: boolean,
   obscureNsfw: boolean,
   claimIsMine: boolean,
   isDownloaded: boolean,
@@ -30,12 +29,11 @@ type Props = {
   displayHiddenMessage?: boolean,
   displayDescription?: boolean,
   size: string,
+  isSubscribed: boolean,
 };
 
 class FileTile extends React.PureComponent<Props> {
   static defaultProps = {
-    showUri: false,
-    showLocal: false,
     displayDescription: true,
     size: 'regular',
   };
@@ -50,18 +48,28 @@ class FileTile extends React.PureComponent<Props> {
     if (!isResolvingUri && claim === undefined && uri) resolveUri(uri);
   }
 
+  renderFileProperties() {
+    const { isSubscribed, isDownloaded, claim, uri, rewardedContentClaimIds, size } = this.props;
+    const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
+
+    return (
+      <div className={classnames('card__file-properties', { card__subtitle: size === 'large' })}>
+        <FilePrice hideFree uri={uri} />
+        {isSubscribed && <Icon icon={icons.HEART} />}
+        {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
+        {isDownloaded && <Icon icon={icons.LOCAL} />}
+      </div>
+    );
+  }
+
   render() {
     const {
       claim,
       metadata,
       isResolvingUri,
       navigate,
-      rewardedContentClaimIds,
-      showUri,
       obscureNsfw,
       claimIsMine,
-      showLocal,
-      isDownloaded,
       clearPublish,
       updatePublishForm,
       hideNoResult,
@@ -70,6 +78,24 @@ class FileTile extends React.PureComponent<Props> {
       size,
     } = this.props;
 
+    if (!claim && isResolvingUri) {
+      return (
+        <div
+          className={classnames('file-tile', {
+            'file-tile--small': size === 'small',
+            'file-tile--large': size === 'large',
+          })}
+        >
+          <div className="card--placeholder card__media" />
+          <div className="file-tile__info">
+            <div className="card--placeholder placeholder__title--tile" />
+            <div className="card--placeholder placeholder__channel" />
+            <div className="card--placeholder placeholder__date" />
+          </div>
+        </div>
+      );
+    }
+
     const shouldHide = !claimIsMine && obscureNsfw && metadata && metadata.nsfw;
     if (shouldHide) {
       return displayHiddenMessage ? (
@@ -87,12 +113,12 @@ class FileTile extends React.PureComponent<Props> {
     const title =
       isClaimed && metadata && metadata.title ? metadata.title : parseURI(uri).contentName;
     const thumbnail = metadata && metadata.thumbnail ? metadata.thumbnail : null;
-    const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
     const onClick = () => navigate('/show', { uri });
 
+    let height;
     let name;
     if (claim) {
-      ({ name } = claim);
+      ({ name, height } = claim);
     }
 
     return !name && hideNoResult ? null : (
@@ -108,43 +134,42 @@ class FileTile extends React.PureComponent<Props> {
       >
         <CardMedia title={title || name} thumbnail={thumbnail} />
         <div className="file-tile__info">
-          {isResolvingUri && <div className="file-tile__title">{__('Loading...')}</div>}
+          <div className="file-tile__title">
-          {!isResolvingUri && (
+            {(title || name) && (
+              <TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} />
+            )}
+          </div>
+          <div className="card__subtitle">
+            <UriIndicator uri={uri} link />
+          </div>
+          <div className="card__subtitle card--space-between">
+            <DateTime timeAgo block={height} />
+            {size !== 'large' && this.renderFileProperties()}
+          </div>
+          {displayDescription && (
+            <div className="card__subtext">
+              <TruncatedText text={description} lines={size === 'large' ? 4 : 3} />
+            </div>
+          )}
+          {size === 'large' && this.renderFileProperties()}
+          {!name && (
             <React.Fragment>
-              <div className="file-tile__title">
+              {__('This location is unused.')}{' '}
-                <TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} />
+              <Button
-              </div>
+                button="link"
-              <div className="card__subtitle">
+                label={__('Put something here!')}
-                {showUri ? uri : <UriIndicator uri={uri} link />}
+                onClick={e => {
-              </div>
+                  // avoid navigating to /show from clicking on the section
-              <div className="card__file-properties">
+                  e.stopPropagation();
-                <FilePrice hideFree uri={uri} />
+
-                {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
+                  // strip prefix from the Uri and use that as navigation parameter
-                {showLocal && isDownloaded && <Icon icon={icons.LOCAL} />}
+                  const { claimName } = parseURI(uri);
-              </div>
+
-              {displayDescription && (
+                  clearPublish(); // to remove any existing publish data
-                <div className="card__subtext">
+                  updatePublishForm({ name: claimName }); // to populate the name
-                  <TruncatedText text={description} lines={size === 'large' ? 4 : 3} />
+                  navigate('/publish');
-                </div>
+                }}
-              )}
+              />
-              {!name && (
-                <React.Fragment>
-                  {__('This location is unused.')}{' '}
-                  <Button
-                    button="link"
-                    label={__('Put something here!')}
-                    onClick={e => {
-                      // avoid navigating to /show from clicking on the section
-                      e.stopPropagation();
-                      // strip prefix from the Uri and use that as navigation parameter
-                      const nameFromUri = uri.replace(/lbry:\/\//g, '').replace(/-/g, ' ');
-                      clearPublish(); // to remove any existing publish data
-                      updatePublishForm({ name: nameFromUri }); // to populate the name
-                      navigate('/publish');
-                    }}
-                  />
-                </React.Fragment>
-              )}
             </React.Fragment>
           )}
         </div>

src/renderer/component/recommendedContent/view.jsx

@@ -2,7 +2,6 @@
 import React from 'react';
 import FileTile from 'component/fileTile';
 import type { Claim } from 'types/claim';
-import Spinner from 'component/spinner';
 
 type Props = {
   uri: string,
@@ -66,7 +65,6 @@ export default class RecommendedContent extends React.PureComponent<Props> {
         {recommendedContent &&
           !recommendedContent.length &&
           !isSearching && <div className="card__subtitle">No related content found</div>}
-        {isSearching && <Spinner type="small" />}
       </section>
     );
   }

src/renderer/component/userHistory/index.js

@@ -18,7 +18,6 @@ const select = state => {
 const perform = dispatch => ({
   navigate: (path, params) => dispatch(doNavigate(path, params)),
   clearHistoryUri: uri => dispatch(doClearContentHistoryUri(uri)),
-
 });
 
 export default connect(

src/renderer/page/file/view.jsx

@@ -43,9 +43,13 @@ type Props = {
   fetchFileInfo: string => void,
   fetchCostInfo: string => void,
   prepareEdit: ({}, string) => void,
+  setViewed: string => void,
+  autoplay: boolean,
+  setClientSetting: (string, string | boolean | number) => void,
+  /* eslint-disable react/no-unused-prop-types */
   checkSubscription: (uri: string) => void,
   subscriptions: Array<Subscription>,
-  setViewed: string => void,
+  /* eslint-enable react/no-unused-prop-types */
 };
 
 class FilePage extends React.Component<Props> {
@@ -183,7 +187,7 @@ class FilePage extends React.Component<Props> {
             ))}
 
           <div className="card__content">
-            <div className="card__title__space-between">
+            <div className="card--space-between">
               <h1>{title}</h1>
               <div className="card__title-identity-icons">
                 {isRewardContent && (
@@ -220,14 +224,12 @@ class FilePage extends React.Component<Props> {
                     onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
                   />
                 )}
-                {speechShareable && (
+                <Button
-                  <Button
+                  button="alt"
-                    button="alt"
+                  icon={icons.GLOBE}
-                    icon={icons.GLOBE}
+                  label={__('Share')}
-                    label={__('Share')}
+                  onClick={() => openModal({ id: MODALS.SOCIAL_SHARE }, { uri, speechShareable })}
-                    onClick={() => openModal({ id: MODALS.SOCIAL_SHARE }, { uri })}
+                />
-                  />
-                )}
               </div>
 
               <div className="card__actions">

src/renderer/redux/selectors/subscriptions.js

@@ -3,6 +3,7 @@ import {
   selectAllClaimsByChannel,
   selectClaimsById,
   selectAllFetchingChannelClaims,
+  makeSelectClaimForUri,
 } from 'lbry-redux';
 
 // get the entire subscriptions state
@@ -71,3 +72,13 @@ export const selectSubscriptionsBeingFetched = createSelector(
     return fetchingSubscriptionMap;
   }
 );
+
+export const makeSelectIsSubscribed = uri =>
+  createSelector(selectSubscriptions, makeSelectClaimForUri(uri), (subscriptions, claim) => {
+    if (!claim || !claim.channel_name) {
+      return false;
+    }
+
+    const channelUri = `${claim.channel_name}#${claim.value.publisherSignature.certificateId}`;
+    return subscriptions.some(sub => sub.uri === channelUri);
+  });

src/renderer/scss/all.scss

@@ -32,3 +32,4 @@
 @import 'component/_item-list.scss';
 @import 'component/_time.scss';
 @import 'component/_icon.scss';
+@import 'component/_placeholder.scss';

src/renderer/scss/component/_card.scss

@@ -88,20 +88,16 @@
   // FileCard is slightly different where the title is only slightly bigger than the subtitle
   // Slightly bigger than 2 lines for consistent channel placement
   font-size: 1.1em;
-  height: 4em;
+  height: 3.3em;
 
   @media only screen and (min-width: $large-breakpoint) {
     font-size: 1.3em;
   }
 }
 
-.card__title__space-between {
+.card--space-between {
   display: flex;
   justify-content: space-between;
-
-  .icon {
-    margin: 0 $spacing-vertical * 1/3;
-  }
 }
 
 .card__title-identity-icons {
@@ -114,6 +110,7 @@
   color: var(--card-text-color);
   font-size: 1em;
   line-height: 1em;
+  padding-top: $spacing-vertical * 1/3;
 
   @media (min-width: $large-breakpoint) {
     font-size: 1.2em;
@@ -124,12 +121,13 @@
   font-size: 1.1em;
 
   &:not(:first-of-type) {
-    margin-top: $spacing-vertical * 3/2;
+    padding-top: $spacing-vertical * 3/2;
   }
 }
 
 .card__subtext {
   font-size: 0.85em;
+  padding-top: $spacing-vertical * 1/3;
 }
 
 .card__meta {
@@ -142,8 +140,11 @@
 .card__file-properties {
   display: flex;
   align-items: center;
-  padding-top: $spacing-vertical * 1/3;
   color: var(--card-text-color);
+
+  .icon + .icon {
+    margin-left: $spacing-vertical * 1/3;
+  }
 }
 
 // .card-media__internal__links should always be inside a card

src/renderer/scss/component/_file-list.scss

@@ -45,6 +45,7 @@
 }
 
 .file-tile__title {
+  font-size: 1.1em;
 }
 
 .file-tile--small {
@@ -65,6 +66,7 @@
 
 .file-tile__info {
   display: flex;
+  flex: 1;
   flex-direction: column;
   margin-left: $spacing-vertical * 2/3;
   max-width: 500px;

src/renderer/scss/component/_placeholder.scss

@@ -0,0 +1,40 @@
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.card--placeholder {
+  animation: pulse 2s infinite ease-in-out;
+  background: var(--color-placeholder);
+}
+
+// Individual items we need a placeholder for
+// FileCard
+.placeholder__title {
+  margin-top: $spacing-vertical * 1/3;
+  height: 3em;
+}
+
+.placeholder__channel {
+  margin-top: $spacing-vertical * 1/3;
+  height: 1em;
+  width: 70%;
+}
+
+.placeholder__date {
+  height: 1em;
+  margin-top: $spacing-vertical * 1/3;
+  width: 50%;
+}
+
+// FileTile
+.placeholder__title--tile {
+  height: 3em;
+}

yarn.lock

@@ -5662,9 +5662,9 @@ lbry-redux@lbryio/lbry-redux:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"
 
-lbry-redux@lbryio/lbry-redux#c079b108c3bc4ba2b4fb85fb112b52cfc040c301:
+lbry-redux@lbryio/lbry-redux#4ee6c376e5f2c3e3e96d199a56970e2621a84af1:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/c079b108c3bc4ba2b4fb85fb112b52cfc040c301"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/4ee6c376e5f2c3e3e96d199a56970e2621a84af1"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"