cleanup

package.json

@@ -67,7 +67,7 @@
     "@babel/register": "^7.0.0",
     "@exponent/electron-cookies": "^2.0.0",
     "@hot-loader/react-dom": "^16.8",
-    "@lbry/components": "^3.0.3",
+    "@lbry/components": "^3.0.4",
     "@reach/menu-button": "^0.1.18",
     "@reach/rect": "^0.2.1",
     "@reach/tabs": "^0.1.5",

ui/component/fileViewer/view.jsx

@@ -105,15 +105,13 @@ export default function FileViewer(props: Props) {
       setFileViewerRect(rect);
     }
 
-    if (inline) {
+    return () => {
       handleResize();
       window.addEventListener('resize', handleResize);
       onFullscreenChange(window, 'add', handleResize);
-      return () => {
       window.removeEventListener('resize', handleResize);
       onFullscreenChange(window, 'remove', handleResize);
     };
-    }
   }, [setFileViewerRect, inline]);
 
   function handleDrag(e, ui) {

ui/component/fileViewerInitiator/view.jsx

@@ -103,7 +103,7 @@ export default function FileViewer(props: Props) {
   return (
     <div
       disabled={!hasCostInfo}
-      style={!obscurePreview && supported && thumbnail ? { backgroundImage: `url("${thumbnail}")` } : {}}
+      style={!obscurePreview && supported && thumbnail && !isPlaying ? { backgroundImage: `url("${thumbnail}")` } : {}}
       onClick={supported && viewFile}
       className={classnames({
         content__cover: supported,

ui/component/sideNavigation/view.jsx

@@ -14,7 +14,7 @@ type Props = {
   obscureSideBar: boolean,
   uploadCount: number,
   sticky: boolean,
-  showAllLinks: boolean,
+  expanded: boolean,
   doSignOut: () => void,
 };
 
@@ -27,7 +27,7 @@ function SideBar(props: Props) {
     doSignOut,
     email,
     sticky = true,
-    showAllLinks = false,
+    expanded = false,
   } = props;
   const isAuthenticated = Boolean(email);
 
@@ -94,7 +94,7 @@ function SideBar(props: Props) {
             </li>
           ))}
 
-          {showAllLinks &&
+          {expanded &&
             [
               {
                 ...buildLink(PAGES.WALLET, __('Wallet'), ICONS.WALLET),
@@ -117,11 +117,15 @@ function SideBar(props: Props) {
               {
                 ...(isAuthenticated ? { ...buildLink(PAGES.AUTH, __('Sign Out'), ICONS.SIGN_OUT, doSignOut) } : {}),
               },
-            ].map(linkProps => (
+            ].map(
+              linkProps =>
+                Object.keys(linkProps).length > 0 &&
+                (linkProps && (
                   <li key={linkProps.navigate}>
                     <Button {...linkProps} className="navigation-link" activeClass="navigation-link--active" />
                   </li>
-            ))}
+                ))
+            )}
 
           <li>
             <Button

ui/modal/modal.jsx

@@ -5,14 +5,15 @@ import * as React from 'react';
 import ReactModal from 'react-modal';
 import Button from 'component/button';
 import classnames from 'classnames';
+import useIsMobile from 'effects/use-is-mobile';
 
 type ModalProps = {
-  type: string,
+  type?: string,
-  overlay: boolean,
+  overlay?: boolean,
-  confirmButtonLabel: string,
+  confirmButtonLabel?: string,
-  abortButtonLabel: string,
+  abortButtonLabel?: string,
-  confirmButtonDisabled: boolean,
+  confirmButtonDisabled?: boolean,
-  abortButtonDisabled: boolean,
+  abortButtonDisabled?: boolean,
   onConfirmed?: any => any,
   onAborted?: any => any,
   className?: string,
@@ -23,30 +24,23 @@ type ModalProps = {
   title?: string | React.Node,
 };
 
-export class Modal extends React.PureComponent<ModalProps> {
+export function Modal(props: ModalProps) {
-  static defaultProps = {
-    type: 'alert',
-    overlay: true,
-    confirmButtonLabel: __('OK'),
-    abortButtonLabel: __('Cancel'),
-    confirmButtonDisabled: false,
-    abortButtonDisabled: false,
-  };
-
-  render() {
   const {
     children,
-      type,
+    type = 'alert',
-      confirmButtonLabel,
+    confirmButtonLabel = __('OK'),
-      confirmButtonDisabled,
+    confirmButtonDisabled = false,
     onConfirmed,
-      abortButtonLabel,
+    abortButtonLabel = __('Cancel'),
-      abortButtonDisabled,
+    abortButtonDisabled = false,
     onAborted,
     className,
     title,
     ...modalProps
-    } = this.props;
+  } = props;
+
+  const isMobile = useIsMobile();
+
   return (
     <ReactModal
       {...modalProps}
@@ -57,16 +51,13 @@ export class Modal extends React.PureComponent<ModalProps> {
       overlayClassName="modal-overlay"
     >
       {title && <h1 className="card__title card__title--deprecated">{title}</h1>}
-        {type === 'card' && <Button iconSize={24} button="close" icon={ICONS.REMOVE} onClick={onAborted} />}
+      {type === 'card' && (
+        <Button iconSize={isMobile ? 24 : undefined} button="close" icon={ICONS.REMOVE} onClick={onAborted} />
+      )}
       {children}
       {type === 'custom' || type === 'card' ? null : ( // custom modals define their own buttons
         <div className="card__actions">
-            <Button
+          <Button button="primary" label={confirmButtonLabel} disabled={confirmButtonDisabled} onClick={onConfirmed} />
-              button="primary"
-              label={confirmButtonLabel}
-              disabled={confirmButtonDisabled}
-              onClick={onConfirmed}
-            />
           {type === 'confirm' ? (
             <Button button="link" label={abortButtonLabel} disabled={abortButtonDisabled} onClick={onAborted} />
           ) : null}
@@ -74,7 +65,6 @@ export class Modal extends React.PureComponent<ModalProps> {
       )}
     </ReactModal>
   );
-  }
 }
 
 type State = {

ui/modal/modalMobileNavigation/view.jsx

@@ -12,7 +12,7 @@ export default function ModalMobileNavigation(props: Props) {
 
   return (
     <Modal type="card" isOpen contentLabel={__('Navigation')} onAborted={doHideModal}>
-      <SideNavigation sticky={false} showAllLinks />
+      <SideNavigation sticky={false} expanded />
     </Modal>
   );
 }

ui/scss/component/_claim-list.scss

@@ -81,11 +81,10 @@
   @media (max-width: $breakpoint-small) {
     .media__thumb {
       position: absolute;
-      z-index: 0;
-      opacity: 0.1;
       right: 0;
       top: var(--spacing-small);
       bottom: var(--spacing-small);
+      opacity: 0.1;
     }
   }
 }
@@ -153,6 +152,16 @@
     flex-direction: row;
     justify-content: space-between;
   }
+
+  @media (max-width: $breakpoint-xsmall) {
+    .claim-preview__text {
+      flex-direction: column;
+    }
+
+    .claim-preview__actions {
+      align-self: flex-start;
+    }
+  }
 }
 
 .claim-preview__text {

ui/scss/component/_main.scss

@@ -51,6 +51,8 @@
   }
 
   @media (max-width: $breakpoint-small) {
+    overflow-x: hidden;
+
     .grid-area--related,
     .grid-area--info {
       margin-right: 0;

ui/scss/component/_modal.scss

@@ -27,9 +27,14 @@
   @media (max-width: $breakpoint-small) {
     width: 100%;
     height: 100%;
+    max-width: 100%;
     margin-bottom: 0;
     border-radius: 0;
 
+    .card {
+      box-shadow: none;
+    }
+
     .navigation {
       width: 100%;
       display: block;

ui/scss/component/_placeholder.scss

@@ -20,4 +20,10 @@
     width: 30%;
     height: 1.5em;
   }
+
+  @media (max-width: $breakpoint-small) {
+    &.media__thumb {
+      display: none;
+    }
+  }
 }

yarn.lock

@@ -1019,10 +1019,10 @@
     prop-types "^15.6.2"
     scheduler "^0.15.0"
 
-"@lbry/components@^3.0.3":
+"@lbry/components@^3.0.4":
-  version "3.0.3"
+  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-3.0.3.tgz#fe227b28bf636cf089b673b7c3697d6a9770c14e"
+  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-3.0.4.tgz#521166732707ed06e354341383c5d443fdb4b798"
-  integrity sha512-kWFDlBeZayNJ6XYLVP6Vrz2hMweOalHCjFl5DGL4qEEz/eWZBc4PuLFO7st5iklzjH8IT7jBE9FwoxOScLf2gw==
+  integrity sha512-kvkYFdPEYhjKMY/YqNBVwKvaIhTeGNCr+MqVQsE0wsb+tD+xlY+BRSt2G/H62BoL6P38qZ9lZJ5Y6OtiefL8Ag==
 
 "@mapbox/hast-util-table-cell-style@^0.1.3":
   version "0.1.3"
@@ -3860,7 +3860,7 @@ detect-file@^1.0.0:
   resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
   integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
 
-detect-libc@^1.0.2, detect-libc@^1.0.3:
+detect-libc@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
   integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
@@ -5331,13 +5331,6 @@ fs-extra@^8.0.1, fs-extra@^8.1.0:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-minipass@^1.2.5:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
-  integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
-  dependencies:
-    minipass "^2.6.0"
-
 fs-write-stream-atomic@^1.0.8:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
@@ -6095,7 +6088,7 @@ husky@^3.1.0:
     run-node "^1.0.0"
     slash "^3.0.0"
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -6158,13 +6151,6 @@ ignore-by-default@^1.0.1:
   resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
   integrity sha1-SMptcvbGo68Aqa1K5odr44ieKwk=
 
-ignore-walk@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
-  integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==
-  dependencies:
-    minimatch "^3.0.4"
-
 ignore@^3.3.5:
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
@@ -7868,21 +7854,6 @@ minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
 
-minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
-  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
-  dependencies:
-    safe-buffer "^5.1.2"
-    yallist "^3.0.0"
-
-minizlib@^1.2.1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
-  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
-  dependencies:
-    minipass "^2.9.0"
-
 mississippi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-2.0.0.tgz#3442a508fafc28500486feea99409676e4ee5a6f"
@@ -8043,15 +8014,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-needle@^2.2.1:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.0.tgz#6833e74975c444642590e15a750288c5f939b57c"
-  integrity sha512-4Hnwzr3mi5L97hMYeNl8wRW/Onhy4nUKR/lVemJ8gJedxxUyBLm9kkrDColJvoSfwi0jCNhD+xCdOtiGDQiRZg==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -8192,22 +8154,6 @@ node-modules-regexp@^1.0.0:
   resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
   integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
 
-node-pre-gyp@*:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
-  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4.4.2"
-
 node-releases@^1.1.19:
   version "1.1.19"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.19.tgz#c492d1e381fea0350b338b646c27867e88e91b3d"
@@ -8273,14 +8219,6 @@ noop-logger@^0.1.1:
   dependencies:
     abbrev "1"
 
-nopt@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
-  integrity sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=
-  dependencies:
-    abbrev "1"
-    osenv "^0.1.4"
-
 nopt@~1.0.10:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
@@ -8344,26 +8282,6 @@ normalize-url@^4.1.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.3.0.tgz#9c49e10fc1876aeb76dba88bf1b2b5d9fa57b2ee"
   integrity sha512-0NLtR71o4k6GLP+mr6Ty34c5GA6CMoEsncKJxvQd8NzPxaHRJNnb5gZE8R1XF4CPIS7QPHLJ74IFszwtNVAHVQ==
 
-npm-bundled@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"
-  integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==
-  dependencies:
-    npm-normalize-package-bin "^1.0.1"
-
-npm-normalize-package-bin@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
-  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
-
-npm-packlist@^1.1.6:
-  version "1.4.7"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.7.tgz#9e954365a06b80b18111ea900945af4f88ed4848"
-  integrity sha512-vAj7dIkp5NhieaGZxBJB8fF4R0078rqsmhJcAfXZ6O7JJhjhPK96n5Ry1oZcfLXgfun0GWTZPOxaEyqv8GBykQ==
-  dependencies:
-    ignore-walk "^3.0.1"
-    npm-bundled "^1.0.1"
-
 npm-path@^2.0.2:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/npm-path/-/npm-path-2.0.4.tgz#c641347a5ff9d6a09e4d9bce5580c4f505278e64"
@@ -8398,7 +8316,7 @@ npm-which@^3.0.1:
     npm-path "^2.0.2"
     which "^1.2.10"
 
-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1, npmlog@^4.0.2:
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -8635,7 +8553,7 @@ os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-osenv@0, osenv@^0.1.4:
+osenv@0:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
   integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
@@ -10845,7 +10763,7 @@ rimraf@2, rimraf@2.6.3, rimraf@^2.2.8, rimraf@^2.5.2, rimraf@^2.6.3:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2:
+rimraf@^2.5.4, rimraf@^2.6.2:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -11915,19 +11833,6 @@ tar@^2.0.0:
     fstream "^1.0.12"
     inherits "2"
 
-tar@^4.4.2:
-  version "4.4.13"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
-  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
-  dependencies:
-    chownr "^1.1.1"
-    fs-minipass "^1.2.5"
-    minipass "^2.8.6"
-    minizlib "^1.2.1"
-    mkdirp "^0.5.0"
-    safe-buffer "^5.1.2"
-    yallist "^3.0.3"
-
 temp-file@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/temp-file/-/temp-file-3.3.4.tgz#73af868cd7cb7400a44e4bb03e653b2280ce2878"
@@ -13234,7 +13139,7 @@ yallist@^2.1.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
   integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
 
-yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3:
+yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==