Merge

Author: toshokanneko

ui/component/header/view.jsx

@@ -105,6 +105,8 @@ const Header = (props: Props) => {
 
   const urlParams = new URLSearchParams(search);
   const returnPath = urlParams.get('redirect');
+  const isYoutubeAuthErrorPage =
+    iYTSyncPage && (urlParams.get('error') === 'true' || Boolean(urlParams.get('error_message')));
 
   // For pages that allow for "backing out", shows a backout option instead of the Home logo
   const canBackout = Boolean(backout);
@@ -314,6 +316,11 @@ const Header = (props: Props) => {
                       // className="button--header-close"
                       icon={ICONS.REMOVE}
                       onClick={() => {
+                        if (isYoutubeAuthErrorPage) {
+                          push(`/$/${PAGES.YOUTUBE_SYNC}?reset_scroll=youtube`);
+                          return;
+                        }
+
                         if (!iYTSyncPage && !isPwdResetPage) {
                           clearEmailEntry();
                           clearPasswordEntry();

ui/page/youtubeSync/view.jsx

@@ -21,6 +21,7 @@ const YoutubeTransferStatus = lazyImport(() =>
 );
 
 const STATUS_TOKEN_PARAM = 'status_token';
+const ERROR_PARAM = 'error';
 const ERROR_MESSAGE_PARAM = 'error_message';
 const NEW_CHANNEL_PARAM = 'new_channel';
 
@@ -40,14 +41,21 @@ export default function YoutubeSync(props: Props) {
   } = useHistory();
   const urlParams = new URLSearchParams(search);
   const statusToken = urlParams.get(STATUS_TOKEN_PARAM);
+  const hasErrorParam = urlParams.get(ERROR_PARAM) === 'true';
   const errorMessage = urlParams.get(ERROR_MESSAGE_PARAM);
   const newChannelParam = urlParams.get(NEW_CHANNEL_PARAM);
   const [channel, setChannel] = React.useState('');
   const [language, setLanguage] = React.useState(getDefaultLanguage());
   const [nameError, setNameError] = React.useState(undefined);
   const [acknowledgedTerms, setAcknowledgedTerms] = React.useState(false);
-  const [addingNewChannel, setAddingNewChannel] = React.useState(newChannelParam);
+  const [addingNewChannel, setAddingNewChannel] = React.useState(Boolean(newChannelParam));
+  const hasYoutubeAuthError = hasErrorParam || Boolean(errorMessage);
+  const youtubeAuthErrorMessage =
+    hasYoutubeAuthError && !errorMessage
+      ? __('There was a problem connecting this YouTube channel. Please try again.')
+      : errorMessage;
   const hasYoutubeChannels = youtubeChannels && youtubeChannels.length > 0;
+  const showYoutubeTransferStatus = hasYoutubeChannels && !addingNewChannel && !hasYoutubeAuthError;
 
   React.useEffect(() => {
     const urlParamsInEffect = new URLSearchParams(search);
@@ -66,9 +74,7 @@ export default function YoutubeSync(props: Props) {
   }, [statusToken, hasYoutubeChannels, doUserFetch]);
 
   React.useEffect(() => {
-    if (!newChannelParam) {
-      setAddingNewChannel(false);
-    }
+    setAddingNewChannel(Boolean(newChannelParam));
   }, [newChannelParam]);
 
   function handleCreateChannel() {
@@ -95,7 +101,7 @@ export default function YoutubeSync(props: Props) {
   }
 
   function handleNewChannel() {
-    urlParams.append('new_channel', 'true');
+    urlParams.set('new_channel', 'true');
     push(`${pathname}?${urlParams.toString()}`);
     setAddingNewChannel(true);
   }
@@ -113,12 +119,13 @@ export default function YoutubeSync(props: Props) {
   return (
     <Wrapper>
       <div className="main__channel-creation">
-        {hasYoutubeChannels && !addingNewChannel ? (
+        {showYoutubeTransferStatus ? (
           <React.Suspense fallback={null}>
             <YoutubeTransferStatus alwaysShow addNewChannel={handleNewChannel} />
           </React.Suspense>
         ) : (
           <Card
+            className="card--youtube-sync"
             title={__('Sync your YouTube channel to %site_name%', { site_name: IS_WEB ? SITE_NAME : 'Odysee' })}
             subtitle={__(
               `Don't want to manually upload? Get your YouTube videos in front of the %site_name% audience.`,
@@ -197,11 +204,17 @@ export default function YoutubeSync(props: Props) {
                     label={__('Claim Now')}
                   />
 
-                  {inSignUpFlow && !errorMessage && (
+                  {inSignUpFlow && !hasYoutubeAuthError && (
                     <Button button="link" label={__('Skip')} onClick={() => doToggleInterestedInYoutubeSync()} />
                   )}
 
-                  {errorMessage && <Button button="link" label={__('Skip')} navigate={`/$/${PAGES.REWARDS}`} />}
+                  {hasYoutubeAuthError && (
+                    <Button
+                      button="link"
+                      label={__('Skip')}
+                      navigate={`/$/${PAGES.YOUTUBE_SYNC}?reset_scroll=youtube`}
+                    />
+                  )}
                 </div>
                 <div className="help--card-actions">
                   <I18nMessage
@@ -229,7 +242,7 @@ export default function YoutubeSync(props: Props) {
                 </div>
               </Form>
             }
-            nag={errorMessage && <Nag message={errorMessage} type="error" relative />}
+            nag={youtubeAuthErrorMessage && <Nag message={youtubeAuthErrorMessage} type="error" relative />}
           />
         )}
       </div>

ui/scss/component/_main.scss

@@ -941,6 +941,15 @@ body {
   .checkbox {
     margin-bottom: var(--spacing-m);
   }
+
+  .card--youtube-sync {
+    .nag--error.nag--relative {
+      left: 0;
+      right: 0;
+      bottom: auto;
+      margin-top: var(--spacing-s);
+    }
+  }
 }
 
 // Temp hacks until 'section__actions--no-margin' is generic again.