Fix styling and positioning of YT configuration error (stream-labs#4505)

* Fix styling and positioning of YT configuration error * Fix flag in error display * Make notif display css instead of config-based
paulocmarques · Mar 23, 2023 · cbc59a1 · cbc59a1
1 parent a084d8d
commit cbc59a1
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 78 deletions.
diff --git a/app/components-react/root/NotificationsArea.m.less b/app/components-react/root/NotificationsArea.m.less
@@ -19,6 +19,22 @@
   }
 }
 
+.hide_notifs .notification {
+  display: none;
+
+  &.yt-error {
+    display: block;
+  }
+}
+
+.alert-button {
+  min-height: 30px !important;
+  height: 30px;
+  background-color: rgba(251, 72, 76, 0.36) !important;
+  margin: 0 4px !important;
+  font-size: 12px;
+}
+
 :global(.ant-message-notice).notification {
   .padding-left();
   .padding-right();

diff --git a/app/components-react/root/NotificationsArea.tsx b/app/components-react/root/NotificationsArea.tsx
@@ -86,13 +86,27 @@ class NotificationsModule {
     return Services.NotificationsService.state.settings;
   }
 
+  get platform() {
+    return Services.UserService.views.platform?.type;
+  }
+
   get ytDisabled() {
     return (
       Services.UserService.views.platform?.type === 'youtube' &&
       !Services.YoutubeService.state.liveStreamingEnabled
     );
   }
 
+  openYoutubeEnable() {
+    Services.YoutubeService.actions.openYoutubeEnable();
+  }
+
+  confirmYoutubeEnabled() {
+    if (this.platform === 'youtube') {
+      Services.YoutubeService.actions.prepopulateInfo();
+    }
+  }
+
   clickNotif() {
     if (!this.currentNotif) return;
     if (this.currentNotif.action) {
@@ -106,7 +120,7 @@ class NotificationsModule {
 }
 
 export default function NotificationsArea() {
-  const { NotificationsService, UserService, YoutubeService } = Services;
+  const { NotificationsService } = Services;
 
   const {
     unreadWarnings,
@@ -144,10 +158,10 @@ export default function NotificationsArea() {
   useEffect(() => {
     message.config({
       getContainer: () => notificationsContainer.current as HTMLElement,
-      maxCount: showExtendedNotifications ? 1 : 0,
+      maxCount: 1,
     });
     setReadyToPlay();
-  }, [showExtendedNotifications]);
+  }, []);
 
   function showNotifications() {
     NotificationsService.actions.showNotifications();
@@ -180,9 +194,13 @@ export default function NotificationsArea() {
         </Tooltip>
       )}
       <div
-        className={cx(styles.notificationsContainer, 'flex--grow')}
+        className={cx(styles.notificationsContainer, 'flex--grow', {
+          [styles.hideNotifs]: !showExtendedNotifications,
+        })}
         ref={notificationsContainer}
-      />
+      >
+        {ytDisabled && <YTError />}
+      </div>
     </div>
   );
 }
@@ -198,3 +216,20 @@ function MessageNode(p: { notif: INotification }) {
     </>
   );
 }
+
+function YTError() {
+  const { confirmYoutubeEnabled, openYoutubeEnable } = useModule(NotificationsModule);
+
+  return (
+    <div className={cx('ant-message-notice', styles.notification, styles.warning, styles.ytError)}>
+      <i className="fa fa-exclamation-triangle" />
+      <span>{$t('YouTube account not enabled for live streaming')}</span>
+      <button className={cx('button', styles.alertButton)} onClick={openYoutubeEnable}>
+        {$t('Fix')}
+      </button>
+      <button className={cx('button', styles.alertButton)} onClick={confirmYoutubeEnabled}>
+        {$t("I'm set up")}
+      </button>
+    </div>
+  );
+}
diff --git a/app/components-react/root/StudioFooter.m.less b/app/components-react/root/StudioFooter.m.less
@@ -29,38 +29,6 @@
   .margin-left(2);
 }
 
-.error-wrapper {
-  background-color: var(--section);
-  position: absolute;
-  z-index: 2;
-}
-
-.platform-error {
-  background: var(--warning-bg);
-  padding: 5px;
-  .radius();
-
-  i {
-    margin-left: 5px;
-    color: var(--warning);
-  }
-
-  span {
-    padding-left: 5px;
-    margin-right: 10px;
-    color: var(--warning);
-  }
-
-  .alert-button {
-    height: 18px;
-    line-height: 12px;
-    background: rgba(251, 72, 76, 0.36);
-    margin: 0 5px;
-    padding: 0 8px;
-    font-size: 10px;
-  }
-}
-
 .metrics-icon {
   padding-right: 12px;
 

diff --git a/app/components-react/root/StudioFooter.tsx b/app/components-react/root/StudioFooter.tsx
@@ -18,28 +18,23 @@ export default function StudioFooterComponent() {
   const {
     StreamingService,
     WindowsService,
-    YoutubeService,
     UsageStatisticsService,
     NavigationService,
     RecordingModeService,
   } = Services;
 
   const {
     streamingStatus,
-    platform,
     streamQuality,
     isLoggedIn,
     canSchedule,
     replayBufferOffline,
     replayBufferStopping,
     replayBufferSaving,
-    youtubeEnabled,
     recordingModeEnabled,
     replayBufferEnabled,
   } = useModule(FooterModule);
 
-  useEffect(confirmYoutubeEnabled, [platform]);
-
   function performanceIconClassName() {
     if (!streamingStatus || streamingStatus === EStreamingState.Offline) {
       return '';
@@ -56,16 +51,6 @@ export default function StudioFooterComponent() {
     return 'success';
   }
 
-  function confirmYoutubeEnabled() {
-    if (platform === 'youtube') {
-      YoutubeService.actions.prepopulateInfo();
-    }
-  }
-
-  function openYoutubeEnable() {
-    YoutubeService.actions.openYoutubeEnable();
-  }
-
   function openScheduleStream() {
     NavigationService.actions.navigate('StreamScheduler');
   }
@@ -117,24 +102,6 @@ export default function StudioFooterComponent() {
   return (
     <div className={cx('footer', styles.footer)}>
       <div className={cx('flex flex--center flex--grow flex--justify-start', styles.footerLeft)}>
-        {isLoggedIn && platform === 'youtube' && !youtubeEnabled && (
-          <div className={styles.errorWrapper}>
-            <div className={styles.platformError}>
-              <i className="fa fa-exclamation-triangle" />
-              <span>{$t('YouTube account not enabled for live streaming')}</span>
-              <button
-                className="button alert-button"
-                style={{ marginRight: '8px' }}
-                onClick={openYoutubeEnable}
-              >
-                {$t('Fix')}
-              </button>
-              <button className="button alert-button" onClick={confirmYoutubeEnabled}>
-                {$t("I'm set up")}
-              </button>
-            </div>
-          </div>
-        )}
         <Tooltip placement="left" title={$t('Open Performance Window')}>
           <i
             className={cx(
@@ -284,10 +251,6 @@ class FooterModule {
     return Services.StreamingService.views.streamingStatus;
   }
 
-  get platform() {
-    return Services.UserService.views.platform?.type;
-  }
-
   get streamQuality() {
     return Services.PerformanceService.views.streamQuality;
   }
@@ -315,10 +278,6 @@ class FooterModule {
     return Services.StreamingService.state.replayBufferStatus === EReplayBufferState.Saving;
   }
 
-  get youtubeEnabled() {
-    return Services.YoutubeService.state.liveStreamingEnabled;
-  }
-
   get recordingModeEnabled() {
     return Services.RecordingModeService.views.isRecordingModeEnabled;
   }