Merge pull request #1755 from lbryio/verify-thumbnail-url

Validate thumbnails
2018-07-19 11:12:10 -04:00 · 2018-07-19 11:12:10 -04:00 · 1d9282e1b8
commit 1d9282e1b8
parent cf75f31153 b3c7738668
10 changed files with 135 additions and 57 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -12,7 +12,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
 ### Added

 * Added 3D file viewer for OBJ & STL file types ([#1558](https://github.com/lbryio/lbry-desktop/pull/1558))
-
+ * Added thumbnail preview on publish page ([#1755](https://github.com/lbryio/lbry-desktop/pull/1755))

 ### Changed

--- a/src/renderer/component/common/file-selector.jsx
+++ b/src/renderer/component/common/file-selector.jsx
@ -9,7 +9,7 @@ type Props = {
  type: string,
  currentPath: ?string,
  onFileChosen: (string, string) => void,
-  fileLabel: ?string,
+  fileLabel?: string,
  directoryLabel?: string,
 };

@ -56,7 +56,7 @@ class FileSelector extends React.PureComponent<Props> {
      type === 'file' ? fileLabel || __('Choose File') : directoryLabel || __('Choose Directory');

    return (
-      <FormRow verticallyCentered padded>
+      <FormRow verticallyCentered>
        <Button button="primary" onClick={() => this.handleButtonClick()} label={label} />
        <input
          webkitdirectory="true"
--- a/src/renderer/component/publishForm/view.jsx
+++ b/src/renderer/component/publishForm/view.jsx
@ -73,8 +73,8 @@ class PublishForm extends React.PureComponent<Props> {
  }

  componentWillMount() {
-    const { isStillEditing, thumbnail } = this.props;
-    if (!isStillEditing || !thumbnail) {
+    const { thumbnail } = this.props;
+    if (!thumbnail) {
      this.props.resetThumbnailStatus();
    }
  }
@ -356,14 +356,17 @@ class PublishForm extends React.PureComponent<Props> {
              />
            </div>
          )}
-          <FileSelector currentPath={filePath} onFileChosen={this.handleFileChange} />
-          {!!isStillEditing && (
-            <p className="card__content card__subtitle">
-              {__("If you don't choose a file, the file from your existing claim")}
-              {` "${name}" `}
-              {__('will be used.')}
-            </p>
-          )}
+          <div className="card__content">
+            <FileSelector currentPath={filePath} onFileChosen={this.handleFileChange} />
+            {!!isStillEditing &&
+              name && (
+                <p className="card__content card__subtitle">
+                  {__("If you don't choose a file, the file from your existing claim")}
+                  {` "${name}" `}
+                  {__('will be used.')}
+                </p>
+              )}
+          </div>
        </section>
        <div className={classnames({ 'card--disabled': formDisabled })}>
          <section className="card card--section">
@ -400,10 +403,9 @@ class PublishForm extends React.PureComponent<Props> {
                __('Enter a URL for your thumbnail.')
              ) : (
                <React.Fragment>
-                  {__(
-                    'Upload your thumbnail (.png/.jpg/.jpeg/.gif) to spee.ch, or enter the URL manually. Learn more about spee.ch '
-                  )}
-                  <Button button="link" label={__('here')} href="https://spee.ch/about" />.
+                  {__('Upload your thumbnail (.png/.jpg/.jpeg/.gif) to')}{' '}
+                  <Button button="link" label={__('spee.ch')} href="https://spee.ch/about" />.{' '}
+                  {__('Recommended size: 800x450 (16:9)')}
                </React.Fragment>
              )}
            </div>
--- a/src/renderer/component/selectThumbnail/view.jsx
+++ b/src/renderer/component/selectThumbnail/view.jsx
@ -1,9 +1,10 @@
 // @flow
 import { THUMBNAIL_STATUSES, MODALS } from 'lbry-redux';
-import React from 'react';
-import { FormField, FormRow } from 'component/common/form';
+import * as React from 'react';
+import { FormField } from 'component/common/form';
 import FileSelector from 'component/common/file-selector';
 import Button from 'component/button';
+import Native from 'native';

 type Props = {
  thumbnail: ?string,
@ -15,7 +16,29 @@ type Props = {
  resetThumbnailStatus: () => void,
 };

-class SelectThumbnail extends React.PureComponent<Props> {
+type State = {
+  thumbnailError: boolean,
+};
+
+class SelectThumbnail extends React.PureComponent<Props, State> {
+  constructor() {
+    super();
+
+    this.state = {
+      thumbnailError: false,
+    };
+
+    (this: any).handleThumbnailChange = this.handleThumbnailChange.bind(this);
+  }
+
+  handleThumbnailChange(e: SyntheticInputEvent<*>) {
+    const { updatePublishForm } = this.props;
+    const newThumbnail = e.target.value.replace(' ', '');
+
+    updatePublishForm({ thumbnail: newThumbnail });
+    this.setState({ thumbnailError: false });
+  }
+
  render() {
    const {
      thumbnail,
@ -26,25 +49,47 @@ class SelectThumbnail extends React.PureComponent<Props> {
      thumbnailPath,
      resetThumbnailStatus,
    } = this.props;
+    const { thumbnailError } = this.state;
+    const thumbnailSrc =
+      !thumbnail || thumbnailError ? Native.imagePath('no-thumbnail.png') : thumbnail;

    return (
-      <div>
+      <div className="card__content">
        {status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? (
-          <FormRow padded>
-            <FormField
-              stretch
-              type="text"
-              name="content_thumbnail"
-              label={__('URL')}
-              placeholder="http://spee.ch/mylogo"
-              value={thumbnail}
-              disabled={formDisabled}
-              onChange={e => updatePublishForm({ thumbnail: e.target.value })}
+          <div className="column">
+            <img
+              src={thumbnailSrc}
+              className="column__item thumbnail-preview"
+              alt={__('Thumbnail Preview')}
+              onError={() => {
+                this.setState({ thumbnailError: true });
+              }}
            />
-          </FormRow>
+            <div className="column__item">
+              <FormField
+                className="input--thumbnail"
+                type="text"
+                name="content_thumbnail"
+                label="URL"
+                placeholder="http://spee.ch/mylogo"
+                value={thumbnail}
+                disabled={formDisabled}
+                onChange={this.handleThumbnailChange}
+              />
+              <div className="card__actions">
+                <Button
+                  button="link"
+                  label={__('Use thumbnail upload tool')}
+                  onClick={() =>
+                    updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.READY })
+                  }
+                />
+              </div>
+            </div>
+          </div>
        ) : (
-          <div className="form-row--padded">
-            {(status === THUMBNAIL_STATUSES.READY || status === THUMBNAIL_STATUSES.COMPLETE) && (
+          <React.Fragment>
+            {status === THUMBNAIL_STATUSES.READY && (
              <FileSelector
                currentPath={thumbnailPath}
                fileLabel={__('Choose Thumbnail')}
@ -52,18 +97,31 @@ class SelectThumbnail extends React.PureComponent<Props> {
              />
            )}
            {status === THUMBNAIL_STATUSES.COMPLETE && (
-              <div>
-                <p>
-                  Upload complete. View it{' '}
-                  <Button button="link" href={thumbnail} label={__('here')} />.
-                </p>
-                <Button button="link" label={__('New thumbnail')} onClick={resetThumbnailStatus} />
+              <div className="column column--space-between">
+                <img
+                  className="column__item thumbnail-preview"
+                  src={thumbnail}
+                  alt={__('Thumbnail Preview')}
+                />
+                <div className="column__item">
+                  <p>
+                    Upload complete.{' '}
+                    <Button button="link" href={thumbnail} label={__('View it on spee.ch')} />.
+                  </p>
+                  <div className="card__actions">
+                    <Button
+                      button="link"
+                      label={__('New thumbnail')}
+                      onClick={resetThumbnailStatus}
+                    />
+                  </div>
+                </div>
              </div>
            )}
-          </div>
+          </React.Fragment>
        )}
-        <div className="card__actions">
-          {status === THUMBNAIL_STATUSES.READY && (
+        {status === THUMBNAIL_STATUSES.READY && (
+          <div className="card__actions">
            <Button
              button="link"
              label={__('Or enter a URL manually')}
@ -71,15 +129,8 @@ class SelectThumbnail extends React.PureComponent<Props> {
                updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.MANUAL })
              }
            />
-          )}
-          {status === THUMBNAIL_STATUSES.MANUAL && (
-            <Button
-              button="link"
-              label={__('Use thumbnail upload tool')}
-              onClick={() => updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.READY })}
-            />
-          )}
-        </div>
+          </div>
+        )}

        {status === THUMBNAIL_STATUSES.IN_PROGRESS && <p>{__('Uploading thumbnail')}...</p>}
      </div>
--- a/src/renderer/scss/_gui.scss
+++ b/src/renderer/scss/_gui.scss
@ -153,7 +153,6 @@ dd {

 p {
  font-family: 'metropolis-medium';
-  padding: $spacing-vertical * 1/3 0;
 }

 .page {
@ -302,6 +301,14 @@ p {
  opacity: 0.5;
 }

+.column {
+  display: flex;
+
+  .column__item:not(:first-child) {
+    padding-left: $spacing-width * 2/3;
+  }
+}
+
 .truncated-text {
  //display: inline-block;
  display: -webkit-box;
@ -361,3 +368,9 @@ p {
    margin-top: $spacing-vertical * 2/3;
  }
 }
+
+.thumbnail-preview {
+  height: var(--thumbnail-preview-height);
+  width: var(--thumbnail-preview-width);
+  border: var(--thumbnail-preview-border);
+}
--- a/src/renderer/scss/_vars.scss
+++ b/src/renderer/scss/_vars.scss
@ -179,4 +179,10 @@ $large-breakpoint: 1921px;
  // /* Animation :) */
  --animation-duration: 0.3s;
  --animation-style: cubic-bezier(0.55, 0, 0.1, 1);
+
+  /* Image */
+  --thumbnail-preview-height: 100px;
+  --thumbnail-preview-width: 177px;
+  // This will awlways white, it looks fine on light mode
+  --thumbnail-preview-border: 1px solid var(--color-white);
 }
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@ -255,6 +255,12 @@
  right: $spacing-vertical;
 }

+.card__actions-bottom-corner {
+  position: absolute;
+  bottom: $spacing-vertical;
+  right: $spacing-vertical;
+}
+
 .card__actions--end {
  justify-content: flex-end;
 }
--- a/src/renderer/scss/component/_form-field.scss
+++ b/src/renderer/scss/component/_form-field.scss
@ -67,8 +67,8 @@
    width: 35px;
  }

-  input.paginate-channel {
-    width: 35px;
+  input.input--thumbnail {
+    width: 400px;
  }

  &.form-field--auto-height {
--- a/static/img/no-thumbnail.png
+++ b/static/img/no-thumbnail.png
--- a/yarn.lock
+++ b/yarn.lock
@ -5221,9 +5221,9 @@ lazy-val@^1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.3.tgz#bb97b200ef00801d94c317e29dc6ed39e31c5edc"

-lbry-redux@lbryio/lbry-redux#177ef2c1916f9672e713267500e447d671ae1bc3:
+lbry-redux@lbryio/lbry-redux#e0909b08647a790d155f3189b9f9bf0b3e55bd17:
  version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/177ef2c1916f9672e713267500e447d671ae1bc3"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/e0909b08647a790d155f3189b9f9bf0b3e55bd17"
  dependencies:
    proxy-polyfill "0.1.6"
    reselect "^3.0.0"