lbry-desktop/web/component/ads/view.jsx

194 lines
5.4 KiB
React
Raw Normal View History

2020-01-24 19:31:49 +01:00
// @flow
2020-10-01 22:59:11 +02:00
import { DOMAIN, SHOW_ADS } from 'config';
import { LIGHT_THEME } from 'constants/themes';
2020-01-24 19:31:49 +01:00
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';
2021-02-02 20:49:20 +01:00
// $FlowFixMe
2021-02-03 05:29:33 +01:00
import { NO_ADS_CHANNEL_IDS } from 'homepages';
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';
2021-01-22 00:57:29 +01:00
const G_AD_ID = 'ca-pub-7102138296475003';
// const G_AD_ONE_LAYOUT = '-gv+p-3a-8r+sd';
// const G_AD_ONE_SLOT = '6052061397';
2020-01-24 19:31:49 +01:00
// const G_AD_LIGHT_LAYOUT = '-h9-o+3s-6c+33'; // old layout
const G_AD_LIGHT_LAYOUT = '-gr-p+3s-5w+2d'; // light mode, related
const G_AD_LIGHT_SLOT = '1498002046';
const G_AD_DARK_LAYOUT = '-gr-p+3s-5w+2d'; // dark mode, related
const G_AD_DARK_SLOT = '7266878639';
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,
theme: string,
2021-01-31 04:47:06 +01:00
claim: GenericClaim,
isMature: 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,
theme,
2021-01-31 04:47:06 +01:00
claim,
isMature,
2020-01-24 19:31:49 +01:00
} = props;
2021-01-22 00:57:29 +01:00
let googleInit;
2020-03-26 22:47:07 +01:00
2021-01-31 04:47:06 +01:00
const channelId = claim && claim.signing_channel && claim.signing_channel.claim_id;
2021-02-03 05:29:33 +01:00
const isBlocked = isMature || (NO_ADS_CHANNEL_IDS && NO_ADS_CHANNEL_IDS.includes(channelId));
2020-01-23 17:21:36 +01:00
useEffect(() => {
2020-10-01 22:59:11 +02:00
if (SHOW_ADS && type === 'video') {
2021-01-22 00:57:29 +01:00
let script;
2020-03-26 22:47:07 +01:00
try {
const d = document;
const s = 'script';
const n = 'playbuzz-stream';
let fjs = d.getElementsByTagName(s)[0];
2021-01-22 00:57:29 +01:00
script = d.createElement(s);
script.className = n;
script.src = 'https://stream.playbuzz.com/player/62d1eb10-e362-4873-99ed-c64a4052b43b';
2020-03-26 22:47:07 +01:00
// $FlowFixMe
2021-01-22 00:57:29 +01:00
fjs.parentNode.insertBefore(script, fjs);
2020-03-26 22:47:07 +01:00
} catch (e) {}
}
}, [type]);
useEffect(() => {
2020-10-01 22:59:11 +02:00
if (SHOW_ADS && !IS_MOBILE && type === 'sidebar') {
2020-03-26 22:47:07 +01:00
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]);
2021-01-22 00:57:29 +01:00
useEffect(() => {
let script;
2021-02-09 19:55:06 +01:00
const GOOGLE_AD_ELEMENT_ID = 'googleadscriptid';
2021-02-03 05:45:02 +01:00
if (SHOW_ADS && type === 'google' && !isBlocked) {
2021-01-22 00:57:29 +01:00
const d = document;
2021-02-09 19:55:06 +01:00
if (!d.getElementById(GOOGLE_AD_ELEMENT_ID)) {
2021-01-22 00:57:29 +01:00
try {
const s = 'script';
let fjs = d.getElementsByTagName(s)[0];
script = d.createElement(s);
script.id = 'googleadscriptid';
script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
script.setAttribute('async', 'async');
script.setAttribute('data-ad-client', 'ca-pub-7102138296475003');
// $FlowFixMe
fjs.parentNode.insertBefore(script, fjs);
} catch (e) {}
}
googleInit = setTimeout(() => {
if (typeof window !== 'undefined') {
(window.adsbygoogle = window.adsbygoogle || []).push({});
}
}, 1000);
2021-02-09 19:55:06 +01:00
} else if (isBlocked) {
let fjs = document.getElementById(GOOGLE_AD_ELEMENT_ID);
if (fjs) fjs.remove();
2021-01-22 00:57:29 +01:00
}
return () => {
if (googleInit) {
clearTimeout(googleInit);
}
};
2021-02-03 05:45:02 +01:00
}, [type, isBlocked]);
2021-01-22 00:57:29 +01:00
const googleAd = (
<div className="ads__related--google">
<ins
className="adsbygoogle"
style={{ display: 'block' }}
data-ad-format="fluid"
data-ad-layout-key={theme === LIGHT_THEME ? G_AD_LIGHT_LAYOUT : G_AD_DARK_LAYOUT}
2021-01-22 00:57:29 +01:00
data-ad-client={G_AD_ID}
data-ad-slot={theme === LIGHT_THEME ? G_AD_LIGHT_SLOT : G_AD_DARK_SLOT}
2021-01-22 00:57:29 +01:00
/>
</div>
);
2020-03-26 22:47:07 +01:00
const adsSignInDriver = (
<I18nMessage
tokens={{
2021-01-03 14:55:24 +01:00
log_in_to_domain: (
2020-07-14 21:08:54 +02:00
<Button
button="link"
2021-01-03 14:55:24 +01:00
label={__('Log in to %domain%', { domain: DOMAIN })}
2020-07-14 21:08:54 +02:00
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" />,
}}
>
2021-01-03 14:55:24 +01:00
Hate these? %log_in_to_domain% or %download_the_app% for an ad free experience.
2020-03-26 22:47:07 +01:00
</I18nMessage>
);
2020-01-23 17:21:36 +01:00
2021-01-22 00:57:29 +01:00
const videoAd = (
2020-03-26 22:47:07 +01:00
<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>
2021-01-22 00:57:29 +01:00
);
const sidebarAd = (
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
);
2021-01-22 00:57:29 +01:00
2021-01-31 04:47:06 +01:00
if (!SHOW_ADS || (type === 'google' && isBlocked)) {
2021-01-22 00:57:29 +01:00
return false;
}
if (type === 'video') {
return videoAd;
}
if (type === 'google') {
return googleAd;
}
if (type === 'sidebar') {
return sidebarAd;
}
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);