feat(project): remove posterFading, shelfTitles and dynamicBlur settings

- dynamicBlur=false, posterFading=true and shelfTitles=true are used by default in the codebase

docs/configuration.md

@@ -176,9 +176,6 @@ Use the `styling` object to define extra styles for your application.
     "backgroundColor": null,
     "highlightColor": null,
     "headerBackground": null,
-    "dynamicBlur": true,
-    "posterFading": true,
-    "shelfTitles": true,
     "footerText": "Blender Foundation"
 }
 ```
@@ -211,25 +208,6 @@ Text that will be placed in the footer of the site. Markdown links are supported
 
 ---
 
-**styling.dynamicBlur** (optional)
-
-Set this parameter to `true` if you want to enable the Dynamic Blur feature. The Dynamic Blur feature is a blurred image of the current item on the background of the screen. When a user hovers a card, the blurred image changes to the selected item.  
-
----
-
-**styling.posterFading** (optional)
-
-Set this parameter to `true` if you want to enable the Poster Fading feature. By default, a boxed preview is shown on the video and series detail page. With posterFading set to `true`, this image is placed on the background instead and fills a larger portion of the screen.
-
-
----
-
-**styling.shelfTitles** (optional)
-
-Set this parameter to `false` if you want to disable titles below the cards on the home, playlist and search screen.  
-
----
-
 **features**
 
 Use the `features` object to define extra properties for your app.

src/components/Card/Card.tsx

@@ -30,7 +30,6 @@ type CardProps = {
   isCurrent?: boolean;
   isLocked?: boolean;
   currentLabel?: string;
-  enableTitle?: boolean;
 };
 
 function Card({
@@ -44,7 +43,6 @@ function Card({
   episodeNumber,
   progress,
   posterAspect = '16:9',
-  enableTitle = true,
   featured = false,
   disabled = false,
   loading = false,
@@ -94,7 +92,7 @@ function Card({
         {isCurrent && <div className={styles.currentLabel}>{currentLabel}</div>}
         {!loading && (
           <div className={styles.meta}>
-            {featured && !disabled && enableTitle && <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>}
+            {featured && !disabled && <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>}
             <div className={styles.tags}>
               {isLocked && (
                 <div className={classNames(styles.tag, styles.lock)} aria-label={t('card_lock')} role="status">
@@ -111,7 +109,7 @@ function Card({
           </div>
         ) : null}
       </div>
-      {!featured && !disabled && enableTitle && (
+      {!featured && !disabled && (
         <div className={styles.titleContainer}>
           <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>
         </div>

src/components/CardGrid/CardGrid.tsx

@@ -29,7 +29,6 @@ type CardGridProps = {
   onCardClick: (item: PlaylistItem, playlistId?: string) => void;
   watchHistory?: { [key: string]: number };
   isLoading: boolean;
-  enableCardTitles?: boolean;
   cols?: Breakpoints;
   currentCardItem?: PlaylistItem;
   currentCardLabel?: string;
@@ -43,7 +42,6 @@ function CardGrid({
   onCardClick,
   onCardHover,
   watchHistory,
-  enableCardTitles = true,
   isLoading = false,
   cols = defaultCols,
   currentCardItem,
@@ -70,7 +68,6 @@ function CardGrid({
         <div role="cell">
           <Card
             title={title}
-            enableTitle={enableCardTitles}
             duration={duration}
             image={shelfImage}
             progress={watchHistory ? watchHistory[mediaid] : undefined}

src/components/Favorites/Favorites.tsx

@@ -17,9 +17,8 @@ type Props = {
   isLoading: boolean;
   accessModel: AccessModel;
   hasSubscription: boolean;
-  shelfTitles?: boolean;
   onCardClick: (item: PlaylistItem) => void;
-  onCardHover: (item: PlaylistItem) => void;
+  onCardHover?: (item: PlaylistItem) => void;
   onClearFavoritesClick: () => void;
 };
 
@@ -31,17 +30,7 @@ const cols: Breakpoints = {
   [Breakpoint.xl]: 3,
 };
 
-const Favorites = ({
-  playlist,
-  error,
-  isLoading,
-  shelfTitles,
-  accessModel,
-  hasSubscription,
-  onCardClick,
-  onCardHover,
-  onClearFavoritesClick,
-}: Props): JSX.Element => {
+const Favorites = ({ playlist, error, isLoading, accessModel, hasSubscription, onCardClick, onCardHover, onClearFavoritesClick }: Props): JSX.Element => {
   const { t } = useTranslation('user');
 
   if (isLoading) return <LoadingOverlay />;
@@ -63,7 +52,6 @@ const Favorites = ({
           onCardHover={onCardHover}
           cols={cols}
           isLoading={isLoading}
-          enableCardTitles={shelfTitles}
           accessModel={accessModel}
           isLoggedIn={true}
           hasSubscription={hasSubscription}

src/components/Shelf/Shelf.tsx

@@ -56,7 +56,6 @@ const Shelf = ({
   title,
   watchHistory,
   enableTitle = true,
-  enableCardTitles = true,
   featured = false,
   loading = false,
   error = null,
@@ -76,7 +75,6 @@ const Shelf = ({
       <Card
         key={item.mediaid}
         title={item.title}
-        enableTitle={enableCardTitles}
         duration={item.duration}
         progress={watchHistory ? watchHistory[item.mediaid] : undefined}
         image={item.shelfImage}
@@ -92,20 +90,7 @@ const Shelf = ({
         posterAspect={posterAspect}
       />
     ),
-    [
-      enableCardTitles,
-      watchHistory,
-      onCardHover,
-      featured,
-      loading,
-      accessModel,
-      isLoggedIn,
-      hasSubscription,
-      posterAspect,
-      onCardClick,
-      playlist.feedid,
-      type,
-    ],
+    [watchHistory, onCardHover, featured, loading, accessModel, isLoggedIn, hasSubscription, posterAspect, onCardClick, playlist.feedid, type],
   );
 
   const renderRightControl = useCallback(

src/components/VideoDetails/VideoDetails.module.scss

@@ -33,10 +33,6 @@
   &.hidden {
     display: none;
   }
-
-  &.posterNormal {
-    position: relative;
-  }
 }
 
 .info {
@@ -143,61 +139,30 @@
   position: absolute;
   top: 0;
   right: 0;
+
   z-index: -1;
+
+  width: 80vw;
+  height: calc(85vw / 16 * 9);
+
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   // fix for Safari (poster will render below the dynamic blur)
   transform: translateZ(0);
 
-  &.normal {
-    right: 56px;
-    width: auto;
-    height: 100%;
-    border-radius: 4px;
-    mask-image: linear-gradient(-90deg, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
-    -webkit-mask-image: linear-gradient(-90deg, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%); /* stylelint-disable-line */
-
-    @include responsive.desktop-small-only() {
-      right: 34px;
-    }
-
-    @include responsive.tablet-only() {
-      right: 24px;
-      max-width: 80vw;
-      max-height: 350px;
-    }
+  mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 60%);
+  //noinspection CssInvalidPropertyValue
+  -webkit-mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 60%); /* stylelint-disable-line */
 
-    @include responsive.mobile-only() {
-      top: -#{variables.$header-height-mobile + 16};
-      right: -16px;
-      left: -16px;
-      width: 100vw;
-      height: 400px;
-      border-radius: 0;
-
-      mask-image: radial-gradient(191% 141% at 100% 10%, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%);
-      //noinspection CssInvalidPropertyValue
-      -webkit-mask-image: radial-gradient(191% 141% at 100% 10%, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%); /* stylelint-disable-line */
-    }
-  }
-
-  &.fading {
+  @include responsive.tablet-only() {
     width: 80vw;
-    height: calc(85vw / 16 * 9);
-    mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 60%);
-    //noinspection CssInvalidPropertyValue
-    -webkit-mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 60%); /* stylelint-disable-line */
-
-    @include responsive.tablet-only() {
-      width: 80vw;
-      height: calc(140vw / 16 * 9);
-    }
+    height: calc(140vw / 16 * 9);
+  }
 
-    @include responsive.mobile-only() {
-      width: 110vw;
-      height: calc(180vw / 16 * 9);
-    }
+  @include responsive.mobile-only() {
+    width: 110vw;
+    height: calc(180vw / 16 * 9);
   }
 }