diff --git a/.babelrc b/.babelrc new file mode 100644 index 000000000..bd3150a2d --- /dev/null +++ b/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": [ + "es2015", + "react" + ], +} \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 000000000..8e420a024 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,239 @@ +module.exports = { + "extends": "airbnb", + "plugins": [ + "react", + "jsx-a11y", + "import" + ], + "env": { + "browser": true, + }, + // Grabbed from https://gist.github.com/cletusw/e01a85e399ab563b1236 + "rules": { + ////////// Possible Errors ////////// + + "no-comma-dangle": 0, // disallow trailing commas in object literals + "no-cond-assign": 0, // disallow assignment in conditional expressions + "no-console": 0, // disallow use of console (off by default in the node environment) + "no-constant-condition": 0, // disallow use of constant expressions in conditions + "no-control-regex": 0, // disallow control characters in regular expressions + "no-debugger": 0, // disallow use of debugger + "no-dupe-keys": 0, // disallow duplicate keys when creating object literals + "no-empty": 0, // disallow empty statements + "no-empty-class": 0, // disallow the use of empty character classes in regular expressions + "no-ex-assign": 0, // disallow assigning to the exception in a catch block + "no-extra-boolean-cast": 0, // disallow double-negation boolean casts in a boolean context + "no-extra-parens": 0, // disallow unnecessary parentheses (off by default) + "no-extra-semi": 0, // disallow unnecessary semicolons + "no-func-assign": 0, // disallow overwriting functions written as function declarations + "no-inner-declarations": 0, // disallow function or variable declarations in nested blocks + "no-invalid-regexp": 0, // disallow invalid regular expression strings in the RegExp constructor + "no-irregular-whitespace": 0, // disallow irregular whitespace outside of strings and comments + "no-negated-in-lhs": 0, // disallow negation of the left operand of an in expression + "no-obj-calls": 0, // disallow the use of object properties of the global object (Math and JSON) as functions + "no-regex-spaces": 0, // disallow multiple spaces in a regular expression literal + "no-reserved-keys": 0, // disallow reserved words being used as object literal keys (off by default) + "no-sparse-arrays": 0, // disallow sparse arrays + "no-unreachable": 0, // disallow unreachable statements after a return, throw, continue, or break statement + "use-isnan": 0, // disallow comparisons with the value NaN + "valid-jsdoc": 0, // Ensure JSDoc comments are valid (off by default) + "valid-typeof": 0, // Ensure that the results of typeof are compared against a valid string + + + ////////// Best Practices ////////// + + "block-scoped-var": 0, // treat var statements as if they were block scoped (off by default) + "complexity": 0, // specify the maximum cyclomatic complexity allowed in a program (off by default) + "consistent-return": 0, // require return statements to either always or never specify values + "curly": 0, // specify curly brace conventions for all control statements + "default-case": 0, // require default case in switch statements (off by default) + "dot-notation": 0, // encourages use of dot notation whenever possible + "eqeqeq": 0, // require the use of === and !== + "guard-for-in": 0, // make sure for-in loops have an if statement (off by default) + "no-alert": 0, // disallow the use of alert, confirm, and prompt + "no-caller": 0, // disallow use of arguments.caller or arguments.callee + "no-div-regex": 0, // disallow division operators explicitly at beginning of regular expression (off by default) + "no-else-return": 0, // disallow else after a return in an if (off by default) + "no-empty-label": 0, // disallow use of labels for anything other then loops and switches + "no-eq-null": 0, // disallow comparisons to null without a type-checking operator (off by default) + "no-eval": 0, // disallow use of eval() + "no-extend-native": 0, // disallow adding to native types + "no-extra-bind": 0, // disallow unnecessary function binding + "no-fallthrough": 0, // disallow fallthrough of case statements + "no-floating-decimal": 0, // disallow the use of leading or trailing decimal points in numeric literals (off by default) + "no-implied-eval": 0, // disallow use of eval()-like methods + "no-iterator": 0, // disallow usage of __iterator__ property + "no-labels": 0, // disallow use of labeled statements + "no-lone-blocks": 0, // disallow unnecessary nested blocks + "no-loop-func": 0, // disallow creation of functions within loops + "no-multi-spaces": 0, // disallow use of multiple spaces + "no-multi-str": 0, // disallow use of multiline strings + "no-native-reassign": 0, // disallow reassignments of native objects + "no-new": 0, // disallow use of new operator when not part of the assignment or comparison + "no-new-func": 0, // disallow use of new operator for Function object + "no-new-wrappers": 0, // disallows creating new instances of String, Number, and Boolean + "no-octal": 0, // disallow use of octal literals + "no-octal-escape": 0, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251"; + "no-process-env": 0, // disallow use of process.env (off by default) + "no-proto": 0, // disallow usage of __proto__ property + "no-redeclare": 0, // disallow declaring the same variable more then once + "no-return-assign": 0, // disallow use of assignment in return statement + "no-script-url": 0, // disallow use of javascript: urls. + "no-self-compare": 0, // disallow comparisons where both sides are exactly the same (off by default) + "no-sequences": 0, // disallow use of comma operator + "no-unused-expressions": 0, // disallow usage of expressions in statement position + "no-void": 0, // disallow use of void operator (off by default) + "no-warning-comments": 0, // disallow usage of configurable warning terms in comments, e.g. TODO or FIXME (off by default) + "no-with": 0, // disallow use of the with statement + "radix": 0, // require use of the second argument for parseInt() (off by default) + "vars-on-top": 0, // requires to declare all vars on top of their containing scope (off by default) + "wrap-iife": 0, // require immediate function invocation to be wrapped in parentheses (off by default) + "yoda": 0, // require or disallow Yoda conditions + + + ////////// Strict Mode ////////// + + "global-strict": 0, // (deprecated) require or disallow the "use strict" pragma in the global scope (off by default in the node environment) + "no-extra-strict": 0, // (deprecated) disallow unnecessary use of "use strict"; when already in strict mode + "strict": 0, // controls location of Use Strict Directives + + + ////////// Variables ////////// + + "no-catch-shadow": 0, // disallow the catch clause parameter name being the same as a variable in the outer scope (off by default in the node environment) + "no-delete-var": 0, // disallow deletion of variables + "no-label-var": 0, // disallow labels that share a name with a variable + "no-shadow": 0, // disallow declaration of variables already declared in the outer scope + "no-shadow-restricted-names": 0, // disallow shadowing of names such as arguments + "no-undef": 1, // disallow use of undeclared variables unless mentioned in a /*global */ block + "no-undef-init": 0, // disallow use of undefined when initializing variables + "no-undefined": 0, // disallow use of undefined variable (off by default) + "no-unused-vars": 0, // disallow declaration of variables that are not used in the code + "no-use-before-define": 0, // disallow use of variables before they are defined + + + ////////// Node.js ////////// + + "handle-callback-err": 0, // enforces error handling in callbacks (off by default) (on by default in the node environment) + "no-mixed-requires": 0, // disallow mixing regular variable and require declarations (off by default) (on by default in the node environment) + "no-new-require": 0, // disallow use of new operator with the require function (off by default) (on by default in the node environment) + "no-path-concat": 0, // disallow string concatenation with __dirname and __filename (off by default) (on by default in the node environment) + "no-process-exit": 0, // disallow process.exit() (on by default in the node environment) + "no-restricted-modules": 0, // restrict usage of specified node modules (off by default) + "no-sync": 0, // disallow use of synchronous methods (off by default) + + + ////////// Stylistic Issues ////////// + + "brace-style": 0, // enforce one true brace style (off by default) + "camelcase": 0, // require camel case names + "comma-spacing": 0, // enforce spacing before and after comma + "comma-style": 0, // enforce one true comma style (off by default) + "consistent-this": 0, // enforces consistent naming when capturing the current execution context (off by default) + "eol-last": 0, // enforce newline at the end of file, with no multiple empty lines + "func-names": 0, // require function expressions to have a name (off by default) + "func-style": 0, // enforces use of function declarations or expressions (off by default) + "key-spacing": 0, // enforces spacing between keys and values in object literal properties + "max-nested-callbacks": 0, // specify the maximum depth callbacks can be nested (off by default) + "new-cap": 0, // require a capital letter for constructors + "new-parens": 0, // disallow the omission of parentheses when invoking a constructor with no arguments + "no-array-constructor": 0, // disallow use of the Array constructor + "no-inline-comments": 0, // disallow comments inline after code (off by default) + "no-lonely-if": 0, // disallow if as the only statement in an else block (off by default) + "no-mixed-spaces-and-tabs": 0, // disallow mixed spaces and tabs for indentation + "no-multiple-empty-lines": 0, // disallow multiple empty lines (off by default) + "no-nested-ternary": 0, // disallow nested ternary expressions (off by default) + "no-new-object": 0, // disallow use of the Object constructor + "no-space-before-semi": 0, // disallow space before semicolon + "no-spaced-func": 0, // disallow space between function identifier and application + "no-ternary": 0, // disallow the use of ternary operators (off by default) + "no-trailing-spaces": 0, // disallow trailing whitespace at the end of lines + "no-underscore-dangle": 0, // disallow dangling underscores in identifiers + "no-wrap-func": 0, // disallow wrapping of non-IIFE statements in parens + "one-var": 0, // allow just one var statement per function (off by default) + "operator-assignment": 0, // require assignment operator shorthand where possible or prohibit it entirely (off by default) + "padded-blocks": 0, // enforce padding within blocks (off by default) + "quote-props": 0, // require quotes around object literal property names (off by default) + "quotes": 0, // specify whether double or single quotes should be used + "semi": 0, // require or disallow use of semicolons instead of ASI + "sort-vars": 0, // sort variables within the same declaration block (off by default) + "space-after-function-name": 0, // require a space after function names (off by default) + "space-after-keywords": 0, // require a space after certain keywords (off by default) + "space-before-blocks": 0, // require or disallow space before blocks (off by default) + "space-in-brackets": 0, // require or disallow spaces inside brackets (off by default) + "space-in-parens": 0, // require or disallow spaces inside parentheses (off by default) + "space-infix-ops": 0, // require spaces around operators + "space-return-throw-case": 0, // require a space after return, throw, and case + "space-unary-ops": 0, // Require or disallow spaces before/after unary operators (words on by default, nonwords off by default) + "spaced-line-comment": 0, // require or disallow a space immediately following the // in a line comment (off by default) + "wrap-regex": 0, // require regex literals to be wrapped in parentheses (off by default) + + + ////////// ECMAScript 6 ////////// + + "no-var": 0, // require let or const instead of var (off by default) + "generator-star": 0, // enforce the position of the * in generator functions (off by default) + + + ////////// Legacy ////////// + + "max-depth": 0, // specify the maximum depth that blocks can be nested (off by default) + "max-len": 0, // specify the maximum length of a line in your program (off by default) + "max-params": 0, // limits the number of parameters that can be used in the function declaration. (off by default) + "max-statements": 0, // specify the maximum number of statement allowed in a function (off by default) + "no-bitwise": 0, // disallow use of bitwise operators (off by default) + "no-plusplus": 0, // disallow use of unary operators, ++ and -- (off by default) + + // There were other errors that were being thrown + "import/newline-after-import": 0, + "object-curly-spacing": 0, + "space-before-function-paren": 0, + "no-restricted-syntax": 0, + "no-unneeded-ternary": 0, + "react/prefer-es6-class": 0, + "arrow-parens": 0, + "jsx-quotes": 0, + "react/sort-comp": 0, + "react/no-unescaped-entities": 0, + "object-shorthand": 0, + "jsx-a11y/label-has-for": 0, + "no-mixed-operators": 0, + "react/jsx-no-bind": 0, + "no-duplicate-case": 0, + "react/jsx-filename-extension": 0, + "jsx-a11y/img-has-alt": 0, + "react/self-closing-comp": 0, + "prefer-const": 0, + "one-var-declaration-per-line": 0, + "react/jsx-indent": 0, + "react/jsx-curly-spacing": 0, + "react/prefer-stateless-function": 0, + "react/jsx-indent-props": 0, + "react/no-find-dom-node": 0, + "react/no-unused-prop-types": 0, + "react/jsx-no-undef": 0, + "react/no-string-refs": 0, + "react/jsx-first-prop-new-line": 0, + "comma-dangle": 0, + "react/no-multi-comp": 0, + "spaced-comment": 0, + "jsx-a11y/anchor-has-content": 0, + "semi-spacing": 0, + "no-param-reassign": 0, + "react/jsx-no-target-blank": 0, + "prefer-arrow-callback": 0, + "react/jsx-space-before-closing": 0, + "react/forbid-prop-types": 0, + "indent": 0, + "import/no-unresolved": 0, + "react/jsx-boolean-value": 0, + "prefer-template": 0, + "react/jsx-wrap-multilines": 0, + "keyword-spacing": 0, + "react/jsx-closing-bracket-location": 0, + "react/react-in-jsx-scope": 0, + "no-useless-escape": 0, + "no-continue": 0, + "react/prop-types": 0 + } +}; diff --git a/dist.zip b/dist.zip deleted file mode 100644 index fee4f5bca..000000000 Binary files a/dist.zip and /dev/null differ diff --git a/dist/index.html b/dist/index.html index 2bc0d6e83..1a17db887 100644 --- a/dist/index.html +++ b/dist/index.html @@ -20,38 +20,6 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/js/app.js b/js/app.js index f4fc8adad..6232b8461 100644 --- a/js/app.js +++ b/js/app.js @@ -1,3 +1,23 @@ +import React from 'react'; +import lbry from './lbry.js'; +import SettingsPage from './page/settings.js'; +import HelpPage from './page/help.js'; +import WatchPage from './page/watch.js'; +import ReportPage from './page/report.js'; +import MyFilesPage from './page/my_files.js'; +import StartPage from './page/start.js'; +import ClaimCodePage from './page/claim_code.js'; +import ReferralPage from './page/referral.js'; +import WalletPage from './page/wallet.js'; +import DetailPage from './page/show.js'; +import PublishPage from './page/publish.js'; +import DiscoverPage from './page/discover.js'; +import SplashScreen from './component/splash.js'; +import Drawer from './component/drawer.js'; +import Header from './component/header.js'; +import Modal from './component/modal.js'; +import {Link} from './component/link.js'; + var App = React.createClass({ _error_key_labels: { connectionString: 'API connection string', @@ -167,10 +187,6 @@ var App = React.createClass({ case 'send': case 'receive': return ; - case 'send': - return ; - case 'receive': - return ; case 'show': return ; case 'publish': @@ -220,3 +236,6 @@ var App = React.createClass({ ); } }); + + +export default App; diff --git a/js/component/common.js b/js/component/common.js index 40906d467..f76ae789b 100644 --- a/js/component/common.js +++ b/js/component/common.js @@ -1,6 +1,9 @@ -//component/icon.js +import React from 'react'; +import lbry from '../lbry.js'; +import $clamp from 'clamp'; -var Icon = React.createClass({ +//component/icon.js +export let Icon = React.createClass({ propTypes: { style: React.PropTypes.object, fixed: React.PropTypes.bool, @@ -13,7 +16,7 @@ var Icon = React.createClass({ } }); -var TruncatedText = React.createClass({ +export let TruncatedText = React.createClass({ propTypes: { lines: React.PropTypes.number, height: React.PropTypes.string, @@ -39,7 +42,7 @@ var TruncatedText = React.createClass({ } }); -var BusyMessage = React.createClass({ +export let BusyMessage = React.createClass({ propTypes: { message: React.PropTypes.string }, @@ -59,7 +62,7 @@ var toolTipStyle = { backgroundColor: '#fff', fontSize: '14px', }; -var ToolTip = React.createClass({ +export let ToolTip = React.createClass({ propTypes: { open: React.PropTypes.bool.isRequired, onMouseOut: React.PropTypes.func @@ -82,11 +85,11 @@ var creditAmountStyle = { color: '#aaa', }; -var CurrencySymbol = React.createClass({ +export let CurrencySymbol = React.createClass({ render: function() { return LBC; } }); -var CreditAmount = React.createClass({ +export let CreditAmount = React.createClass({ propTypes: { amount: React.PropTypes.number, precision: React.PropTypes.number @@ -105,7 +108,7 @@ var CreditAmount = React.createClass({ var addressStyle = { fontFamily: '"Consolas", "Lucida Console", "Adobe Source Code Pro", monospace', }; -var Address = React.createClass({ +export let Address = React.createClass({ propTypes: { address: React.PropTypes.string, }, @@ -116,7 +119,7 @@ var Address = React.createClass({ } }); -var Thumbnail = React.createClass({ +export let Thumbnail = React.createClass({ _defaultImageUri: '/img/default-thumb.svg', _maxLoadTime: 10000, diff --git a/js/component/drawer.js b/js/component/drawer.js index e3ca457d4..c43239345 100644 --- a/js/component/drawer.js +++ b/js/component/drawer.js @@ -1,3 +1,7 @@ +import lbry from '../lbry.js'; +import React from 'react'; +import {Link} from './link.js'; + var DrawerItem = React.createClass({ getDefaultProps: function() { return { @@ -46,4 +50,7 @@ var Drawer = React.createClass({ ); } -}); \ No newline at end of file +}); + + +export default Drawer; diff --git a/js/component/form.js b/js/component/form.js index 70cb3beb0..27a7c977a 100644 --- a/js/component/form.js +++ b/js/component/form.js @@ -1,3 +1,10 @@ +import React from 'react'; + +var requiredFieldWarningStyle = { + color: '#cc0000', + transition: 'opacity 400ms ease-in', +}; + var FormField = React.createClass({ _fieldRequiredText: 'This field is required', _type: null, @@ -96,3 +103,5 @@ var FormFieldAdvice = React.createClass({ ); } }); + +export default FormField; diff --git a/js/component/header.js b/js/component/header.js index 4022f4019..83fd3748b 100644 --- a/js/component/header.js +++ b/js/component/header.js @@ -1,3 +1,6 @@ +import React from 'react'; +import {Link} from './link.js'; + var Header = React.createClass({ getInitialState: function() { return { @@ -81,4 +84,6 @@ var SubHeader = React.createClass({ ); } -}); \ No newline at end of file +}); + +export default Header; diff --git a/js/component/link.js b/js/component/link.js index 563a01823..6ba2a838f 100644 --- a/js/component/link.js +++ b/js/component/link.js @@ -1,4 +1,10 @@ -var Link = React.createClass({ +import React from 'react'; +import lbry from '../lbry.js'; +import Modal from './modal.js'; +import {Icon, ToolTip} from './common.js'; + + +export let Link = React.createClass({ handleClick: function() { if (this.props.onClick) { this.props.onClick(); @@ -27,7 +33,7 @@ var linkContainerStyle = { position: 'relative', }; -var ToolTipLink = React.createClass({ +export let ToolTipLink = React.createClass({ getInitialState: function() { return { showTooltip: false, @@ -73,7 +79,7 @@ var ToolTipLink = React.createClass({ } }); -var DownloadLink = React.createClass({ +export let DownloadLink = React.createClass({ propTypes: { type: React.PropTypes.string, streamName: React.PropTypes.string, @@ -153,7 +159,7 @@ var DownloadLink = React.createClass({ } }); -var WatchLink = React.createClass({ +export let WatchLink = React.createClass({ propTypes: { type: React.PropTypes.string, streamName: React.PropTypes.string, @@ -208,4 +214,4 @@ var WatchLink = React.createClass({ ); } -}); \ No newline at end of file +}); diff --git a/js/component/load_screen.js b/js/component/load_screen.js index b5cb99c76..57d8e4f50 100644 --- a/js/component/load_screen.js +++ b/js/component/load_screen.js @@ -1,3 +1,7 @@ +import React from 'react'; +import lbry from '../lbry.js'; +import {BusyMessage, Icon} from './common.js'; + var loadScreenStyle = { color: 'white', backgroundImage: 'url(' + lbry.imagePath('lbry-bg.png') + ')', @@ -46,4 +50,7 @@ var LoadScreen = React.createClass({ ); } -}); \ No newline at end of file +}); + + +export default LoadScreen; diff --git a/js/component/menu.js b/js/component/menu.js index c1b9ac105..84d643bbc 100644 --- a/js/component/menu.js +++ b/js/component/menu.js @@ -1,3 +1,7 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import {Icon} from './common.js'; + // Generic menu styles var menuStyle = { whiteSpace: 'nowrap' @@ -67,4 +71,6 @@ var MenuItem = React.createClass({ ); } -}); \ No newline at end of file +}); + +export default Menu; diff --git a/js/component/modal.js b/js/component/modal.js index 45362ab1f..b02f9df97 100644 --- a/js/component/modal.js +++ b/js/component/modal.js @@ -1,3 +1,8 @@ +import React from 'react'; +import ReactModal from 'react-modal'; +import {Link} from './link.js'; + + var Modal = React.createClass({ propTypes: { type: React.PropTypes.oneOf(['alert', 'confirm', 'custom']), @@ -57,3 +62,5 @@ var Modal = React.createClass({ ); } }); + +export default Modal; diff --git a/js/component/splash.js b/js/component/splash.js index a6b123f67..bcb045468 100644 --- a/js/component/splash.js +++ b/js/component/splash.js @@ -1,3 +1,7 @@ +import React from 'react'; +import lbry from '../lbry.js'; +import LoadScreen from './load_screen.js'; + var SplashScreen = React.createClass({ propTypes: { message: React.PropTypes.string, @@ -32,4 +36,6 @@ var SplashScreen = React.createClass({ render: function() { return ; } -}); \ No newline at end of file +}); + +export default SplashScreen; diff --git a/js/lbry.js b/js/lbry.js index 84ae56174..dffb903be 100644 --- a/js/lbry.js +++ b/js/lbry.js @@ -2,6 +2,7 @@ var lbry = { isConnected: false, rootPath: '.', daemonConnectionString: 'http://localhost:5279/lbryapi', + webUiUri: 'http://localhost:5279', colors: { primary: '#155B4A' }, @@ -351,7 +352,7 @@ lbry.loadJs = function(src, type, onload) newScriptTag.type = type; if (onload) { - newScript.onload = onload; + newScriptTag.onload = onload; } lbryScriptTag.parentNode.insertBefore(newScriptTag, lbryScriptTag); } @@ -390,3 +391,4 @@ lbry.stop = function(callback) { }; +export default lbry; diff --git a/js/lighthouse.js b/js/lighthouse.js index 93cea4ceb..73315cabb 100644 --- a/js/lighthouse.js +++ b/js/lighthouse.js @@ -1,4 +1,6 @@ -lbry.lighthouse = { +import lbry from './lbry.js'; + +var lighthouse = { _search_timeout: 5000, _max_search_tries: 5, @@ -15,22 +17,24 @@ lbry.lighthouse = { search: function(query, callback) { let handleSearchFailed = function(tryNum=0) { - if (tryNum > lbry.lighthouse._max_search_tries) { - throw new Error(`Could not connect to Lighthouse server. Last server attempted: ${lbry.lighthouse.server}`); + if (tryNum > lighthouse._max_search_tries) { + throw new Error(`Could not connect to Lighthouse server. Last server attempted: ${lighthouse.server}`); } else { // Randomly choose one of the other search servers to switch to - let otherServers = lbry.lighthouse.servers.slice(); - otherServers.splice(otherServers.indexOf(lbry.lighthouse.server), 1); - lbry.lighthouse.server = otherServers[Math.round(Math.random() * (otherServers.length - 1))]; + let otherServers = lighthouse.servers.slice(); + otherServers.splice(otherServers.indexOf(lighthouse.server), 1); + lighthouse.server = otherServers[Math.round(Math.random() * (otherServers.length - 1))]; - lbry.lighthouse.call('search', [query], callback, undefined, function() { + lighthouse.call('search', [query], callback, undefined, function() { handleSearchFailed(tryNum + 1); - }, lbry.lighthouse._search_timeout); + }, lighthouse._search_timeout); } } - lbry.lighthouse.call('search', [query], callback, undefined, function() { handleSearchFailed() }, lbry.lighthouse._search_timeout); + lighthouse.call('search', [query], callback, undefined, function() { handleSearchFailed() }, lighthouse._search_timeout); } }; -lbry.lighthouse.server = lbry.lighthouse.servers[Math.round(Math.random() * (lbry.lighthouse.servers.length - 1))]; +lighthouse.server = lighthouse.servers[Math.round(Math.random() * (lighthouse.servers.length - 1))]; + +export default lighthouse; diff --git a/js/main.js b/js/main.js index 5c14b68da..8ff6853a8 100644 --- a/js/main.js +++ b/js/main.js @@ -1,4 +1,10 @@ -//main.js +import React from 'react'; +import ReactDOM from 'react-dom'; +import lbry from './lbry.js'; +import App from './app.js'; +import SplashScreen from './component/splash.js'; + + var init = function() { var canvas = document.getElementById('canvas'); diff --git a/js/page/claim_code.js b/js/page/claim_code.js index 642c8af67..5294bd6e2 100644 --- a/js/page/claim_code.js +++ b/js/page/claim_code.js @@ -1,3 +1,8 @@ +import React from 'react'; +import lbry from '../lbry.js'; +import Modal from '../component/modal.js'; +import {Link} from '../component/link.js'; + var claimCodeContentStyle = { display: 'inline-block', textAlign: 'left', @@ -143,3 +148,5 @@ var ClaimCodePage = React.createClass({ ); } }); + +export default ClaimCodePage; diff --git a/js/page/discover.js b/js/page/discover.js index e8344d35a..f533a3afb 100644 --- a/js/page/discover.js +++ b/js/page/discover.js @@ -1,3 +1,9 @@ +import React from 'react'; +import lbry from '../lbry.js'; +import lighthouse from '../lighthouse.js'; +import {Link, ToolTipLink, DownloadLink, WatchLink} from '../component/link.js'; +import {Thumbnail, CreditAmount, TruncatedText} from '../component/common.js'; + var fetchResultsStyle = { color: '#888', textAlign: 'center', @@ -179,7 +185,7 @@ var FeaturedContentItem = React.createClass({ componentDidMount: function() { this.resolveSearch = true; - lbry.lighthouse.search(this.props.name, function(results) { + lighthouse.search(this.props.name, function(results) { var result = results[0]; var metadata = result.value; if (this.resolveSearch) @@ -257,7 +263,7 @@ var DiscoverPage = React.createClass({ query: this.props.query, }); - lbry.lighthouse.search(this.props.query, this.searchCallback); + lighthouse.search(this.props.query, this.searchCallback); }, componentDidMount: function() { @@ -297,3 +303,5 @@ var DiscoverPage = React.createClass({ ); } }); + +export default DiscoverPage; diff --git a/js/page/help.js b/js/page/help.js index c409758f5..75eca13ee 100644 --- a/js/page/help.js +++ b/js/page/help.js @@ -1,4 +1,8 @@ //@TODO: Customize advice based on OS +//@TODO: Customize advice based on OS +import React from 'react'; +import lbry from '../lbry.js'; +import {Link} from '../component/link.js'; var HelpPage = React.createClass({ getInitialState: function() { @@ -98,3 +102,5 @@ var HelpPage = React.createClass({ ); } }); + +export default HelpPage; \ No newline at end of file diff --git a/js/page/my_files.js b/js/page/my_files.js index cd83af9e0..8b1c9abee 100644 --- a/js/page/my_files.js +++ b/js/page/my_files.js @@ -1,3 +1,9 @@ +import React from 'react'; +import lbry from '../lbry.js'; +import {Link, WatchLink} from '../component/link.js'; +import Modal from '../component/modal.js'; +import {BusyMessage, Thumbnail} from '../component/common.js'; + var moreMenuStyle = { position: 'absolute', display: 'block', @@ -317,3 +323,6 @@ var MyFilesPage = React.createClass({ ); } }); + + +export default MyFilesPage; diff --git a/js/page/publish.js b/js/page/publish.js index 46dadcc1e..26567b9f6 100644 --- a/js/page/publish.js +++ b/js/page/publish.js @@ -1,3 +1,10 @@ +import React from 'react'; +import lbry from '../lbry.js'; +import FormField from '../component/form.js'; +import {Link} from '../component/link.js'; +import Modal from '../component/modal.js'; + + var publishNumberStyle = { width: '50px', }, publishFieldLabelStyle = { @@ -277,7 +284,7 @@ var PublishPage = React.createClass({ var formData = new FormData(fileInput.form); formData.append('file', fileInput.files[0]); - xhr.open('POST', '/upload', true); + xhr.open('POST', lbry.webUiUri + '/upload', true); xhr.send(formData); } }, @@ -344,6 +351,7 @@ var PublishPage = React.createClass({ } } }, + // Also getting a type warning here too render: function() { return (
@@ -496,3 +504,5 @@ var PublishPage = React.createClass({ ); } }); + +export default PublishPage; diff --git a/js/page/referral.js b/js/page/referral.js index 33f4f3704..4a04a2718 100644 --- a/js/page/referral.js +++ b/js/page/referral.js @@ -1,3 +1,8 @@ +import React from 'react'; +import lbry from '../lbry.js'; +import {Link} from '../component/link.js'; +import Modal from '../component/modal.js'; + var referralCodeContentStyle = { display: 'inline-block', textAlign: 'left', @@ -118,3 +123,5 @@ var ReferralPage = React.createClass({ ); } }); + +export default ReferralPage; diff --git a/js/page/report.js b/js/page/report.js index ac9751857..72eedf1a1 100644 --- a/js/page/report.js +++ b/js/page/report.js @@ -1,3 +1,6 @@ +import React from 'react'; +import lbry from '../lbry.js'; + var ReportPage = React.createClass({ submitMessage: function() { if (this._messageArea.value) { @@ -50,4 +53,6 @@ var ReportPage = React.createClass({
); } -}); \ No newline at end of file +}); + +export default ReportPage; diff --git a/js/page/settings.js b/js/page/settings.js index c06a61022..81403492b 100644 --- a/js/page/settings.js +++ b/js/page/settings.js @@ -1,3 +1,6 @@ +import React from 'react'; +import lbry from '../lbry.js'; + var settingsRadioOptionStyles = { display: 'block', marginLeft: '13px' @@ -129,3 +132,6 @@ var SettingsPage = React.createClass({ ); } }); + + +export default SettingsPage; diff --git a/js/page/show.js b/js/page/show.js index 3c99ea4bb..088753d46 100644 --- a/js/page/show.js +++ b/js/page/show.js @@ -1,3 +1,7 @@ +import React from 'react'; +import lbry from '../lbry.js'; +import {Thumbnail} from '../component/common.js'; + var formatItemImgStyle = { maxWidth: '100%', maxHeight: '100%', @@ -161,4 +165,6 @@ var DetailPage = React.createClass({ ); } -}); \ No newline at end of file +}); + +export default DetailPage; diff --git a/js/page/start.js b/js/page/start.js index ca81d2044..9f918db27 100644 --- a/js/page/start.js +++ b/js/page/start.js @@ -1,3 +1,6 @@ +import React from 'react'; +import lbry from '../lbry.js'; + var StartPage = React.createClass({ componentWillMount: function() { lbry.stop(); @@ -13,4 +16,6 @@ var StartPage = React.createClass({ ); } -}); \ No newline at end of file +}); + +export default StartPage; diff --git a/js/page/wallet.js b/js/page/wallet.js index 7f5c536cc..bbc0505a6 100644 --- a/js/page/wallet.js +++ b/js/page/wallet.js @@ -1,3 +1,10 @@ +import React from 'react'; +import lbry from '../lbry.js'; +import {Link} from '../component/link.js'; +import Modal from '../component/modal.js'; +import {Address, BusyMessage, CreditAmount} from '../component/common.js'; + + var addressRefreshButtonStyle = { fontSize: '11pt', }; @@ -8,7 +15,7 @@ var AddressSection = React.createClass({ } lbry.getNewAddress((address) => { - localStorage.setItem('wallet_address', address); + window.localStorage.setItem('wallet_address', address); this.setState({ address: address, }); @@ -21,7 +28,7 @@ var AddressSection = React.createClass({ } }, componentWillMount: function() { - var address = localStorage.getItem('wallet_address'); + var address = window.localStorage.getItem('wallet_address'); if (address === null) { this._refreshAddress(); } else { @@ -272,3 +279,5 @@ var WalletPage = React.createClass({ ); } }); + +export default WalletPage; diff --git a/js/page/watch.js b/js/page/watch.js index 202aaae7f..4351c2132 100644 --- a/js/page/watch.js +++ b/js/page/watch.js @@ -1,3 +1,7 @@ +import React from 'react'; +import lbry from '../lbry.js'; +import MediaElementPlayer from 'mediaelement'; + var WatchPage = React.createClass({ propTypes: { name: React.PropTypes.string, @@ -43,9 +47,11 @@ var WatchPage = React.createClass({ ? :