-
Notifications
You must be signed in to change notification settings - Fork 0
/
RedVentureVideoPlayer.tsx
128 lines (115 loc) · 4.76 KB
/
RedVentureVideoPlayer.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import React, { useEffect, useRef, useState } from 'react';
import UnmuteButton from 'jwplayer/players/DesktopArticleVideoPlayer/UnmuteButton';
import JwPlayerWrapper from 'jwplayer/players/shared/JwPlayerWrapper';
import VideoDetails from 'jwplayer/players/DesktopArticleVideoPlayer/VideoDetails';
import useOnScreen from 'utils/useOnScreen';
import useRvAdComplete from 'jwplayer/utils/useRvAdComplete';
import PlayerWrapper from 'jwplayer/players/shared/PlayerWrapper';
import { RedVentureVideoPlayerProps } from 'jwplayer/types';
import CloseButton from 'jwplayer/players/shared/CloseButton/CloseButton';
import redVenturePlayerOnReady from 'jwplayer/players/RedVentureVideoPlayer/redVenturePlayerOnReady';
import { getRedVentureVideoConfig } from 'jwplayer/players/RedVentureVideoPlayer/getRedVentureVideoConfig';
import { disableTimingEventsSamplingRate } from 'jwplayer/utils/videoTimingEvents';
import clsx from 'clsx';
import styles from './redVentureVideoPlayer.module.scss';
interface PhoenixUser {
isPremium?: () => boolean;
}
interface Phoenix {
User?: PhoenixUser;
}
interface WindowWithPhoenix extends Window {
Phoenix?: Phoenix;
}
declare let window: WindowWithPhoenix;
interface RedVentureVideoWrapperProps extends RedVentureVideoPlayerProps {
right?: number;
width?: number;
}
const RedVentureVideoWrapper: React.FC<RedVentureVideoWrapperProps> = ({
showScrollPlayer,
videoDetails,
jwPlayerContainerEmbedId,
autoPlay,
playerUrl,
}) => {
const placeholderRef = useRef<HTMLDivElement>(null);
// Check if Ads are disabled on any of the N&R Games sites. If the resolving function is not present, then always resolve to connecting with AdEng.
// This check should only apply to the GiantBomb N&R site. Safeguards are added in for other sites, where this function may not be defined.
// If the user is a GiantBomb premium user, then let's flag the video player as not having ads. Premium users should not see video ads.
const hasAds =
window?.Phoenix?.User?.isPremium && typeof window?.Phoenix?.User?.isPremium === 'function'
? !window.Phoenix.User.isPremium()
: true;
const adComplete = useRvAdComplete(hasAds);
const onScreen = useOnScreen(placeholderRef, '0px', 0.5);
const [dismissed, setDismissed] = useState(false);
const isScrollPlayer = showScrollPlayer ? !(dismissed || onScreen) : false;
const controlbar = document.querySelector<HTMLElement>('.jw-controlbar');
const shareIcon = document.querySelector<HTMLElement>('.jw-controlbar .jw-button-container .jw-settings-sharing');
const moreVideosIcon = document.querySelector<HTMLElement>('.jw-controlbar .jw-button-container .jw-related-btn');
const pipIcon = document.querySelector<HTMLElement>('.jw-controlbar .jw-button-container .jw-icon-pip');
useEffect(() => {
// Remove this once the browser-tracking-metrics library (tracking-metrics package) is fixed,
// and the proper App value is sourced.
disableTimingEventsSamplingRate();
}, []);
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';
} 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';
}
return (
<div className={styles.redVentureVideoTopPlaceholder} ref={placeholderRef}>
<div
className={clsx(
isScrollPlayer ? styles.redVentureVideoWrapperIsScrollPlayer : styles.redVentureVideoWrapperIsNotScrollPlayer,
)}
>
{adComplete && (
<div>
<div className={styles.topBar}>
{!isScrollPlayer && <UnmuteButton />}
{isScrollPlayer && <CloseButton dismiss={() => setDismissed(true)} />}
</div>
<JwPlayerWrapper
config={getRedVentureVideoConfig(videoDetails, autoPlay)}
onReady={(playerInstance) => redVenturePlayerOnReady(videoDetails, playerInstance)}
stopAutoAdvanceOnExitViewport={false}
shouldLoadSponsoredContentList={true}
jwPlayerContainerEmbedId={jwPlayerContainerEmbedId}
playerUrl={playerUrl}
/>
{isScrollPlayer && <VideoDetails />}
</div>
)}
</div>
</div>
);
};
const RedVentureVideoPlayer: React.FC<RedVentureVideoPlayerProps> = ({
videoDetails,
showScrollPlayer,
jwPlayerContainerEmbedId,
playerUrl,
autoPlay,
}) => {
return (
<PlayerWrapper playerName="jw-red-venture-video">
<RedVentureVideoWrapper
videoDetails={videoDetails}
showScrollPlayer={showScrollPlayer}
jwPlayerContainerEmbedId={jwPlayerContainerEmbedId}
playerUrl={playerUrl}
autoPlay={autoPlay}
/>
</PlayerWrapper>
);
};
export default RedVentureVideoPlayer;