add lbry.tv is shutting down message

ui/component/userEmailNew/index.js

@@ -11,18 +11,19 @@ import { doSetWalletSyncPreference, doSetDaemonSetting } from 'redux/actions/set
 import { selectDaemonSettings, makeSelectClientSetting } from 'redux/selectors/settings';
 import UserEmailNew from './view';
 
-const select = state => ({
+const select = (state) => ({
   isPending: selectEmailNewIsPending(state),
   errorMessage: selectEmailNewErrorMessage(state),
   syncEnabled: makeSelectClientSetting(SETTINGS.ENABLE_SYNC)(state),
   daemonSettings: selectDaemonSettings(state),
   emailExists: selectEmailAlreadyExists(state),
   user: selectUser(state),
+  currentTheme: makeSelectClientSetting(SETTINGS.THEME)(state),
 });
 
-const perform = dispatch => ({
-  setSync: value => dispatch(doSetWalletSyncPreference(value)),
-  setShareDiagnosticData: shouldShareData =>
+const perform = (dispatch) => ({
+  setSync: (value) => dispatch(doSetWalletSyncPreference(value)),
+  setShareDiagnosticData: (shouldShareData) =>
     dispatch(doSetDaemonSetting(DAEMON_SETTINGS.SHARE_USAGE_DATA, shouldShareData)),
   doSignUp: (email, password) => dispatch(doUserSignUp(email, password)),
   clearEmailEntry: () => dispatch(doClearEmailEntry()),

ui/component/userEmailNew/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import * as PAGES from 'constants/pages';
-import { SITE_NAME } from 'config';
+import { SITE_NAME, DOMAIN } from 'config';
 import React, { useState } from 'react';
 import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
@@ -11,20 +11,24 @@ import { useHistory } from 'react-router-dom';
 import Card from 'component/common/card';
 import ErrorText from 'component/common/error-text';
 import Nag from 'component/common/nag';
+import classnames from 'classnames';
+import OdyseeLogoWithWhiteText from 'component/header/odysee_white.png';
+import OdyseeLogoWithText from 'component/header/odysee.png';
 
 type Props = {
   errorMessage: ?string,
   emailExists: boolean,
   isPending: boolean,
   syncEnabled: boolean,
-  setSync: boolean => void,
+  setSync: (boolean) => void,
   balance: number,
   daemonSettings: { share_usage_data: boolean },
-  setShareDiagnosticData: boolean => void,
+  setShareDiagnosticData: (boolean) => void,
   doSignUp: (string, ?string) => Promise<any>,
   clearEmailEntry: () => void,
   interestedInYoutubSync: boolean,
   doToggleInterestedInYoutubeSync: () => void,
+  currentTheme: string,
 };
 
 function UserEmailNew(props: Props) {
@@ -39,6 +43,7 @@ function UserEmailNew(props: Props) {
     emailExists,
     interestedInYoutubSync,
     doToggleInterestedInYoutubeSync,
+    currentTheme,
   } = props;
   const { share_usage_data: shareUsageData } = daemonSettings;
   const { push, location } = useHistory();
@@ -98,7 +103,7 @@ function UserEmailNew(props: Props) {
         subtitle={__('An account with lbry.tv allows you to earn rewards and backup your data.')}
         // @endif
         actions={
-          <div>
+          <div className={classnames({ 'card--disabled': DOMAIN === 'lbry.tv' })}>
             <Form onSubmit={handleSubmit} className="section">
               <FormField
                 autoFocus
@@ -107,14 +112,14 @@ function UserEmailNew(props: Props) {
                 name="sign_up_email"
                 label={__('Email')}
                 value={email}
-                onChange={e => setEmail(e.target.value)}
+                onChange={(e) => setEmail(e.target.value)}
               />
               <FormField
                 type="password"
                 name="sign_in_password"
                 label={__('Password')}
                 value={password}
-                onChange={e => setPassword(e.target.value)}
+                onChange={(e) => setPassword(e.target.value)}
               />
 
               {/* @if TARGET='web' */}
@@ -180,8 +185,38 @@ function UserEmailNew(props: Props) {
             </Form>
           </div>
         }
-        nag={errorMessage && <Nag type="error" relative message={<ErrorText>{errorMessage}</ErrorText>} />}
+        nag={
+          <>
+            {IS_WEB && DOMAIN === 'lbry.tv' && (
+              <Nag
+                relative
+                message={
+                  <I18nMessage
+                    tokens={{
+                      odysee: (
+                        <Button button="link" label={__('odysee.com')} href="https://odysee.com?src=lbrytv-retired" />
+                      ),
+                    }}
+                  >
+                    {__(
+                      'lbry.tv is being retired in favor of %odysee% and new sign ups are disabled. Sign up on %odysee% instead'
+                    )}
+                  </I18nMessage>
+                }
               />
+            )}
+            {errorMessage && <Nag type="error" relative message={<ErrorText>{errorMessage}</ErrorText>} />}
+          </>
+        }
+      />
+
+      {IS_WEB && DOMAIN === 'lbry.tv' && (
+        <div className="signup__odysee-logo">
+          <Button href="https://odysee.com?src=lbrytv-retired">
+            <img src={currentTheme === 'light' ? OdyseeLogoWithText : OdyseeLogoWithWhiteText} />
+          </Button>
+        </div>
+      )}
     </div>
   );
 }

ui/component/userEmailReturning/view.jsx

@@ -17,8 +17,8 @@ type Props = {
   emailDoesNotExist: boolean,
   doClearEmailEntry: () => void,
   doUserSignIn: (string, ?string) => void,
-  doUserCheckIfEmailExists: string => void,
-  doSetWalletSyncPreference: boolean => void,
+  doUserCheckIfEmailExists: (string) => void,
+  doSetWalletSyncPreference: (boolean) => void,
   doSetClientSetting: (string, boolean, ?boolean) => void,
   isPending: boolean,
 };
@@ -87,7 +87,7 @@ function UserEmailReturning(props: Props) {
                   name="sign_in_email"
                   label={__('Email')}
                   value={email}
-                  onChange={e => setEmail(e.target.value)}
+                  onChange={(e) => setEmail(e.target.value)}
                 />
 
                 {/* @if TARGET='app' */}
@@ -119,7 +119,7 @@ function UserEmailReturning(props: Props) {
             </div>
           }
           nag={
-            <React.Fragment>
+            <>
               {!emailDoesNotExist && emailExistsFromUrl && (
                 <Nag type="helpful" relative message={__('That email is already in use. Did you mean to log in?')} />
               )}
@@ -134,7 +134,7 @@ function UserEmailReturning(props: Props) {
               {!emailExistsFromUrl && !emailDoesNotExist && errorMessage && (
                 <Nag type="error" relative message={errorMessage} />
               )}
-            </React.Fragment>
+            </>
           }
         />
       )}

ui/page/home/view.jsx

@@ -1,12 +1,14 @@
 // @flow
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
-import { SITE_NAME, SIMPLE_SITE } from 'config';
+import { SITE_NAME, SIMPLE_SITE, DOMAIN } from 'config';
 import React from 'react';
 import Page from 'component/page';
 import Button from 'component/button';
 import ClaimTilesDiscover from 'component/claimTilesDiscover';
 import Icon from 'component/common/icon';
+import I18nMessage from 'component/i18nMessage';
+import LbcSymbol from 'component/common/lbc-symbol';
 
 type Props = {
   authenticated: boolean,
@@ -35,6 +37,34 @@ function HomePage(props: Props) {
 
   return (
     <Page fullWidthPage>
+      {IS_WEB && DOMAIN === 'lbry.tv' && (
+        <div className="notice-message--loud">
+          <h1 className="section__title">
+            <I18nMessage
+              tokens={{
+                odysee: <Button label={__('odysee.com')} button="link" href="https://odysee.com?src=lbrytv-retired" />,
+              }}
+            >
+              lbry.tv is being retired in favor of %odysee%
+            </I18nMessage>
+          </h1>
+          <p className="section__subtitle">
+            <I18nMessage
+              tokens={{
+                desktop_app: (
+                  <Button label={__('desktop app')} button="link" href="https://lbry.com/get?src=lbrytv-retired" />
+                ),
+                odysee: <Button label={__('odysee.com')} button="link" href="https://odysee.com?src=lbrytv-retired" />,
+                credits: <LbcSymbol />,
+              }}
+            >
+              You will have to switch to the %desktop_app% or %odysee% in the near future. Your existing login details
+              will work on %odysee% and all of your %credits% and other settings will be there.
+            </I18nMessage>
+          </p>
+        </div>
+      )}
+
       {!SIMPLE_SITE && (authenticated || !IS_WEB) && !subscribedChannels.length && (
         <div className="notice-message">
           <h1 className="section__title">

ui/scss/init/_gui.scss

@@ -371,9 +371,15 @@ textarea {
   background-color: var(--color-primary-alt);
 }
 
-.notice-message--above-content {
+.notice-message--loud {
   @extend .notice-message;
-  margin-bottom: var(--spacing-l);
+  background-color: #fef1f6;
+  color: var(--color-black);
+  font-weight: bold;
+
+  .button {
+    color: #fa6165;
+  }
 }
 
 .privacy-img {
@@ -431,3 +437,15 @@ textarea {
   max-height: 50vh;
   overflow: scroll;
 }
+
+.signup__odysee-logo {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    margin-top: var(--spacing-xl);
+    height: 4rem;
+  }
+}