Merge pull request #791 from lbryio/restructuring

Update file structure to follow electron-webpack guidelines

.bumpversion.cfg

@@ -16,11 +16,11 @@ values =
 	rc
 	production
 
-[bumpversion:file:app/package.json]
+[bumpversion:file:src/main/package.json]
 search = "version": "{current_version}"
 replace = "version": "{new_version}"
 
-[bumpversion:file:ui/package.json]
+[bumpversion:file:src/renderer/package.json]
 search = "version": "{current_version}"
 replace = "version": "{new_version}"
 

.gitignore

@@ -2,16 +2,16 @@
 /LBRY-darwin-x64
 /dist
 
-/ui/dist/css/*
+/src/renderer/dist/css/*
-/ui/dist/js/*
+/src/renderer/dist/js/*
-!/ui/dist/js/mediaelement
+!/src/renderer/dist/js/mediaelement
-/ui/node_modules
+/src/renderer/node_modules
-/ui/.sass-cache
+/src/renderer/.sass-cache
 
 
-/app/dist
+/src/main/dist
-/app/locales
+/src/main/locales
-/app/node_modules
+/src/main/node_modules
 /build/venv
 /build/daemon.ver
 /lbry-app-venv

.tx/config

@@ -2,7 +2,7 @@
 host = https://www.transifex.com
 
 [lbry-app.app-strings]
-file_filter = app/dist/locales/<lang>.json
+file_filter = src/main/dist/locales/<lang>.json
-source_file = app/dist/locales/en.json
+source_file = src/main/dist/locales/en.json
 source_lang = en
 type = KEYVALUEJSON

README.md

@@ -29,13 +29,13 @@ This will download and install the LBRY app and its dependencies, including [the
 
 ### Running
 
-Run `./node_modules/.bin/electron app`
+Run `./node_modules/.bin/electron src/main`
 
 ### Ongoing Development
-1. `cd ui`
+1. `cd src/renderer`
 2. `./watch.sh`
 
-This will set up a monitor that will automatically compile any changes to JS or CSS folders inside of the `ui` folder. This allows you to make changes and see them immediately by reloading the app.
+This will set up a monitor that will automatically compile any changes to JS or CSS folders inside of the `src/renderer` folder. This allows you to make changes and see them immediately by reloading the app.
 
 ### Packaging
 
@@ -63,40 +63,40 @@ exit
 2. Open command prompt in the root of the project and run the following:
 ```
 python -m pip install -r build\requirements.txt
-python build\set_version.py
 npm install -g yarn
 yarn install
 ```
-3. Change directory to `app` and run the following;
+
+3. Change directory to `src\main` and run the following:
 ```
 yarn install
 node_modules\.bin\electron-rebuild
 node_modules\.bin\electron-rebuild
-cd ..
+cd ..\..
 ```
-4. Change directory to `ui` and run the following:
+4. Change directory to `src\renderer` and run the following:
 ```
 yarn install
 npm rebuild node-sass
 node node_modules\node-sass\bin\node-sass --output dist\css --sourcemap=none scss\
 node_modules\.bin\webpack --config webpack.dev.config.js
-xcopy /E dist ..\app\dist
+xcopy /E dist ..\main\dist
-cd ..
+cd ..\..
 ```
-4. Download the lbry daemon and cli [binaries](https://github.com/lbryio/lbry/releases) and place them in `app\dist\`
+4. Download the lbry daemon and cli [binaries](https://github.com/lbryio/lbry/releases) and place them in `src\main\dist\`
 
 ### Building lbry-app
 1. run `node_modules\.bin\build -p never` from the root of the project.
 
 ### Running the electron app
-1. Run `node_modules\.bin\electron app`
+1. Run `node_modules\.bin\electron src\main`
 
 ### Ongoing Development
-1. `cd ui`
+1. `cd src\renderer`
 2. `watch.bat`
 
-This will set up a monitor that will automatically compile any changes to JS or CSS folders inside of the `ui` folder. This allows you to make changes and see them immediately by reloading the app.
+This will set up a monitor that will automatically compile any changes to JS or CSS folders inside of the `src\renderer` folder. This allows you to make changes and see them immediately by reloading the app.
 
 ## Internationalization
 
-If you want to help translating the lbry-app, you can copy the en.json file in /app/locales and modify the values while leaving the keys as their original English strings. An example for this would be: `"Skip": "Überspringen",` Translations should automatically show up in options.
+If you want to help translating the lbry-app, you can copy the en.json file in /src/main/locales and modify the values while leaving the keys as their original English strings. An example for this would be: `"Skip": "Überspringen",` Translations should automatically show up in options.

build/build.ps1

@@ -1,6 +1,4 @@
 pip install -r build\requirements.txt
-python build\set_version.py
-
 
 # Get the latest stable version of Node.js or io.js
 Install-Product node $env:nodejs_version
@@ -9,33 +7,33 @@ yarn install
 
 
 # do app
-cd app
+cd src\main
 yarn install
 # necessary to ensure native Node modules (e.g. keytar) are built against the correct version of Node)
 # yes, it needs to be run twice. it fails the first time, not sure why
 node_modules\.bin\electron-rebuild
 node_modules\.bin\electron-rebuild
-cd ..
+cd ..\..
 
 
 # build ui
-cd ui
+cd src\renderer
 yarn install
 npm rebuild node-sass
 node_modules\.bin\node-sass --output dist\css --sourcemap=none scss\
 node_modules\.bin\webpack --config webpack.prod.js
-Copy-Item dist ..\app\ -recurse
+Copy-Item dist ..\main\ -recurse
-cd ..
+cd ..\..
 
 
 # get daemon and cli executable
-$package_settings = (Get-Content app\package.json -Raw | ConvertFrom-Json).lbrySettings
+$package_settings = (Get-Content src\main\package.json -Raw | ConvertFrom-Json).lbrySettings
 $daemon_ver = $package_settings.lbrynetDaemonVersion
 $daemon_url_template = $package_settings.lbrynetDaemonUrlTemplate
 $daemon_url = $daemon_url_template.Replace('OSNAME', 'windows').Replace('DAEMONVER', $daemon_ver)
 Invoke-WebRequest -Uri $daemon_url -OutFile daemon.zip
-Expand-Archive daemon.zip -DestinationPath app\dist\
+Expand-Archive daemon.zip -DestinationPath src\main\dist\
-dir app\dist\ # verify that daemon binary is there
+dir src\main\dist\ # verify that daemon binary is there
 rm daemon.zip
 
 

build/build.sh

@@ -41,8 +41,8 @@ fi
 
 [ -d "$ROOT/dist" ] && rm -rf "$ROOT/dist"
 mkdir -p "$ROOT/dist"
-[ -d "$ROOT/app/dist" ] && rm -rf "$ROOT/app/dist"
+[ -d "$ROOT/src/main/dist" ] && rm -rf "$ROOT/src/main/dist"
-mkdir -p "$ROOT/app/dist"
+mkdir -p "$ROOT/src/main/dist"
 
 yarn install
 
@@ -53,13 +53,13 @@ yarn install
 ############
 echo -e "\033[0;32mCompiling UI\x1b[m"
 (
-  cd "$ROOT/ui"
+  cd "$ROOT/src/renderer"
   yarn install
   npm rebuild node-sass
   node extractLocals.js
   node_modules/.bin/node-sass --output dist/css --sourcemap=none scss/
   node_modules/.bin/webpack --config webpack.prod.js
-  cp -r dist/* "$ROOT/app/dist/"
+  cp -r dist/* "$ROOT/src/main/dist/"
 )
 
 
@@ -73,14 +73,14 @@ if $OSX; then
 else
   OSNAME="linux"
 fi
-DAEMON_VER=$(node -e "console.log(require(\"$ROOT/app/package.json\").lbrySettings.lbrynetDaemonVersion)")
+DAEMON_VER=$(node -e "console.log(require(\"$ROOT/src/main/package.json\").lbrySettings.lbrynetDaemonVersion)")
-DAEMON_URL_TEMPLATE=$(node -e "console.log(require(\"$ROOT/app/package.json\").lbrySettings.lbrynetDaemonUrlTemplate)")
+DAEMON_URL_TEMPLATE=$(node -e "console.log(require(\"$ROOT/src/main/package.json\").lbrySettings.lbrynetDaemonUrlTemplate)")
 DAEMON_URL=$(echo ${DAEMON_URL_TEMPLATE//DAEMONVER/$DAEMON_VER} | sed "s/OSNAME/$OSNAME/g")
 DAEMON_VER_PATH="$BUILD_DIR/daemon.ver"
 echo "$DAEMON_VER_PATH"
-if [[ ! -f $DAEMON_VER_PATH || ! -f $ROOT/app/dist/lbrynet-daemon || "$(< "$DAEMON_VER_PATH")" != "$DAEMON_VER" ]]; then
+if [[ ! -f $DAEMON_VER_PATH || ! -f $ROOT/src/main/dist/lbrynet-daemon || "$(< "$DAEMON_VER_PATH")" != "$DAEMON_VER" ]]; then
     curl -sL -o "$BUILD_DIR/daemon.zip" "$DAEMON_URL"
-    unzip "$BUILD_DIR/daemon.zip" -d "$ROOT/app/dist/"
+    unzip "$BUILD_DIR/daemon.zip" -d "$ROOT/src/main/dist/"
     rm "$BUILD_DIR/daemon.zip"
     echo "$DAEMON_VER" > "$DAEMON_VER_PATH"
 else
@@ -95,16 +95,16 @@ fi
 ###################
 echo -e '\033[0;32mBuilding Lbry-app\x1b[m'
 (
-  cd "$ROOT/app"
+  cd "$ROOT/src/main"
   yarn install
 
   # necessary to ensure native Node modules (e.g. keytar) are built against the correct version of Node)
   # yes, it needs to be run twice. it fails the first time, not sure why
   set +e
   # DEBUG=electron-rebuild node_modules/.bin/electron-rebuild .
-  node_modules/.bin/electron-rebuild "$ROOT/app"
+  node_modules/.bin/electron-rebuild "$ROOT/src/main"
   set -e
-  node_modules/.bin/electron-rebuild "$ROOT/app"
+  node_modules/.bin/electron-rebuild "$ROOT/src/main"
 )
 
 if [ "$FULL_BUILD" == "true" ]; then
@@ -133,5 +133,5 @@ if [ "$FULL_BUILD" == "true" ]; then
 
   echo -e '\033[0;32mBuild and packaging complete.\x1b[m'
 else
-  echo -e 'Build complete. Run \033[1;31m./node_modules/.bin/electron app\x1b[m to launch the app'
+  echo -e 'Build complete. Run \033[1;31m./node_modules/.bin/electron src/main\x1b[m to launch the app'
 fi

build/release.py

@@ -17,7 +17,7 @@ import github
 import changelog
 
 ROOT = os.path.dirname(os.path.dirname(os.path.realpath(__file__)))
-APP_PACKAGE_JSON_FILE = os.path.join(ROOT, 'app', 'package.json')
+APP_PACKAGE_JSON_FILE = os.path.join(ROOT, 'src', 'main', 'package.json')
 
 
 def main():

package.json

@@ -3,7 +3,7 @@
   "build": {
     "asar": false,
     "directories": {
-      "app": "app"
+      "app": "src/main"
     },
     "appId": "io.lbry.LBRY",
     "mac": {

src/renderer/dist/img/fav/browserconfig.xml

@@ -1,12 +1,12 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
+<browserconfig>
-  <msapplication>
+  <msapplication>
-    <tile>
+    <tile>
-      <square70x70logo src="/mstile-70x70.png"/>
+      <square70x70logo src="/mstile-70x70.png"/>
-      <square150x150logo src="/mstile-150x150.png"/>
+      <square150x150logo src="/mstile-150x150.png"/>
-      <square310x310logo src="/mstile-310x310.png"/>
+      <square310x310logo src="/mstile-310x310.png"/>
-      <wide310x150logo src="/mstile-310x150.png"/>
+      <wide310x150logo src="/mstile-310x150.png"/>
-      <TileColor>#da532c</TileColor>
+      <TileColor>#da532c</TileColor>
-    </tile>
+    </tile>
-  </msapplication>
+  </msapplication>
-</browserconfig>
+</browserconfig>

src/renderer/extractLocals.js

@@ -1,7 +1,7 @@
 var extract = require("i18n-extract");
 const fs = require("fs");
 
-var dir = __dirname + "/../app/dist/locales";
+var dir = __dirname + "/../main/dist/locales";
 var path = dir + "/en.json";
 
 if (!fs.existsSync(dir)) {

src/renderer/js/component/channelTile/view.jsx

@@ -40,16 +40,19 @@ class ChannelTile extends React.PureComponent {
                 </h3>
               </div>
               <div className="card__content card__subtext">
-                {isResolvingUri &&
+                {isResolvingUri && (
-                  <BusyMessage message={__("Resolving channel")} />}
+                  <BusyMessage message={__("Resolving channel")} />
-                {totalItems > 0 &&
+                )}
+                {totalItems > 0 && (
                   <span>
                     This is a channel with {totalItems}{" "}
                     {totalItems === 1 ? " item" : " items"} inside of it.
-                  </span>}
+                  </span>
+                )}
                 {!isResolvingUri &&
-                  !totalItems &&
+                  !totalItems && (
-                  <span className="empty">This is an empty channel.</span>}
+                    <span className="empty">This is an empty channel.</span>
+                  )}
               </div>
             </div>
           </div>

src/renderer/js/component/common.js

@@ -50,7 +50,9 @@ export class BusyMessage extends React.PureComponent {
 
   render() {
     return (
-      <span>{this.props.message} <span className="busy-indicator" /></span>
+      <span>
+        {this.props.message} <span className="busy-indicator" />
+      </span>
     );
   }
 }
@@ -92,9 +94,10 @@ export class CreditAmount extends React.PureComponent {
     if (showFullPrice) {
       formattedAmount = fullPrice;
     } else {
-      formattedAmount = amount > 0 && amount < minimumRenderableAmount
+      formattedAmount =
-        ? "<" + minimumRenderableAmount
+        amount > 0 && amount < minimumRenderableAmount
-        : formatCredits(amount, precision);
+          ? "<" + minimumRenderableAmount
+          : formatCredits(amount, precision);
     }
 
     let amountText;
@@ -119,17 +122,15 @@ export class CreditAmount extends React.PureComponent {
         className={`credit-amount credit-amount--${this.props.look}`}
         title={fullPrice}
       >
-        <span>
+        <span>{amountText}</span>
-          {amountText}
+        {this.props.isEstimate ? (
-        </span>
+          <span
-        {this.props.isEstimate
+            className="credit-amount__estimate"
-          ? <span
+            title={__("This is an estimate and does not include data fees")}
-              className="credit-amount__estimate"
+          >
-              title={__("This is an estimate and does not include data fees")}
+            *
-            >
+          </span>
-              *
+        ) : null}
-            </span>
-          : null}
       </span>
     );
   }

src/renderer/js/component/file-selector.js

@@ -26,9 +26,10 @@ class FileSelector extends React.PureComponent {
   handleButtonClick() {
     remote.dialog.showOpenDialog(
       {
-        properties: this.props.type == "file"
+        properties:
-          ? ["openFile"]
+          this.props.type == "file"
-          : ["openDirectory", "createDirectory"],
+            ? ["openFile"]
+            : ["openDirectory", "createDirectory"],
       },
       paths => {
         if (!paths) {
@@ -62,8 +63,7 @@ class FileSelector extends React.PureComponent {
                 : __("Choose Directory")}
             </span>
           </span>
-        </button>
+        </button>{" "}
-        {" "}
         <span className="file-selector__path">
           <input
             className="input-copyable"

src/renderer/js/component/fileActions/view.jsx

@@ -13,22 +13,24 @@ class FileActions extends React.PureComponent {
     return (
       <section className="card__actions">
         <FileDownloadLink uri={uri} />
-        {showDelete &&
+        {showDelete && (
           <Link
             button="text"
             icon="icon-trash"
             label={__("Remove")}
             className="no-underline"
             onClick={() => openModal(modals.CONFIRM_FILE_REMOVE, { uri })}
-          />}
+          />
-        {!claimIsMine &&
+        )}
+        {!claimIsMine && (
           <Link
             button="text"
             icon="icon-flag"
             href={`https://lbry.io/dmca?claim_id=${claimId}`}
             className="no-underline"
             label={__("report")}
-          />}
+          />
+        )}
         <Link
           button="primary"
           icon="icon-gift"
@@ -37,7 +39,7 @@ class FileActions extends React.PureComponent {
           className="card__action--right"
           navigateParams={{ uri, tab: "tip" }}
         />
-        {claimIsMine &&
+        {claimIsMine && (
           <Link
             button="alt"
             icon="icon-edit"
@@ -45,7 +47,8 @@ class FileActions extends React.PureComponent {
             navigate="/publish"
             className="card__action--right"
             navigateParams={{ id: claimId }}
-          />}
+          />
+        )}
       </section>
     );
   }

src/renderer/js/component/fileDetails/view.jsx

@@ -49,15 +49,18 @@ class FileDetails extends React.PureComponent {
           <table className="table-standard table-stretch">
             <tbody>
               <tr>
-                <td>{__("Content-Type")}</td><td>{mediaType}</td>
+                <td>{__("Content-Type")}</td>
+                <td>{mediaType}</td>
               </tr>
               <tr>
-                <td>{__("Language")}</td><td>{language}</td>
+                <td>{__("Language")}</td>
+                <td>{language}</td>
               </tr>
               <tr>
-                <td>{__("License")}</td><td>{license}</td>
+                <td>{__("License")}</td>
+                <td>{license}</td>
               </tr>
-              {downloadPath &&
+              {downloadPath && (
                 <tr>
                   <td>{__("Downloaded to")}</td>
                   <td>
@@ -65,7 +68,8 @@ class FileDetails extends React.PureComponent {
                       {downloadPath}
                     </Link>
                   </td>
-                </tr>}
+                </tr>
+              )}
             </tbody>
           </table>
         </div>

src/renderer/js/component/fileDownloadLink/view.jsx

@@ -45,18 +45,17 @@ class FileDownloadLink extends React.PureComponent {
     } = this.props;
 
     if (loading || downloading) {
-      const progress = fileInfo && fileInfo.written_bytes
+      const progress =
-        ? fileInfo.written_bytes / fileInfo.total_bytes * 100
+          fileInfo && fileInfo.written_bytes
-        : 0,
+            ? fileInfo.written_bytes / fileInfo.total_bytes * 100
+            : 0,
         label = fileInfo
           ? progress.toFixed(0) + __("% complete")
           : __("Connecting..."),
         labelWithIcon = (
           <span className="button__content">
             <Icon icon="icon-download" />
-            <span>
+            <span>{label}</span>
-              {label}
-            </span>
           </span>
         );
 

src/renderer/js/component/fileList/view.jsx

@@ -98,7 +98,7 @@ class FileList extends React.PureComponent {
       <section className="file-list__header">
         {fetching && <BusyMessage />}
         <span className="sort-section">
-          {__("Sort by")} {" "}
+          {__("Sort by")}{" "}
           <FormField type="select" onChange={this.handleSortChanged.bind(this)}>
             <option value="date">{__("Date")}</option>
             <option value="title">{__("Title")}</option>

src/renderer/js/component/fileListSearch/view.jsx

@@ -11,7 +11,7 @@ const SearchNoResults = props => {
   return (
     <section>
       <span className="empty">
-        {(__("No one has checked anything in for %s yet."), query)} {" "}
+        {(__("No one has checked anything in for %s yet."), query)}{" "}
         <Link label={__("Be the first")} navigate="/publish" />
       </span>
     </section>
@@ -39,19 +39,21 @@ class FileListSearch extends React.PureComponent {
     return (
       <div>
         {isSearching &&
-          !uris &&
+          !uris && (
-          <BusyMessage message={__("Looking up the Dewey Decimals")} />}
+            <BusyMessage message={__("Looking up the Dewey Decimals")} />
+          )}
 
         {isSearching &&
-          uris &&
+          uris && <BusyMessage message={__("Refreshing the Dewey Decimals")} />}
-          <BusyMessage message={__("Refreshing the Dewey Decimals")} />}
 
         {uris && uris.length
           ? uris.map(
               uri =>
-                lbryuri.parse(uri).name[0] === "@"
+                lbryuri.parse(uri).name[0] === "@" ? (
-                  ? <ChannelTile key={uri} uri={uri} />
+                  <ChannelTile key={uri} uri={uri} />
-                  : <FileTile key={uri} uri={uri} />
+                ) : (
+                  <FileTile key={uri} uri={uri} />
+                )
             )
           : !isSearching && <SearchNoResults query={query} />}
       </div>

src/renderer/js/component/fileTile/view.jsx

@@ -72,12 +72,12 @@ class FileTile extends React.PureComponent {
     const uri = lbryuri.normalize(this.props.uri);
     const isClaimed = !!claim;
     const isClaimable = lbryuri.isClaimable(uri);
-    const title = isClaimed && metadata && metadata.title
+    const title =
-      ? metadata.title
+      isClaimed && metadata && metadata.title
-      : lbryuri.parse(uri).contentName;
+        ? metadata.title
-    const thumbnail = metadata && metadata.thumbnail
+        : lbryuri.parse(uri).contentName;
-      ? metadata.thumbnail
+    const thumbnail =
-      : null;
+      metadata && metadata.thumbnail ? metadata.thumbnail : null;
     const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
     const isRewardContent =
       claim && rewardedContentClaimIds.includes(claim.claim_id);
@@ -98,9 +98,10 @@ class FileTile extends React.PureComponent {
       onClick = () => navigate("/publish", {});
       description = (
         <span className="empty">
-          {__("This location is unused.")} {" "}
+          {__("This location is unused.")}{" "}
-          {isClaimable &&
+          {isClaimable && (
-            <span className="button-text">{__("Put something here!")}</span>}
+            <span className="button-text">{__("Put something here!")}</span>
+          )}
         </span>
       );
     } else if (showEmpty === FileTile.SHOW_EMPTY_PENDING) {
@@ -123,22 +124,21 @@ class FileTile extends React.PureComponent {
             <div className="file-tile__content">
               <div className="card__title-primary">
                 <span className="card__indicators">
-                  {showPrice && <FilePrice uri={this.props.uri} />}
+                  {showPrice && <FilePrice uri={this.props.uri} />}{" "}
-                  {" "}
+                  {isRewardContent && <Icon icon={icons.FEATURED} />}{" "}
-                  {isRewardContent && <Icon icon={icons.FEATURED} />}
-                  {" "}
                   {showLocal && fileInfo && <Icon icon={icons.LOCAL} />}
                 </span>
                 <h3>
                   <TruncatedText lines={1}>{title || name}</TruncatedText>
                 </h3>
               </div>
-              {description &&
+              {description && (
                 <div className="card__content card__subtext">
                   <TruncatedText lines={!showActions ? 3 : 2}>
                     {description}
                   </TruncatedText>
-                </div>}
+                </div>
+              )}
             </div>
           </div>
         </div>