updated css for asset preview and asset normal

client/build/components/AboutSpeechDetails/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var AboutSpeechTwo = function AboutSpeechTwo() {
+  return _react.default.createElement("div", null, _react.default.createElement("p", null, "Spee.ch is a media-hosting site that reads from and publishes content to the ", _react.default.createElement("a", {
+    className: "link--primary",
+    href: "https://lbry.io"
+  }, "LBRY"), " blockchain."), _react.default.createElement("p", null, "Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the ", _react.default.createElement("a", {
+    className: "link--primary",
+    href: "https://lbry.io/get"
+  }, "LBRY"), " network.  This means that your images are stored in multiple locations without a single point of failure."), _react.default.createElement("h3", null, "Contribute"), _react.default.createElement("p", null, "If you have an idea for your own spee.ch-like site on top of LBRY, fork our ", _react.default.createElement("a", {
+    className: "link--primary",
+    href: "https://github.com/lbryio/spee.ch"
+  }, "github repo"), " and go to town!"), _react.default.createElement("p", null, "If you want to improve spee.ch, join our ", _react.default.createElement("a", {
+    className: "link--primary",
+    href: "https://chat.lbry.io"
+  }, "discord channel"), " or solve one of our ", _react.default.createElement("a", {
+    className: "link--primary",
+    href: "https://github.com/lbryio/spee.ch/issues"
+  }, "github issues"), "."));
+};
+
+var _default = AboutSpeechTwo;
+exports.default = _default;

client/build/components/AboutSpeechOverview/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var AboutSpeechOne = function AboutSpeechOne() {
+  return _react.default.createElement("div", null, _react.default.createElement("p", {
+    className: "pull-quote"
+  }, "Spee.ch is an open-source project.  Please contribute to the existing site, or fork it and make your own."), _react.default.createElement("p", null, _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "https://twitter.com/spee_ch"
+  }, "TWITTER")), _react.default.createElement("p", null, _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "https://github.com/lbryio/spee.ch"
+  }, "GITHUB")), _react.default.createElement("p", null, _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "https://discord.gg/YjYbwhS"
+  }, "DISCORD CHANNEL")), _react.default.createElement("p", null, _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "https://github.com/lbryio/spee.ch/blob/master/README.md"
+  }, "DOCUMENTATION")));
+};
+
+var _default = AboutSpeechOne;
+exports.default = _default;

client/build/components/AssetPreview/index.js

@@ -5,19 +5,50 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _reactRedux = require("react-redux");
+var _react = _interopRequireDefault(require("react"));
 
-var _view = _interopRequireDefault(require("./view"));
+var _reactRouterDom = require("react-router-dom");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var mapStateToProps = function mapStateToProps(_ref) {
-  var defaultThumbnail = _ref.site.defaultThumbnail;
-  return {
-    defaultThumbnail: defaultThumbnail
-  };
+var AssetPreview = function AssetPreview(_ref) {
+  var defaultThumbnail = _ref.defaultThumbnail,
+      _ref$claimData = _ref.claimData,
+      name = _ref$claimData.name,
+      claimId = _ref$claimData.claimId,
+      fileExt = _ref$claimData.fileExt,
+      contentType = _ref$claimData.contentType,
+      thumbnail = _ref$claimData.thumbnail;
+  var directSourceLink = "".concat(claimId, "/").concat(name, ".").concat(fileExt);
+  var showUrlLink = "/".concat(claimId, "/").concat(name);
+  return _react.default.createElement("div", {
+    className: "asset-preview-holder"
+  }, _react.default.createElement(_reactRouterDom.Link, {
+    to: showUrlLink
+  }, function () {
+    switch (contentType) {
+      case 'image/jpeg':
+      case 'image/jpg':
+      case 'image/png':
+      case 'image/gif':
+        return _react.default.createElement("img", {
+          className: 'asset-preview-image',
+          src: directSourceLink,
+          alt: name
+        });
+
+      case 'video/mp4':
+        return _react.default.createElement("img", {
+          className: 'asset-preview-video',
+          src: thumbnail || defaultThumbnail,
+          alt: name
+        });
+
+      default:
+        return _react.default.createElement("p", null, "unsupported file type");
+    }
+  }()));
 };
 
-var _default = (0, _reactRedux.connect)(mapStateToProps, null)(_view.default);
-
+var _default = AssetPreview;
 exports.default = _default;

client/build/components/PageContent/style.css.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var style = {
-  margin: '1em',
+  margin: '2em',
   backgroundColor: 'red'
 };
 var _default = style;

client/build/containers/AssetDisplay/view.js

@@ -60,9 +60,7 @@ function (_React$Component) {
           contentType = _this$props$asset$cla2.contentType,
           fileExt = _this$props$asset$cla2.fileExt,
           thumbnail = _this$props$asset$cla2.thumbnail;
-      return _react.default.createElement("div", {
-        id: "asset-display-component"
-      }, status === _asset_display_states.LOCAL_CHECK && _react.default.createElement("div", null, _react.default.createElement("p", null, "Checking to see if Spee.ch has your asset locally...")), status === _asset_display_states.UNAVAILABLE && _react.default.createElement("div", null, _react.default.createElement("p", null, "Sit tight, we're searching the LBRY blockchain for your asset!"), _react.default.createElement(_ProgressBar.default, {
+      return _react.default.createElement("div", null, status === _asset_display_states.LOCAL_CHECK && _react.default.createElement("div", null, _react.default.createElement("p", null, "Checking to see if Spee.ch has your asset locally...")), status === _asset_display_states.UNAVAILABLE && _react.default.createElement("div", null, _react.default.createElement("p", null, "Sit tight, we're searching the LBRY blockchain for your asset!"), _react.default.createElement(_ProgressBar.default, {
         size: 12
       }), _react.default.createElement("p", null, "Curious what magic is happening here? ", _react.default.createElement("a", {
         className: "link--primary",
@@ -79,22 +77,16 @@ function (_React$Component) {
           case 'image/jpeg':
           case 'image/jpg':
           case 'image/png':
-            return _react.default.createElement("img", {
-              className: "asset",
-              src: "/".concat(claimId, "/").concat(name, ".").concat(fileExt),
-              alt: name
-            });
-
           case 'image/gif':
             return _react.default.createElement("img", {
-              className: "asset",
+              className: "asset-image",
               src: "/".concat(claimId, "/").concat(name, ".").concat(fileExt),
               alt: name
             });
 
           case 'video/mp4':
             return _react.default.createElement("video", {
-              className: "asset video",
+              className: "asset-video",
               controls: true,
               poster: thumbnail
             }, _react.default.createElement("source", {

client/build/containers/AssetPreview/index.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _reactRedux = require("react-redux");
-
-var _view = _interopRequireDefault(require("./view"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var mapStateToProps = function mapStateToProps(_ref) {
-  var defaultThumbnail = _ref.site.defaultThumbnail;
-  return {
-    defaultThumbnail: defaultThumbnail
-  };
-};
-
-var _default = (0, _reactRedux.connect)(mapStateToProps, null)(_view.default);
-
-exports.default = _default;

client/build/containers/AssetPreview/view.js

@@ -1,54 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactRouterDom = require("react-router-dom");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var AssetPreview = function AssetPreview(_ref) {
-  var defaultThumbnail = _ref.defaultThumbnail,
-      _ref$claimData = _ref.claimData,
-      name = _ref$claimData.name,
-      claimId = _ref$claimData.claimId,
-      fileExt = _ref$claimData.fileExt,
-      contentType = _ref$claimData.contentType,
-      thumbnail = _ref$claimData.thumbnail;
-  var directSourceLink = "".concat(claimId, "/").concat(name, ".").concat(fileExt);
-  var showUrlLink = "/".concat(claimId, "/").concat(name);
-  return _react.default.createElement("div", {
-    className: "asset-preview-holder"
-  }, _react.default.createElement(_reactRouterDom.Link, {
-    to: showUrlLink
-  }, function () {
-    switch (contentType) {
-      case 'image/jpeg':
-      case 'image/jpg':
-      case 'image/png':
-      case 'image/gif':
-        return _react.default.createElement("img", {
-          className: 'asset-preview-image',
-          src: directSourceLink,
-          alt: name
-        });
-
-      case 'video/mp4':
-        return _react.default.createElement("img", {
-          className: 'asset-preview-video',
-          src: thumbnail || defaultThumbnail,
-          alt: name
-        });
-
-      default:
-        return _react.default.createElement("p", null, "unsupported file type");
-    }
-  }()));
-};
-
-var _default = AssetPreview;
-exports.default = _default;

client/build/containers/ChannelClaimsDisplay/index.js

@@ -14,7 +14,8 @@ var _view = _interopRequireDefault(require("./view"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var mapStateToProps = function mapStateToProps(_ref) {
-  var show = _ref.show;
+  var show = _ref.show,
+      defaultThumbnail = _ref.site.defaultThumbnail;
   // select channel key
   var request = show.requestList[show.request.id];
   var channelKey = request.key; // select channel claims
@@ -23,7 +24,8 @@ var mapStateToProps = function mapStateToProps(_ref) {
 
   return {
     channelKey: channelKey,
-    channel: channel
+    channel: channel,
+    defaultThumbnail: defaultThumbnail
   };
 };
 

client/build/containers/ChannelClaimsDisplay/view.js

@@ -70,14 +70,17 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props$channel$c = this.props.channel.claimsData,
-          claims = _this$props$channel$c.claims,
-          currentPage = _this$props$channel$c.currentPage,
-          totalPages = _this$props$channel$c.totalPages;
+      var _this$props2 = this.props,
+          _this$props2$channel$ = _this$props2.channel.claimsData,
+          claims = _this$props2$channel$.claims,
+          currentPage = _this$props2$channel$.currentPage,
+          totalPages = _this$props2$channel$.totalPages,
+          defaultThumbnail = _this$props2.defaultThumbnail;
       return _react.default.createElement("div", {
         className: "row row--tall"
       }, claims.length > 0 ? _react.default.createElement("div", null, claims.map(function (claim, index) {
         return _react.default.createElement(_AssetPreview.default, {
+          defaultThumbnail: defaultThumbnail,
           claimData: claim,
           key: "".concat(claim.name, "-").concat(index)
         });

client/build/pages/AboutPage/index.js

@@ -11,9 +11,9 @@ var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
 var _HorizontalSplit = _interopRequireDefault(require("@components/HorizontalSplit"));
 
-var _AboutSpeechOne = _interopRequireDefault(require("@components/AboutSpeechOne"));
+var _AboutSpeechOverview = _interopRequireDefault(require("@components/AboutSpeechOverview"));
 
-var _AboutSpeechTwo = _interopRequireDefault(require("@components/AboutSpeechTwo"));
+var _AboutSpeechDetails = _interopRequireDefault(require("@components/AboutSpeechDetails"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -51,8 +51,8 @@ function (_React$Component) {
         pageTitle: 'About',
         pageUri: 'about'
       }, _react.default.createElement(_HorizontalSplit.default, {
-        leftSide: _react.default.createElement(_AboutSpeechOne.default, null),
-        rightSide: _react.default.createElement(_AboutSpeechTwo.default, null)
+        leftSide: _react.default.createElement(_AboutSpeechOverview.default, null),
+        rightSide: _react.default.createElement(_AboutSpeechDetails.default, null)
       }));
     }
   }]);

client/scss/_asset.scss

@@ -0,0 +1,12 @@
+
+.asset-image, .asset-video {
+  width: 100%;
+  margin : 0px
+}
+
+.show-lite-container {
+  .asset-image, .asset-video {
+    max-height: calc(100vh - 3em);
+    max-width: 100vw;
+  }
+}

client/scss/all.scss

@@ -13,12 +13,12 @@
 @import '_button';
 @import '_span';
 @import '_video';
-@import 'containers/_nav-bar.scss';
-@import 'containers/_dropzone.scss';
-@import 'containers/_asset-preview.scss';
-@import 'containers/_show-asset-lite.scss';
-@import 'components/_progress-bar';
-@import 'components/_publish-preview';
+@import 'asset';
+@import 'asset-preview';
+@import 'dropzone';
+@import 'nav-bar';
+@import 'progress-bar';
+@import 'publish-preview';
 @import 'media-queries';
 
 

client/scss/containers/_show-asset-lite.scss

@@ -1,20 +0,0 @@
-.show-lite-container {
-  text-align: center;
-}
-
-.show-lite-container #asset-display-component {
-  max-height: calc(100vh - 3em);
-}
-
-.show-details-container #asset-display-component .asset {
-  width: 100%
-}
-
-.show-lite-container #asset-display-component .asset {
-  max-height: calc(100vh - 3em);
-  max-width: 100vw;
-}
-
-#asset-boilerplate {
-  max-height: 3em;
-}

client/src/components/PageContent/style.css.js

@@ -1,5 +1,5 @@
 const style = {
-  margin         : '1em',
+  margin         : '2em',
   backgroundColor: 'red',
 };
 

client/src/containers/AssetDisplay/view.jsx

@@ -10,7 +10,7 @@ class AssetDisplay extends React.Component {
   render () {
     const { status, error, asset: { claimData: { name, claimId, contentType, fileExt, thumbnail } } } = this.props;
     return (
-      <div id='asset-display-component'>
+      <div>
         {(status === LOCAL_CHECK) &&
         <div>
           <p>Checking to see if Spee.ch has your asset locally...</p>
@@ -35,26 +35,21 @@ class AssetDisplay extends React.Component {
             case 'image/jpeg':
             case 'image/jpg':
             case 'image/png':
-              return (
-                <img
-                  className='asset'
-                  src={`/${claimId}/${name}.${fileExt}`}
-                  alt={name} />
-              );
             case 'image/gif':
               return (
                 <img
-                  className='asset'
+                  className='asset-image'
                   src={`/${claimId}/${name}.${fileExt}`}
                   alt={name}
                 />
               );
             case 'video/mp4':
               return (
-                <video className='asset video' controls poster={thumbnail}>
-                  <source
-                    src={`/${claimId}/${name}.${fileExt}`}
-                  />
+                <video
+                  className='asset-video'
+                  controls poster={thumbnail}
+                >
+                  <source src={`/${claimId}/${name}.${fileExt}`} />
                   <p>Your browser does not support the <code>video</code> element.</p>
                 </video>
               );

client/src/containers/AssetPreview/index.js

@@ -1,10 +0,0 @@
-import { connect } from 'react-redux';
-import View from './view';
-
-const mapStateToProps = ({site: { defaultThumbnail }}) => {
-  return {
-    defaultThumbnail,
-  };
-};
-
-export default connect(mapStateToProps, null)(View);

client/src/containers/ChannelClaimsDisplay/index.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { onUpdateChannelClaims } from '../../actions/show';
 import View from './view';
 
-const mapStateToProps = ({ show }) => {
+const mapStateToProps = ({ show, site: { defaultThumbnail } }) => {
   // select channel key
   const request = show.requestList[show.request.id];
   const channelKey = request.key;
@@ -12,6 +12,7 @@ const mapStateToProps = ({ show }) => {
   return {
     channelKey,
     channel,
+    defaultThumbnail,
   };
 };
 

client/src/containers/ChannelClaimsDisplay/view.jsx

@@ -22,12 +22,13 @@ class ChannelClaimsDisplay extends React.Component {
     this.props.onUpdateChannelClaims(channelKey, name, longId, page);
   }
   render () {
-    const { channel: { claimsData: { claims, currentPage, totalPages } } } = this.props;
+    const { channel: { claimsData: { claims, currentPage, totalPages } }, defaultThumbnail } = this.props;
     return (
       <div className='row row--tall'>
         {(claims.length > 0) ? (
           <div>
             {claims.map((claim, index) => <AssetPreview
+              defaultThumbnail={defaultThumbnail}
               claimData={claim}
               key={`${claim.name}-${index}`}
             />)}

client/src/pages/AboutPage/index.jsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import PageLayout from '@components/PageLayout';
 import HorizontalSplit from '@components/HorizontalSplit';
-import AboutSpeechOne from '@components/AboutSpeechOne';
-import AboutSpeechTwo from '@components/AboutSpeechTwo';
+import AboutSpeechOverview from '@components/AboutSpeechOverview';
+import AboutSpeechDetails from '@components/AboutSpeechDetails';
 
 class AboutPage extends React.Component {
   render () {
     return (
       <PageLayout pageTitle={'About'} pageUri={'about'} >
         <HorizontalSplit
-          leftSide={<AboutSpeechOne />}
-          rightSide={<AboutSpeechTwo />}
+          leftSide={<AboutSpeechOverview />}
+          rightSide={<AboutSpeechDetails />}
         />
       </PageLayout>
     );