From 6c9e89194bb8186a74f1f9d8820618d5e5a2c11a Mon Sep 17 00:00:00 2001 From: dzawada Date: Wed, 23 Aug 2023 16:12:17 +0200 Subject: [PATCH 1/4] [COTECH-506] Default player set for 100% of the traffic. --- ...FloatOnScrollArticleVideoPlayer.module.css | 24 ------- ...DesktopFloatOnScrollArticleVideoPlayer.tsx | 63 ------------------- src/loaders/DesktopArticleVideoLoader.tsx | 6 -- src/main.ts | 2 - 4 files changed, 95 deletions(-) delete mode 100644 src/experimental/players/DesktopFloatOnScrollArticleVideoPlayer/DesktopFloatOnScrollArticleVideoPlayer.module.css delete mode 100644 src/experimental/players/DesktopFloatOnScrollArticleVideoPlayer/DesktopFloatOnScrollArticleVideoPlayer.tsx diff --git a/src/experimental/players/DesktopFloatOnScrollArticleVideoPlayer/DesktopFloatOnScrollArticleVideoPlayer.module.css b/src/experimental/players/DesktopFloatOnScrollArticleVideoPlayer/DesktopFloatOnScrollArticleVideoPlayer.module.css deleted file mode 100644 index 5cdd978a..00000000 --- a/src/experimental/players/DesktopFloatOnScrollArticleVideoPlayer/DesktopFloatOnScrollArticleVideoPlayer.module.css +++ /dev/null @@ -1,24 +0,0 @@ -.desktopArticleVideoTopPlaceholder { - position: absolute; - width: 100%; - padding-top: 56.25%; - top: 0; - left: 0; - bottom: 0; - right: 0; - z-index: 2; -} - -.desktopArticleVideoWrapper { - height: max-content; - position: absolute; - bottom: 0; - right: 0; - top: 0; - left: 0; -} - -.topBar { - width: 100%; - position: relative; -} diff --git a/src/experimental/players/DesktopFloatOnScrollArticleVideoPlayer/DesktopFloatOnScrollArticleVideoPlayer.tsx b/src/experimental/players/DesktopFloatOnScrollArticleVideoPlayer/DesktopFloatOnScrollArticleVideoPlayer.tsx deleted file mode 100644 index 61dec463..00000000 --- a/src/experimental/players/DesktopFloatOnScrollArticleVideoPlayer/DesktopFloatOnScrollArticleVideoPlayer.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React, { useRef } from 'react'; -import UnmuteButton from 'jwplayer/players/DesktopArticleVideoPlayer/UnmuteButton'; -import JwPlayerWrapper from 'jwplayer/players/shared/JwPlayerWrapper'; -import useOnScreen from 'utils/useOnScreen'; -import useAdComplete from 'jwplayer/utils/useAdComplete'; -import PlayerWrapper from 'jwplayer/players/shared/PlayerWrapper'; -import { DesktopArticleVideoPlayerProps } from 'jwplayer/types'; -import Attribution from 'jwplayer/players/DesktopArticleVideoPlayer/Attribution'; -import { getArticleVideoConfig } from 'jwplayer/utils/articleVideo/articleVideoConfig'; -import articlePlayerOnReady from 'jwplayer/utils/articleVideo/articlePlayerOnReady'; - -import styles from './DesktopFloatOnScrollArticleVideoPlayer.module.css'; - -const DesktopFloatOnScrollArticleVideoPlayer: React.FC = ({ videoDetails }) => { - const placeholderRef = useRef(null); - const adComplete = useAdComplete(); - const onScreen = useOnScreen(placeholderRef, '0px', 0.5); - const controlbar = document.querySelector('.jw-controlbar'); - const shareIcon = document.querySelector('.jw-controlbar .jw-button-container .jw-settings-sharing'); - const moreVideosIcon = document.querySelector('.jw-controlbar .jw-button-container .jw-related-btn'); - const pipIcon = document.querySelector('.jw-controlbar .jw-button-container .jw-icon-pip'); - const jwWrapper = document.querySelector('.jw-wrapper.jw-reset'); - const floatingWrapper = document.querySelector('.jw-float-bar.jw-reset'); - - if (onScreen) { - if (controlbar) controlbar.style.background = 'rgba(0, 0, 0, 0.5)'; - if (shareIcon) shareIcon.style.display = 'flex'; - if (moreVideosIcon) moreVideosIcon.style.display = 'flex'; - if (pipIcon) pipIcon.style.display = 'flex'; - // Floating player experiment only. Needed to prevent wiki toolbar from cover the close button. This reset the styles once the player is not 'floating'. - if (jwWrapper) jwWrapper.style.marginBottom = ''; - if (floatingWrapper) floatingWrapper.style.flexDirection = ''; - } else { - if (controlbar) controlbar.style.background = 'linear-gradient(0,#000,transparent)'; - if (shareIcon) shareIcon.style.display = 'none'; - if (moreVideosIcon) moreVideosIcon.style.display = 'none'; - if (pipIcon) pipIcon.style.display = 'none'; - // Floating player experiment only. Needed to prevent wiki toolbar from cover the close button. This applies the styles once the player is 'floating'. - if (jwWrapper) jwWrapper.style.marginBottom = '27px'; - if (floatingWrapper) floatingWrapper.style.flexDirection = 'row-reverse'; - } - - return ( - -
- {adComplete && ( -
-
{!onScreen && }
- articlePlayerOnReady(videoDetails, playerInstance)} - stopAutoAdvanceOnExitViewport={false} - /> -
- )} -
- - - ); -}; - -export default DesktopFloatOnScrollArticleVideoPlayer; diff --git a/src/loaders/DesktopArticleVideoLoader.tsx b/src/loaders/DesktopArticleVideoLoader.tsx index 6c3688be..d007adc4 100644 --- a/src/loaders/DesktopArticleVideoLoader.tsx +++ b/src/loaders/DesktopArticleVideoLoader.tsx @@ -7,7 +7,6 @@ import { eligibleForVimeoTakeover, getVimeoTakeoverDetails } from 'loaders/utils import defineExperiment from '@fandom/pathfinder-lite/experiments/defineExperiment'; import getExperiment from '@fandom/pathfinder-lite/experiments/getExperiment'; import { Experiment } from '@fandom/pathfinder-lite/types'; -import checkUserGeo from 'utils/experiments/checkUserGeo'; export { getVideoPlayerVersion } from 'loaders/utils/GetVersion'; @@ -73,11 +72,6 @@ export const DesktopArticleVideoLoader: React.FC setPlayer(), ); return; - } else if (currentExperiment?.name === desktopJwFloatOnScrollExperiment?.name && checkUserGeo(['us'])) { - import('experimental/players/DesktopFloatOnScrollArticleVideoPlayer/DesktopFloatOnScrollArticleVideoPlayer').then( - ({ default: DesktopFloatOnScrollArticleVideoPlayer }) => - setPlayer(), - ); } else { switch (currentExperiment?.name) { case desktopPauseAfterThreePlaysExperiment.name: diff --git a/src/main.ts b/src/main.ts index 7fe7eefb..a80707b1 100644 --- a/src/main.ts +++ b/src/main.ts @@ -8,8 +8,6 @@ export { default as JWCanonicalVideoPlayer } from 'jwplayer/players/CanonicalVid export { default as JWDesktopReskinnedArticleVideoPlayer } from 'experimental/players/DesktopReskinnedArticleVideoPlayer/DesktopReskinnedArticleVideoPlayer'; -export { default as DesktopFloatOnScrollArticleVideoPlayer } from 'experimental/players/DesktopFloatOnScrollArticleVideoPlayer/DesktopFloatOnScrollArticleVideoPlayer'; - export { default as RedVentureVideoPlayer } from 'jwplayer/players/RedVentureVideoPlayer/RedVentureVideoPlayer'; export { default as YoutubeDesktopArticleVideoPlayer } from 'youtube/players/YoutubeDesktopArticleVideoPlayer'; From c25132d9a995acb888b5ea92ce4498cf8a377546 Mon Sep 17 00:00:00 2001 From: dzawada Date: Tue, 5 Sep 2023 15:15:55 +0200 Subject: [PATCH 2/4] [COTECH-506] Removed custom code for onScroll --- .../DesktopArticleVideoPlayer.tsx | 21 ++----------------- .../players/shared/JwPlayerWrapper.tsx | 2 +- stand-alone/loaderHelper.ts | 2 +- 3 files changed, 4 insertions(+), 21 deletions(-) diff --git a/src/jwplayer/players/DesktopArticleVideoPlayer/DesktopArticleVideoPlayer.tsx b/src/jwplayer/players/DesktopArticleVideoPlayer/DesktopArticleVideoPlayer.tsx index 9f1fc3e1..a34eb827 100644 --- a/src/jwplayer/players/DesktopArticleVideoPlayer/DesktopArticleVideoPlayer.tsx +++ b/src/jwplayer/players/DesktopArticleVideoPlayer/DesktopArticleVideoPlayer.tsx @@ -1,12 +1,9 @@ -import React, { useRef, useState } from 'react'; -import UnmuteButton from 'jwplayer/players/DesktopArticleVideoPlayer/UnmuteButton'; +import React, { useRef } from 'react'; import JwPlayerWrapper from 'jwplayer/players/shared/JwPlayerWrapper'; -import VideoDetails from 'jwplayer/players/DesktopArticleVideoPlayer/VideoDetails'; import useOnScreen from 'utils/useOnScreen'; import useAdComplete from 'jwplayer/utils/useAdComplete'; import PlayerWrapper from 'jwplayer/players/shared/PlayerWrapper'; import { DesktopArticleVideoPlayerProps } from 'jwplayer/types'; -import CloseButton from 'jwplayer/players/shared/CloseButton/CloseButton'; import Attribution from 'jwplayer/players/DesktopArticleVideoPlayer/Attribution'; import { getArticleVideoConfig } from 'jwplayer/utils/articleVideo/articleVideoConfig'; import articlePlayerOnReady from 'jwplayer/utils/articleVideo/articlePlayerOnReady'; @@ -18,8 +15,6 @@ export const DesktopArticleVideoPlayerContent: React.FC(null); const adComplete = useAdComplete(); const onScreen = useOnScreen(placeholderRef, '0px', 0.5); - const [dismissed, setDismissed] = useState(false); - const isScrollPlayer = !(dismissed || onScreen); const controlbar = document.querySelector('.jw-controlbar'); const shareIcon = document.querySelector('.jw-controlbar .jw-button-container .jw-settings-sharing'); const moreVideosIcon = document.querySelector('.jw-controlbar .jw-button-container .jw-related-btn'); @@ -44,25 +39,13 @@ export const DesktopArticleVideoPlayerContent: React.FC
{adComplete && ( -
-
- {!isScrollPlayer && } - {isScrollPlayer && ( - setDismissed(true)} iconColor={'#fff'} className={styles.closeButton} /> - )} -
+
articlePlayerOnReady(videoDetails, playerInstance)} stopAutoAdvanceOnExitViewport={false} /> - {isScrollPlayer && } -
)}
diff --git a/src/jwplayer/players/shared/JwPlayerWrapper.tsx b/src/jwplayer/players/shared/JwPlayerWrapper.tsx index 039b13f1..72de137a 100644 --- a/src/jwplayer/players/shared/JwPlayerWrapper.tsx +++ b/src/jwplayer/players/shared/JwPlayerWrapper.tsx @@ -23,7 +23,7 @@ declare let window: WindowJWPlayer; const getDefaultPlayerUrl = () => { return navigator.userAgent.match(/android/i) ? 'https://cdn.jwplayer.com/libraries/MFqndUHM.js' - : 'https://content.jwplatform.com/libraries/VXc5h4Tf.js'; + : 'https://cdn.jwplayer.com/libraries/UKcdkcuf.js'; }; const JwPlayerWrapper: React.FC = ({ diff --git a/stand-alone/loaderHelper.ts b/stand-alone/loaderHelper.ts index 6c738fa4..66a8c277 100644 --- a/stand-alone/loaderHelper.ts +++ b/stand-alone/loaderHelper.ts @@ -62,7 +62,7 @@ export interface RedVenturePlayerContext extends JwPlayerContainerId { * More information on this can be found at - https://docs.jwplayer.com/platform/reference/protect-your-content-with-signed-urls#types-of-signed-urls * @example - unsigned URL example * { - * playerUrl: 'https://cdn.jwplayer.com/libraries/VXc5h4Tf.js' + * playerUrl: 'https://cdn.jwplayer.com/libraries/UKcdkcuf.js' * }, * @example - signed URL example * { From 4bfaa8bb15a044b0e37969159cb38703bc57f2f8 Mon Sep 17 00:00:00 2001 From: dzawada Date: Tue, 5 Sep 2023 15:48:45 +0200 Subject: [PATCH 3/4] [COTECH-506] Condition supporting styling for mini-player was removed --- .../DesktopArticleVideoPlayer.tsx | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/src/jwplayer/players/DesktopArticleVideoPlayer/DesktopArticleVideoPlayer.tsx b/src/jwplayer/players/DesktopArticleVideoPlayer/DesktopArticleVideoPlayer.tsx index a34eb827..032c9301 100644 --- a/src/jwplayer/players/DesktopArticleVideoPlayer/DesktopArticleVideoPlayer.tsx +++ b/src/jwplayer/players/DesktopArticleVideoPlayer/DesktopArticleVideoPlayer.tsx @@ -1,6 +1,5 @@ import React, { useRef } from 'react'; import JwPlayerWrapper from 'jwplayer/players/shared/JwPlayerWrapper'; -import useOnScreen from 'utils/useOnScreen'; import useAdComplete from 'jwplayer/utils/useAdComplete'; import PlayerWrapper from 'jwplayer/players/shared/PlayerWrapper'; import { DesktopArticleVideoPlayerProps } from 'jwplayer/types'; @@ -14,7 +13,6 @@ import styles from './DesktopArticleVideoPlayer.module.css'; export const DesktopArticleVideoPlayerContent: React.FC = ({ videoDetails }) => { const placeholderRef = useRef(null); const adComplete = useAdComplete(); - const onScreen = useOnScreen(placeholderRef, '0px', 0.5); const controlbar = document.querySelector('.jw-controlbar'); const shareIcon = document.querySelector('.jw-controlbar .jw-button-container .jw-settings-sharing'); const moreVideosIcon = document.querySelector('.jw-controlbar .jw-button-container .jw-related-btn'); @@ -23,17 +21,10 @@ export const DesktopArticleVideoPlayerContent: React.FC From 18c944af1a8ea09441efefbe03a96b51b9c79be1 Mon Sep 17 00:00:00 2001 From: dzawada Date: Tue, 5 Sep 2023 16:22:42 +0200 Subject: [PATCH 4/4] [COTECH-506] Restored unmute button --- .../DesktopArticleVideoPlayer/DesktopArticleVideoPlayer.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/jwplayer/players/DesktopArticleVideoPlayer/DesktopArticleVideoPlayer.tsx b/src/jwplayer/players/DesktopArticleVideoPlayer/DesktopArticleVideoPlayer.tsx index 032c9301..cc70cd94 100644 --- a/src/jwplayer/players/DesktopArticleVideoPlayer/DesktopArticleVideoPlayer.tsx +++ b/src/jwplayer/players/DesktopArticleVideoPlayer/DesktopArticleVideoPlayer.tsx @@ -1,4 +1,5 @@ import React, { useRef } from 'react'; +import UnmuteButton from 'jwplayer/players/DesktopArticleVideoPlayer/UnmuteButton'; import JwPlayerWrapper from 'jwplayer/players/shared/JwPlayerWrapper'; import useAdComplete from 'jwplayer/utils/useAdComplete'; import PlayerWrapper from 'jwplayer/players/shared/PlayerWrapper'; @@ -31,6 +32,9 @@ export const DesktopArticleVideoPlayerContent: React.FC {adComplete && (
+
+ +