From 7a10e0eda93f1d89966249c524d290f1eb784b8c Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean.yesmunt@gmail.com>
Date: Mon, 21 May 2018 16:30:00 -0400
Subject: [PATCH] move file actions below video player

---
 src/renderer/component/common/icon.jsx        |  6 +-
 src/renderer/component/fileActions/view.jsx   | 10 ++-
 .../component/fileDownloadLink/view.jsx       | 71 ++++++++++---------
 .../component/subscribeButton/view.jsx        |  2 +-
 .../component/video/internal/play-button.jsx  |  2 +-
 src/renderer/page/file/view.jsx               | 15 ++--
 src/renderer/scss/component/_card.scss        |  5 +-
 .../scss/component/_file-download.scss        | 25 +------
 8 files changed, 63 insertions(+), 73 deletions(-)

diff --git a/src/renderer/component/common/icon.jsx b/src/renderer/component/common/icon.jsx
index b0a05d879..7bfc3ae0c 100644
--- a/src/renderer/component/common/icon.jsx
+++ b/src/renderer/component/common/icon.jsx
@@ -1,10 +1,10 @@
 // @flow
 import React from 'react';
-// import * as icons from 'constants/icons';
 import * as FeatherIcons from 'react-feather';
 import * as icons from 'constants/icons';
 
 const RED_COLOR = '#e2495e';
+const PURPLE_COLOR = '#8165b0';
 
 type Props = {
   icon: string,
@@ -19,8 +19,10 @@ class IconComponent extends React.PureComponent<Props> {
     const Icon = FeatherIcons[icon];
 
     let color;
-    if (icon === icons.HEART || icon === icons.FEATURED) {
+    if (icon === icons.TRASH || icon === icons.FEATURED) {
       color = RED_COLOR;
+    } else if (icon === icons.OPEN) {
+      color = PURPLE_COLOR;
     }
 
     let size = 14;
diff --git a/src/renderer/component/fileActions/view.jsx b/src/renderer/component/fileActions/view.jsx
index 94995d245..a485cc90e 100644
--- a/src/renderer/component/fileActions/view.jsx
+++ b/src/renderer/component/fileActions/view.jsx
@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 import Button from 'component/button';
-import FileDownloadLink from 'component/fileDownloadLink';
 import { MODALS } from 'lbry-redux';
 import classnames from 'classnames';
 import * as icons from 'constants/icons';
@@ -27,21 +26,20 @@ class FileActions extends React.PureComponent<Props> {
 
     return (
       <section className={classnames('card__actions', { 'card__actions--vertical': vertical })}>
-        <FileDownloadLink uri={uri} />
         {showDelete && (
           <Button
-            className="btn--file-actions"
+            button="alt"
             icon={icons.TRASH}
-            description={__('Delete')}
+            label={__('Delete')}
             onClick={() => openModal({ id: MODALS.CONFIRM_FILE_REMOVE }, { uri })}
           />
         )}
         {!claimIsMine && (
           <Button
-            className="btn--file-actions"
+            button="alt"
             icon={icons.REPORT}
             href={`https://lbry.io/dmca?claim_id=${claimId}`}
-            description={__('Report content')}
+            label={__('Report content')}
           />
         )}
       </section>
diff --git a/src/renderer/component/fileDownloadLink/view.jsx b/src/renderer/component/fileDownloadLink/view.jsx
index c2c413bd6..0658ae253 100644
--- a/src/renderer/component/fileDownloadLink/view.jsx
+++ b/src/renderer/component/fileDownloadLink/view.jsx
@@ -1,19 +1,39 @@
+// @flow
 import React from 'react';
 import Button from 'component/button';
-import classnames from 'classnames';
 import * as icons from 'constants/icons';
 
-class FileDownloadLink extends React.PureComponent {
+type Props = {
+  uri: string,
+  downloading: boolean,
+  fileInfo: ?{
+    written_bytes: number,
+    total_bytes: number,
+    outpoint: number,
+    download_path: string,
+  },
+  loading: boolean,
+  costInfo: ?{},
+  restartDownload: (string, number) => void,
+  checkAvailability: string => void,
+  openInShell: string => void,
+  purchaseUri: string => void,
+  doPause: () => void,
+};
+
+class FileDownloadLink extends React.PureComponent<Props> {
   componentWillMount() {
     this.checkAvailability(this.props.uri);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: Props) {
     this.checkAvailability(nextProps.uri);
     this.restartDownload(nextProps);
   }
 
-  restartDownload(props) {
+  uri: ?string;
+
+  restartDownload = (props: Props) => {
     const { downloading, fileInfo, uri, restartDownload } = props;
 
     if (
@@ -25,11 +45,11 @@ class FileDownloadLink extends React.PureComponent {
     ) {
       restartDownload(uri, fileInfo.outpoint);
     }
-  }
+  };
 
-  checkAvailability(uri) {
-    if (!this._uri || uri !== this._uri) {
-      this._uri = uri;
+  checkAvailability(uri: string) {
+    if (!this.uri || uri !== this.uri) {
+      this.uri = uri;
       this.props.checkAvailability(uri);
     }
   }
@@ -47,8 +67,10 @@ class FileDownloadLink extends React.PureComponent {
     } = this.props;
 
     const openFile = () => {
-      openInShell(fileInfo.download_path);
-      doPause();
+      if (fileInfo) {
+        openInShell(fileInfo.download_path);
+        doPause();
+      }
     };
 
     if (loading || downloading) {
@@ -56,21 +78,11 @@ class FileDownloadLink extends React.PureComponent {
         fileInfo && fileInfo.written_bytes
           ? fileInfo.written_bytes / fileInfo.total_bytes * 100
           : 0;
-      const label = fileInfo ? progress.toFixed(0) + __('% complete') : __('Connecting...');
+      const label = fileInfo
+        ? __('Downloading: ') + progress.toFixed(0) + __('% complete')
+        : __('Connecting...');
 
-      return (
-        <div className="file-download btn__content">
-          <div
-            className={classnames('file-download__overlay', {
-              btn__content: !!progress,
-            })}
-            style={{ width: `${progress}%` }}
-          >
-            {label}
-          </div>
-          {label}
-        </div>
-      );
+      return <span className="file-download">{label}</span>;
     } else if (fileInfo === null && !downloading) {
       if (!costInfo) {
         return null;
@@ -78,8 +90,8 @@ class FileDownloadLink extends React.PureComponent {
 
       return (
         <Button
-          className="btn--file-actions"
-          description={__('Download')}
+          button="alt"
+          label={__('Download')}
           icon={icons.DOWNLOAD}
           onClick={() => {
             purchaseUri(uri);
@@ -88,12 +100,7 @@ class FileDownloadLink extends React.PureComponent {
       );
     } else if (fileInfo && fileInfo.download_path) {
       return (
-        <Button
-          className="btn--file-actions"
-          description={__('Open')}
-          icon={icons.OPEN}
-          onClick={() => openFile()}
-        />
+        <Button button="alt" label={__('Open File')} icon={icons.OPEN} onClick={() => openFile()} />
       );
     }
 
diff --git a/src/renderer/component/subscribeButton/view.jsx b/src/renderer/component/subscribeButton/view.jsx
index 52516dfb8..5366d107a 100644
--- a/src/renderer/component/subscribeButton/view.jsx
+++ b/src/renderer/component/subscribeButton/view.jsx
@@ -38,7 +38,7 @@ export default (props: Props) => {
   return channelName && uri ? (
     <Button
       icon={isSubscribed ? undefined : icons.HEART}
-      button={isSubscribed ? 'danger' : 'alt'}
+      button={isSubscribed ? 'alt' : 'secondary'}
       label={subscriptionLabel}
       onClick={() => {
         if (!subscriptions.length) {
diff --git a/src/renderer/component/video/internal/play-button.jsx b/src/renderer/component/video/internal/play-button.jsx
index e2df7d455..8055dd5ff 100644
--- a/src/renderer/component/video/internal/play-button.jsx
+++ b/src/renderer/component/video/internal/play-button.jsx
@@ -18,7 +18,7 @@ class VideoPlayButton extends React.PureComponent<Props> {
     const label = doesPlayback ? 'Play' : 'View';
 
     return (
-      <Button button="secondary" disabled={disabled} label={label} icon={icon} onClick={play} />
+      <Button button="primary" disabled={disabled} label={label} icon={icon} onClick={play} />
     );
   }
 }
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index 5ebe44876..f6bec07aa 100644
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@@ -17,6 +17,8 @@ import Page from 'component/page';
 import player from 'render-media';
 import * as settings from 'constants/settings';
 import type { Claim } from 'types/claim';
+import type { Subscription } from 'types/subscription';
+import FileDownloadLink from 'component/fileDownloadLink';
 
 type Props = {
   claim: Claim,
@@ -42,7 +44,7 @@ type Props = {
   prepareEdit: ({}) => void,
   setClientSetting: (string, boolean | string) => void,
   checkSubscription: ({ channelName: string, uri: string }) => void,
-  subscriptions: Array<{}>,
+  subscriptions: Array<Subscription>,
 };
 
 class FilePage extends React.Component<Props> {
@@ -151,11 +153,6 @@ class FilePage extends React.Component<Props> {
             ) : (
               <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
             )}
-            {!isPlaying && (
-              <div className="card-media__internal-links">
-                <FileActions uri={uri} vertical />
-              </div>
-            )}
             <div className="card__content">
               <div className="card__title-identity--file">
                 <h1 className="card__title card__title--file">{title}</h1>
@@ -171,6 +168,7 @@ class FilePage extends React.Component<Props> {
               {metadata.nsfw && <div>NSFW</div>}
               <div className="card__channel-info">
                 <UriIndicator uri={uri} link />
+
                 <div className="card__actions card__actions--no-margin">
                   {claimIsMine ? (
                     <Button
@@ -207,6 +205,11 @@ class FilePage extends React.Component<Props> {
             </div>
 
             <div className="card__content">
+              <FileDownloadLink uri={uri} />
+              <FileActions uri={uri} />
+            </div>
+
+            <div className="card__content--extra-padding">
               <FileDetails uri={uri} />
             </div>
           </section>
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index 84e74d3e2..9d5404e42 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -2,7 +2,6 @@
   margin-left: auto;
   margin-right: auto;
   border-radius: var(--card-radius);
-  overflow: auto;
   user-select: text;
   display: flex;
   position: relative;
@@ -184,6 +183,10 @@
   margin-top: $spacing-vertical * 2/3;
 }
 
+.card__content--extra-padding {
+  margin-top: $spacing-vertical;
+}
+
 .card__subtext-title {
   color: var(--text-color);
   font-size: calc(var(--font-size-subtext-multiple) * 1.5em);
diff --git a/src/renderer/scss/component/_file-download.scss b/src/renderer/scss/component/_file-download.scss
index c4bd7e025..b38d8a520 100644
--- a/src/renderer/scss/component/_file-download.scss
+++ b/src/renderer/scss/component/_file-download.scss
@@ -1,26 +1,3 @@
-.file-download,
-.file-download__overlay {
-  padding: 5px;
-}
-
 .file-download {
-  position: relative;
-  background-color: var(--color-black);
-  border-radius: var(--btn-radius);
-  color: var(--color-download);
-  font-size: 12px;
-  opacity: 0.8;
-  font-family: 'metropolis-medium';
-}
-
-.file-download__overlay {
-  background: var(--color-download);
-  color: var(--color-download-overlay);
-  border-radius: var(--btn-radius);
-  position: absolute;
-  white-space: nowrap;
-  overflow: hidden;
-  z-index: 1;
-  top: 0px;
-  left: 0px;
+  font-size: 0.8em;
 }