From 73552e35f911daca7762804ff92e292971681236 Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Wed, 9 Mar 2022 16:02:11 +0800 Subject: [PATCH 1/2] Ad: remove unused style ID - Removed "customAniviewStyling" - No longer exists -- it was from the old DOM manipulation method. - Removed "with no tileLayout it indicates sidebar ad" - Misleading and not useful. I can easily set the sidebar ad to Tile if we wanted to (it used to be in Tile, we changed to save space). So, every time we change the style, we need to update the comment?? - The sidebar is not the only place that List layout is used -- there's Channel and Category pages, which allows either layout. --- web/component/ads/view.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web/component/ads/view.jsx b/web/component/ads/view.jsx index c9a7ca858..c2a102b23 100644 --- a/web/component/ads/view.jsx +++ b/web/component/ads/view.jsx @@ -95,7 +95,6 @@ function Ads(props: Props) { removeIfExists('[src^="https://player.aniview.com/script/6.1/aniview.js"]'); removeIfExists('[id^="AVLoaderaniplayer_vidcrunch"]'); removeIfExists('#av_css_id'); - removeIfExists('#customAniviewStyling'); }; } catch (e) {} } @@ -121,7 +120,7 @@ function Ads(props: Props) { return (
From a98dc18fc6514bff159b5fe81727fb305d66d19a Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Wed, 9 Mar 2022 17:53:58 +0800 Subject: [PATCH 2/2] Fix EU ad and minor tweaks - 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. --- ui/scss/component/_ads.scss | 71 ++++++++----------------------------- web/component/ads/view.jsx | 6 +--- 2 files changed, 16 insertions(+), 61 deletions(-) diff --git a/ui/scss/component/_ads.scss b/ui/scss/component/_ads.scss index 68a468d70..d88f585ef 100644 --- a/ui/scss/component/_ads.scss +++ b/ui/scss/component/_ads.scss @@ -42,13 +42,6 @@ @media (max-width: $breakpoint-small) { $width: calc(var(--file-list-thumbnail-width) * 0.8); 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) { @@ -61,40 +54,29 @@ width: $width; } - //div[style*='position: fixed; transform: scale(1);'] { - // // 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);'] { + div[style*='transform-origin: left bottom;'] { // [Floating ad] - // Hide it in entirely. Couldn't reconcile with the changes needed to make - // tile layout fit on browser-resize and also with their mobile script - // changes. Else, the block above can be used. - transform: none !important; - transform-origin: unset !important; - position: unset !important; + // Hide for now since can't get it to work in a consistent manner between: + // - EU and non-EU version + // - issues in Firefox + display: none !important; + } - div:first-child { - // [Floating ad close button] - display: none !important; - } + #aniBox { + transition: unset !important; } #aniBox, #av-container { - // Handle the scenario of ads not resizing when switching from small to - // medium/large layout: + width: 100% !important; height: unset !important; aspect-ratio: 16 / 9 !important; 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 { - width: 100% !important; - 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; + width: 100%; } .ads__claim-text { @@ -162,6 +120,7 @@ display: flex; flex-direction: column; justify-content: center; + color: var(--color-text-subtitle); } .ads__claim-text--small { diff --git a/web/component/ads/view.jsx b/web/component/ads/view.jsx index c2a102b23..b911c2c93 100644 --- a/web/component/ads/view.jsx +++ b/web/component/ads/view.jsx @@ -64,11 +64,7 @@ function Ads(props: Props) { // this is populated from app based on location const isInEu = localStorage.getItem('gdprRequired') === 'true'; - - // 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; + const adConfig = isInEu ? AD_CONFIGS.EU : mobileAds ? AD_CONFIGS.MOBILE : AD_CONFIGS.DEFAULT; // add script to DOM useEffect(() => {