LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix EU ad fallout #1055

Browse source
This commit is contained in:
infinite-persistence 2022-03-09 18:46:08 +08:00
commit 3dd8c1fab5
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 17 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
ui/scss/component/_ads.scss
View file

@ -42,13 +42,6 @@
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
$width: calc(var(--file-list-thumbnail-width) * 0.8); $width: calc(var(--file-list-thumbnail-width) * 0.8);
width: $width; width: $width;
#aniBox,
#av-container {
// Only needed on actual mobile. Their mobile script does something
// different that makes it 100%, so have to counter that here.
width: unset !important;
}
} }
@media (min-width: $breakpoint-small) and (max-width: $breakpoint-large) { @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
@ -61,40 +54,29 @@
width: $width; width: $width;
} }
//div[style*='position: fixed; transform: scale(1);'] { div[style*='transform-origin: left bottom;'] {
// // This is the floating ad (when tile goes off screen).
// // The sidebar is covering it, so move to the right a bit:
// left: unset !important;
//
// // It's a bit jarring at times on a busy page, so add border:
// background-color: var(--color-ads-background);
// border-radius: var(--border-radius);
// padding: var(--spacing-s);
//}
div[style*='position: fixed; transform: scale(1);'] {
// [Floating ad] // [Floating ad]
// Hide it in entirely. Couldn't reconcile with the changes needed to make // Hide for now since can't get it to work in a consistent manner between:
// tile layout fit on browser-resize and also with their mobile script // - EU and non-EU version
// changes. Else, the block above can be used. // - issues in Firefox
transform: none !important; display: none !important;
transform-origin: unset !important; }
position: unset !important;
div:first-child { #aniBox {
// [Floating ad close button] transition: unset !important;
display: none !important;
}
} }
#aniBox, #aniBox,
#av-container { #av-container {
// Handle the scenario of ads not resizing when switching from small to width: 100% !important;
// medium/large layout:
height: unset !important; height: unset !important;
aspect-ratio: 16 / 9 !important; aspect-ratio: 16 / 9 !important;
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
.avp-p-wrapper > div {
border-radius: var(--border-radius) !important; // Needed for EU only
}
} }
} }
@ -115,31 +97,7 @@
} }
.ad__container { .ad__container {
width: 100% !important; width: 100%;
max-width: 100 !important;
min-width: unset !important;
box-sizing: border-box !important;
div:not(#sound):not(.off):not(#timeline) {
width: 100% !important;
max-width: unset !important;
min-width: unset !important;
box-sizing: border-box !important;
}
video {
width: 100% !important;
height: 100% !important;
}
#timeline,
#buttons {
width: calc(100% - (var(--spacing-s) * 2)) !important;
}
}
p {
width: calc(100% - (var(--spacing-m) * 3)) !important;
} }
.ads__claim-text { .ads__claim-text {
@ -162,6 +120,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
color: var(--color-text-subtitle);
} }
.ads__claim-text--small { .ads__claim-text--small {

9
web/component/ads/view.jsx
View file

@ -64,11 +64,7 @@ function Ads(props: Props) {
// this is populated from app based on location // this is populated from app based on location
const isInEu = localStorage.getItem('gdprRequired') === 'true'; const isInEu = localStorage.getItem('gdprRequired') === 'true';
const adConfig = isInEu ? AD_CONFIGS.EU : mobileAds ? AD_CONFIGS.MOBILE : AD_CONFIGS.DEFAULT;
// const adConfig = isInEu ? AD_CONFIGS.EU : mobileAds ? AD_CONFIGS.MOBILE : AD_CONFIGS.DEFAULT;
// -- The logic above is what we are asked to do, but the EU script breaks our
// -- app's CSS when ran on mobile.
const adConfig = mobileAds ? AD_CONFIGS.MOBILE : isInEu ? AD_CONFIGS.EU : AD_CONFIGS.DEFAULT;
// add script to DOM // add script to DOM
useEffect(() => { useEffect(() => {
@ -95,7 +91,6 @@ function Ads(props: Props) {
removeIfExists('[src^="https://player.aniview.com/script/6.1/aniview.js"]'); removeIfExists('[src^="https://player.aniview.com/script/6.1/aniview.js"]');
removeIfExists('[id^="AVLoaderaniplayer_vidcrunch"]'); removeIfExists('[id^="AVLoaderaniplayer_vidcrunch"]');
removeIfExists('#av_css_id'); removeIfExists('#av_css_id');
removeIfExists('#customAniviewStyling');
}; };
} catch (e) {} } catch (e) {}
} }
@ -121,7 +116,7 @@ function Ads(props: Props) {
return ( return (
<div <div
className={classnames('ads ads__claim-item', className, { className={classnames('ads ads__claim-item', className, {
'ads__claim-item--tile': tileLayout, // with no tileLayout it indicates sidebar ad 'ads__claim-item--tile': tileLayout,
})} })}
> >
<div className="ad__container"> <div className="ad__container">