lbry-desktop/web/component/ads.jsx

109 lines
2.8 KiB
React
Raw Normal View History

2020-01-24 19:31:49 +01:00
// @flow
import * as PAGES from 'constants/pages';
2020-01-23 17:21:36 +01:00
import React, { useEffect } from 'react';
2020-01-24 19:31:49 +01:00
import { withRouter } from 'react-router';
import I18nMessage from 'component/i18nMessage';
import Button from 'component/button';
2020-03-26 22:47:07 +01:00
import classnames from 'classnames';
2020-07-14 21:08:54 +02:00
import { DOMAIN } from 'config';
2020-01-23 17:21:36 +01:00
2020-01-24 19:31:49 +01:00
const ADS_URL = '//assets.revcontent.com/master/delivery.js';
const IS_MOBILE = typeof window.orientation !== 'undefined';
2020-01-24 19:31:49 +01:00
type Props = {
location: { pathname: string },
2020-03-26 22:47:07 +01:00
type: string,
small: boolean,
2020-01-24 19:31:49 +01:00
};
function Ads(props: Props) {
const {
location: { pathname },
2020-03-26 22:47:07 +01:00
type = 'sidebar',
small,
2020-01-24 19:31:49 +01:00
} = props;
2020-03-26 22:47:07 +01:00
2020-01-23 17:21:36 +01:00
useEffect(() => {
2020-03-26 22:47:07 +01:00
if (type === 'video') {
try {
const d = document;
const s = 'script';
const n = 'playbuzz-stream';
2020-01-23 17:21:36 +01:00
2020-03-26 22:47:07 +01:00
let js;
let fjs = d.getElementsByTagName(s)[0];
js = d.createElement(s);
js.className = n;
js.src = 'https://stream.playbuzz.com/player/62d1eb10-e362-4873-99ed-c64a4052b43b';
// $FlowFixMe
2020-03-30 14:57:15 +02:00
fjs.parentNode.insertBefore(js, fjs);
2020-03-26 22:47:07 +01:00
} catch (e) {}
}
}, [type]);
useEffect(() => {
if (!IS_MOBILE && type === 'sidebar') {
const script = document.createElement('script');
script.src = ADS_URL;
script.async = true;
2020-01-24 19:31:49 +01:00
// $FlowFixMe
document.body.appendChild(script);
return () => {
// $FlowFixMe
document.body.removeChild(script);
// if user navigates too rapidly, <style> tags can build up
2020-01-24 19:31:49 +01:00
// $FlowFixMe
if (document.body.getElementsByTagName('style').length) {
// $FlowFixMe
document.body.getElementsByTagName('style')[0].remove();
}
};
}
2020-03-26 22:47:07 +01:00
}, [type]);
const adsSignInDriver = (
<I18nMessage
tokens={{
sign_in_to_lbrytv: (
2020-07-14 21:08:54 +02:00
<Button
button="link"
label={__('Sign in to') + ' ' + DOMAIN}
navigate={`/$/${PAGES.AUTH}?redirect=${pathname}`}
/>
2020-03-26 22:47:07 +01:00
),
download_the_app: <Button button="link" label={__('download the app')} href="https://lbry.com/get" />,
}}
>
Hate these? %sign_in_to_lbrytv% or %download_the_app% for an ad free experience.
</I18nMessage>
);
2020-01-23 17:21:36 +01:00
2020-03-26 22:47:07 +01:00
return type === 'video' ? (
<div className="ads__claim-item">
<div id="62d1eb10-e362-4873-99ed-c64a4052b43b" />
<div
className={classnames('ads__claim-text', {
'ads__claim-text--small': small,
})}
>
<div>Ad</div>
<p>{adsSignInDriver}</p>
</div>
</div>
) : (
2020-01-24 19:31:49 +01:00
<div className="ads-wrapper">
2020-01-23 19:44:55 +01:00
<p>Ads</p>
2020-03-26 22:47:07 +01:00
<p>{adsSignInDriver}</p>
2020-01-23 19:44:55 +01:00
<div
id="rc-widget-0a74cf"
data-rc-widget
data-widget-host="habitat"
data-endpoint="//trends.revcontent.com"
data-widget-id="117427"
/>
2020-01-24 19:31:49 +01:00
</div>
2020-01-23 17:21:36 +01:00
);
2020-01-23 19:44:55 +01:00
}
2020-01-23 17:21:36 +01:00
2020-01-24 19:31:49 +01:00
export default withRouter(Ads);