CHANGELOG.md

@@ -14,6 +14,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
    * Pre-fill publish URL after clicking "Put something here" link ([#1303](https://github.com/lbryio/lbry-app/pull/1303))
    * Add Danger JS to automate code reviews ([#1289](https://github.com/lbryio/lbry-app/pull/1289))
    * Autoplay downloaded and free media ([#584](https://github.com/lbryio/lbry-app/pull/1453))
+   * Add 'Go to page' input on channel pagination ([#1166](https://github.com/lbryio/lbry-app/pull/1166))
+   * Add "View on web" button on file/channel pages with spee.ch link ([#1222](https://github.com/lbryio/lbry-app/pull/1222))
 
 ### Changed
    * Add flair to snackbar ([#1313](https://github.com/lbryio/lbry-app/pull/1313))
@@ -57,7 +59,6 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
   * App category for Linux ([#877](https://github.com/lbryio/lbry-app/pull/877))
   * Add YouTube Sync reward ([#1147](https://github.com/lbryio/lbry-app/pull/1147))
   * Retain previous screen sizing on startup ([#338](https://github.com/lbryio/lbry-app/issues/338))
-  * Add 'Go to page' input on channel pagination ([#1166](https://github.com/lbryio/lbry-app/pull/1166))
 
 
 ### Changed
@@ -372,7 +373,6 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
  * Removed placeholder values from price selection form fields, which was causing confusion that these were real values (#426)
  * Fixed showing "other currency" help tip in publish form, which was caused due to not "setting" state for price
  * Publish page now properly checks for all required fields are filled
- * Fixed pagination styling for pages > 5 (#416)
  * Fixed sizing on squat videos (#419)
  * Support claims no longer show up on Published page (#384)
  * Fixed rendering of small prices (#461)
@@ -410,7 +410,6 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
 ### Added
  * Replaced horizontal scrollbars with scroll arrows
  * Featured weekly reward content shows with an orange star
- * Added pagination to channel pages
 
 
 ### Fixed

src/renderer/component/common/form-components/form-row.jsx

@@ -4,7 +4,6 @@ import * as React from 'react';
 import classnames from 'classnames';
 
 type Props = {
-  centered?: boolean,
   children: React.Node,
   padded?: boolean,
   verticallyCentered?: boolean,
@@ -22,7 +21,6 @@ export class FormRow extends React.PureComponent<Props> {
     return (
       <div
         className={classnames('form-row', {
-          'form-row--centered': centered,
           'form-row--padded': padded,
           'form-row--vertically-centered': verticallyCentered,
           'form-row--stretch': stretch,

src/renderer/component/viewOnWebButton/index.js

@@ -0,0 +1,3 @@
+import ViewOnWebButton from './view';
+
+export default ViewOnWebButton;

src/renderer/component/viewOnWebButton/view.jsx

@@ -0,0 +1,21 @@
+// @flow
+import React from 'react';
+import * as icons from 'constants/icons';
+import Button from 'component/button';
+
+type Props = {
+  uri: ?string,
+};
+
+export default (props: Props) => {
+  const { uri } = props;
+
+  return uri ? (
+    <Button
+      iconRight={icons.GLOBE}
+      button="alt"
+      label={__('View on Web')}
+      href={`http://spee.ch/${uri}`}
+    />
+  ) : null;
+};

src/renderer/constants/icons.js

@@ -25,3 +25,4 @@ export const CHECK = 'CheckCircle';
 export const HEART = 'Heart';
 export const UNLOCK = 'Unlock';
 export const CHECK_SIMPLE = 'Check';
+export const GLOBE = 'Globe';

src/renderer/page/channel/view.jsx

@@ -1,12 +1,15 @@
 // @flow
 import React from 'react';
 import BusyIndicator from 'component/common/busy-indicator';
+import Button from 'component/button';
 import { FormField, FormRow } from 'component/common/form';
 import ReactPaginate from 'react-paginate';
 import SubscribeButton from 'component/subscribeButton';
+import ViewOnWebButton from 'component/viewOnWebButton';
 import Page from 'component/page';
 import FileList from 'component/fileList';
 import type { Claim } from 'types/claim';
+import { MODALS } from 'lbry-redux';
 
 type Props = {
   uri: string,
@@ -19,6 +22,7 @@ type Props = {
   fetchClaims: (string, number) => void,
   fetchClaimCount: string => void,
   navigate: (string, {}) => void,
+  openModal: (string, {}) => void,
 };
 
 class ChannelPage extends React.PureComponent<Props> {
@@ -56,8 +60,8 @@ class ChannelPage extends React.PureComponent<Props> {
   }
 
   render() {
-    const { fetching, claimsInChannel, claim, page, totalPages } = this.props;
-    const { name, permanent_url: permanentUrl } = claim;
+    const { fetching, claimsInChannel, claim, page, totalPages, uri, openModal } = this.props;
+    const { name, permanent_url: permanentUrl, claim_id: claimId } = claim;
 
     let contentList;
     if (fetching) {
@@ -76,7 +80,14 @@ class ChannelPage extends React.PureComponent<Props> {
         <section className="card__channel-info card__channel-info--large">
           <h1>{name}</h1>
           <div className="card__actions card__actions--no-margin">
+            <Button
+              button="alt"
+              iconRight="Send"
+              label={__('Enjoy this? Send a tip')}
+              onClick={() => openModal(MODALS.SEND_TIP, { uri })}
+            />
             <SubscribeButton uri={permanentUrl} channelName={name} />
+            <ViewOnWebButton uri={`${name}:${claimId}`} />
           </div>
         </section>
         <section>{contentList}</section>

src/renderer/page/file/view.jsx

@@ -13,6 +13,7 @@ import DateTime from 'component/dateTime';
 import * as icons from 'constants/icons';
 import Button from 'component/button';
 import SubscribeButton from 'component/subscribeButton';
+import ViewOnWebButton from 'component/viewOnWebButton';
 import Page from 'component/page';
 import player from 'render-media';
 import * as settings from 'constants/settings';
@@ -80,12 +81,7 @@ class FilePage extends React.Component<Props> {
   }
 
   checkSubscription = (props: Props) => {
-    if (
-      props.claim.value.publisherSignature &&
-      props.subscriptions
-        .map(subscription => subscription.channelName)
-        .indexOf(props.claim.channel_name) !== -1
-    ) {
+    if (props.subscriptions.find(sub => sub.channelName === props.claim.channel_name)) {
       props.checkSubscription({
         channelName: props.claim.channel_name,
         uri: buildURI(
@@ -114,6 +110,7 @@ class FilePage extends React.Component<Props> {
       prepareEdit,
       navigate,
       autoplay,
+      costInfo,
     } = this.props;
 
     // File info
@@ -130,6 +127,11 @@ class FilePage extends React.Component<Props> {
     if (channelName && channelClaimId) {
       subscriptionUri = buildURI({ channelName, claimId: channelClaimId }, false);
     }
+    const speechSharable =
+      costInfo &&
+      costInfo.cost === 0 &&
+      contentType &&
+      ['video', 'image'].includes(contentType.split('/')[0]);
 
     // We want to use the short form uri for editing
     // This is what the user is used to seeing, they don't care about the claim id
@@ -191,6 +193,14 @@ class FilePage extends React.Component<Props> {
                       <SubscribeButton uri={subscriptionUri} channelName={channelName} />
                     </React.Fragment>
                   )}
+                  {speechSharable && (
+                    <ViewOnWebButton
+                      uri={buildURI({
+                        claimId: claim.claim_id,
+                        contentName: claim.name,
+                      }).slice(7)}
+                    />
+                  )}
                 </div>
               </div>
               <FormRow alignRight>

src/renderer/scss/component/_form-field.scss

@@ -62,6 +62,10 @@
     width: 35px;
   }
 
+  input.paginate-channel {
+    width: 35px;
+  }
+
   &.form-field--auto-height {
     height: auto;
   }