Fix shorts width

Author: toshokanneko

ui/component/claimCoverRender/index.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 
 import * as SETTINGS from 'constants/settings';
 
-import { getThumbnailFromClaim } from 'util/claim';
+import { getThumbnailFromClaim, isClaimShort } from 'util/claim';
 import { selectShortsSidePanelOpen } from 'redux/selectors/shorts';
 import { selectClaimForUri, selectClaimIsNsfwForUri } from 'redux/selectors/claims';
 import { selectClientSetting } from 'redux/selectors/settings';
@@ -17,6 +17,7 @@ const select = (state, props) => {
 
   return {
     claimThumbnail: getThumbnailFromClaim(claim),
+    isShortClaim: isClaimShort(claim),
     isMature: selectClaimIsNsfwForUri(state, uri),
     renderMode: makeSelectFileRenderModeForUri(uri)(state),
     sidePanelOpen: selectShortsSidePanelOpen(state),

ui/component/claimCoverRender/view.jsx

@@ -23,6 +23,7 @@ type Props = {
   enableSwipe?: boolean,
   // -- redux --
   claimThumbnail?: string,
+  isShortClaim: boolean,
   obscurePreview: boolean,
   renderMode: string,
   videoTheaterMode: boolean,
@@ -42,6 +43,7 @@ const ClaimCoverRender = (props: Props) => {
     enableSwipe,
     // -- redux --
     claimThumbnail,
+    isShortClaim,
     obscurePreview,
     renderMode,
     videoTheaterMode,
@@ -59,7 +61,8 @@ const ClaimCoverRender = (props: Props) => {
 
   const isMobile = useIsMobile();
   const theaterMode = RENDER_MODES.FLOATING_MODES.includes(renderMode) && videoTheaterMode;
-  const thumbnail = useGetPoster(claimThumbnail, isShortsParam);
+  const isShorts = isShortsParam || isShortClaim;
+  const thumbnail = useGetPoster(claimThumbnail, isShorts);
 
   const swipeRef = useSwipeNavigation({
     onSwipeNext,

ui/component/shortsActions/swipeNavigation/style.scss

@@ -25,7 +25,7 @@
     }
 
     @media (min-width: 1150px) {
-      width: var(--shorts-viewer-width, 28vw) !important;
+      width: var(--shorts-viewer-width, var(--shorts-viewer-width-default)) !important;
       overflow: hidden;
     }
 

ui/scss/component/_content.scss

@@ -638,7 +638,7 @@
         video {
           width: 100%;
           height: 100%;
-          object-fit: contain;
+          object-fit: cover;
           border-radius: 10px !important;
         }
       }
@@ -652,7 +652,7 @@
     .vjs-tech {
       width: 100%;
       height: 100%;
-      object-fit: contain;
+      object-fit: cover;
     }
 
     .vjs-control-bar {
@@ -847,9 +847,9 @@
   }
 
   @media (min-width: $breakpoint-medium) {
-    width: var(--shorts-viewer-width, 28vw) !important;
+    width: var(--shorts-viewer-width, var(--shorts-viewer-width-default)) !important;
     .content__wrapper {
-      width: var(--shorts-viewer-width, 28vw) !important;
+      width: var(--shorts-viewer-width, var(--shorts-viewer-width-default)) !important;
     }
   }
 

ui/scss/component/_shorts.scss

@@ -250,11 +250,11 @@ body:has(.main--shorts-page):not(:has(.navigation__overlay--active)) {
 
 @media (min-width: $breakpoint-medium) {
   .shorts-page__info-button.shorts-page-menu__button {
-    right: calc(49.8% - var(--shorts-viewer-width, 28vw) / 2 - 60px + 7.5px);
+    right: calc(49.8% - var(--shorts-viewer-width, var(--shorts-viewer-width-default)) / 2 - 60px + 7.5px);
   }
 
   .shorts-page__info-button:not(.shorts-page-menu__button) {
-    right: calc(49.8% - var(--shorts-viewer-width, 28vw) / 2 - 60px + 7.5px);
+    right: calc(49.8% - var(--shorts-viewer-width, var(--shorts-viewer-width-default)) / 2 - 60px + 7.5px);
   }
 
   .shorts-page__back-button {
@@ -625,11 +625,11 @@ body:has(.main--shorts-page):not(:has(.navigation__overlay--active)) {
 
 @media (min-width: $breakpoint-medium) {
   .shorts-page__info-button {
-    right: calc(49.8% - var(--shorts-viewer-width, 28vw) / 2 - 60px + 7.5px);
+    right: calc(49.8% - var(--shorts-viewer-width, var(--shorts-viewer-width-default)) / 2 - 60px + 7.5px);
   }
 
   .shorts-page__navigation {
-    right: calc(49.8% - var(--shorts-viewer-width, 28vw) / 2 - 60px);
+    right: calc(49.8% - var(--shorts-viewer-width, var(--shorts-viewer-width-default)) / 2 - 60px);
     bottom: 8.5vh;
   }
 
@@ -699,7 +699,7 @@ body:has(.main--shorts-page):not(:has(.navigation__overlay--active)) {
     }
 
     @media (min-width: $breakpoint-large) {
-      width: var(--shorts-viewer-width, 28vw) !important;
+      width: var(--shorts-viewer-width, var(--shorts-viewer-width-default)) !important;
     }
 
     @media (max-width: 1380px) and (min-width: $breakpoint-small) and (max-height: 860px) {
@@ -717,4 +717,4 @@ body:has(.main--shorts-page):not(:has(.navigation__overlay--active)) {
       }
     }
   }
-}
+}

ui/scss/init/_vars.scss

@@ -58,6 +58,7 @@
 
   --spacing-main-padding: var(--spacing-xl);
   --floating-viewer-width: 32rem;
+  --shorts-viewer-width-default: calc(90vh * 9 / 16);
   --floating-viewer-height: 18rem; // 32 * 9/16
   --option-select-width: 8rem;