LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

updated page layout

Browse source
This commit is contained in:
bill bittner 2018-06-08 17:23:11 -07:00
parent 84e20dfe79
commit 823a0da87c
92 changed files with 733 additions and 551 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
client/build/components/AboutSpeechDetails/index.js
View file

@ -13,22 +13,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
var AboutSpeechDetails = function AboutSpeechDetails() {
return _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
className: 'large'
className: 'text--large'
}, "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", {
className: 'large'
className: 'text--large'
}, "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(_Row.default, null, _react.default.createElement("h3", null, "Contribute"), _react.default.createElement("p", {
className: 'large'
className: 'text--large'
}, "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", {
className: 'large'
className: 'text--large'
}, "If you want to improve spee.ch, join our ", _react.default.createElement("a", {
className: "link--primary",
href: "https://chat.lbry.io"

10
client/build/components/AboutSpeechOverview/index.js
View file

@ -13,27 +13,27 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
var AboutSpeechOverview = function AboutSpeechOverview() {
return _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
className: "extra-large"
className: 'text--extra-large'
}, "Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.")), _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
className: 'large'
className: 'text--large'
}, _react.default.createElement("a", {
className: "link--primary",
target: "_blank",
href: "https://twitter.com/spee_ch"
}, "TWITTER")), _react.default.createElement("p", {
className: 'large'
className: 'text--large'
}, _react.default.createElement("a", {
className: "link--primary",
target: "_blank",
href: "https://github.com/lbryio/spee.ch"
}, "GITHUB")), _react.default.createElement("p", {
className: 'large'
className: 'text--large'
}, _react.default.createElement("a", {
className: "link--primary",
target: "_blank",
href: "https://discord.gg/YjYbwhS"
}, "DISCORD CHANNEL")), _react.default.createElement("p", {
className: 'large'
className: 'text--large'
}, _react.default.createElement("a", {
className: "link--primary",
target: "_blank",

2
client/build/components/ChannelAbout/index.js
View file

@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
var ChannelAbout = function ChannelAbout() {
return _react.default.createElement("div", null, _react.default.createElement("p", {
className: 'large'
className: 'text--large'
}, "Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're ", _react.default.createElement("a", {
className: "link--primary",
target: "_blank",

2
client/build/components/ChannelCreateNameInput/index.js
View file

@ -22,7 +22,7 @@ var ChannelCreateNameInput = function ChannelCreateNameInput(_ref) {
value: 'Name:'
}),
content: _react.default.createElement("div", {
className: "input-area--primary"
className: "input-area"
}, _react.default.createElement("span", null, "@"), _react.default.createElement("input", {
type: "text",
name: "channel",

2
client/build/components/ChannelCreatePasswordInput/index.js
View file

@ -21,7 +21,7 @@ var ChannelCreatePasswordInput = function ChannelCreatePasswordInput(_ref) {
value: 'Password:'
}),
content: _react.default.createElement("div", {
className: "input-area--primary"
className: "input-area"
}, _react.default.createElement("input", {
type: "password",
name: "password",

4
client/build/components/ChannelInfoDisplay/index.js
View file

@ -14,9 +14,9 @@ var ChannelInfoDisplay = function ChannelInfoDisplay(_ref) {
longId = _ref.longId,
shortId = _ref.shortId;
return _react.default.createElement("div", null, _react.default.createElement("h2", null, "channel name: ", name), _react.default.createElement("p", {
className: 'fine-print'
className: 'text--secondary'
}, "full channel id: ", longId), _react.default.createElement("p", {
className: 'fine-print'
className: 'text--secondary'
}, "short channel id: ", shortId));
};

2
client/build/components/ChannelLoginNameInput/index.js
View file

@ -21,7 +21,7 @@ var ChannelLoginNameInput = function ChannelLoginNameInput(_ref) {
value: 'Name:'
}),
content: _react.default.createElement("div", {
className: "input-area--primary"
className: "input-area"
}, _react.default.createElement("span", null, "@"), _react.default.createElement("input", {
type: "text",
id: "channel-login-name-input",

2
client/build/components/ChannelLoginPasswordInput/index.js
View file

@ -21,7 +21,7 @@ var ChannelLoginPasswordInput = function ChannelLoginPasswordInput(_ref) {
value: 'Password:'
}),
content: _react.default.createElement("div", {
className: "input-area--primary"
className: "input-area"
}, _react.default.createElement("input", {
type: "password",
id: "channel-login-password-input",

2
client/build/components/ChooseAnonymousPublishRadio/index.js
View file

@ -27,4 +27,4 @@ var ChooseAnonymousPublishRadio = function ChooseAnonymousPublishRadio(_ref) {
};
var _default = ChooseAnonymousPublishRadio;
exports.default = _default;
exports.default = _default;

2
client/build/components/ChooseChannelPublishRadio/index.js
View file

@ -27,4 +27,4 @@ var ChooseChannelPublishRadio = function ChooseChannelPublishRadio(_ref) {
};
var _default = ChooseChannelPublishRadio;
exports.default = _default;
exports.default = _default;

4
client/build/components/DropzoneDropItDisplay/index.js
View file

@ -11,9 +11,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
var DropzoneDropItDisplay = function DropzoneDropItDisplay() {
return _react.default.createElement("div", {
className: "dropzone-dropit-display"
className: 'dropzone-dropit-display'
}, _react.default.createElement("p", {
className: "interactive"
className: 'text--interactive'
}, "Drop it."));
};

17
client/build/components/DropzoneInstructionsDisplay/index.js
View file

@ -7,21 +7,24 @@ exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _FormFeedbackDisplay = _interopRequireDefault(require("@components/FormFeedbackDisplay"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var DropzoneInstructionsDisplay = function DropzoneInstructionsDisplay(_ref) {
var fileError = _ref.fileError;
return _react.default.createElement("div", {
className: "dropzone-instructions-display"
className: 'dropzone-instructions-display'
}, _react.default.createElement("p", {
className: 'large'
className: 'text--large'
}, "Drag & drop image or video here to publish"), _react.default.createElement("p", {
className: "small"
className: 'text--small'
}, "OR"), _react.default.createElement("p", {
className: "large underline"
}, "CHOOSE FILE"), _react.default.createElement("p", {
className: "small form-feedback--failure"
}, fileError));
className: 'text--large text--underline'
}, "CHOOSE FILE"), _react.default.createElement(_FormFeedbackDisplay.default, {
errorMessage: fileError,
defaultMessage: false
}));
};
var _default = DropzoneInstructionsDisplay;

16
client/build/components/FormFeedbackDisplay/index.js
View file

@ -12,15 +12,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
var FormFeedbackDisplay = function FormFeedbackDisplay(_ref) {
var errorMessage = _ref.errorMessage,
defaultMessage = _ref.defaultMessage;
return _react.default.createElement("div", null, errorMessage ? _react.default.createElement("div", {
className: 'form-feedback--failure'
}, _react.default.createElement("p", {
className: "small"
}, errorMessage)) : _react.default.createElement("div", {
return _react.default.createElement("div", {
className: 'form-feedback'
}, _react.default.createElement("p", {
className: "small"
}, defaultMessage)));
}, errorMessage ? _react.default.createElement("p", {
className: 'text--small text--failure'
}, errorMessage) : _react.default.createElement("div", null, defaultMessage ? _react.default.createElement("p", {
className: 'text--small text--secondary'
}, defaultMessage) : _react.default.createElement("p", {
className: 'text--small'
}, "\xA0")));
};
var _default = FormFeedbackDisplay;

11
client/build/components/PageLayout/index.js
View file

@ -11,8 +11,6 @@ var _SEO = _interopRequireDefault(require("@containers/SEO"));
var _NavBar = _interopRequireDefault(require("@components/NavBar"));
var _PageContent = _interopRequireDefault(require("@components/PageContent"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@ -43,11 +41,6 @@ function (_React$Component) {
}
_createClass(PageLayout, [{
key: "shouldComponentUpdate",
value: function shouldComponentUpdate() {
return false;
}
}, {
key: "render",
value: function render() {
return _react.default.createElement("div", {
@ -55,7 +48,9 @@ function (_React$Component) {
}, _react.default.createElement(_SEO.default, {
pageTitle: this.props.pageTitle,
pageUri: this.props.pageUri
}), _react.default.createElement(_NavBar.default, null), _react.default.createElement(_PageContent.default, null, this.props.children));
}), _react.default.createElement(_NavBar.default, null), _react.default.createElement("div", {
className: 'content'
}, this.props.content));
}
}]);

68
client/build/components/PageLayoutShowLite/index.js Normal file
View file

@ -0,0 +1,68 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _SEO = _interopRequireDefault(require("@containers/SEO"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
var PageLayoutShowLite =
/*#__PURE__*/
function (_React$Component) {
function PageLayoutShowLite() {
_classCallCheck(this, PageLayoutShowLite);
return _possibleConstructorReturn(this, _getPrototypeOf(PageLayoutShowLite).apply(this, arguments));
}
_createClass(PageLayoutShowLite, [{
key: "shouldComponentUpdate",
value: function shouldComponentUpdate() {
return false;
}
}, {
key: "render",
value: function render() {
return _react.default.createElement("div", {
className: 'page-layout-show-lite'
}, _react.default.createElement(_SEO.default, {
pageTitle: this.props.pageTitle,
asset: this.props.asset
}), _react.default.createElement("div", {
className: 'content'
}, this.props.content), _react.default.createElement("div", {
className: 'footer'
}, this.props.footer));
}
}]);
_inherits(PageLayoutShowLite, _React$Component);
return PageLayoutShowLite;
}(_react.default.Component);
var _default = PageLayoutShowLite;
exports.default = _default;

2
client/build/components/PublishFinePrint/index.js
View file

@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
var PublishFinePrint = function PublishFinePrint() {
return _react.default.createElement("p", {
className: "extra-small secondary"
className: 'text--extra-small text--secondary'
}, "By clicking 'Publish', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. ", _react.default.createElement("a", {
className: "link--primary",
target: "_blank",

6
client/build/components/PublishUrlMiddleDisplay/index.js
View file

@ -21,13 +21,13 @@ function UrlMiddle(_ref) {
if (selectedChannel === loggedInChannelName) {
return _react.default.createElement("span", {
id: "url-channel",
className: "url-text--secondary"
className: "publish-url-text"
}, loggedInChannelName, ":", loggedInChannelShortId, " /");
}
return _react.default.createElement("span", {
id: "url-channel-placeholder",
className: "url-text--secondary tooltip"
className: "publish-url-text tooltip"
}, "@channel", _react.default.createElement("span", {
className: "tooltip-text"
}, "Select a channel below"), " /");
@ -35,7 +35,7 @@ function UrlMiddle(_ref) {
return _react.default.createElement("span", {
id: "url-no-channel-placeholder",
className: "url-text--secondary tooltip"
className: "publish-url-text tooltip"
}, "xyz", _react.default.createElement("span", {
className: "tooltip-text"
}, "This will be a random id"), " /");

59
client/build/components/VerticalSplit/index.js Normal file
View file

@ -0,0 +1,59 @@
"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 }; }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
var VerticalSplit =
/*#__PURE__*/
function (_React$Component) {
function VerticalSplit() {
_classCallCheck(this, VerticalSplit);
return _possibleConstructorReturn(this, _getPrototypeOf(VerticalSplit).apply(this, arguments));
}
_createClass(VerticalSplit, [{
key: "shouldComponentUpdate",
value: function shouldComponentUpdate() {
return false;
}
}, {
key: "render",
value: function render() {
return _react.default.createElement("div", {
className: 'vertical-split'
}, this.props.top, this.props.bottom);
}
}]);
_inherits(VerticalSplit, _React$Component);
return VerticalSplit;
}(_react.default.Component);
var _default = VerticalSplit;
exports.default = _default;

4
client/build/containers/AssetDisplay/view.js
View file

@ -60,7 +60,9 @@ 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", 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, {
return _react.default.createElement("div", {
className: 'asset-display'
}, 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",

2
client/build/containers/ChannelCreateForm/view.js
View file

@ -136,7 +136,7 @@ function (_React$Component) {
value: 'Create Channel',
onClickHandler: this.handleSubmit
})) : _react.default.createElement("div", null, _react.default.createElement("p", {
className: 'fine-print'
className: 'text--small text--secondary'
}, status), _react.default.createElement(_ProgressBar.default, {
size: 12
})));

8
client/build/containers/PublishDisabledMessage/view.js
View file

@ -40,12 +40,10 @@ function (_React$Component) {
key: "render",
value: function render() {
var message = this.props.message;
return _react.default.createElement("div", {
className: "row dropzone--disabled row--tall flex-container--column flex-container--center-center"
}, _react.default.createElement("p", {
className: "secondary"
return _react.default.createElement("div", null, _react.default.createElement("p", {
className: 'text--secondary'
}, "Publishing is currently disabled."), _react.default.createElement("p", {
className: "secondary"
className: 'text--secondary'
}, message));
}
}]);

40
client/build/containers/PublishStatus/view.js
View file

@ -11,6 +11,10 @@ var _ProgressBar = _interopRequireDefault(require("@components/ProgressBar"));
var publishStates = _interopRequireWildcard(require("../../constants/publish_claim_states"));
var _SpaceAround = _interopRequireDefault(require("@components/SpaceAround"));
var _ButtonSecondary = _interopRequireDefault(require("@components/ButtonSecondary"));
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@ -49,40 +53,30 @@ function (_React$Component) {
status = _this$props.status,
message = _this$props.message,
clearFile = _this$props.clearFile;
return _react.default.createElement("div", {
className: "row row--tall flex-container--column flex-container--center-center"
}, status === publishStates.LOAD_START && _react.default.createElement("div", {
className: "row align-content-center"
}, _react.default.createElement("p", null, "File is loading to server"), _react.default.createElement("p", {
className: "primary"
}, "0%")), status === publishStates.LOADING && _react.default.createElement("div", null, _react.default.createElement("div", {
className: "row align-content-center"
}, _react.default.createElement("p", null, "File is loading to server"), _react.default.createElement("p", {
className: "primary"
}, message))), status === publishStates.PUBLISHING && _react.default.createElement("div", {
className: "row align-content-center"
}, _react.default.createElement("p", null, "Upload complete. Your file is now being published on the blockchain..."), _react.default.createElement(_ProgressBar.default, {
return _react.default.createElement(_SpaceAround.default, null, status === publishStates.LOAD_START && _react.default.createElement("div", null, _react.default.createElement("p", null, "File is loading to server"), _react.default.createElement("p", {
className: 'text--secondary'
}, "0%")), status === publishStates.LOADING && _react.default.createElement("div", null, _react.default.createElement("p", null, "File is loading to server"), _react.default.createElement("p", {
className: 'text--secondary'
}, message)), status === publishStates.PUBLISHING && _react.default.createElement("div", null, _react.default.createElement("p", null, "Upload complete. Your file is now being published on the blockchain..."), _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",
target: "blank",
href: "https://lbry.io/faq/what-is-lbry"
}, "Learn more."))), status === publishStates.SUCCESS && _react.default.createElement("div", {
className: "row align-content-center"
}, _react.default.createElement("p", null, "Your publish is complete! You are being redirected to it now."), _react.default.createElement("p", null, "If you are not automatically redirected, ", _react.default.createElement("a", {
}, "Learn more."))), status === publishStates.SUCCESS && _react.default.createElement("div", null, _react.default.createElement("p", null, "Your publish is complete! You are being redirected to it now."), _react.default.createElement("p", null, "If you are not automatically redirected, ", _react.default.createElement("a", {
className: "link--primary",
target: "_blank",
href: message
}, "click here."))), status === publishStates.FAILED && _react.default.createElement("div", {
className: "row align-content-center"
}, _react.default.createElement("p", null, "Something went wrong..."), _react.default.createElement("p", null, _react.default.createElement("strong", null, message)), _react.default.createElement("p", null, "For help, post the above error text in the #speech channel on the ", _react.default.createElement("a", {
}, "click here."))), status === publishStates.FAILED && _react.default.createElement("div", null, _react.default.createElement("p", null, "Something went wrong..."), _react.default.createElement("p", {
className: 'text--strong'
}, message), _react.default.createElement("p", null, "For help, post the above error text in the #speech channel on the ", _react.default.createElement("a", {
className: "link--primary",
href: "https://chat.lbry.io",
target: "_blank"
}, "lbry discord")), _react.default.createElement("button", {
className: "button--secondary",
onClick: clearFile
}, "Reset")));
}, "lbry discord")), _react.default.createElement(_ButtonSecondary.default, {
value: 'Reset',
onClickHandler: clearFile
})));
}
}]);

24
client/build/containers/PublishThumbnailInput/view.js
View file

@ -7,6 +7,10 @@ exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _FormFeedbackDisplay = _interopRequireDefault(require("@components/FormFeedbackDisplay"));
var _SpaceBetween = _interopRequireDefault(require("@components/SpaceBetween"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@ -173,29 +177,27 @@ function (_React$Component) {
onLoadedData: this.handleVideoLoadedData,
src: videoSource,
onSeeked: this.createThumbnail
}), sliderValue ? _react.default.createElement("div", null, _react.default.createElement("div", {
className: "flex-container--row flex-container--space-between-center",
}), sliderValue ? _react.default.createElement("div", null, _react.default.createElement(_SpaceBetween.default, {
style: {
width: '100%'
}
}, _react.default.createElement("span", {
className: "info-message"
className: "text--small text--secondary"
}, "0'00\""), _react.default.createElement("span", {
className: "info-message"
className: "text--small text--secondary"
}, totalMinutes, "'", totalSeconds, "\"")), _react.default.createElement("div", null, _react.default.createElement("input", {
type: "range",
min: sliderMinRange,
max: sliderMaxRange,
value: sliderValue,
className: "slider",
className: "input-slider",
onChange: this.handleSliderChange
}))) : _react.default.createElement("p", {
className: "info-message"
}, "loading... "), error ? _react.default.createElement("p", {
className: "info-message--failure"
}, error) : _react.default.createElement("p", {
className: "info-message"
}, "Use slider to set thumbnail"));
className: 'text--small text--secondary'
}, "loading... "), _react.default.createElement(_FormFeedbackDisplay.default, {
errorMessage: error,
defaultMessage: 'Use slider to set thumbnail'
}));
}
}]);

2
client/build/containers/PublishTitleInput/view.js
View file

@ -53,7 +53,7 @@ function (_React$Component) {
return _react.default.createElement("input", {
type: "text",
id: "publish-title",
className: "large full-width",
className: 'text--large input--full-width',
name: "title",
placeholder: "Give your content a title...",
onChange: this.handleInput,

2
client/build/containers/PublishUrlInput/view.js
View file

@ -113,7 +113,7 @@ function (_React$Component) {
}, _react.default.createElement("div", {
className: 'align-left'
}, _react.default.createElement("span", {
className: "url-text--secondary"
className: "publish-url-text"
}, "spee.ch\xA0/\xA0")), _react.default.createElement("div", {
className: 'shrink'
}, _react.default.createElement(_PublishUrlMiddleDisplay.default, {

2
client/build/containers/SiteDescription/view.js
View file

@ -40,7 +40,7 @@ function (_React$Component) {
key: "render",
value: function render() {
return _react.default.createElement("p", {
className: "extra-small"
className: 'text--extra-small'
}, this.props.siteDescription);
}
}]);

12
client/build/pages/AboutPage/index.js
View file

@ -49,11 +49,12 @@ function (_React$Component) {
value: function render() {
return _react.default.createElement(_PageLayout.default, {
pageTitle: 'About',
pageUri: 'about'
}, _react.default.createElement(_HorizontalSplit.default, {
leftSide: _react.default.createElement(_AboutSpeechOverview.default, null),
rightSide: _react.default.createElement(_AboutSpeechDetails.default, null)
}));
pageUri: 'about',
content: _react.default.createElement(_HorizontalSplit.default, {
leftSide: _react.default.createElement(_AboutSpeechOverview.default, null),
rightSide: _react.default.createElement(_AboutSpeechDetails.default, null)
})
});
}
}]);
@ -62,6 +63,5 @@ function (_React$Component) {
return AboutPage;
}(_react.default.Component);
;
var _default = AboutPage;
exports.default = _default;

5
client/build/pages/ErrorPage/index.js
View file

@ -46,8 +46,9 @@ function (_React$Component) {
var error = this.props.error;
return _react.default.createElement(_PageLayout.default, {
pageTitle: 'Error',
pageUri: 'error'
}, _react.default.createElement("p", null, error));
pageUri: 'error',
content: _react.default.createElement("p", null, error)
});
}
}]);

5
client/build/pages/FourOhFourPage/index.js
View file

@ -43,8 +43,9 @@ function (_React$Component) {
value: function render() {
return _react.default.createElement(_PageLayout.default, {
pageTitle: '404',
pageUri: '/404'
}, _react.default.createElement("h2", null, "404"), _react.default.createElement("p", null, "That page does not exist"));
pageUri: '/404',
content: _react.default.createElement("div", null, _react.default.createElement("h2", null, "404"), _react.default.createElement("p", null, "That page does not exist"))
});
}
}]);

5
client/build/pages/HomePage/index.js
View file

@ -45,8 +45,9 @@ function (_React$Component) {
value: function render() {
return _react.default.createElement(_PageLayout.default, {
pageTitle: 'Speech',
pageUri: ''
}, _react.default.createElement(_PublishTool.default, null));
pageUri: '',
content: _react.default.createElement(_PublishTool.default, null)
});
}
}]);

11
client/build/pages/LoginPage/view.js
View file

@ -59,11 +59,12 @@ function (_React$Component) {
value: function render() {
return _react.default.createElement(_PageLayout.default, {
pageTitle: 'Login',
pageUri: 'login'
}, _react.default.createElement(_HorizontalSplit.default, {
leftSide: _react.default.createElement(_ChannelAbout.default, null),
rightSide: _react.default.createElement(_ChannelTools.default, null)
}));
pageUri: 'login',
content: _react.default.createElement(_HorizontalSplit.default, {
leftSide: _react.default.createElement(_ChannelAbout.default, null),
rightSide: _react.default.createElement(_ChannelTools.default, null)
})
});
}
}]);

79
client/build/pages/MultisitePage/index.js
View file

@ -29,6 +29,45 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
var MultisiteContent = function MultisiteContent() {
return _react.default.createElement("div", null, _react.default.createElement("p", {
className: "text--pull-quote"
}, "Introducing Spee.ch Multisite"), _react.default.createElement("p", null, "Hi there! My name is ", _react.default.createElement("a", {
href: 'https://github.com/billbitt',
target: '_blank'
}, "Bill"), ", and I\u2019d like to speak with you about Spee.ch. No, not \u2018speech,\u2019 \u2018", _react.default.createElement("i", null, _react.default.createElement("a", {
href: 'https://spee.ch',
target: '_blank'
}, "Spee.ch.")), "\u2019 You know what, just read on..."), _react.default.createElement("h2", null, "A Little Background"), _react.default.createElement("p", null, "Wow, time flies! A little over a year ago Spee.ch was nothing more than a glimmer in the eye of LBRY CEO Jeremy Kaufman. At that time, the ", _react.default.createElement("a", {
href: 'https://lbry.io/faq/what-is-lbry',
target: '_blank'
}, "LBRY protocol"), " was still so early in its development, that there were no web-based applications for interacting with the LBRY blockchain. But then, something beautiful happened. On March 29th, 2017, Jeremy sat down with Jack, and together they ", _react.default.createElement("a", {
href: 'https://www.youtube.com/watch?v=C9LCapt_OYw',
target: '_blank'
}, "live coded a single-page PHP site"), " that could publish images to the LBRY network. And just like that, Spee.ch was born!"), _react.default.createElement("p", null, "Being that LBRY is an open source project, Jeremy ended the session by inviting community members who were interested in the project to take the reigns and see where Spee.ch could go. I was one of the devs that did just that, and it wasn\u2019t long before I was on a weekly call dedicated to this project with contributors from around the world."), _react.default.createElement("p", null, "At this point in time, the vision for Spee.ch was pretty simple: create a web-based hosting service that used the LBRY network as a database for free image and video sharing. In other words, an \u2018imgur on the blockchain.\u2019"), _react.default.createElement("h2", null, "Growth"), _react.default.createElement("p", null, "You might be wondering, \u201CSo, what has the Spee.ch team been doing since then?\u201D. Well, that is a great question. I\u2019m glad you asked."), _react.default.createElement("p", null, "As it turned out, the initial single-serving site was only the beginning. We wanted to add more features, improve user experience, and continue to rapidly innovate on new ideas to explore what web-based image-hosting on the blockchain could look like. And now -- a couple of re-designs, ", _react.default.createElement("a", {
href: 'https://github.com/lbryio/spee.ch',
target: '_blank'
}, "1,428 commits"), ", and ", _react.default.createElement("a", {
href: 'https://github.com/lbryio/spee.ch/graphs/contributors',
target: '_blank'
}, "18 contributors"), " later (as of the time of this writing) -- we\u2019ve been through a lot of changes. We changed the URL scheme, switched out the PHP for Javascript (sorry Jeremy!), added more HTML pages, removed those HTML pages, added Handlebars, removed most of Handlebars, added React, and... you get the picture."), _react.default.createElement("p", null, "It\u2019s been a lot of work, and through all of these changes, we have been guided by our original vision: develop a free web app that allows users to share images and video using a blockchain."), _react.default.createElement("p", null, "However, we ask ourselves constantly: what else can we be doing? What can we be doing differently? What features can we be doing better? And it is those kinds of questions that lead us to this post."), _react.default.createElement("h2", null, "A New Initiative"), _react.default.createElement("p", null, "As Spee.ch developed, we were lucky to find an amazing community spring up around the project that contributed bug reports, bug fixes, feature requests, pull requests, etc., but ultimately we are limited by the hours we have in the day, and while some requests get prioritized, others get shelved. "), _react.default.createElement("p", null, "So we started wondering: What if instead of having the community help us build our platform, we started helping them build theirs? We started mulling this over, and the more we thought about it the more we liked it. And thus, Spee.ch Multisite was born."), _react.default.createElement("h2", null, "Spee.ch Multisite"), _react.default.createElement("p", null, "The vision for Spee.ch Multisite is to maintain a foundational codebase that will support a greater variety of content-sharing web apps built on LBRY, allowing these apps to publish and retrieve content from the network via the blockchain."), _react.default.createElement("h3", null, "Run Your Own Spee.ch!"), _react.default.createElement("p", null, "Ok, here\u2019s the tl:dr: the purpose of the Spee.ch Multisite initiative is to enable you to run your own version of Spee.ch."), _react.default.createElement("p", null, "Spee.ch Multisite will provide a helpful set of basic code to get you going, but we purposefully want to give you control and provide a sandbox in which you can develop the look, content, and features for your site. The shared code base will be developed to support you in that quest. "), _react.default.createElement("p", null, "So if you don\u2019t want your site called or looking anything like Spee.ch, we encourage that! Don\u2019t hesitate to make it your own!"), _react.default.createElement("h3", null, "For the Community by the Community"), _react.default.createElement("p", null, "Initially, sites built on Spee.ch Multisite will look a lot like Spee.ch, but you will be able to add custom pages, update the look of components, and limit the content on your spee.ch site as you see fit."), _react.default.createElement("p", null, "Over time, it is our hope that the project will grow to incorporate many more components and features developed by us and the community to support a wide variety of functionalities beyond what the current spee.ch site is capable of."), _react.default.createElement("h3", null, "A Common Codebase"), _react.default.createElement("p", null, "If you have been following the project, you may have already noticed that the original github repository has grown into two: ", _react.default.createElement("a", {
href: 'https://github.com/lbryio/www.spee.ch',
target: '_blank'
}, "www.spee.ch"), " and ", _react.default.createElement("a", {
href: 'https://github.com/lbryio/spee.ch',
target: '_blank'
}, "spee.ch"), ". I will save the specifics for a future tech-focused blog post in the coming weeks, but the reason for these changes is to modularise the code so that is it easier for anyone who wants to run their own version of Spee.ch to do so, and to be able to customize their Spee.ch to their liking."), _react.default.createElement("h3", null, "What About the Flagship Spee.ch Site?"), _react.default.createElement("p", null, "Don\u2019t worry! If you like using ", _react.default.createElement("a", {
href: 'https://spee.ch',
target: '_blank'
}, "Spee.ch"), " and have no intention of running your own site, we will still be here running it for you! We are dedicated to pushing it forward and using it as patient zero for all additions to the Spee.ch Multisite codebase."), _react.default.createElement("h2", null, "Join Us"), _react.default.createElement("p", null, "Friday, May 18, we will be hosting a live demo showcasing the alpha version of Spee.ch Multisite. It\u2019s still quite young, but that\u2019s the point: we want to realize this vision together."), _react.default.createElement("p", null, _react.default.createElement("b", null, _react.default.createElement("a", {
href: 'https://speech.rsvpify.com/',
target: '_blank'
}, "CLICK HERE TO RSVP!"))), _react.default.createElement("p", null, "At this first demonstration, we will walk through preparing a server environment, installing LBRY and Spee.ch, and how to make local changes to your Spee.ch instance. Details below:"), _react.default.createElement("ul", null, _react.default.createElement("li", null, "When: Friday, May 18, 2018"), _react.default.createElement("li", null, "Time: 5:00 p.m. PST"), _react.default.createElement("li", null, "Where: Google Hangouts"), _react.default.createElement("li", null, "Link: ", _react.default.createElement("a", {
href: 'https://meet.google.com/aex-ghqg-kcs',
target: '_blank'
}, "meet.google.com/aex-ghqg-kcs")), _react.default.createElement("li", null, "System Requirements: If you have a server, please make sure you have MySql, Node and NPM installed. If you need help installing the above, or if you need a server to run your own instance on, please join the Hangout 30 minutes ahead of time and we will help get you set up =]"), _react.default.createElement("li", null, "Questions: hello@lbry.io")));
};
var MultisitePage =
/*#__PURE__*/
function (_React$Component) {
@ -43,43 +82,9 @@ function (_React$Component) {
value: function render() {
return _react.default.createElement(_PageLayout.default, {
pageTitle: 'Multisite',
pageUri: '/multisite'
}, _react.default.createElement("p", {
className: "text--pull-quote"
}, "Introducing Spee.ch Multisite"), _react.default.createElement("p", null, "Hi there! My name is ", _react.default.createElement("a", {
href: 'https://github.com/billbitt',
target: '_blank'
}, "Bill"), ", and I\u2019d like to speak with you about Spee.ch. No, not \u2018speech,\u2019 \u2018", _react.default.createElement("i", null, _react.default.createElement("a", {
href: 'https://spee.ch',
target: '_blank'
}, "Spee.ch.")), "\u2019 You know what, just read on..."), _react.default.createElement("h2", null, "A Little Background"), _react.default.createElement("p", null, "Wow, time flies! A little over a year ago Spee.ch was nothing more than a glimmer in the eye of LBRY CEO Jeremy Kaufman. At that time, the ", _react.default.createElement("a", {
href: 'https://lbry.io/faq/what-is-lbry',
target: '_blank'
}, "LBRY protocol"), " was still so early in its development, that there were no web-based applications for interacting with the LBRY blockchain. But then, something beautiful happened. On March 29th, 2017, Jeremy sat down with Jack, and together they ", _react.default.createElement("a", {
href: 'https://www.youtube.com/watch?v=C9LCapt_OYw',
target: '_blank'
}, "live coded a single-page PHP site"), " that could publish images to the LBRY network. And just like that, Spee.ch was born!"), _react.default.createElement("p", null, "Being that LBRY is an open source project, Jeremy ended the session by inviting community members who were interested in the project to take the reigns and see where Spee.ch could go. I was one of the devs that did just that, and it wasn\u2019t long before I was on a weekly call dedicated to this project with contributors from around the world."), _react.default.createElement("p", null, "At this point in time, the vision for Spee.ch was pretty simple: create a web-based hosting service that used the LBRY network as a database for free image and video sharing. In other words, an \u2018imgur on the blockchain.\u2019"), _react.default.createElement("h2", null, "Growth"), _react.default.createElement("p", null, "You might be wondering, \u201CSo, what has the Spee.ch team been doing since then?\u201D. Well, that is a great question. I\u2019m glad you asked."), _react.default.createElement("p", null, "As it turned out, the initial single-serving site was only the beginning. We wanted to add more features, improve user experience, and continue to rapidly innovate on new ideas to explore what web-based image-hosting on the blockchain could look like. And now -- a couple of re-designs, ", _react.default.createElement("a", {
href: 'https://github.com/lbryio/spee.ch',
target: '_blank'
}, "1,428 commits"), ", and ", _react.default.createElement("a", {
href: 'https://github.com/lbryio/spee.ch/graphs/contributors',
target: '_blank'
}, "18 contributors"), " later (as of the time of this writing) -- we\u2019ve been through a lot of changes. We changed the URL scheme, switched out the PHP for Javascript (sorry Jeremy!), added more HTML pages, removed those HTML pages, added Handlebars, removed most of Handlebars, added React, and... you get the picture."), _react.default.createElement("p", null, "It\u2019s been a lot of work, and through all of these changes, we have been guided by our original vision: develop a free web app that allows users to share images and video using a blockchain."), _react.default.createElement("p", null, "However, we ask ourselves constantly: what else can we be doing? What can we be doing differently? What features can we be doing better? And it is those kinds of questions that lead us to this post."), _react.default.createElement("h2", null, "A New Initiative"), _react.default.createElement("p", null, "As Spee.ch developed, we were lucky to find an amazing community spring up around the project that contributed bug reports, bug fixes, feature requests, pull requests, etc., but ultimately we are limited by the hours we have in the day, and while some requests get prioritized, others get shelved. "), _react.default.createElement("p", null, "So we started wondering: What if instead of having the community help us build our platform, we started helping them build theirs? We started mulling this over, and the more we thought about it the more we liked it. And thus, Spee.ch Multisite was born."), _react.default.createElement("h2", null, "Spee.ch Multisite"), _react.default.createElement("p", null, "The vision for Spee.ch Multisite is to maintain a foundational codebase that will support a greater variety of content-sharing web apps built on LBRY, allowing these apps to publish and retrieve content from the network via the blockchain."), _react.default.createElement("h3", null, "Run Your Own Spee.ch!"), _react.default.createElement("p", null, "Ok, here\u2019s the tl:dr: the purpose of the Spee.ch Multisite initiative is to enable you to run your own version of Spee.ch."), _react.default.createElement("p", null, "Spee.ch Multisite will provide a helpful set of basic code to get you going, but we purposefully want to give you control and provide a sandbox in which you can develop the look, content, and features for your site. The shared code base will be developed to support you in that quest. "), _react.default.createElement("p", null, "So if you don\u2019t want your site called or looking anything like Spee.ch, we encourage that! Don\u2019t hesitate to make it your own!"), _react.default.createElement("h3", null, "For the Community by the Community"), _react.default.createElement("p", null, "Initially, sites built on Spee.ch Multisite will look a lot like Spee.ch, but you will be able to add custom pages, update the look of components, and limit the content on your spee.ch site as you see fit."), _react.default.createElement("p", null, "Over time, it is our hope that the project will grow to incorporate many more components and features developed by us and the community to support a wide variety of functionalities beyond what the current spee.ch site is capable of."), _react.default.createElement("h3", null, "A Common Codebase"), _react.default.createElement("p", null, "If you have been following the project, you may have already noticed that the original github repository has grown into two: ", _react.default.createElement("a", {
href: 'https://github.com/lbryio/www.spee.ch',
target: '_blank'
}, "www.spee.ch"), " and ", _react.default.createElement("a", {
href: 'https://github.com/lbryio/spee.ch',
target: '_blank'
}, "spee.ch"), ". I will save the specifics for a future tech-focused blog post in the coming weeks, but the reason for these changes is to modularise the code so that is it easier for anyone who wants to run their own version of Spee.ch to do so, and to be able to customize their Spee.ch to their liking."), _react.default.createElement("h3", null, "What About the Flagship Spee.ch Site?"), _react.default.createElement("p", null, "Don\u2019t worry! If you like using ", _react.default.createElement("a", {
href: 'https://spee.ch',
target: '_blank'
}, "Spee.ch"), " and have no intention of running your own site, we will still be here running it for you! We are dedicated to pushing it forward and using it as patient zero for all additions to the Spee.ch Multisite codebase."), _react.default.createElement("h2", null, "Join Us"), _react.default.createElement("p", null, "Friday, May 18, we will be hosting a live demo showcasing the alpha version of Spee.ch Multisite. It\u2019s still quite young, but that\u2019s the point: we want to realize this vision together."), _react.default.createElement("p", null, _react.default.createElement("b", null, _react.default.createElement("a", {
href: 'https://speech.rsvpify.com/',
target: '_blank'
}, "CLICK HERE TO RSVP!"))), _react.default.createElement("p", null, "At this first demonstration, we will walk through preparing a server environment, installing LBRY and Spee.ch, and how to make local changes to your Spee.ch instance. Details below:"), _react.default.createElement("ul", null, _react.default.createElement("li", null, "When: Friday, May 18, 2018"), _react.default.createElement("li", null, "Time: 5:00 p.m. PST"), _react.default.createElement("li", null, "Where: Google Hangouts"), _react.default.createElement("li", null, "Link: ", _react.default.createElement("a", {
href: 'https://meet.google.com/aex-ghqg-kcs',
target: '_blank'
}, "meet.google.com/aex-ghqg-kcs")), _react.default.createElement("li", null, "System Requirements: If you have a server, please make sure you have MySql, Node and NPM installed. If you need help installing the above, or if you need a server to run your own instance on, please join the Hangout 30 minutes ahead of time and we will help get you set up =]"), _react.default.createElement("li", null, "Questions: hello@lbry.io")));
pageUri: '/multisite',
content: _react.default.createElement(MultisiteContent, null)
});
}
}]);

11
client/build/pages/ShowAssetDetails/view.js
View file

@ -57,11 +57,12 @@ function (_React$Component) {
var name = asset.claimData.name;
return _react.default.createElement(_PageLayout.default, {
pageTitle: "".concat(name, " - details"),
asset: asset
}, _react.default.createElement(_AssetTitle.default, null), _react.default.createElement(_HorizontalSplit.default, {
leftSide: _react.default.createElement(_AssetDisplay.default, null),
rightSide: _react.default.createElement(_AssetInfo.default, null)
}));
asset: asset,
content: _react.default.createElement("div", null, _react.default.createElement(_AssetTitle.default, null), _react.default.createElement(_HorizontalSplit.default, {
leftSide: _react.default.createElement(_AssetDisplay.default, null),
rightSide: _react.default.createElement(_AssetInfo.default, null)
}))
});
}
return _react.default.createElement(_ErrorPage.default, {

40
client/build/pages/ShowAssetLite/view.js
View file

@ -9,10 +9,12 @@ var _react = _interopRequireDefault(require("react"));
var _reactRouterDom = require("react-router-dom");
var _SEO = _interopRequireDefault(require("@containers/SEO"));
var _PageLayoutShowLite = _interopRequireDefault(require("@components/PageLayoutShowLite"));
var _AssetDisplay = _interopRequireDefault(require("@containers/AssetDisplay"));
var _SpaceAround = _interopRequireDefault(require("@components/SpaceAround"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@ -51,27 +53,26 @@ function (_React$Component) {
var _asset$claimData = asset.claimData,
name = _asset$claimData.name,
claimId = _asset$claimData.claimId;
return _react.default.createElement("div", {
className: "row--tall flex-container--column flex-container--center-center show-lite-container"
}, _react.default.createElement(_SEO.default, {
return _react.default.createElement(_PageLayoutShowLite.default, {
pageTitle: name,
asset: asset
}), _react.default.createElement(_AssetDisplay.default, null), _react.default.createElement("p", {
className: "extra-small"
}, _react.default.createElement(_reactRouterDom.Link, {
id: "asset-boilerpate",
className: "link--primary",
to: "/".concat(claimId, "/").concat(name)
}, " hosted on spee.ch"), " via the ", _react.default.createElement("a", {
className: "link--primary",
href: 'https://lbry.io/get',
target: '_blank'
}, "LBRY"), " blockchain"));
asset: asset,
content: _react.default.createElement(_AssetDisplay.default, null),
footer: _react.default.createElement(_SpaceAround.default, null, _react.default.createElement("p", {
className: 'text--extra-small'
}, _react.default.createElement(_reactRouterDom.Link, {
className: "link--primary",
to: "/".concat(claimId, "/").concat(name)
}, " hosted on spee.ch"), " via the ", _react.default.createElement("a", {
className: "link--primary",
href: 'https://lbry.io/get',
target: '_blank'
}, "LBRY"), " blockchain"))
});
}
return _react.default.createElement("div", {
className: "row row--tall row--padded flex-container--column flex-container--center-center"
}, _react.default.createElement("p", null, "loading asset data..."));
return _react.default.createElement("div", null, _react.default.createElement("p", {
className: 'text--secondary'
}, "loading asset data..."));
}
}]);
@ -80,6 +81,5 @@ function (_React$Component) {
return ShowLite;
}(_react.default.Component);
;
var _default = ShowLite;
exports.default = _default;

13
client/build/pages/ShowChannel/view.js
View file

@ -55,12 +55,13 @@ function (_React$Component) {
shortId = channel.shortId;
return _react.default.createElement(_PageLayout.default, {
pageTitle: name,
channel: channel
}, _react.default.createElement(_ChannelInfoDisplay.default, {
name: name,
longId: longId,
shortId: shortId
}), _react.default.createElement(_ChannelClaimsDisplay.default, null));
channel: channel,
content: _react.default.createElement("div", null, _react.default.createElement(_ChannelInfoDisplay.default, {
name: name,
longId: longId,
shortId: shortId
}), _react.default.createElement(_ChannelClaimsDisplay.default, null))
});
}
return _react.default.createElement(_ErrorPage.default, {

19
client/scss/_align.scss
View file

@ -1,19 +0,0 @@
.align-content-left {
text-align: left;
}
.align-content-center {
text-align: center;
}
.align-content-right {
text-align: right;
}
.align-content-top {
vertical-align: top;
}
.align-content-bottom {
vertical-align: bottom;
}

12
client/scss/_asset.scss
View file

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

44
client/scss/_flex-container.scss
View file

@ -1,44 +0,0 @@
.flex-container--column, .flex-container--row {
display: -webkit-flex;
display: flex;
}
.flex-container--column {
-webkit-flex-direction: column;
flex-direction: column;
}
.flex-container--row {
-webkit-flex-direction: row;
flex-direction: row;
}
.flex-container--wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-container--left-bottom {
justify-content: flex-start;
align-items: baseline;
}
.flex-container--left-center {
justify-content: flex-start;
align-items: center;
}
.flex-container--center-center {
justify-content: center;
align-items: center;
}
.flex-container--space-between-bottom {
justify-content: space-between;
align-items: baseline;
}
.flex-container--space-between-center {
justify-content: space-between;
align-items: center;
}

53
client/scss/_input.scss
View file

@ -2,22 +2,22 @@ input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
input, select, textarea {
input {
margin: 0;
outline: none;
padding: $thin-padding;
padding: $input-padding;
border: 0;
background-color: $background-color;
display: inline-block;
.full-width {
width: 100%;
}
}
option {
font-family: monospace;
.input-text {
}
.input-slider {
width: 100%
}
.input-checkbox {
border: 1px solid black;
@ -37,43 +37,14 @@ option {
cursor: pointer;
}
.select--arrow {
-moz-appearance:none;
-webkit-appearance: none;
background: url('icon/downArrow.svg') no-repeat right;
cursor: pointer;
padding-right: 1.5em;
}
// input area wrapper
.input-area--primary {
border-bottom: 1px solid #9b9b9b;
}
.input-text--primary:focus, .select--primary:focus {
.input-area {
border-bottom: 1px solid $secondary-color;
}
.textarea--primary {
border-bottom: 1px solid $secondary-color;
}
// modifiers
.input-area--primary:focus {
border-bottom: 1px solid $primary-color;
}
.url-text--primary, .url-text--secondary {
margin: 0;
padding: 0;
}
.url-text--primary {
color: $primary-color;
}
.url-text--secondary {
color: $secondary-color;
}
.slider {
width: 100%
.input--full-width {
width: $input-full-width;
}

7
client/scss/_link.scss
View file

@ -1,5 +1,3 @@
/* LINKS */
a, a:visited {
text-decoration: none;
}
@ -14,11 +12,6 @@ a, a:visited {
color: $secondary-color;
}
.link--disabled-text {
color: $secondary-color;
text-decoration: underline;
}
.link--nav {
color: $primary-color;
border-bottom: 2px solid white;

17
client/scss/_select.scss Normal file
View file

@ -0,0 +1,17 @@
select {
margin: 0;
outline: none;
padding: $input-padding;
border: 0;
background-color: $background-color;
display: inline-block;
}
.select--arrow {
-moz-appearance:none;
-webkit-appearance: none;
background: url('icon/downArrow.svg') no-repeat right;
cursor: pointer;
padding-right: 1.5em;
padding-left: $input-padding
}

78
client/scss/_text.scss
View file

@ -5,51 +5,63 @@ h1, h2, h3, h4, p {
}
h1 {
font-size: xx-large;
}
h2, h3 {
font-size: x-large;
font-size: 2.5em;
}
h2 {
text-decoration: underline;
font-size: xx-large;
}
h3 {
font-size: x-large;
font-weight: bold;
}
p, body, button, input, textarea, label, select, option {
font-family: 'Lekton', monospace;
font-size: large;
.extra-large {
font-size: 2.5em;
}
.large {
font-size: x-large;
}
.small {
font-size: medium;
}
.extra-small {
font-size: small;
}
.underline {
text-decoration: underline;
}
.primary {
color: $primary-color;
}
.secondary {
color: $secondary-color;
}
.tertiary {
color: $tertiary-color;
}
.interactive {
color: $interactive-color;
}
}
.text--extra-large {
font-size: 2.5em;
}
.text--large {
font-size: x-large;
}
.text--small {
font-size: medium;
}
.text--extra-small {
font-size: small;
}
.text--underline {
text-decoration: underline;
}
.text--primary {
color: $primary-color;
}
.text--secondary {
color: $secondary-color;
}
.text--tertiary {
color: $tertiary-color;
}
.text--interactive {
color: $interactive-color;
}
.text--failure {
color: $failure-color;
}
.text--success {
color: $success-color;
}

10
client/scss/_textarea.scss Normal file
View file

@ -0,0 +1,10 @@
textarea {
margin: 0;
outline: none;
padding: $input-padding;
border: 0;
border-bottom: 1px solid $secondary-color;
background-color: $background-color;
display: inline-block;
width: $input-full-width;
}

11
client/scss/_variables.scss
View file

@ -2,7 +2,9 @@ $base-color: white;
$primary-color: black;
$secondary-color: #9b9b9b;
$tertiary-color: #ccccc0;
$interactive-color : blue;
$interactive-color: blue;
$success-color: green;
$failure-color: red;
$primary-padding: 3em;
$secondary-padding: 2em;
@ -11,3 +13,10 @@ $full-width-thin-padding: calc(100% - 0.6em);
$background-color: $base-color;
$font-color: $primary-color;
$button-border-width: 1px;
$button-border-strength: solid;
$button-full-width: calc(100% - 2px);
$input-padding: 0.3em;
$input-full-width: calc(100% - 0.6em);

16
client/scss/all.scss
View file

@ -5,16 +5,15 @@
@import '_body';
@import '_react-app';
@import '_text';
@import '_flex-container';
@import '_tooltip';
@import '_link';
@import '_input';
@import '_select';
@import '_textarea';
@import '_video';
@import '_asset';
@import '_asset-preview';
@import '_progress-bar';
@import '_publish-preview';
@import 'components/_asset-display';
@import 'components/_asset-preview';
@import 'components/_button';
@import 'components/_button-primary';
@import 'components/_button-secondary';
@ -26,10 +25,15 @@
@import 'components/_label';
@import 'components/_nav-bar';
@import 'components/_page-layout';
@import 'components/_page-layout-show-lite';
@import 'components/_page-content';
@import 'components/_progress-bar';
@import 'components/_publish-preview';
@import 'components/_space-between';
@import 'components/_space-around';
@import 'components/_row';
@import 'components/_vertical-split';
@import 'components/_tooltip';
@import 'containers/_dropzone';
@import 'containers/_publish-url-input';

12
client/scss/components/_asset-display.scss Normal file
View file

@ -0,0 +1,12 @@
.asset-display {
flex: 1 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.asset-image, .asset-video {
max-width: 100%;
max-height: 100%;
margin : 0;
}

0
client/scss/_asset-preview.scss → client/scss/components/_asset-preview.scss
View file

10
client/scss/components/_button-primary.scss
View file

@ -1,7 +1,8 @@
.button-primary, .button-primary:focus, .button-primary:active {
border: $button-border-width $button-border-strength $primary-color;
padding: 0.5em;
margin-top: $thin-padding;
margin-bottom: $thin-padding;
padding: $thin-padding;
color: $primary-color;
background-color: $background-color;
outline: 0;
@ -26,7 +27,8 @@
}
.button-primary--jumbo, .button-primary--jumbo:focus, .button-primary--jumbo:active {
width: $button-max-width;
padding: $secondary-padding;
width: $button-full-width;
padding-top: $secondary-padding;
padding-bottom: $secondary-padding;
font-size: x-large;
}

4
client/scss/components/_button.scss
View file

@ -1,7 +1,3 @@
button {
cursor: pointer;
}
$button-border-width: 1px;
$button-border-strength: solid;
$button-max-width: calc(100% - 2px);

9
client/scss/components/_form-feedback.scss
View file

@ -1,11 +1,16 @@
.form-feedback {
padding-top: $thin-padding;
padding-bottom: $thin-padding;
}
.form-feedback--default {
color: $secondary-color;
}
.form-feedback--success {
color: green;
color: $success-color;
}
.form-feedback--failure {
color: red;
color: $failure-color;
}

12
client/scss/components/_nav-bar.scss
View file

@ -3,20 +3,10 @@
padding-right: $primary-padding;
border-bottom: 0.5px solid $tertiary-color;
.select--arrow {
padding: 0 1.5em 0 0;
padding: 0 1.5em 0 $input-padding;
}
}
// old
.nav-bar--left {
align-self: center;
}
.nav-bar-tagline {
font-size: small;
}
.nav-bar-link {
padding: $secondary-padding;
display: inline-block;

14
client/scss/components/_page-layout-show-lite.scss Normal file
View file

@ -0,0 +1,14 @@
.page-layout-show-lite {
flex: 1 0 auto;
display: flex;
flex-direction: column;
margin: $primary-padding;
.content {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
.footer {
flex: 0 1 auto;
}
}

7
client/scss/components/_page-layout.scss
View file

@ -2,4 +2,11 @@
flex: 1 0 auto;
display: flex;
flex-direction: column;
.content {
flex: 1 0 auto;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
margin: $primary-padding;
}
}

4
client/scss/_progress-bar.scss → client/scss/components/_progress-bar.scss
View file

@ -1,7 +1,7 @@
.progress-bar--inactive {
color: lightgrey;
color: $secondary-color;
}
.progress-bar--active {
color: #4156C5;
color: $primary-color;
}

0
client/scss/_publish-preview.scss → client/scss/components/_publish-preview.scss
View file

0
client/scss/_tooltip.scss → client/scss/components/_tooltip.scss
View file

7
client/scss/components/_vertical-split.scss Normal file
View file

@ -0,0 +1,7 @@
.vertical-split {
flex : 1 0 auto;
display : flex;
flex-direction : column;
justify-content: space-between;
align-items : center;
};

7
client/scss/containers/_publish-url-input.scss
View file

@ -12,3 +12,10 @@
flex: 1 0 auto;
};
}
.publish-url-text {
margin: 0;
padding: 0;
color: $secondary-color;
}

8
client/src/components/AboutSpeechDetails/index.jsx
View file

@ -5,19 +5,19 @@ const AboutSpeechDetails = () => {
return (
<div>
<Row>
<p className={'large'}>
<p className={'text--large'}>
Spee.ch is a media-hosting site that reads from and publishes content to the <a className='link--primary' href='https://lbry.io'>LBRY</a> blockchain.
</p>
<p className={'large'}>
<p className={'text--large'}>
Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the <a className='link--primary' href='https://lbry.io/get'>LBRY</a> network. This means that your images are stored in multiple locations without a single point of failure.
</p>
</Row>
<Row>
<h3>Contribute</h3>
<p className={'large'}>
<p className={'text--large'}>
If you have an idea for your own spee.ch-like site on top of LBRY, fork our <a className='link--primary' href='https://github.com/lbryio/spee.ch'>github repo</a> and go to town!
</p>
<p className={'large'}>
<p className={'text--large'}>
If you want to improve spee.ch, join our <a className='link--primary' href='https://chat.lbry.io'>discord channel</a> or solve one of our <a className='link--primary' href='https://github.com/lbryio/spee.ch/issues'>github issues</a>.
</p>
</Row>

10
client/src/components/AboutSpeechOverview/index.jsx
View file

@ -5,19 +5,19 @@ const AboutSpeechOverview = () => {
return (
<div>
<Row>
<p className='extra-large'>Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.</p>
<p className={'text--extra-large'}>Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.</p>
</Row>
<Row>
<p className={'large'}>
<p className={'text--large'}>
<a className='link--primary' target='_blank' href='https://twitter.com/spee_ch'>TWITTER</a>
</p>
<p className={'large'}>
<p className={'text--large'}>
<a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch'>GITHUB</a>
</p>
<p className={'large'}>
<p className={'text--large'}>
<a className='link--primary' target='_blank' href='https://discord.gg/YjYbwhS'>DISCORD CHANNEL</a>
</p>
<p className={'large'}>
<p className={'text--large'}>
<a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch/blob/master/README.md'>DOCUMENTATION</a>
</p>
</Row>

2
client/src/components/ChannelAbout/index.jsx
View file

@ -3,7 +3,7 @@ import React from 'react';
const ChannelAbout = () => {
return (
<div>
<p className={'large'}>Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're <a className='link--primary' target='_blank' href='/@catalonia2017:43dcf47163caa21d8404d9fe9b30f78ef3e146a8'>documenting important events</a>, or making a public repository for <a className='link--primary' target='_blank' href='/@catGifs'>cat gifs</a> (password: '1234'), try creating a channel for it!</p>
<p className={'text--large'}>Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're <a className='link--primary' target='_blank' href='/@catalonia2017:43dcf47163caa21d8404d9fe9b30f78ef3e146a8'>documenting important events</a>, or making a public repository for <a className='link--primary' target='_blank' href='/@catGifs'>cat gifs</a> (password: '1234'), try creating a channel for it!</p>
</div>
);
};

2
client/src/components/ChannelCreateNameInput/index.jsx
View file

@ -9,7 +9,7 @@ const ChannelCreateNameInput = ({ value, error, handleNameInput }) => {
<Label value={'Name:'} />
}
content={
<div className='input-area--primary'>
<div className='input-area'>
<span>@</span>
<input
type='text'

2
client/src/components/ChannelCreatePasswordInput/index.jsx
View file

@ -9,7 +9,7 @@ const ChannelCreatePasswordInput = ({ value, handlePasswordInput }) => {
<Label value={'Password:'} />
}
content={
<div className='input-area--primary'>
<div className='input-area'>
<input
type='password'
name='password'

4
client/src/components/ChannelInfoDisplay/index.jsx
View file

@ -4,8 +4,8 @@ const ChannelInfoDisplay = ({name, longId, shortId}) => {
return (
<div>
<h2>channel name: {name}</h2>
<p className={'fine-print'}>full channel id: {longId}</p>
<p className={'fine-print'}>short channel id: {shortId}</p>
<p className={'text--secondary'}>full channel id: {longId}</p>
<p className={'text--secondary'}>short channel id: {shortId}</p>
</div>
);
};

2
client/src/components/ChannelLoginNameInput/index.jsx
View file

@ -9,7 +9,7 @@ const ChannelLoginNameInput = ({ channelName, handleInput }) => {
<Label value={'Name:'} />
}
content={
<div className='input-area--primary'>
<div className='input-area'>
<span>@</span>
<input
type='text'

2
client/src/components/ChannelLoginPasswordInput/index.jsx
View file

@ -9,7 +9,7 @@ const ChannelLoginPasswordInput = ({ channelPassword, handleInput }) => {
<Label value={'Password:'} />
}
content={
<div className='input-area--primary'>
<div className='input-area'>
<input
type='password'
id='channel-login-password-input'

4
client/src/components/DropzoneDropItDisplay/index.jsx
View file

@ -2,8 +2,8 @@ import React from 'react';
const DropzoneDropItDisplay = () => {
return (
<div className='dropzone-dropit-display'>
<p className='interactive'>Drop it.</p>
<div className={'dropzone-dropit-display'}>
<p className={'text--interactive'}>Drop it.</p>
</div>
);
}

22
client/src/components/DropzoneInstructionsDisplay/index.jsx
View file

@ -1,20 +1,16 @@
import React from 'react';
import FormFeedbackDisplay from '@components/FormFeedbackDisplay';
const DropzoneInstructionsDisplay = ({fileError}) => {
return (
<div className='dropzone-instructions-display'>
<p className={'large'}>
Drag & drop image or video here to publish
</p>
<p className='small'>
OR
</p>
<p className='large underline'>
CHOOSE FILE
</p>
<p className='small form-feedback--failure'>
{fileError}
</p>
<div className={'dropzone-instructions-display'}>
<p className={'text--large'}>Drag & drop image or video here to publish</p>
<p className={'text--small'}>OR</p>
<p className={'text--large text--underline'}>CHOOSE FILE</p>
<FormFeedbackDisplay
errorMessage={fileError}
defaultMessage={false}
/>
</div>
);
};

14
client/src/components/FormFeedbackDisplay/index.jsx
View file

@ -2,14 +2,16 @@ import React from 'react';
const FormFeedbackDisplay = ({ errorMessage, defaultMessage }) => {
return (
<div>
<div className={'form-feedback'}>
{ errorMessage ? (
<div className={'form-feedback--failure'}>
<p className='small'>{errorMessage}</p>
</div>
<p className={'text--small text--failure'}>{errorMessage}</p>
) : (
<div className={'form-feedback'}>
<p className='small'>{defaultMessage}</p>
<div>
{ defaultMessage ? (
<p className={'text--small text--secondary'}>{defaultMessage}</p>
) : (
<p className={'text--small'}>&nbsp;</p>
)}
</div>
)}
</div>

16
client/src/components/PageContent/index.jsx
View file

@ -1,16 +0,0 @@
import React from 'react';
class PageContent extends React.Component {
shouldComponentUpdate () {
return false;
}
render () {
return (
<div className={'page-content'}>
{this.props.children}
</div>
);
}
}
export default PageContent;

10
client/src/components/PageLayout/index.jsx
View file

@ -2,20 +2,16 @@ import React from 'react';
import SEO from '@containers/SEO';
import NavBar from '@components/NavBar';
import PageContent from '@components/PageContent';
class PageLayout extends React.Component {
shouldComponentUpdate () {
return false;
}
render () {
return (
<div className={'page-layout'}>
<SEO pageTitle={this.props.pageTitle} pageUri={this.props.pageUri} />
<NavBar />
<PageContent>
{this.props.children}
</PageContent>
<div className={'content'}>
{this.props.content}
</div>
</div>
);
}

24
client/src/components/PageLayoutShowLite/index.jsx Normal file
View file

@ -0,0 +1,24 @@
import React from 'react';
import SEO from '@containers/SEO';
class PageLayoutShowLite extends React.Component {
shouldComponentUpdate () {
return false;
}
render () {
return (
<div className={'page-layout-show-lite'}>
<SEO pageTitle={this.props.pageTitle} asset={this.props.asset} />
<div className={'content'}>
{this.props.content}
</div>
<div className={'footer'}>
{this.props.footer}
</div>
</div>
);
}
}
export default PageLayoutShowLite;

2
client/src/components/PublishFinePrint/index.jsx
View file

@ -2,7 +2,7 @@ import React from 'react';
const PublishFinePrint = () => {
return (
<p className='extra-small secondary'>
<p className={'text--extra-small text--secondary'}>
By clicking 'Publish', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a className='link--primary' target='_blank' href='https://lbry.io/learn'>Read more.</a>
</p>
);

6
client/src/components/PublishUrlMiddleDisplay/index.jsx
View file

@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
function UrlMiddle ({publishInChannel, selectedChannel, loggedInChannelName, loggedInChannelShortId}) {
if (publishInChannel) {
if (selectedChannel === loggedInChannelName) {
return <span id='url-channel' className='url-text--secondary'>{loggedInChannelName}:{loggedInChannelShortId} /</span>;
return <span id='url-channel' className='publish-url-text'>{loggedInChannelName}:{loggedInChannelShortId} /</span>;
}
return <span id='url-channel-placeholder' className='url-text--secondary tooltip'>@channel<span
return <span id='url-channel-placeholder' className='publish-url-text tooltip'>@channel<span
className='tooltip-text'>Select a channel below</span> /</span>;
}
return (
<span id='url-no-channel-placeholder' className='url-text--secondary tooltip'>xyz<span className='tooltip-text'>This will be a random id</span> /</span>
<span id='url-no-channel-placeholder' className='publish-url-text tooltip'>xyz<span className='tooltip-text'>This will be a random id</span> /</span>
);
}

17
client/src/components/VerticalSplit/index.jsx Normal file
View file

@ -0,0 +1,17 @@
import React from 'react';
class VerticalSplit extends React.Component {
shouldComponentUpdate () {
return false;
}
render () {
return (
<div className={'vertical-split'}>
{this.props.top}
{this.props.bottom}
</div>
);
}
}
export default VerticalSplit;

2
client/src/containers/AssetDisplay/view.jsx
View file

@ -10,7 +10,7 @@ class AssetDisplay extends React.Component {
render () {
const { status, error, asset: { claimData: { name, claimId, contentType, fileExt, thumbnail } } } = this.props;
return (
<div>
<div className={'asset-display'}>
{(status === LOCAL_CHECK) &&
<div>
<p>Checking to see if Spee.ch has your asset locally...</p>

2
client/src/containers/ChannelCreateForm/view.jsx
View file

@ -80,7 +80,7 @@ class ChannelCreateForm extends React.Component {
</div>
) : (
<div>
<p className={'fine-print'}>{status}</p>
<p className={'text--small text--secondary'}>{status}</p>
<ProgressBar size={12} />
</div>
)}

6
client/src/containers/PublishDisabledMessage/view.jsx
View file

@ -4,9 +4,9 @@ class PublishDisabledMessage extends React.Component {
render () {
const message = this.props.message;
return (
<div className='row dropzone--disabled row--tall flex-container--column flex-container--center-center'>
<p className='secondary'>Publishing is currently disabled.</p>
<p className='secondary'>{message}</p>
<div>
<p className={'text--secondary'}>Publishing is currently disabled.</p>
<p className={'text--secondary'}>{message}</p>
</div>
);
}

29
client/src/containers/PublishStatus/view.jsx
View file

@ -1,48 +1,51 @@
import React from 'react';
import ProgressBar from '@components/ProgressBar';
import * as publishStates from '../../constants/publish_claim_states';
import SpaceAround from '@components/SpaceAround';
import ButtonSecondary from '@components/ButtonSecondary';
class PublishStatus extends React.Component {
render () {
const { status, message, clearFile } = this.props;
return (
<div className='row row--tall flex-container--column flex-container--center-center'>
<SpaceAround>
{status === publishStates.LOAD_START &&
<div className='row align-content-center'>
<div>
<p>File is loading to server</p>
<p className='primary'>0%</p>
<p className={'text--secondary'}>0%</p>
</div>
}
{status === publishStates.LOADING &&
<div>
<div className='row align-content-center'>
<p>File is loading to server</p>
<p className='primary'>{message}</p>
</div>
<p>File is loading to server</p>
<p className={'text--secondary'}>{message}</p>
</div>
}
{status === publishStates.PUBLISHING &&
<div className='row align-content-center'>
<div>
<p>Upload complete. Your file is now being published on the blockchain...</p>
<ProgressBar size={12} />
<p>Curious what magic is happening here? <a className='link--primary' target='blank' href='https://lbry.io/faq/what-is-lbry'>Learn more.</a></p>
</div>
}
{status === publishStates.SUCCESS &&
<div className='row align-content-center'>
<div>
<p>Your publish is complete! You are being redirected to it now.</p>
<p>If you are not automatically redirected, <a className='link--primary' target='_blank' href={message}>click here.</a></p>
</div>
}
{status === publishStates.FAILED &&
<div className='row align-content-center'>
<div>
<p>Something went wrong...</p>
<p><strong>{message}</strong></p>
<p className={'text--strong'}>{message}</p>
<p>For help, post the above error text in the #speech channel on the <a className='link--primary' href='https://chat.lbry.io' target='_blank'>lbry discord</a></p>
<button className='button--secondary' onClick={clearFile}>Reset</button>
<ButtonSecondary
value={'Reset'}
onClickHandler={clearFile}
/>
</div>
}
</div>
</SpaceAround>
);
}
};

25
client/src/containers/PublishThumbnailInput/view.jsx
View file

@ -1,6 +1,8 @@
import React from 'react';
import FormFeedbackDisplay from '@components/FormFeedbackDisplay';
import SpaceBetween from '@components/SpaceBetween';
function dataURItoBlob(dataURI) {
function dataURItoBlob (dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
let byteString = atob(dataURI.split(',')[1]);
// separate out the mime component
@ -108,30 +110,29 @@ class PublishThumbnailInput extends React.Component {
{
sliderValue ? (
<div>
<div className='flex-container--row flex-container--space-between-center' style={{width: '100%'}}>
<span className='info-message'>0'00"</span>
<span className='info-message'>{totalMinutes}'{totalSeconds}"</span>
</div>
<SpaceBetween style={{width: '100%'}}>
<span className='text--small text--secondary'>0'00"</span>
<span className='text--small text--secondary'>{totalMinutes}'{totalSeconds}"</span>
</SpaceBetween>
<div>
<input
type='range'
min={sliderMinRange}
max={sliderMaxRange}
value={sliderValue}
className='slider'
className='input-slider'
onChange={this.handleSliderChange}
/>
</div>
</div>
) : (
<p className='info-message' >loading... </p>
<p className={'text--small text--secondary'}>loading... </p>
)
}
{ error ? (
<p className='info-message--failure'>{error}</p>
) : (
<p className='info-message'>Use slider to set thumbnail</p>
)}
<FormFeedbackDisplay
errorMessage={error}
defaultMessage={'Use slider to set thumbnail'}
/>
</div>
);
}

2
client/src/containers/PublishTitleInput/view.jsx
View file

@ -15,7 +15,7 @@ class PublishTitleInput extends React.Component {
<input
type='text'
id='publish-title'
className='large full-width'
className={'text--large input--full-width'}
name='title'
placeholder='Give your content a title...'
onChange={this.handleInput}

2
client/src/containers/PublishUrlInput/view.jsx
View file

@ -48,7 +48,7 @@ class PublishUrlInput extends React.Component {
<div>
<div className={'publish-url-input'}>
<div className={'align-left'}>
<span className='url-text--secondary'>spee.ch&nbsp;/&nbsp;</span>
<span className='publish-url-text'>spee.ch&nbsp;/&nbsp;</span>
</div>
<div className={'shrink'}>
<UrlMiddle

4
client/src/containers/SiteDescription/view.jsx
View file

@ -3,9 +3,7 @@ import React from 'react';
class SiteDescription extends React.Component {
render () {
return (
<p className='extra-small'>
{this.props.siteDescription}
</p>
<p className={'text--extra-small'}>{this.props.siteDescription}</p>
);
}
}

18
client/src/pages/AboutPage/index.jsx
View file

@ -7,14 +7,18 @@ import AboutSpeechDetails from '@components/AboutSpeechDetails';
class AboutPage extends React.Component {
render () {
return (
<PageLayout pageTitle={'About'} pageUri={'about'} >
<HorizontalSplit
leftSide={<AboutSpeechOverview />}
rightSide={<AboutSpeechDetails />}
/>
</PageLayout>
<PageLayout
pageTitle={'About'}
pageUri={'about'}
content={
<HorizontalSplit
leftSide={<AboutSpeechOverview />}
rightSide={<AboutSpeechDetails />}
/>
}
/>
);
}
};
}
export default AboutPage;

10
client/src/pages/ErrorPage/index.jsx
View file

@ -6,9 +6,13 @@ class ErrorPage extends React.Component {
render () {
const { error } = this.props;
return (
<PageLayout pageTitle={'Error'} pageUri={'error'}>
<p>{error}</p>
</PageLayout>
<PageLayout
pageTitle={'Error'}
pageUri={'error'}
content={
<p>{error}</p>
}
/>
);
}
};

14
client/src/pages/FourOhFourPage/index.jsx
View file

@ -4,10 +4,16 @@ import PageLayout from '@components/PageLayout';
class FourOhForPage extends React.Component {
render () {
return (
<PageLayout pageTitle={'404'} pageUri={'/404'}>
<h2>404</h2>
<p>That page does not exist</p>
</PageLayout>
<PageLayout
pageTitle={'404'}
pageUri={'/404'}
content={
<div>
<h2>404</h2>
<p>That page does not exist</p>
</div>
}
/>
);
}
};

8
client/src/pages/HomePage/index.jsx
View file

@ -6,9 +6,11 @@ import PublishTool from '@containers/PublishTool';
class HomePage extends React.Component {
render () {
return (
<PageLayout pageTitle={'Speech'} pageUri={''}>
<PublishTool />
</PageLayout>
<PageLayout
pageTitle={'Speech'}
pageUri={''}
content={<PublishTool />}
/>
);
}
};

16
client/src/pages/LoginPage/view.jsx
View file

@ -15,12 +15,16 @@ class LoginPage extends React.Component {
}
render () {
return (
<PageLayout pageTitle={'Login'} pageUri={'login'} >
<HorizontalSplit
leftSide={<ChannelAbout />}
rightSide={<ChannelTools />}
/>
</PageLayout>
<PageLayout
pageTitle={'Login'}
pageUri={'login'}
content={
<HorizontalSplit
leftSide={<ChannelAbout />}
rightSide={<ChannelTools />}
/>
}
/>
);
}
};

92
client/src/pages/MultisitePage/index.jsx
View file

@ -1,50 +1,60 @@
import React from 'react';
import PageLayout from '@components/PageLayout';
const MultisiteContent = () => {
return (
<div>
<p className='text--pull-quote'>Introducing Spee.ch Multisite</p>
<p>Hi there! My name is <a href={'https://github.com/billbitt'} target={'_blank'}>Bill</a>, and I’d like to speak with you about Spee.ch. No, not ‘speech,’ ‘<i><a href={'https://spee.ch'} target={'_blank'}>Spee.ch.</a></i>’ You know what, just read on...</p>
<h2>A Little Background</h2>
<p>Wow, time flies! A little over a year ago Spee.ch was nothing more than a glimmer in the eye of LBRY CEO Jeremy Kaufman. At that time, the <a href={'https://lbry.io/faq/what-is-lbry'} target={'_blank'}>LBRY protocol</a> was still so early in its development, that there were no web-based applications for interacting with the LBRY blockchain. But then, something beautiful happened. On March 29th, 2017, Jeremy sat down with Jack, and together they <a href={'https://www.youtube.com/watch?v=C9LCapt_OYw'} target={'_blank'}>live coded a single-page PHP site</a> that could publish images to the LBRY network. And just like that, Spee.ch was born!</p>
<p>Being that LBRY is an open source project, Jeremy ended the session by inviting community members who were interested in the project to take the reigns and see where Spee.ch could go. I was one of the devs that did just that, and it wasn’t long before I was on a weekly call dedicated to this project with contributors from around the world.</p>
<p>At this point in time, the vision for Spee.ch was pretty simple: create a web-based hosting service that used the LBRY network as a database for free image and video sharing. In other words, an ‘imgur on the blockchain.’</p>
<h2>Growth</h2>
<p>You might be wondering, “So, what has the Spee.ch team been doing since then?”. Well, that is a great question. I’m glad you asked.</p>
<p>As it turned out, the initial single-serving site was only the beginning. We wanted to add more features, improve user experience, and continue to rapidly innovate on new ideas to explore what web-based image-hosting on the blockchain could look like. And now -- a couple of re-designs, <a href={'https://github.com/lbryio/spee.ch'} target={'_blank'}>1,428 commits</a>, and <a href={'https://github.com/lbryio/spee.ch/graphs/contributors'} target={'_blank'}>18 contributors</a> later (as of the time of this writing) -- we’ve been through a lot of changes. We changed the URL scheme, switched out the PHP for Javascript (sorry Jeremy!), added more HTML pages, removed those HTML pages, added Handlebars, removed most of Handlebars, added React, and... you get the picture.</p>
<p>It’s been a lot of work, and through all of these changes, we have been guided by our original vision: develop a free web app that allows users to share images and video using a blockchain.</p>
<p>However, we ask ourselves constantly: what else can we be doing? What can we be doing differently? What features can we be doing better? And it is those kinds of questions that lead us to this post.</p>
<h2>A New Initiative</h2>
<p>As Spee.ch developed, we were lucky to find an amazing community spring up around the project that contributed bug reports, bug fixes, feature requests, pull requests, etc., but ultimately we are limited by the hours we have in the day, and while some requests get prioritized, others get shelved. </p>
<p>So we started wondering: What if instead of having the community help us build our platform, we started helping them build theirs? We started mulling this over, and the more we thought about it the more we liked it. And thus, Spee.ch Multisite was born.</p>
<h2>Spee.ch Multisite</h2>
<p>The vision for Spee.ch Multisite is to maintain a foundational codebase that will support a greater variety of content-sharing web apps built on LBRY, allowing these apps to publish and retrieve content from the network via the blockchain.</p>
<h3>Run Your Own Spee.ch!</h3>
<p>Ok, here’s the tl:dr: the purpose of the Spee.ch Multisite initiative is to enable you to run your own version of Spee.ch.</p>
<p>Spee.ch Multisite will provide a helpful set of basic code to get you going, but we purposefully want to give you control and provide a sandbox in which you can develop the look, content, and features for your site. The shared code base will be developed to support you in that quest. </p>
<p>So if you don’t want your site called or looking anything like Spee.ch, we encourage that! Don’t hesitate to make it your own!</p>
<h3>For the Community by the Community</h3>
<p>Initially, sites built on Spee.ch Multisite will look a lot like Spee.ch, but you will be able to add custom pages, update the look of components, and limit the content on your spee.ch site as you see fit.</p>
<p>Over time, it is our hope that the project will grow to incorporate many more components and features developed by us and the community to support a wide variety of functionalities beyond what the current spee.ch site is capable of.</p>
<h3>A Common Codebase</h3>
<p>If you have been following the project, you may have already noticed that the original github repository has grown into two: <a href={'https://github.com/lbryio/www.spee.ch'} target={'_blank'}>www.spee.ch</a> and <a href={'https://github.com/lbryio/spee.ch'} target={'_blank'}>spee.ch</a>. I will save the specifics for a future tech-focused blog post in the coming weeks, but the reason for these changes is to modularise the code so that is it easier for anyone who wants to run their own version of Spee.ch to do so, and to be able to customize their Spee.ch to their liking.</p>
<h3>What About the Flagship Spee.ch Site?</h3>
<p>Don’t worry! If you like using <a href={'https://spee.ch'} target={'_blank'}>Spee.ch</a> and have no intention of running your own site, we will still be here running it for you! We are dedicated to pushing it forward and using it as patient zero for all additions to the Spee.ch Multisite codebase.</p>
<h2>Join Us</h2>
<p>Friday, May 18, we will be hosting a live demo showcasing the alpha version of Spee.ch Multisite. It’s still quite young, but that’s the point: we want to realize this vision together.</p>
<p><b><a href={'https://speech.rsvpify.com/'} target={'_blank'}>CLICK HERE TO RSVP!</a></b></p>
<p>At this first demonstration, we will walk through preparing a server environment, installing LBRY and Spee.ch, and how to make local changes to your Spee.ch instance. Details below:</p>
<ul>
<li>When: Friday, May 18, 2018</li>
<li>Time: 5:00 p.m. PST</li>
<li>Where: Google Hangouts</li>
<li>Link: <a href={'https://meet.google.com/aex-ghqg-kcs'} target={'_blank'}>meet.google.com/aex-ghqg-kcs</a></li>
<li>System Requirements: If you have a server, please make sure you have MySql, Node and NPM installed. If you need help installing the above, or if you need a server to run your own instance on, please join the Hangout 30 minutes ahead of time and we will help get you set up =]</li>
<li>Questions: hello@lbry.io</li>
</ul>
</div>
);
};
class MultisitePage extends React.Component {
render () {
return (
<PageLayout pageTitle={'Multisite'} pageUri={'/multisite'}>
<p className='text--pull-quote'>Introducing Spee.ch Multisite</p>
<p>Hi there! My name is <a href={'https://github.com/billbitt'} target={'_blank'}>Bill</a>, and I’d like to speak with you about Spee.ch. No, not ‘speech,’ ‘<i><a href={'https://spee.ch'} target={'_blank'}>Spee.ch.</a></i>’ You know what, just read on...</p>
<h2>A Little Background</h2>
<p>Wow, time flies! A little over a year ago Spee.ch was nothing more than a glimmer in the eye of LBRY CEO Jeremy Kaufman. At that time, the <a href={'https://lbry.io/faq/what-is-lbry'} target={'_blank'}>LBRY protocol</a> was still so early in its development, that there were no web-based applications for interacting with the LBRY blockchain. But then, something beautiful happened. On March 29th, 2017, Jeremy sat down with Jack, and together they <a href={'https://www.youtube.com/watch?v=C9LCapt_OYw'} target={'_blank'}>live coded a single-page PHP site</a> that could publish images to the LBRY network. And just like that, Spee.ch was born!</p>
<p>Being that LBRY is an open source project, Jeremy ended the session by inviting community members who were interested in the project to take the reigns and see where Spee.ch could go. I was one of the devs that did just that, and it wasn’t long before I was on a weekly call dedicated to this project with contributors from around the world.</p>
<p>At this point in time, the vision for Spee.ch was pretty simple: create a web-based hosting service that used the LBRY network as a database for free image and video sharing. In other words, an ‘imgur on the blockchain.’</p>
<h2>Growth</h2>
<p>You might be wondering, “So, what has the Spee.ch team been doing since then?”. Well, that is a great question. I’m glad you asked.</p>
<p>As it turned out, the initial single-serving site was only the beginning. We wanted to add more features, improve user experience, and continue to rapidly innovate on new ideas to explore what web-based image-hosting on the blockchain could look like. And now -- a couple of re-designs, <a href={'https://github.com/lbryio/spee.ch'} target={'_blank'}>1,428 commits</a>, and <a href={'https://github.com/lbryio/spee.ch/graphs/contributors'} target={'_blank'}>18 contributors</a> later (as of the time of this writing) -- we’ve been through a lot of changes. We changed the URL scheme, switched out the PHP for Javascript (sorry Jeremy!), added more HTML pages, removed those HTML pages, added Handlebars, removed most of Handlebars, added React, and... you get the picture.</p>
<p>It’s been a lot of work, and through all of these changes, we have been guided by our original vision: develop a free web app that allows users to share images and video using a blockchain.</p>
<p>However, we ask ourselves constantly: what else can we be doing? What can we be doing differently? What features can we be doing better? And it is those kinds of questions that lead us to this post.</p>
<h2>A New Initiative</h2>
<p>As Spee.ch developed, we were lucky to find an amazing community spring up around the project that contributed bug reports, bug fixes, feature requests, pull requests, etc., but ultimately we are limited by the hours we have in the day, and while some requests get prioritized, others get shelved. </p>
<p>So we started wondering: What if instead of having the community help us build our platform, we started helping them build theirs? We started mulling this over, and the more we thought about it the more we liked it. And thus, Spee.ch Multisite was born.</p>
<h2>Spee.ch Multisite</h2>
<p>The vision for Spee.ch Multisite is to maintain a foundational codebase that will support a greater variety of content-sharing web apps built on LBRY, allowing these apps to publish and retrieve content from the network via the blockchain.</p>
<h3>Run Your Own Spee.ch!</h3>
<p>Ok, here’s the tl:dr: the purpose of the Spee.ch Multisite initiative is to enable you to run your own version of Spee.ch.</p>
<p>Spee.ch Multisite will provide a helpful set of basic code to get you going, but we purposefully want to give you control and provide a sandbox in which you can develop the look, content, and features for your site. The shared code base will be developed to support you in that quest. </p>
<p>So if you don’t want your site called or looking anything like Spee.ch, we encourage that! Don’t hesitate to make it your own!</p>
<h3>For the Community by the Community</h3>
<p>Initially, sites built on Spee.ch Multisite will look a lot like Spee.ch, but you will be able to add custom pages, update the look of components, and limit the content on your spee.ch site as you see fit.</p>
<p>Over time, it is our hope that the project will grow to incorporate many more components and features developed by us and the community to support a wide variety of functionalities beyond what the current spee.ch site is capable of.</p>
<h3>A Common Codebase</h3>
<p>If you have been following the project, you may have already noticed that the original github repository has grown into two: <a href={'https://github.com/lbryio/www.spee.ch'} target={'_blank'}>www.spee.ch</a> and <a href={'https://github.com/lbryio/spee.ch'} target={'_blank'}>spee.ch</a>. I will save the specifics for a future tech-focused blog post in the coming weeks, but the reason for these changes is to modularise the code so that is it easier for anyone who wants to run their own version of Spee.ch to do so, and to be able to customize their Spee.ch to their liking.</p>
<h3>What About the Flagship Spee.ch Site?</h3>
<p>Don’t worry! If you like using <a href={'https://spee.ch'} target={'_blank'}>Spee.ch</a> and have no intention of running your own site, we will still be here running it for you! We are dedicated to pushing it forward and using it as patient zero for all additions to the Spee.ch Multisite codebase.</p>
<h2>Join Us</h2>
<p>Friday, May 18, we will be hosting a live demo showcasing the alpha version of Spee.ch Multisite. It’s still quite young, but that’s the point: we want to realize this vision together.</p>
<p><b><a href={'https://speech.rsvpify.com/'} target={'_blank'}>CLICK HERE TO RSVP!</a></b></p>
<p>At this first demonstration, we will walk through preparing a server environment, installing LBRY and Spee.ch, and how to make local changes to your Spee.ch instance. Details below:</p>
<ul>
<li>When: Friday, May 18, 2018</li>
<li>Time: 5:00 p.m. PST</li>
<li>Where: Google Hangouts</li>
<li>Link: <a href={'https://meet.google.com/aex-ghqg-kcs'} target={'_blank'}>meet.google.com/aex-ghqg-kcs</a></li>
<li>System Requirements: If you have a server, please make sure you have MySql, Node and NPM installed. If you need help installing the above, or if you need a server to run your own instance on, please join the Hangout 30 minutes ahead of time and we will help get you set up =]</li>
<li>Questions: hello@lbry.io</li>
</ul>
</PageLayout>
<PageLayout
pageTitle={'Multisite'}
pageUri={'/multisite'}
content={<MultisiteContent />}
/>
);
}
}

20
client/src/pages/ShowAssetDetails/view.jsx
View file

@ -13,13 +13,19 @@ class ShowAssetDetails extends React.Component {
if (asset) {
const { claimData: { name } } = asset;
return (
<PageLayout pageTitle={`${name} - details`} asset={asset}>
<AssetTitle />
<HorizontalSplit
leftSide={<AssetDisplay />}
rightSide={<AssetInfo />}
/>
</PageLayout>
<PageLayout
pageTitle={`${name} - details`}
asset={asset}
content={
<div>
<AssetTitle />
<HorizontalSplit
leftSide={<AssetDisplay />}
rightSide={<AssetInfo />}
/>
</div>
}
/>
);
}
return (

28
client/src/pages/ShowAssetLite/view.jsx
View file

@ -1,7 +1,8 @@
import React from 'react';
import { Link } from 'react-router-dom';
import SEO from '@containers/SEO';
import PageLayoutShowLite from '@components/PageLayoutShowLite';
import AssetDisplay from '@containers/AssetDisplay';
import SpaceAround from '@components/SpaceAround';
class ShowLite extends React.Component {
render () {
@ -9,21 +10,26 @@ class ShowLite extends React.Component {
if (asset) {
const { name, claimId } = asset.claimData;
return (
<div className='row--tall flex-container--column flex-container--center-center show-lite-container'>
<SEO pageTitle={name} asset={asset} />
<AssetDisplay />
<p className='extra-small'>
<Link id='asset-boilerpate' className='link--primary' to={`/${claimId}/${name}`}> hosted on spee.ch</Link> via the <a className='link--primary' href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
</p>
</div>
<PageLayoutShowLite
pageTitle={name}
asset={asset}
content={<AssetDisplay />}
footer={
<SpaceAround>
<p className={'text--extra-small'}>
<Link className='link--primary' to={`/${claimId}/${name}`}> hosted on spee.ch</Link> via the <a className='link--primary' href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
</p>
</SpaceAround>
}
/>
);
}
return (
<div className='row row--tall row--padded flex-container--column flex-container--center-center'>
<p>loading asset data...</p>
<div>
<p className={'text--secondary'}>loading asset data...</p>
</div>
);
}
};
}
export default ShowLite;

22
client/src/pages/ShowChannel/view.jsx
View file

@ -10,14 +10,20 @@ class ShowChannel extends React.Component {
if (channel) {
const { name, longId, shortId } = channel;
return (
<PageLayout pageTitle={name} channel={channel}>
<ChannelInfoDisplay
name={name}
longId={longId}
shortId={shortId}
/>
<ChannelClaimsDisplay />
</PageLayout>
<PageLayout
pageTitle={name}
channel={channel}
content={
<div>
<ChannelInfoDisplay
name={name}
longId={longId}
shortId={shortId}
/>
<ChannelClaimsDisplay />
</div>
}
/>
);
}
return (