From 6ce9bd5cf7e8982d702d79fcdd2c1e641c696f94 Mon Sep 17 00:00:00 2001
From: Rafael <rafael.saes@odysee.com>
Date: Tue, 15 Mar 2022 14:42:39 -0300
Subject: [PATCH] Fixes

---
 ui/component/fileRenderInitiator/view.jsx |  5 +++--
 ui/redux/actions/livestream.js            |  8 ++++++++
 ui/scss/component/_content.scss           |  1 -
 ui/scss/component/_file-render.scss       | 15 ++++-----------
 ui/scss/component/_livestream-chat.scss   |  4 ----
 ui/scss/component/_main.scss              |  6 ++++++
 ui/scss/component/_markdown-preview.scss  |  1 -
 7 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/ui/component/fileRenderInitiator/view.jsx b/ui/component/fileRenderInitiator/view.jsx
index 111700890..edd001c6e 100644
--- a/ui/component/fileRenderInitiator/view.jsx
+++ b/ui/component/fileRenderInitiator/view.jsx
@@ -109,14 +109,15 @@ export default function FileRenderInitiator(props: Props) {
 
   // Find out current channels status + active live claim
   React.useEffect(() => {
-    if (!channelClaimId || !isLivestreamClaim) return;
+    // isCurrentClaimLive = already fetched
+    if (!channelClaimId || !isLivestreamClaim || isCurrentClaimLive) return;
 
     const fetch = () => doFetchChannelLiveStatus(channelClaimId);
 
     const intervalId = setInterval(fetch, LIVESTREAM_STATUS_CHECK_INTERVAL);
 
     return () => clearInterval(intervalId);
-  }, [channelClaimId, doFetchChannelLiveStatus, isLivestreamClaim]);
+  }, [channelClaimId, doFetchChannelLiveStatus, isCurrentClaimLive, isLivestreamClaim]);
 
   React.useEffect(() => {
     if (!claimThumbnail) return;
diff --git a/ui/redux/actions/livestream.js b/ui/redux/actions/livestream.js
index e9a8036a4..2cf9a899f 100644
--- a/ui/redux/actions/livestream.js
+++ b/ui/redux/actions/livestream.js
@@ -111,13 +111,18 @@ const findActiveStreams = async (
 };
 
 export const doFetchChannelLiveStatus = (channelId: string) => async (dispatch: Dispatch) => {
+  const statusForId = `live-status-${channelId}`;
+  // const localStatus = window.localStorage.getItem(statusForId);
+
   try {
     const { channelStatus, channelData } = await fetchLiveChannel(channelId);
 
     if (channelStatus === LiveStatus.NOT_LIVE) {
       dispatch({ type: ACTIONS.REMOVE_CHANNEL_FROM_ACTIVE_LIVESTREAMS, data: { channelId } });
+      window.localStorage.removeItem(statusForId);
       return;
     }
+
     if (channelStatus === LiveStatus.UNKNOWN) {
       return;
     }
@@ -130,8 +135,11 @@ export const doFetchChannelLiveStatus = (channelId: string) => async (dispatch:
       channelData[channelId].claimUri = liveClaim.stream.canonical_url;
       dispatch({ type: ACTIONS.ADD_CHANNEL_TO_ACTIVE_LIVESTREAMS, data: { ...channelData } });
     }
+
+    window.localStorage.setItem(statusForId, channelStatus);
   } catch (err) {
     dispatch({ type: ACTIONS.REMOVE_CHANNEL_FROM_ACTIVE_LIVESTREAMS, data: { channelId } });
+    window.localStorage.removeItem(statusForId);
   }
 };
 
diff --git a/ui/scss/component/_content.scss b/ui/scss/component/_content.scss
index 92c56ebb7..b89d12063 100644
--- a/ui/scss/component/_content.scss
+++ b/ui/scss/component/_content.scss
@@ -240,7 +240,6 @@
   }
   &:after {
     content: '';
-    background: rgba(255, 255, 255, 0.5);
     top: 0;
     left: 0;
     bottom: 0;
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index 48d74c26f..f0b32e2cb 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -420,8 +420,8 @@
 
 .file-viewer__embedded-header {
   position: absolute;
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: minmax(5rem, calc(100% - 7rem)) 1fr;
   width: 100%;
   top: 0;
   opacity: 1;
@@ -435,7 +435,7 @@
   border-top-right-radius: var(--border-radius);
 
   .button {
-    padding: var(--spacing-s);
+    padding: var(--spacing-xxs);
     color: var(--color-white);
     z-index: 2;
 
@@ -470,7 +470,6 @@
 }
 
 .file-viewer__embedded-title {
-  max-width: 75%;
   z-index: 2;
   display: flex;
   align-items: center;
@@ -479,13 +478,7 @@
 }
 
 .file-viewer__embedded-info {
-  display: flex;
-  align-items: center;
-  font-size: var(--font-small);
-  margin-left: var(--spacing-m);
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
+  justify-self: flex-end;
 
   & > *:not(:last-child) {
     margin-right: var(--spacing-s);
diff --git a/ui/scss/component/_livestream-chat.scss b/ui/scss/component/_livestream-chat.scss
index ac23fb5b4..2a2255a1a 100644
--- a/ui/scss/component/_livestream-chat.scss
+++ b/ui/scss/component/_livestream-chat.scss
@@ -25,10 +25,6 @@ $recent-msg-button__height: 2rem;
     }
   }
 
-  @media (min-width: $breakpoint-large) {
-    margin-left: var(--spacing-l);
-  }
-
   @media (min-width: $breakpoint-small) {
     top: calc(var(--header-height) + var(--spacing-m)) !important;
     position: sticky;
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index 48073240e..386f046f4 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -578,8 +578,13 @@ body {
 .main--livestream {
   @extend .main--file-page;
 
+  @media (min-width: 1750px) {
+    padding: 0;
+  }
+
   .card-stack {
     margin-bottom: var(--spacing-m);
+
     @media (min-width: ($breakpoint-large + 300px)) {
       max-width: calc(var(--page-max-width--filepage) / 1.25);
       margin-left: auto;
@@ -608,6 +613,7 @@ body {
 
   @media (max-width: $breakpoint-medium) {
     padding: 0 var(--spacing-s);
+
     .card__main-actions {
       .claim-preview__wrapper {
         a {
diff --git a/ui/scss/component/_markdown-preview.scss b/ui/scss/component/_markdown-preview.scss
index ed8dd6f25..06fdbadb1 100644
--- a/ui/scss/component/_markdown-preview.scss
+++ b/ui/scss/component/_markdown-preview.scss
@@ -210,7 +210,6 @@
 
   .file-viewer__embedded-header {
     .file-viewer__embedded-title {
-      width: calc(100% - 120px);
       .button__label {
         display: inline-block;
         width: 100%;