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

Fix EU ad and minor tweaks

Browse source 
- Initially, we did a bunch of forceful CSS to make the ad tile resize properly when the browser resizes. This was causing the EU ad to display incorrectly. Turns out, that css is no longer needed after the BEM-style re-write.

- Changed the floating ad selector to cover both EU and non-EU version. It's probably still not the best given it relies on style rather than ID, but the ID seems dynamic.
This commit is contained in:
infinite-persistence 2022-03-09 17:53:58 +08:00
parent 73552e35f9
commit a98dc18fc6
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 16 additions and 61 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 {

6
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(() => {