fix: styling bug fixes (#176)

* fix(videodetails): fading poster on top of page elements * fix(player): epg elements on top of player * fix(videodetails): normal poster clipping * chore: revert smooth scrolling on EPG screen * chore(epg): fix e2e tests * chore: fix prettier errors * fix(inlineplayer): player autostart setting not respected
jwplayer · Oct 11, 2022 · ef57976 · ef57976
1 parent e490487
commit ef57976
Show file tree

Hide file tree

Showing 12 changed files with 178 additions and 60 deletions.
diff --git a/src/components/ConfigSelect/__snapshots__/ConfigSelect.test.tsx.snap b/src/components/ConfigSelect/__snapshots__/ConfigSelect.test.tsx.snap
@@ -56,6 +56,12 @@ exports[`<ConfigSelect> > renders and matches snapshot 1`] = `
         >
           test--no-watchlists
         </option>
+        <option
+          class="_option_bb73c6"
+          value="test--normal-poster"
+        >
+          test--normal-poster
+        </option>
         <option
           class="_option_bb73c6"
           value="test--subscription"

diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
@@ -152,15 +152,22 @@ const Player: React.FC<Props> = ({
 
       playerRef.current = window.jwplayer(playerElementRef.current) as JWPlayer;
 
-      playerRef.current.setup({
+      // player options are untyped
+      const playerOptions: { [key: string]: unknown } = {
         aspectratio: false,
         playlist: [deepCopy({ ...item, starttime: startTimeRef.current })],
         width: '100%',
         height: '100%',
         mute: false,
-        autostart,
         repeat: false,
-      });
+      };
+
+      // only set the autostart parameter when it is defined or it will override the player.defaults autostart setting
+      if (typeof autostart !== 'undefined') {
+        playerOptions.autostart = autostart;
+      }
+
+      playerRef.current.setup(playerOptions);
 
       setPlayer(playerRef.current);
       attachEvents();

diff --git a/src/components/VideoDetails/VideoDetails.module.scss b/src/components/VideoDetails/VideoDetails.module.scss
@@ -29,7 +29,6 @@
 .main {
   display: flex;
   max-width: 100vw;
-  overflow: hidden;
 
   &.hidden {
     display: none;
@@ -44,11 +43,15 @@
   position: relative;
   width: 70%;
   max-width: 650px;
-  min-height: 300px;
+  min-height: 440px;
+
+  @include responsive.desktop-small-only() {
+    min-height: 335px;
+  }
 
   @include responsive.tablet-only() {
     width: 350px;
-    min-height: 380px;
+    min-height: 335px;
   }
 
   @include responsive.mobile-only() {
@@ -140,31 +143,42 @@
   position: absolute;
   top: 0;
   right: 0;
+  z-index: -1;
   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 {
-    width: 720px;
-    height: 405px;
-    margin: 37px 56px;
+    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() {
-      width: 600px;
-      height: 338px;
-      margin: 24px 34px;
+      right: 24px;
+      max-width: 80vw;
+      max-height: 350px;
     }
 
     @include responsive.mobile-only() {
+      top: -#{variables.$header-height-mobile + 16};
+      right: -16px;
+      left: -16px;
       width: 100vw;
-      margin: 0 16px;
+      height: 400px;
+      border-radius: 0;
 
-      mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 60%);
+      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(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 60%); /* stylelint-disable-line */
+      -webkit-mask-image: radial-gradient(191% 141% at 100% 10%, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%); /* stylelint-disable-line */
     }
   }
 

diff --git a/src/containers/Cinema/Cinema.module.scss b/src/containers/Cinema/Cinema.module.scss
@@ -5,14 +5,14 @@
 
 .fade {
   position: relative;
-  z-index: 1;
+  // make sure the fade animation happens on top of page elements
+  z-index: variables.$player-z-index;
 }
 
 .cinema {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: variables.$player-z-index;
   width: 100vw;
   height: calc(100vh - calc(100vh - 100%));
   overflow: hidden;

diff --git a/src/containers/Cinema/Cinema.tsx b/src/containers/Cinema/Cinema.tsx
@@ -82,6 +82,7 @@ const Cinema: React.FC<Props> = ({
         <PlayerContainer
           item={item}
           feedId={feedId}
+          autostart={true}
           onPlay={handlePlay}
           onPause={handlePause}
           onComplete={handleComplete}

diff --git a/src/containers/InlinePlayer/InlinePlayer.tsx b/src/containers/InlinePlayer/InlinePlayer.tsx
@@ -26,6 +26,7 @@ type Props = {
   startWatchingButton: React.ReactNode;
   isLoggedIn: boolean;
   paywall: boolean;
+  autostart?: boolean;
 };
 
 const InlinePlayer: React.FC<Props> = ({
@@ -40,6 +41,7 @@ const InlinePlayer: React.FC<Props> = ({
   startWatchingButton,
   isLoggedIn,
   paywall,
+  autostart,
 }: Props) => {
   const siteName = useConfigStore((s) => s.config.siteName);
   const { t } = useTranslation();
@@ -66,6 +68,7 @@ const InlinePlayer: React.FC<Props> = ({
         <PlayerContainer
           item={item}
           feedId={feedId}
+          autostart={autostart}
           onPlay={onPlay}
           onPause={onPause}
           onComplete={onComplete}

diff --git a/src/containers/PlayerContainer/PlayerContainer.tsx b/src/containers/PlayerContainer/PlayerContainer.tsx
@@ -9,7 +9,6 @@ import Player from '#src/components/Player/Player';
 import type { JWPlayer } from '#types/jwplayer';
 import { useWatchHistoryStore } from '#src/stores/WatchHistoryStore';
 import { VideoProgressMinMax } from '#src/config';
-import useQueryParam from '#src/hooks/useQueryParam';
 
 type Props = {
   item: PlaylistItem;
@@ -23,6 +22,7 @@ type Props = {
   liveStartDateTime?: string | null;
   liveEndDateTime?: string | null;
   liveFromBeginning?: boolean;
+  autostart?: boolean;
 };
 
 const PlayerContainer: React.FC<Props> = ({
@@ -36,8 +36,8 @@ const PlayerContainer: React.FC<Props> = ({
   liveEndDateTime,
   liveFromBeginning,
   liveStartDateTime,
+  autostart,
 }: Props) => {
-  const autostart = useQueryParam('play') === '1';
   const { player, features } = useConfigStore((s) => s.config);
   const continueWatchingList = features?.continueWatchingList;
   const watchHistoryEnabled = !!continueWatchingList;

diff --git a/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx b/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx
@@ -157,6 +157,7 @@ const MediaMovie: ScreenComponent<PlaylistItem> = ({ data, isLoading }) => {
               feedId={feedId ?? undefined}
               startWatchingButton={startWatchingButton}
               paywall={isLocked(accessModel, isLoggedIn, hasSubscription, data)}
+              autostart={play || undefined}
             />
           ) : (
             <Cinema

diff --git a/src/pages/ScreenRouting/mediaScreens/MediaSeriesEpisode/MediaSeriesEpisode.tsx b/src/pages/ScreenRouting/mediaScreens/MediaSeriesEpisode/MediaSeriesEpisode.tsx
@@ -198,6 +198,7 @@ const MediaSeriesEpisode: ScreenComponent<PlaylistItem> = ({ data }) => {
               feedId={feedId ?? undefined}
               startWatchingButton={startWatchingButton}
               paywall={isLocked(accessModel, isLoggedIn, hasSubscription, episodeItem)}
+              autostart={play || undefined}
             />
           ) : (
             <Cinema

diff --git a/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx b/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx
@@ -109,7 +109,7 @@ const PlaylistLiveChannels: ScreenComponent<Playlist> = ({ data: { feedid, playl
     setActiveChannel(channelId, programId);
 
     // scroll to top when clicking a program
-    (document.scrollingElement || document.body).scroll({ top: 0 });
+    (document.scrollingElement || document.body).scroll({ top: 0, behavior: 'smooth' });
   };
 
   const handleChannelClick = (channelId: string) => {

diff --git a/test-e2e/data/config.test--normal-poster.json b/test-e2e/data/config.test--normal-poster.json
@@ -0,0 +1,70 @@
+{
+  "assets": {
+    "banner": "https://cdn.jwplayer.com/images/nwthWC1U.png"
+  },
+  "content": [
+    {
+      "enableText": true,
+      "featured": true,
+      "contentId": "JSKF03bk",
+      "type": "playlist"
+    },
+    {
+      "enableText": true,
+      "type": "favorites"
+    },
+    {
+      "enableText": true,
+      "type": "continue_watching"
+    },
+    {
+      "enableText": true,
+      "type": "playlist",
+      "contentId": "dGSUzs9o"
+    },
+    {
+      "enableText": true,
+      "type": "playlist",
+      "contentId": "xQaFzykq"
+    }
+  ],
+  "menu": [
+    {
+      "label": "Films",
+      "contentId": "dGSUzs9o",
+      "filterTags": "Action,Comedy,Fantasy,Drama",
+      "type": "playlist"
+    },
+    {
+      "label": "Courses",
+      "contentId": "xQaFzykq",
+      "filterTags": "Beginner,Advanced",
+      "type": "playlist"
+    }
+  ],
+  "features": {
+    "recommendationsPlaylist": "IHBjjkSN",
+    "searchPlaylist": "D4soEviP",
+    "favoritesList": "34CFUkws",
+    "continueWatchingList": "IJvotI4w"
+  },
+  "integrations": {
+    "cleeng": {
+      "id": "440058292",
+      "useSandbox": true
+    }
+  },
+  "styling": {
+    "backgroundColor": null,
+    "highlightColor": null,
+    "headerBackground": null,
+    "dynamicBlur": false,
+    "posterFading": false,
+    "shelfTitles": true,
+    "footerText": "\u00a9 Blender Foundation | [cloud.blender.org](https://cloud.blender.org)"
+  },
+  "description": "Blender demo site",
+  "analyticsToken": "lDd_MCg4EeuMunbqcIJccw",
+  "player": "ou7L8htR",
+  "siteName": "Blender (authvod)"
+}