add adstest page to test player ads

ui/component/router/view.jsx

@@ -49,6 +49,8 @@ import BuyPage from 'page/buy';
 import NotificationsPage from 'page/notifications';
 import SignInWalletPasswordPage from 'page/signInWalletPassword';
 import YoutubeSyncPage from 'page/youtubeSync';
+import AdsTestPage from 'page/adsTest';
+
 import { LINKED_COMMENT_QUERY_PARAM } from 'constants/comment';
 import { parseURI, isURIValid } from 'lbry-redux';
 import { SITE_TITLE, WELCOME_VERSION } from 'config';
@@ -62,28 +64,6 @@ if ('scrollRestoration' in history) {
   history.scrollRestoration = 'manual';
 }
 
-type PrivateRouteProps = {
-  component: any,
-  isAuthenticated: boolean,
-  location: { pathname: string },
-};
-
-function PrivateRoute(props: PrivateRouteProps) {
-  const { component: Component, isAuthenticated, ...rest } = props;
-  return (
-    <Route
-      {...rest}
-      render={props =>
-        isAuthenticated || !IS_WEB ? (
-          <Component {...props} />
-        ) : (
-          <Redirect to={`/$/${PAGES.AUTH}?redirect=${props.location.pathname}`} />
-        )
-      }
-    />
-  );
-}
-
 type Props = {
   currentScroll: number,
   isAuthenticated: boolean,
@@ -109,6 +89,27 @@ type Props = {
   hasUnclaimedRefereeReward: boolean,
 };
 
+type PrivateRouteProps = Props & {
+  component: any,
+  isAuthenticated: boolean,
+};
+
+function PrivateRoute(props: PrivateRouteProps) {
+  const { component: Component, isAuthenticated, ...rest } = props;
+  return (
+    <Route
+      {...rest}
+      render={props =>
+        isAuthenticated || !IS_WEB ? (
+          <Component {...props} />
+        ) : (
+          <Redirect to={`/$/${PAGES.AUTH}?redirect=${props.location.pathname}`} />
+        )
+      }
+    />
+  );
+}
+
 function AppRouter(props: Props) {
   const {
     currentScroll,
@@ -237,6 +238,8 @@ function AppRouter(props: Props) {
       <Route path={`/$/${PAGES.INVITE}/:referrer`} exact component={InvitedPage} />
       <Route path={`/$/${PAGES.CHECKOUT}`} exact component={CheckoutPage} />
 
+      <Route path="/$/adstest" exact component={AdsTestPage} />
+
       <PrivateRoute {...props} exact path={`/$/${PAGES.YOUTUBE_SYNC}`} component={YoutubeSyncPage} />
       <PrivateRoute {...props} exact path={`/$/${PAGES.TAGS_FOLLOWING}`} component={TagsFollowingPage} />
       <PrivateRoute

ui/component/viewers/videoViewer/internal/adstest.css

@@ -0,0 +1,117 @@
+/* eslint-disable */
+.vjs-label-hidden {
+  display: none !important;
+}
+.vjs-default-skin div.vjs-ads-label {
+  font-size: 13px;
+  line-height: 30px;
+  font-weight: 400;
+  text-align: center;
+  color: #fff;
+  display: none;
+  width: auto;
+  padding-left: 10px;
+}
+.vjs-ad-playing .vjs-control.vjs-ads-label {
+  display: block;
+}
+.vjs-black-poster {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: contain;
+  cursor: pointer;
+  background-color: #000;
+}
+.vjs-has-started .vjs-black-poster.vjs-hidden,
+.vjs-using-native-controls .vjs-black-poster {
+  display: none;
+}
+div.VPAID-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+div.vjs-vpaid-ad div.vjs-progress-control,
+div.vjs-vpaid-ad div.vjs-time-controls,
+div.vjs-vpaid-ad div.vjs-time-divider {
+  display: none;
+}
+div.vjs-vpaid-ad.vjs-vpaid-flash-ad div.VPAID-container {
+  background-color: #000;
+}
+div.vjs-vpaid-ad .vjs-tech {
+  z-index: 0;
+}
+.vjs-ad-playing .vjs-progress-control {
+  pointer-events: none;
+}
+.vjs-ad-playing .vjs-play-control.vjs-paused,
+.vjs-ad-playing .vjs-play-progress,
+.vjs-ad-playing .vjs-volume-level {
+  background-color: #ffe400 !important;
+}
+div.vast-skip-button {
+  display: block;
+  position: absolute;
+  bottom: 20%;
+  right: 0;
+  background-color: #000;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 700;
+  width: auto;
+  padding: 8px;
+  z-index: 1;
+  border: 1px solid #fff;
+  border-right: none;
+}
+.vast-skip-button.enabled {
+  cursor: pointer;
+  color: #fff;
+}
+.vast-skip-button.enabled:hover {
+  cursor: pointer;
+  background: #333;
+}
+.vast-blocker {
+  display: block;
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.vast-skip-button.enabled:after {
+  content: '>>';
+  position: relative;
+  top: 1px;
+  margin-left: 8px;
+}
+.vjs-ad-playing.vjs-vast-ad-loading .vjs-loading-spinner {
+  display: block;
+  z-index: 2;
+  -webkit-animation: spin 1.5s infinite linear;
+  animation: spin 1.5s infinite linear;
+}
+.vjs-vast-ad-loading div.vjs-big-play-button {
+  display: none !important;
+}
+.vjs-ad-playing .vjs-live-controls,
+.vjs-ad-playing .vjs-slider-handle:before {
+  display: none;
+}
+/*# sourceMappingURL=videojs.vast.vpaid.min.css.map */
+/* eslint-enable */

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -7,6 +7,9 @@ import videojs from 'video.js/dist/alt/video.core.novtt.min.js';
 import 'video.js/dist/alt/video-js-cdn.min.css';
 import eventTracking from 'videojs-event-tracking';
 import isUserTyping from 'util/detect-typing';
+import './adstest.js';
+import './adstest.css';
+
 const isDev = process.env.NODE_ENV !== 'production';
 
 export type Player = {
@@ -32,6 +35,7 @@ type Props = {
   onPlayerReady: Player => void,
   isAudio: boolean,
   startMuted: boolean,
+  adsTest?: boolean,
 };
 
 type VideoJSOptions = {
@@ -78,8 +82,9 @@ if (!Object.keys(videojs.getPlugins()).includes('eventTracking')) {
 properties for this component should be kept to ONLY those that if changed should REQUIRE an entirely new videojs element
  */
 export default React.memo<Props>(function VideoJs(props: Props) {
-  const { startMuted, source, sourceType, poster, isAudio, onPlayerReady } = props;
+  const { startMuted, source, sourceType, poster, isAudio, onPlayerReady, adsTest } = props;
   const [reload, setReload] = useState('initial');
+
   let player: ?Player;
   const containerRef = useRef();
   const videoJsOptions = {
@@ -97,6 +102,23 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     playsinline: IS_IOS,
   };
 
+  if (adsTest) {
+    videoJsOptions.sources = [
+      {
+        src:
+          'https://cdn.lbryplayer.xyz/api/v3/streams/free/ted-cruz-obliterates-jack-dorsey/9c1d2dec8fd668a79966da4218b2c4d850f7e3c6/bd9c0e',
+        type: 'video/mp4',
+      },
+    ];
+
+    // $FlowFixMe
+    videoJsOptions.plugins.vastClient = {
+      adTagUrl: 'https://rozamimo9za10.com/ceef/gdt3g0/tbt/1794126/tlk.xml',
+      adsCancelTimeout: 5000,
+      adsEnabled: true,
+    };
+  }
+
   videoJsOptions.muted = startMuted;
 
   const tapToUnmuteRef = useRef();

ui/page/adsTest/index.js

@@ -0,0 +1,2 @@
+import AdsTestPage from './view';
+export default AdsTestPage;

ui/page/adsTest/view.jsx

@@ -0,0 +1,14 @@
+// @flow
+import * as React from 'react';
+import Page from 'component/page';
+import VideoJs from 'component/viewers/videoViewer/internal/videojs';
+
+export default function CheckoutPage() {
+  return (
+    <Page className="ads-test">
+      <h1>ads test</h1>
+      {/* $FlowFixMe */}
+      <VideoJs adsTest />
+    </Page>
+  );
+}

ui/scss/init/_gui.scss

@@ -355,3 +355,7 @@ textarea {
     display: none !important;
   }
 }
+
+.ads-test {
+  height: 50vh;
+}