From 126ecd38faecb0591121a82d5ec104da878e1a3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rave=20=7C=20=E5=9B=B3=E6=9B=B8=E9=A4=A8=E7=8C=AB?=
 <raphael.wickihalder@odysee.com>
Date: Thu, 21 Apr 2022 09:31:58 +0200
Subject: [PATCH] Fix theater mode related issues (#1377)

* Adjust theater mode and image pages
---
 ui/component/fileRenderFloating/view.jsx  | 2 +-
 ui/component/fileRenderInitiator/view.jsx | 3 ++-
 ui/component/page/view.jsx                | 2 +-
 ui/page/file/view.jsx                     | 2 +-
 ui/scss/component/_claim-list.scss        | 2 +-
 ui/scss/component/_file-render.scss       | 5 +++--
 ui/scss/component/_media.scss             | 2 +-
 7 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/ui/component/fileRenderFloating/view.jsx b/ui/component/fileRenderFloating/view.jsx
index ab4c387bc..79c61f076 100644
--- a/ui/component/fileRenderFloating/view.jsx
+++ b/ui/component/fileRenderFloating/view.jsx
@@ -148,7 +148,7 @@ export default function FileRenderFloating(props: Props) {
   const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode) || isCurrentClaimLive;
   const isReadyToPlay = isCurrentClaimLive || (isPlayable && streamingUrl);
 
-  const theaterMode = renderMode === 'video' ? videoTheaterMode : false;
+  const theaterMode = renderMode === 'video' || renderMode === 'audio' ? videoTheaterMode : false;
 
   // ****************************************************************************
   // FUNCTIONS
diff --git a/ui/component/fileRenderInitiator/view.jsx b/ui/component/fileRenderInitiator/view.jsx
index 10ab609b2..d0b92a649 100644
--- a/ui/component/fileRenderInitiator/view.jsx
+++ b/ui/component/fileRenderInitiator/view.jsx
@@ -71,6 +71,7 @@ export default function FileRenderInitiator(props: Props) {
     doFetchChannelLiveStatus,
   } = props;
 
+  const theaterMode = renderMode === 'video' || renderMode === 'audio' ? videoTheaterMode : false;
   const { livestreamPage, layountRendered } = React.useContext(LivestreamContext) || {};
 
   const isMobile = useIsMobile();
@@ -163,7 +164,7 @@ export default function FileRenderInitiator(props: Props) {
           ? 'embed__inline-button'
           : classnames('content__cover', {
               'content__cover--disabled': disabled,
-              'content__cover--theater-mode': videoTheaterMode && !isMobile,
+              'content__cover--theater-mode': theaterMode && !isMobile,
               'content__cover--text': isText,
               'card__media--nsfw': obscurePreview,
             })
diff --git a/ui/component/page/view.jsx b/ui/component/page/view.jsx
index 49316021c..bec1fd363 100644
--- a/ui/component/page/view.jsx
+++ b/ui/component/page/view.jsx
@@ -65,7 +65,7 @@ function Page(props: Props) {
     location: { pathname },
   } = useHistory();
 
-  const theaterMode = renderMode === 'video' ? videoTheaterMode : false;
+  const theaterMode = renderMode === 'video' || renderMode === 'audio' ? videoTheaterMode : false;
   const isMediumScreen = useIsMediumScreen();
   const isMobile = useIsMobile();
   const isLandscapeRotated = useIsMobileLandscape();
diff --git a/ui/page/file/view.jsx b/ui/page/file/view.jsx
index f30d12bad..b1406d818 100644
--- a/ui/page/file/view.jsx
+++ b/ui/page/file/view.jsx
@@ -86,7 +86,7 @@ export default function FilePage(props: Props) {
 
   const isMobile = useIsMobile();
   const isLandscapeRotated = useIsMobileLandscape();
-  const theaterMode = renderMode === 'video' ? videoTheaterMode : false;
+  const theaterMode = renderMode === 'video' || renderMode === 'audio' ? videoTheaterMode : false;
   const channelSettings = channelId ? settingsByChannelId[channelId] : undefined;
   const commentSettingDisabled = channelSettings && !channelSettings.comments_enabled;
   const cost = costInfo ? costInfo.cost : null;
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index 85b4c4c70..1d9294a1a 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -393,7 +393,7 @@
 
     flex-shrink: 0;
     margin-right: var(--spacing-s);
-    box-shadow: 0px 0px 0px 1px rgba(var(--color-primary-dynamic), 0.2) inset;
+    box-shadow: 0px 0px 0px 1px rgba(var(--color-primary-dynamic), 0.1) inset;
   }
 
   .media__thumb-placeholder-text {
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index dd1b0198d..5fb54f33a 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -262,8 +262,9 @@
 
 .file-render__img-container {
   width: 100%;
-  // aspect-ratio: 16 / 9;
-  background-color: #000000;
+  aspect-ratio: 16 / 9;
+  background-color: var(--color-placeholder-background);
+  // background-color: rgba(25,25,25,0.4);
   border-radius: var(--border-radius);
 }
 
diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss
index d80c05d54..97c241a14 100644
--- a/ui/scss/component/_media.scss
+++ b/ui/scss/component/_media.scss
@@ -10,7 +10,7 @@
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
-  box-shadow: 0px 0px 0px 1px rgba(var(--color-primary-dynamic), 0.2) inset;
+  box-shadow: 0px 0px 0px 1px rgba(var(--color-primary-dynamic), 0.1) inset;
 }
 
 //  M E D I A