fix rebase more

fix rebase
Implement Download Progress
2021-11-13 16:23:56 -05:00 · 2021-11-13 16:15:29 -05:00 · 2021-11-13 15:58:18 -05:00
13 changed files with 637 additions and 6 deletions
--- a/static/img/dark_loading.gif
+++ b/static/img/dark_loading.gif
--- a/static/img/white_loading.gif
+++ b/static/img/white_loading.gif
--- a/ui/component/claimPreviewTile/view.jsx
+++ b/ui/component/claimPreviewTile/view.jsx
@ -187,7 +187,7 @@ function ClaimPreviewTile(props: Props) {
          <div className="placeholder claim-tile__title" />
          <div
            className={classnames('claim-tile__info placeholder', {
-              contains_view_count: shouldShowViewCount,
+              'contains_view_count': shouldShowViewCount,
            })}
          />
        </div>
@ -247,7 +247,7 @@ function ClaimPreviewTile(props: Props) {
      <div>
        <div
          className={classnames('claim-tile__info', {
-            contains_view_count: shouldShowViewCount,
+            'contains_view_count': shouldShowViewCount,
          })}
        >
          {isChannel ? (
--- a/ui/component/downloadProgress/index.js
+++ b/ui/component/downloadProgress/index.js
@ -0,0 +1,49 @@
+import { connect } from 'react-redux';
+import DownloadProgress from './view';
+import { doSetPlayingUri, doStopDownload, doContinueDownloading, doPurchaseUriWrapper } from 'redux/actions/content';
+import * as SETTINGS from 'constants/settings';
+import { selectFileInfosByOutpoint } from 'redux/selectors/file_info';
+import { selectPrimaryUri, selectPlayingUri } from 'redux/selectors/content';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
+
+const select = (state) => {
+  const byOutpoint = selectFileInfosByOutpoint(state);
+  const runningByOutpoint = [];
+  const primaryUri = selectPrimaryUri(state);
+  const playingUri = selectPlayingUri(state);
+  const uri = playingUri ? playingUri.uri : null;
+  let primaryOutpoint = null;
+  let playingOutpoint = null;
+
+  for (const key in byOutpoint) {
+    const item = byOutpoint[key];
+
+    if (item && primaryUri && primaryUri.includes(`/${item.claim_name}`)) primaryOutpoint = item.outpoint;
+    if (item && uri && uri.includes(`/${item.claim_name}`)) playingOutpoint = item.outpoint;
+
+    if (item && item.status === 'running') {
+      runningByOutpoint.push(item);
+    }
+  }
+
+  return {
+    byOutpoint: selectFileInfosByOutpoint(state),
+    primary: {
+      uri: primaryUri,
+      outpoint: primaryOutpoint,
+    },
+    playing: {
+      uri,
+      outpoint: playingOutpoint,
+    },
+    currentTheme: makeSelectClientSetting(SETTINGS.THEME)(state),
+  };
+};
+
+const perform = (dispatch) => ({
+  pause: () => dispatch(doSetPlayingUri({ uri: null })),
+  doContinueDownloading: (outpoint, force) => dispatch(doContinueDownloading(outpoint, force)),
+  stopDownload: (outpoint) => dispatch(doStopDownload(outpoint)),
+  download: (uri) => dispatch(doPurchaseUriWrapper(uri, false, true)),
+});
+export default connect(select, perform)(DownloadProgress);
--- a/ui/component/downloadProgress/view.jsx
+++ b/ui/component/downloadProgress/view.jsx
@ -0,0 +1,286 @@
+// @flow
+import React, { useState, useEffect } from 'react';
+import { shell } from 'electron';
+import Button from 'component/button';
+import * as ICONS from 'constants/icons';
+import { buildURI } from 'util/lbryURI';
+import { formatBytes } from 'util/format-bytes';
+import { areEqual, removeItem } from 'util/array';
+import loadingIcon from '../../../static/img/white_loading.gif';
+import darkLoadingIcon from '../../../static/img/dark_loading.gif';
+import usePersistedState from 'effects/use-persisted-state';
+
+type Props = {
+  byOutpoint: any,
+  primary: any,
+  playing: any,
+  currentTheme: string,
+  stopDownload: (outpoint: string) => void,
+  doContinueDownloading: (outpoint: string, force: boolean) => void,
+  download: (uri: string) => void,
+};
+
+function DownloadProgress({ byOutpoint, primary, playing, currentTheme, stopDownload, doContinueDownloading }: Props) {
+  const [isShow, setIsShow] = usePersistedState('download-progress', true);
+  const [downloading, setDownloading] = usePersistedState('download-progress-downloading', []);
+  const [cancelHash] = useState({});
+  const [initDownloadingHash] = useState({});
+  const [prevPlaying, setPrevPlaying] = useState({});
+  const [prevPrimary, setPrevPrimary] = useState({});
+
+  const handleCancel = (hash, value) => {
+    cancelHash[hash] = value;
+  };
+
+  const handleStopDownload = (outpoint) => {
+    const updated = [...downloading];
+    removeItem(updated, outpoint);
+    setDownloading(updated);
+    stopDownload(outpoint);
+  };
+
+  const runningByOutpoint = {};
+  const currentDownloading = [...downloading];
+
+  for (const key in byOutpoint) {
+    const item = byOutpoint[key];
+    if (item && item.status === 'running') runningByOutpoint[item.outpoint] = item;
+  }
+
+  Object.keys(runningByOutpoint)
+    .filter((outpoint) => downloading.indexOf(outpoint) === -1)
+    .map((outpoint) => {
+      if (primary.outpoint !== outpoint && playing.outpoint !== outpoint) {
+        currentDownloading.push(outpoint);
+      }
+    });
+
+  downloading
+    .filter((outpoint) => (byOutpoint[outpoint] && byOutpoint[outpoint].status !== 'running') || !byOutpoint[outpoint])
+    .map((outpoint) => {
+      removeItem(currentDownloading, outpoint);
+    });
+  if (!areEqual(downloading, currentDownloading)) setDownloading(currentDownloading);
+
+  if (currentDownloading.length === 0) return null;
+
+  if (playing.outpoint !== prevPlaying.outpoint) {
+    if (downloading.includes(prevPlaying.outpoint)) {
+      setTimeout(() => {
+        doContinueDownloading(prevPlaying.outpoint, true);
+      }, 1000);
+    }
+    setPrevPlaying(playing);
+  }
+
+  if (primary.outpoint !== prevPrimary.outpoint) {
+    if (downloading.includes(prevPrimary.outpoint)) {
+      setTimeout(() => {
+        doContinueDownloading(prevPrimary.outpoint, true);
+      }, 1000);
+    }
+    setPrevPrimary(primary);
+  }
+
+  currentDownloading.map((outpoint) => {
+    if (!initDownloadingHash[outpoint]) {
+      initDownloadingHash[outpoint] = true;
+      doContinueDownloading(outpoint, false);
+    }
+  });
+
+  if (!isShow) {
+    return (
+      <>
+        <Button
+          iconSize={40}
+          icon={ICONS.DOWNLOAD}
+          className="download-progress__toggle-button"
+          onClick={() => setIsShow(true)}
+        >
+          <div className="download-progress__current-downloading">
+            <span className="notification__bubble">
+              <span className="notification__count">{currentDownloading.length}</span>
+            </span>
+          </div>
+        </Button>
+      </>
+    );
+  }
+
+  return (
+    <div className="download-progress__header">
+      <Button className="download-progress__top-close-button" onClick={() => setIsShow(false)}>
+        <div />
+      </Button>
+
+      {currentDownloading.map((outpoint, index) => {
+        const item = runningByOutpoint[outpoint];
+        let releaseTime = '';
+        let isPlaying = false;
+        if (item.metadata && item.metadata.release_time) {
+          releaseTime = new Date(parseInt(item.metadata.release_time) * 1000).toISOString().split('T')[0];
+        }
+        if (outpoint === primary.outpoint || outpoint === playing.outpoint) {
+          isPlaying = true;
+        }
+        return (
+          <div key={item.outpoint}>
+            {index !== 0 && <hr className="download-progress__divider" />}
+            <DownloadProgressItem
+              fileName={item.suggested_file_name}
+              title={item.metadata.title}
+              releaseTime={releaseTime}
+              writtenBytes={item.written_bytes}
+              totalBytes={item.total_bytes}
+              addedOn={item.added_on}
+              directory={item.download_directory}
+              stopDownload={handleStopDownload}
+              outpoint={item.outpoint}
+              isCancel={cancelHash[item.outpoint]}
+              claimID={item.claim_id}
+              playing={isPlaying}
+              claimName={item.claim_name}
+              handleCancel={handleCancel}
+              currentTheme={currentTheme}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+type DownloadProgressItemProps = {
+  fileName: string,
+  writtenBytes: number,
+  totalBytes: number,
+  addedOn: number,
+  title: string,
+  releaseTime: string,
+  directory: string,
+  outpoint: string,
+  isCancel: boolean,
+  claimID: string,
+  claimName: string,
+  playing: boolean,
+  currentTheme: string,
+  stopDownload: (outpoint: string) => void,
+  handleCancel: (hash: string, value: boolean) => void,
+};
+
+function DownloadProgressItem({
+  fileName,
+  writtenBytes,
+  totalBytes,
+  addedOn,
+  title,
+  releaseTime,
+  directory,
+  outpoint,
+  isCancel,
+  claimID,
+  claimName,
+  playing,
+  currentTheme,
+  stopDownload,
+  handleCancel,
+}: DownloadProgressItemProps) {
+  const processStopDownload = () => {
+    handleCancel(outpoint, false);
+    stopDownload(outpoint);
+  };
+
+  const [percent, setPercent] = useState(0);
+  const [progressText, setProgressText] = useState('');
+
+  useEffect(() => {
+    const updatePercent = ((writtenBytes / totalBytes) * 100).toFixed(0);
+    setPercent(updatePercent);
+
+    let updateText = '';
+    const downloadSpeed = Math.ceil(writtenBytes / (Date.now() / 1000 - addedOn));
+    const remainingSecond = Math.ceil((totalBytes - writtenBytes) / downloadSpeed);
+    const remainingMinutes = Math.floor(remainingSecond / 60);
+
+    if (remainingMinutes > 0) {
+      updateText += __('%remainingMinutes% minutes %remainSecond% seconds remaining', {
+        remainingMinutes: remainingMinutes,
+        remainSecond: remainingSecond - 60 * remainingMinutes,
+      });
+    } else {
+      updateText += __('%remainSecond% seconds remaining', { remainSecond: remainingSecond - 60 * remainingMinutes });
+    }
+    updateText += ' -- ';
+
+    updateText += __('%written% of %total%', {
+      written: formatBytes(writtenBytes),
+      total: formatBytes(totalBytes),
+    });
+    updateText += ' ';
+
+    updateText += __('(%speed%/sec)', {
+      speed: formatBytes(downloadSpeed),
+    });
+
+    setProgressText(updateText);
+  }, [writtenBytes, totalBytes, addedOn]);
+
+  const openDownloadFolder = () => {
+    shell.openPath(directory);
+  };
+  return (
+    <div className="download-progress__state-container">
+      <div className="download-progress__state-bar">
+        <Button
+          label={title}
+          className="download-progress__state-filename"
+          navigate={buildURI({ claimName, claimID })}
+        />
+        {playing ? (
+          currentTheme === 'light' ? (
+            <img src={loadingIcon} className="download-progress__playing-button" />
+          ) : (
+            <img src={darkLoadingIcon} className="download-progress__playing-button" />
+          )
+        ) : (
+          <div
+            className="download-progress__close-button"
+            onClick={() => {
+              handleCancel(outpoint, true);
+            }}
+          >
+            &times;
+          </div>
+        )}
+      </div>
+      <div className="download-progress__state-bar">
+        <a className="download-progress__state-filename-link" onClick={openDownloadFolder}>
+          {fileName}
+        </a>
+        <p className="download-progress__release-time">{releaseTime}</p>
+      </div>
+      <div className="download-progress__state-bar">
+        <div className="download-progress__bar-container">
+          <div className="download-progress__bar-content" style={{ width: `${percent}%` }} />
+        </div>
+      </div>
+      <p className="download-progress__count-time">{progressText}</p>
+      {isCancel && (
+        <div className="download-progress__cancel">
+          <p>{__('Do you cancel download this file?')}</p>
+          <div className="download-progress__cancel-confirm">
+            <Button label={__('Yes')} className="download-progress__cancel-ok" onClick={processStopDownload} />
+            <Button
+              label={__('No')}
+              className="download-progress__cancel-ok"
+              onClick={() => handleCancel(outpoint, false)}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default DownloadProgress;
--- a/ui/component/page/view.jsx
+++ b/ui/component/page/view.jsx
@ -5,6 +5,7 @@ import classnames from 'classnames';
 import SideNavigation from 'component/sideNavigation';
 import SettingsSideNavigation from 'component/settingsSideNavigation';
 import Header from 'component/header';
+import DownloadProgress from 'component/downloadProgress';
 /* @if TARGET='app' */
 import StatusBar from 'component/common/status-bar';
 /* @endif */
@ -135,6 +136,7 @@ function Page(props: Props) {
        <StatusBar />
        {/* @endif */}
      </div>
+      <DownloadProgress />
    </Fragment>
  );
 }
--- a/ui/redux/actions/content.js
+++ b/ui/redux/actions/content.js
@ -14,29 +14,30 @@ import {
 } from 'redux/selectors/file_info';
 import { makeSelectUrlsForCollectionId } from 'redux/selectors/collections';
 import { doToast } from 'redux/actions/notifications';
-import { doPurchaseUri } from 'redux/actions/file';
+import { doPurchaseUri, doDeleteFile } from 'redux/actions/file';
 import Lbry from 'lbry';
 import * as SETTINGS from 'constants/settings';
 import { makeSelectCostInfoForUri, Lbryio } from 'lbryinc';
 import { makeSelectClientSetting, selectosNotificationsEnabled, selectDaemonSettings } from 'redux/selectors/settings';

 const DOWNLOAD_POLL_INTERVAL = 1000;
+var timeOutHash = {};

-export function doUpdateLoadStatus(uri: string, outpoint: string) {
+export function doUpdateLoadStatus(uri: any, outpoint: string) {
  // Updates the loading status for a uri as it's downloading
  // Calls file_list and checks the written_bytes value to see if the number has increased
  // Not needed on web as users aren't actually downloading the file
  // @if TARGET='app'
  return (dispatch: Dispatch, getState: GetState) => {
    const setNextStatusUpdate = () =>
-      setTimeout(() => {
+      (timeOutHash[outpoint] = setTimeout(() => {
        // We need to check if outpoint still exists first because user are able to delete file (outpoint) while downloading.
        // If a file is already deleted, no point to still try update load status
        const byOutpoint = selectFileInfosByOutpoint(getState());
        if (byOutpoint[outpoint]) {
          dispatch(doUpdateLoadStatus(uri, outpoint));
        }
-      }, DOWNLOAD_POLL_INTERVAL);
+      }, DOWNLOAD_POLL_INTERVAL));

    Lbry.file_list({
      outpoint,
@ -96,6 +97,25 @@ export function doUpdateLoadStatus(uri: string, outpoint: string) {
  // @endif
 }

+export function doContinueDownloading(outpoint: string, force: boolean) {
+  return (dispatch: Dispatch) => {
+    if (!timeOutHash[outpoint] || force) {
+      dispatch(doUpdateLoadStatus(null, outpoint));
+    }
+  };
+}
+
+export function doStopDownload(outpoint: string) {
+  return (dispatch: Dispatch) => {
+    if (timeOutHash[outpoint]) {
+      clearInterval(timeOutHash[outpoint]);
+      timeOutHash[outpoint] = undefined;
+    }
+
+    dispatch(doDeleteFile(outpoint, false, false, null));
+  };
+}
+
 export function doSetPrimaryUri(uri: ?string) {
  return (dispatch: Dispatch) => {
    dispatch({
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@ -66,3 +66,4 @@
@import 'component/empty';
@import 'component/stripe-card';
@import 'component/wallet-tip-send';
+@import 'component/download-progress';
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@ -720,6 +720,7 @@
    margin: 0 0;
    padding: var(--spacing-xxs) var(--spacing-xxs);
    height: unset;
+    background-color: var(--color-header-background);

    // label (with 'Add' text) hidden by default
    .button__label {
--- a/ui/scss/component/_download-progress.scss
+++ b/ui/scss/component/_download-progress.scss
@ -0,0 +1,224 @@
+.download-progress__header {
+  padding: 15px;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 400px;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-header-background); //var(--color-gray-9):dark-mode
+  border-radius: var(--border-radius);
+  // border: 1px solid var(--color-gray-3);
+  z-index: 9999;
+}
+.download-progress__top-close-button {
+  position: absolute;
+  top: 7px;
+  right: 15px;
+  font-size: 35px;
+  background-color: transparent;
+  width: 15px;
+  height: 15px;
+  div {
+    height: 2px;
+    width: 13px;
+    background-color: var(--color-gray-4);
+    border-radius: var(--border-radius);
+  }
+}
+.download-progress__state-container {
+  margin-top: 10px;
+  padding-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.download-progress__state-filename {
+  margin: 0;
+  font-weight: 800;
+  font-size: 13px;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-right: 10px;
+  span.button__label {
+    color: var(--color-text);
+  }
+}
+.download-progress__state-filename-link {
+  margin: 0;
+  font-weight: 800;
+  font-size: 13px;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-right: 10px;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.download-progress__release-time {
+  margin: 0;
+  font-weight: 800;
+  font-size: 12px;
+  margin-left: auto;
+  font-style: italic;
+}
+.download-progress__state-bar {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  align-items: center;
+  margin-bottom: 2px;
+}
+.download-progress__bar-container {
+  width: 100%;
+  background-color: var(--color-gray-5);
+  height: 6px;
+  border-radius: var(--border-radius);
+}
+.download-progress__bar-content {
+  border-radius: var(--border-radius);
+  height: 100%;
+  background-color: var(--color-primary);
+}
+.download-progress__close-button {
+  flex-shrink: 0;
+  margin-left: auto;
+  font-size: 20px;
+  cursor: pointer;
+}
+.download-progress__playing-button {
+  flex-shrink: 0;
+  margin-left: auto;
+  width: 29.6px;
+  height: 29.6px;
+}
+.download-progress__count-time {
+  font-size: 11px;
+  letter-spacing: -0.6px;
+}
+.download-progress__divider {
+  border-top: 1px solid var(--color-gray-6);
+  margin-left: -15px;
+  width: 110%;
+}
+.download-progress__cancel {
+  margin-top: 7px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.download-progress__cancel p {
+  margin: 0;
+  font-size: 12px;
+  margin: 0;
+  white-space: nowrap;
+  width: 285px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.download-progress__cancel b {
+  font-size: 13px;
+}
+.download-progress__cancel-confirm {
+  width: 90px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.download-progress__cancel-ok {
+  border: none;
+  background-color: transparent;
+  font-size: 13px;
+  color: var(--color-text);
+}
+.download-progress__cancel-ok:hover {
+  color: var(--color-primary);
+}
+.download__container {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  width: 400px;
+  height: 300px;
+  border-radius: var(--border-radius);
+  box-shadow: 2px 2px 5px var(--color-gray-4);
+  background-color: var(--color-white);
+  transition: width 2s;
+}
+.download-progress__toggle-button {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  border: none;
+  background: var(--color-header-background);
+  color: var(--color-gray-6);
+  width: 50px;
+  height: 50px;
+  border-radius: var(--border-radius);
+  box-shadow: 0px 5px 4px var(--color-gray-4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.download_close_modal {
+  float: right;
+  margin-right: 10px;
+  font-size: 25px;
+}
+.download-progress__current-downloading {
+  position: fixed;
+  bottom: 25px;
+  right: 15px;
+  border: none;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  animation-name: downloadcount;
+  animation-duration: 1.3s;
+  animation-iteration-count: infinite;
+
+  .notification__bubble {
+    height: 1.5rem;
+    width: 1.5rem;
+    border-radius: 50%;
+    background-color: var(--color-editor-tag);
+    position: absolute;
+    top: -0.5rem;
+    right: -0.5rem;
+    color: white;
+    font-size: var(--font-small);
+    font-weight: bold;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .notification__bubble--small {
+    font-size: var(--font-xsmall);
+  }
+
+  .notification__bubble--inline {
+    @extend .notification__bubble;
+    top: 0.75rem;
+    right: 1rem;
+  }
+}
+@keyframes downloadcount {
+  0% {
+    transform: translateY(-10px);
+  }
+  50% {
+    transform: translateY(-3px);
+  }
+  100% {
+    transform: translateY(-10px);
+  }
+}
--- a/ui/scss/component/menu-button.scss
+++ b/ui/scss/component/menu-button.scss
@ -121,6 +121,12 @@
  overflow-x: hidden;
 }

+.menu__link-disable {
+  @extend .menu__link;
+  color: var(--color-text-subtitle)!important;
+}
+
+
 .menu__link--notification {
  width: 100%;
  display: flex;
--- a/ui/util/array.js
+++ b/ui/util/array.js
@ -0,0 +1,18 @@
+export function areEqual(first, second) {
+  if (first.length !== second.length) {
+    return false;
+  }
+  for (let i = 0; i < first.length; i++) {
+    if (!second.includes(first[i])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function removeItem(array, item) {
+  const index = array.indexOf(item);
+  if (index > -1) {
+    array.splice(index, 1);
+  }
+}
--- a/ui/util/livestream.js
+++ b/ui/util/livestream.js
@ -0,0 +1,24 @@
+// @flow
+
+/**
+ * Helper to extract livestream claim uris from the output of
+ * `selectActiveLivestreams`.
+ *
+ * @param activeLivestreams Object obtained from `selectActiveLivestreams`.
+ * @param channelIds List of channel IDs to filter the results with.
+ * @returns {[]|Array<*>}
+ */
+export function getLivestreamUris(activeLivestreams: ?LivestreamInfo, channelIds: ?Array<string>) {
+  let values = (activeLivestreams && Object.values(activeLivestreams)) || [];
+
+  if (channelIds && channelIds.length > 0) {
+    // $FlowFixMe
+    values = values.filter((v) => channelIds.includes(v.creatorId) && Boolean(v.latestClaimUri));
+  } else {
+    // $FlowFixMe
+    values = values.filter((v) => Boolean(v.latestClaimUri));
+  }
+
+  // $FlowFixMe
+  return values.map((v) => v.latestClaimUri);
+}