track reflecting files after publish

package.json

@@ -131,7 +131,7 @@
     "imagesloaded": "^4.1.4",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#1e27a854d012ef758c04b234fb80e74e264d5962",
+    "lbry-redux": "lbryio/lbry-redux#3be6fa52ac1cb6224cf9de45623183e62c2b24ab",
     "lbryinc": "lbryio/lbryinc#cc62a4eec10845cc0b31da7d0f27287cfa7c4866",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",

static/app-strings.json

@@ -1200,5 +1200,7 @@
   "this channel": "this channel",
   "Share this channel": "Share this channel",
   "File preview": "File preview",
-  "Go Home": "Go Home"
+  "Go Home": "Go Home",
+  "Uploading (%progress%%) ": "Uploading (%progress%%) ",
+  "Confirming": "Confirming"
 }

ui/component/claimPreview/index.js

@@ -11,6 +11,7 @@ import {
   selectBlockedChannels,
   selectChannelIsBlocked,
   doFileGet,
+  makeSelectReflectingClaimForUri,
 } from 'lbry-redux';
 import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
 import { selectShowMatureContent } from 'redux/selectors/settings';
@@ -21,6 +22,7 @@ import ClaimPreview from './view';
 const select = (state, props) => ({
   pending: props.uri && makeSelectClaimIsPending(props.uri)(state),
   claim: props.uri && makeSelectClaimForUri(props.uri)(state),
+  reflectingInfo: props.uri && makeSelectReflectingClaimForUri(props.uri)(state),
   obscureNsfw: !selectShowMatureContent(state),
   claimIsMine: props.uri && makeSelectClaimIsMine(props.uri)(state),
   isResolvingUri: props.uri && makeSelectIsUriResolving(props.uri)(state),

ui/component/claimPreview/view.jsx

@@ -21,6 +21,7 @@ import ClaimPreviewSubtitle from 'component/claimPreviewSubtitle';
 import ClaimRepostAuthor from 'component/claimRepostAuthor';
 import FileDownloadLink from 'component/fileDownloadLink';
 import AbandonedChannelPreview from 'component/abandonedChannelPreview';
+import PublishPending from 'component/publishPending';
 
 type Props = {
   uri: string,
@@ -29,6 +30,7 @@ type Props = {
   showUserBlocked: boolean,
   claimIsMine: boolean,
   pending?: boolean,
+  reflectingInfo?: any, // fxme
   resolveUri: string => void,
   isResolvingUri: boolean,
   history: { push: string => void },
@@ -65,6 +67,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     obscureNsfw,
     claimIsMine,
     pending,
+    reflectingInfo,
     history,
     uri,
     isResolvingUri,
@@ -97,7 +100,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
   const showPublishLink = abandoned && !showUnresolvedClaim && placeholder === 'publish';
   const hideActions = type === 'small' || type === 'tooltip';
   const canonicalUrl = claim && claim.canonical_url;
-
   let isValid = false;
   if (uri) {
     try {
@@ -245,28 +247,40 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
             <ChannelThumbnail uri={uri} obscure={channelIsBlocked} />
           </UriIndicator>
         ) : (
-          <NavLink {...navLinkProps}>
+          <>
-            <FileThumbnail thumbnail={thumbnailUrl}>
+            {!pending ? (
-              {/* @if TARGET='app' */}
+              <NavLink {...navLinkProps}>
-              {claim && (
+                <FileThumbnail thumbnail={thumbnailUrl}>
-                <div className="claim-preview__hover-actions">
+                  {/* @if TARGET='app' */}
-                  <FileDownloadLink uri={canonicalUrl} hideOpenButton hideDownloadStatus />
+                  {claim && (
-                </div>
+                    <div className="claim-preview__hover-actions">
-              )}
+                      <FileDownloadLink uri={canonicalUrl} hideOpenButton hideDownloadStatus />
-              {/* @endif */}
+                    </div>
-            </FileThumbnail>
+                  )}
-          </NavLink>
+                  {/* @endif */}
+                </FileThumbnail>
+              </NavLink>
+            ) : (
+              <FileThumbnail thumbnail={thumbnailUrl} />
+            )}
+          </>
         )}
 
         <div className="claim-preview__text">
           <div className="claim-preview-metadata">
             <div className="claim-preview-info">
-              <NavLink {...navLinkProps}>
+              {pending ? (
                 <ClaimPreviewTitle uri={uri} />
-              </NavLink>
+              ) : (
+                <NavLink {...navLinkProps}>
+                  <ClaimPreviewTitle uri={uri} />
+                </NavLink>
+              )}
+
               {!isChannel && <FileProperties uri={uri} />}
             </div>
             <ClaimPreviewSubtitle uri={uri} type={type} />
+            {(pending || !!reflectingInfo) && <PublishPending uri={uri} />}
           </div>
           {type !== 'small' && (
             <div className="claim-preview__actions">

ui/component/claimPreviewSubtitle/view.jsx

@@ -28,14 +28,9 @@ function ClaimPreviewSubtitle(props: Props) {
       {claim ? (
         <React.Fragment>
           <UriIndicator uri={uri} link />{' '}
-          {pending
+          {!pending &&
-            ? __('Pending...')
+            claim &&
-            : claim &&
+            (isChannel ? type !== 'inline' && `${claimsInChannel} ${__('publishes')}` : <DateTime timeAgo uri={uri} />)}
-              (isChannel ? (
-                type !== 'inline' && `${claimsInChannel} ${__('publishes')}`
-              ) : (
-                <DateTime timeAgo uri={uri} />
-              ))}
         </React.Fragment>
       ) : (
         <React.Fragment>

ui/component/publishPending/index.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import { makeSelectReflectingClaimForUri, doCheckReflectingFiles } from 'lbry-redux';
+import PublishPending from './view';
+
+const select = (state, props) => ({
+  reflectingInfo: props.uri && makeSelectReflectingClaimForUri(props.uri)(state),
+});
+
+const perform = dispatch => ({
+  checkReflecting: () => dispatch(doCheckReflectingFiles()),
+});
+
+export default connect(select, perform)(PublishPending);

ui/component/publishPending/view.jsx

@@ -0,0 +1,32 @@
+// @flow
+
+import React from 'react';
+import Lbry from 'lbry-redux';
+import Button from 'component/button';
+
+type Props = {
+  reflectingInfo?: ReflectingUpdate,
+  checkReflecting: () => void,
+};
+
+const PublishPending = (props: Props) => {
+  const { reflectingInfo = {}, checkReflecting } = props;
+  const { fileListItem, progress, stalled } = reflectingInfo;
+  const sdHash = fileListItem && fileListItem.sd_hash;
+  const reflecting = Object.keys(reflectingInfo).length;
+  if (stalled) {
+    return (
+      <Button
+        button="link"
+        label={__('Upload stalled. Retry?')}
+        onClick={() => Lbry.file_reflect({ sd_hash: sdHash }).then(() => checkReflecting())}
+      />
+    );
+  } else if (reflecting) {
+    return <span>{__('Uploading (%progress%%) ', { progress: progress })}</span>;
+  } else {
+    return <span>{__('Confirming')}</span>;
+  }
+};
+
+export default PublishPending;

ui/reducers.js

@@ -24,7 +24,6 @@ import {
   lbrytvReducer,
 } from 'lbryinc';
 import appReducer from 'redux/reducers/app';
-import availabilityReducer from 'redux/reducers/availability';
 import contentReducer from 'redux/reducers/content';
 import settingsReducer from 'redux/reducers/settings';
 import subscriptionsReducer from 'redux/reducers/subscriptions';
@@ -33,7 +32,6 @@ export default history =>
   combineReducers({
     router: connectRouter(history),
     app: appReducer,
-    availability: availabilityReducer,
     blacklist: blacklistReducer,
     filtered: filteredReducer,
     claims: claimsReducer,

ui/redux/actions/availability.js

@@ -1,26 +0,0 @@
-export function doFetchAvailability() {
-  return () => {
-    /*
-    this is disabled atm - Jeremy
-     */
-    // const state = getState();
-    // const alreadyFetching = !!selectFetchingAvailability(state)[uri];
-    //
-    // if (!alreadyFetching) {
-    //   dispatch({
-    //     type: ACTIONS.FETCH_AVAILABILITY_STARTED,
-    //     data: { uri },
-    //   });
-    //
-    //   lbry.get_availability({ uri }).then(availability => {
-    //     dispatch({
-    //       type: ACTIONS.FETCH_AVAILABILITY_COMPLETED,
-    //       data: {
-    //         availability,
-    //         uri,
-    //       },
-    //     });
-    //   });
-    // }
-  };
-}

ui/redux/actions/publish.js

@@ -8,6 +8,7 @@ import {
   selectMyClaims,
   doPublish,
   doCheckPendingPublishes,
+  doCheckReflectingFiles,
   ACTIONS as LBRY_REDUX_ACTIONS,
 } from 'lbry-redux';
 import { selectosNotificationsEnabled } from 'redux/selectors/settings';
@@ -44,6 +45,12 @@ export const doPublishDesktop = (filePath: string) => (dispatch: Dispatch, getSt
         claims: [pendingClaim],
       },
     });
+    // @if TARGET='app'
+    actions.push({
+      type: LBRY_REDUX_ACTIONS.ADD_FILES_REFLECTING,
+      data: pendingClaim,
+    });
+    // @endif
 
     dispatch(batchActions(...actions));
     dispatch(
@@ -53,6 +60,10 @@ export const doPublishDesktop = (filePath: string) => (dispatch: Dispatch, getSt
         filePath,
       })
     );
+    dispatch(doCheckPendingPublishesApp());
+    // @if TARGET='app'
+    dispatch(doCheckReflectingFiles());
+    // @endif
   };
 
   const publishFail = error => {

ui/redux/reducers/availability.js

@@ -1,36 +0,0 @@
-import * as ACTIONS from 'constants/action_types';
-
-const reducers = {};
-const defaultState = {};
-
-reducers[ACTIONS.FETCH_AVAILABILITY_STARTED] = (state, action) => {
-  const { uri } = action.data;
-  const newFetching = Object.assign({}, state.fetching);
-
-  newFetching[uri] = true;
-
-  return Object.assign({}, state, {
-    fetching: newFetching,
-  });
-};
-
-reducers[ACTIONS.FETCH_AVAILABILITY_COMPLETED] = (state, action) => {
-  const { uri, availability } = action.data;
-
-  const newFetching = Object.assign({}, state.fetching);
-  const newAvailabilityByUri = Object.assign({}, state.byUri);
-
-  delete newFetching[uri];
-  newAvailabilityByUri[uri] = availability;
-
-  return Object.assign({}, state, {
-    fetching: newFetching,
-    byUri: newAvailabilityByUri,
-  });
-};
-
-export default function reducer(state = defaultState, action) {
-  const handler = reducers[action.type];
-  if (handler) return handler(state, action);
-  return state;
-}

ui/redux/selectors/availability.js

@@ -1,10 +0,0 @@
-import { createSelector } from 'reselect';
-
-const selectState = state => state.availability;
-
-const selectFetchingAvailability = createSelector(
-  selectState,
-  state => state.fetching || {}
-);
-
-export { selectFetchingAvailability as default };

yarn.lock

@@ -6178,9 +6178,9 @@ lazy-val@^1.0.4:
     yargs "^13.2.2"
     zstd-codec "^0.1.1"
 
-lbry-redux@lbryio/lbry-redux#1e27a854d012ef758c04b234fb80e74e264d5962:
+lbry-redux@lbryio/lbry-redux#3be6fa52ac1cb6224cf9de45623183e62c2b24ab:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/1e27a854d012ef758c04b234fb80e74e264d5962"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/3be6fa52ac1cb6224cf9de45623183e62c2b24ab"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"