Filepage theater fix (#1366)

* Disable theater mode for non-video files

* Add black background to image container

ui/component/page/index.js

@@ -1,9 +1,11 @@
 import { connect } from 'react-redux';
+import { makeSelectFileRenderModeForUri } from 'redux/selectors/content';
 import { selectClientSetting } from 'redux/selectors/settings';
 import * as SETTINGS from 'constants/settings';
 import Page from './view';
 
 const select = (state, props) => ({
+  renderMode: makeSelectFileRenderModeForUri(state.content.primaryUri)(state),
   videoTheaterMode: selectClientSetting(state, SETTINGS.VIDEO_THEATER_MODE),
 });
 

ui/component/page/view.jsx

@@ -35,6 +35,7 @@ type Props = {
   noSideNavigation: boolean,
   rightSide?: Node,
   settingsPage?: boolean,
+  renderMode: String,
   videoTheaterMode: boolean,
   isPopoutWindow?: boolean,
 };
@@ -55,6 +56,7 @@ function Page(props: Props) {
     noSideNavigation = false,
     rightSide,
     settingsPage,
+    renderMode,
     videoTheaterMode,
     isPopoutWindow,
   } = props;
@@ -63,6 +65,7 @@ function Page(props: Props) {
     location: { pathname },
   } = useHistory();
 
+  const theaterMode = renderMode === 'video' ? videoTheaterMode : false;
   const isMediumScreen = useIsMediumScreen();
   const isMobile = useIsMobile();
   const isLandscapeRotated = useIsMobileLandscape();
@@ -102,7 +105,7 @@ function Page(props: Props) {
       <div
         className={classnames('main-wrapper__inner', {
           'main-wrapper__inner--filepage': isOnFilePage,
-          'main-wrapper__inner--theater-mode': isOnFilePage && videoTheaterMode && !isMobile,
+          'main-wrapper__inner--theater-mode': isOnFilePage && theaterMode && !isMobile,
           'main-wrapper__inner--auth': authPage,
           'main--popout-chat': isPopoutWindow,
         })}
@@ -134,10 +137,10 @@ function Page(props: Props) {
               'main--full-width': fullWidthPage,
               'main--auth-page': authPage,
               'main--file-page': filePage,
-              'main--video-page': filePage && !videoTheaterMode && !livestream && !isMarkdown,
+              'main--video-page': filePage && !theaterMode && !livestream && !isMarkdown,
               'main--settings-page': settingsPage,
               'main--markdown': isMarkdown,
-              'main--theater-mode': isOnFilePage && videoTheaterMode && !livestream && !isMarkdown && !isMobile,
+              'main--theater-mode': isOnFilePage && theaterMode && !livestream && !isMarkdown && !isMobile,
               'main--livestream': livestream && !chatDisabled,
               'main--popout-chat': isPopoutWindow,
             })}

ui/page/file/view.jsx

@@ -82,7 +82,7 @@ export default function FilePage(props: Props) {
 
   const isMobile = useIsMobile();
   const isLandscapeRotated = useIsMobileLandscape();
-
+  const theaterMode = renderMode === 'video' ? videoTheaterMode : false;
   const channelSettings = channelId ? settingsByChannelId[channelId] : undefined;
   const commentSettingDisabled = channelSettings && !channelSettings.comments_enabled;
   const cost = costInfo ? costInfo.cost : null;
@@ -142,7 +142,7 @@ export default function FilePage(props: Props) {
       return (
         <div className={PRIMARY_PLAYER_WRAPPER_CLASS}>
           {/* playables will be rendered and injected by <FileRenderFloating> */}
-          <FileRenderInitiator uri={uri} videoTheaterMode={videoTheaterMode} />
+          <FileRenderInitiator uri={uri} videoTheaterMode={theaterMode} />
         </div>
       );
     }
@@ -188,7 +188,7 @@ export default function FilePage(props: Props) {
 
     return (
       <>
-        <FileRenderInitiator uri={uri} videoTheaterMode={videoTheaterMode} />
+        <FileRenderInitiator uri={uri} videoTheaterMode={theaterMode} />
         <FileRenderInline uri={uri} />
         <FileTitleSection uri={uri} />
       </>
@@ -203,7 +203,7 @@ export default function FilePage(props: Props) {
         <div className={classnames('section card-stack', `file-page__${renderMode}`)}>
           <FileTitleSection uri={uri} isNsfwBlocked />
         </div>
-        {!isMarkdown && !videoTheaterMode && <RightSideContent {...rightSideProps} />}
+        {!isMarkdown && !theaterMode && <RightSideContent {...rightSideProps} />}
       </Page>
     );
   }
@@ -252,13 +252,13 @@ export default function FilePage(props: Props) {
               </React.Suspense>
             </section>
 
-            {!isMarkdown && videoTheaterMode && <RightSideContent {...rightSideProps} />}
+            {!isMarkdown && theaterMode && <RightSideContent {...rightSideProps} />}
           </div>
         )}
       </div>
 
       {!isMarkdown
-        ? !videoTheaterMode && <RightSideContent {...rightSideProps} />
+        ? !theaterMode && <RightSideContent {...rightSideProps} />
         : !contentCommentsDisabled && (
             <div className="file-page__post-comments">
               <React.Suspense fallback={null}>

ui/scss/component/_file-render.scss

@@ -263,6 +263,8 @@
 .file-render__img-container {
   width: 100%;
   // aspect-ratio: 16 / 9;
+  background-color: #000000;
+  border-radius: var(--border-radius);
 }
 
 .file-render--post-container {