pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove all advertising-related code

Browse Source
This commit is contained in:
Fornax
2023-09-18 22:43:12 +02:00
parent 2d7bceed00
commit 0063851ef5
22 changed files with 182 additions and 626 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
svelte/src/file_viewer/AdHead.svelte
View File

@@ -1,73 +0,0 @@
<script context="module">
import { writable } from "svelte/store";
export const adsplus_load = writable(false)
export const adsplus_loaded = writable(false)
export const adaround_load = writable(false)
export const adaround_loaded = writable(false)
export const flyingsquare_load = writable(false)
export const flyingsquare_loaded = writable(false)
export const valueimpression_load = writable(false)
export const valueimpression_loaded = writable(false)
export const load_ad = (ad_type) => {
if (ad_type === "ads.plus") {
adsplus_load.set(true)
} else if (ad_type === "adaround") {
adaround_load.set(true)
} else if (ad_type === "flyingsquare") {
flyingsquare_load.set(true)
} else if (ad_type === "valueimpression") {
valueimpression_load.set(true)
}
}
</script>
<script>
// This script makes sure that each head element is only loaded once. The _load
// stores are for telling this script to load a head element, and the _loaded
// stores are for telling the ads that the head element has finished loading
let adsplus = false
adsplus_load.subscribe(v => adsplus = v)
const adsplus_load_event = () => {
adsplus_loaded.set(true)
console.debug("finished loading adsplus head element")
}
let adaround = false
adaround_load.subscribe(v => adaround = v)
const adaround_load_event = () => {
adaround_loaded.set(true)
console.debug("finished loading adaround head element")
}
let flyingsquare = false
flyingsquare_load.subscribe(v => flyingsquare = v)
const flyingsquare_load_event = () => {
flyingsquare_loaded.set(true)
console.debug("finished loading flyingsquare head element")
}
let valueimpression = false
valueimpression_load.subscribe(v => valueimpression = v)
const valueimpression_load_event = () => {
valueimpression_loaded.set(true)
console.debug("finished loading valueimpression head element")
}
</script>
<svelte:head>
{#if adsplus}
<script on:load={adsplus_load_event} async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
{/if}
{#if adaround}
<script on:load={adaround_load_event} async src="/res/script/adaround.js"></script>
{/if}
{#if flyingsquare}
<script on:load={flyingsquare_load_event} async src="/res/script/flyingsquare.js"></script>
{/if}
{#if valueimpression}
<script on:load={valueimpression_load_event} async defer src="//services.vlitag.com/adv1/?q=f8197b031408cd00d0ba7385af21bec5"></script>
<script> var vitag = vitag || {};</script>
{/if}
</svelte:head>

248
svelte/src/file_viewer/AdLeaderboard.svelte
View File

@@ -1,248 +0,0 @@
<script>
import { onMount } from "svelte"
import Mastodon from "../icons/Mastodon.svelte";
import Reddit from "../icons/Reddit.svelte";
import Twitter from "../icons/Twitter.svelte";
import { color_by_name_no_prefix } from "../util/Util.svelte";
import * as head from "./AdHead.svelte"
let container
let banner
let ad_type = ""
onMount(() => {
let url_ads = new URL(window.location.href).searchParams.get("ads")
if (url_ads) {
set_ad_type(url_ads)
return
}
// 20% pixeldrain socials
// 20% reviews
// 50% patreon
let rand = Math.random()
if (rand < 0.2) {
set_ad_type("socials")
} else if (rand < 0.4) {
set_ad_type("reviews")
} else {
set_ad_type("patreon_support")
}
})
let set_ad_type = async t => {
ad_type = t
head.load_ad(t)
resize()
console.log("leaderboard ad is " + t)
}
// We scale the size of the banner based on the size of the screen. But because
// some things don't scale easily like iframes and javascript ads we use a CSS
// transformation instead of changing the actual dimensions
const resize = () => {
if (!banner) {
return
}
let scaleWidth = 1
let scaleHeight = 1
let minWindowHeight = 600
let bannerWidth = banner.offsetWidth
let bannerHeight = banner.offsetHeight
if (window.innerWidth < bannerWidth) {
scaleWidth = window.innerWidth / bannerWidth
}
if (window.innerHeight < minWindowHeight) {
scaleHeight = window.innerHeight / minWindowHeight
}
// The smaller scale is the scale we'll use
let scale = scaleWidth < scaleHeight ? scaleWidth : scaleHeight
// Because of the scale transformation the automatic margins don't work
// anymore. So we have to manually calculate the margin. Here we take the
// width of the viewport - the width of the ad to calculate the amount of
// pixels around the ad. We multiply the ad size by the scale we calculated
// to account for the smaller size.
let offset = (window.innerWidth - (bannerWidth * scale)) / 2
container.style.height = (bannerHeight * scale) + "px"
banner.style.marginLeft = offset + "px"
banner.style.transform = "scale(" + scale + ")"
}
head.adsplus_loaded.subscribe(v => {
if (v) {
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
googletag.defineSlot('/21673142571/299__pixeldrain.com__default__728x90_1', [728, 90], 'div-gpt-ad-pixeldraincom728x90_1').addService(googletag.pubads());
googletag.pubads().collapseEmptyDivs();
googletag.enableServices();
});
googletag.cmd.push(function() { googletag.display('div-gpt-ad-pixeldraincom728x90_1'); });
}
})
head.valueimpression_loaded.subscribe(v => {
if (v) {
(vitag.Init = window.vitag.Init || []).push(function(){viAPItag.display("vi_1994884987")})
}
})
</script>
<svelte:window on:resize={resize} on:load={resize}/>
<svelte:head>
{#if ad_type === "nextmillennium"}
<script async src="https://powerad.ai/script.js"></script>
{/if}
</svelte:head>
<div bind:this={container}>
{#if ad_type === "aads"}
<iframe bind:this={banner} class="banner"
data-aa="73974"
src="//ad.a-ads.com/73974?size=728x90&background_color={color_by_name_no_prefix('body_color')}&text_color={color_by_name_no_prefix('body_text_color')}&title_color={color_by_name_no_prefix('highlight_color')}&title_hover_color={color_by_name_no_prefix('highlight_color')}&link_color={color_by_name_no_prefix('highlight_color')}&link_hover_color={color_by_name_no_prefix('highlight_color')}"
style="width:728px; height:90px; border:0px; padding:0; overflow:hidden; background-color: transparent;"
title="A-ads advertisement">
</iframe>
{:else if ad_type === "brave"}
<a bind:this={banner} class="banner" style="display: inline-block; width: 728px; height: 90px;" href="/click/MdUXxSov?target=https%3A%2F%2Fbrave.com%2Fpix009">
<img src="/res/img/misc/brave-728x90.png" style="width: 100%; height: 100%" alt="Brave ad"/>
</a>
{:else if ad_type === "ads.plus"}
<!-- This is the tag for the unit and should be placed in the respective ad spot in the body part of the page -->
<!-- /21673142571/299__pixeldrain.com__default__728x90_1 -->
<div bind:this={banner} class="banner" id='div-gpt-ad-pixeldraincom728x90_1' style='width: 728px; height: 90px;'>
</div>
{:else if ad_type === "pixfuture"}
<!-- We don't bind the pixfuture ad to the banner variable because pixfuture does its own scaling -->
<!-- AuctionX Display platform tag START -->
<div class="banner" id="27517x728x90x4605x_ADSLOT1" clickTrack="%%CLICK_URL_ESC%%"></div>
<script type="text/javascript" async src="https://served-by.pixfuture.com/www/delivery/headerbid.js" slotId="27517x728x90x4605x_ADSLOT1" refreshTime="5" refreshInterval="60"></script>
<!-- AuctionX Display platform tag END -->
{:else if ad_type === "adaround"}
<div bind:this={banner} class="_fa7cdd4c68507744 banner" data-zone="d8764be36c134d3d807abb2a073dc010" style="width:728px;height:90px;display: inline-block;margin: 0 auto"></div>
{:else if ad_type === "flyingsquare"}
<div bind:this={banner} class="xc449bad4854773ff banner" data-zone="28ebf286bb7d4446a5ba43b0ead8f1bb" style="width:728px;height:90px;display: inline-block;margin: 0 auto"></div>
{:else if ad_type === "valueimpression"}
<!-- Valueimpression overrides the style of its div after loading,
messing up our scaling script, so we wrap it in another div of the
correct size -->
<div bind:this={banner} class="banner" style="width: 728px; height: 90px; overflow: hidden;">
<div class="adsbyvli" data-ad-slot="vi_1994884987" style="width: 728px; height: 90px"></div>
</div>
{:else if ad_type === "nextmillennium"}
<div bind:this={banner} class="banner" style="width: 728px; height: 90px;"></div>
{:else if ad_type === "pixeldrain_social"}
<map name="socials_map">
<area target="_blank" alt="Pixeldrain on Reddit" title="Pixeldrain on Reddit" href="https://reddit.com/r/pixeldrain" coords="0,38,364,90" shape="rect">
<area target="_blank" alt="Pixeldrain on Twitter" title="Pixeldrain on Twitter" href="https://twitter.com/Fornax96" coords="364,38,728,90" shape="rect">
</map>
<img bind:this={banner} usemap="#socials_map" class="banner" src="/res/img/advertising/pixeldrain_socials.webp" style="display: inline-block; width: 728px; height: 90px;" alt="Pixeldrain social media"/>
{:else if ad_type === "patreon_support"}
<div class="banner support_banner">
<span style="display: block; margin-bottom: 2px;">
No ads today. Pixeldrain is currently funded by our subscribers!
</span>
<a href="/#pro" rel="noreferrer" class="button button_highlight" target="_blank">
<i class="icon">bolt</i>
Support Pixeldrain to help keep the project going
</a>
</div>
{:else if ad_type === "socials"}
<div class="banner center">
<div class="socials">
Pixeldrain is on the fediverse!<br/>
<a href="https://mastodon.social/@fornax" rel="noreferrer" class="button" target="_blank" style="background-color: #595aff; color: #ffffff;">
<i class="icon small">people</i>
Mastodon
</a>
<a href="https://lemmy.fornaxian.tech/c/pixeldrain"
rel="noreferrer" class="button" target="_blank" style="background-color: #14854f; color: #ffffff;"
>
<i class="icon small">people</i>
Lemmy
</a>
</div>
<div class="socials">
And on legacy media too<br/>
<a href="https://twitter.com/Fornax96" rel="noreferrer" class="button" target="_blank" style="background-color: #1a8cd8; color: #ffffff;">
<i class="icon small">people</i>
Twitter
</a>
<a href="https://www.reddit.com/r/PixelDrain"
rel="noreferrer" class="button" target="_blank" style="background-color: #ff4500; color: #ffffff;"
>
<i class="icon small">people</i>
Reddit
</a>
</div>
</div>
{:else if ad_type === "reviews"}
<div class="banner support_banner">
<span style="display: block; margin-bottom: 2px;">
Are you liking pixeldrain? Write a review! It really helps
</span>
<a href="https://alternativeto.net/software/pixeldrain/about/"
rel="noreferrer" class="button" target="_blank" style="background-color: #0C9EF0; color: #FFFFFF; font-weight: bold;"
>
<i class="icon">rate_review</i>
AlternativeTo
</a>
<a href="https://www.trustpilot.com/review/pixeldrain.com"
rel="noreferrer" class="button" target="_blank" style="background-color: #00B67A; color: #FFFFFF; font-weight: bold;"
>
<i class="icon">rate_review</i>
Trustpilot
</a>
</div>
{/if}
</div>
<style>
.banner {
display: block;
margin: auto;
transform-origin: 0 0;
font-size: 1.2em;
}
.center {
text-align: center;
}
.support_banner {
text-align: center;
padding: 2px;
}
.socials {
display: inline-block;
text-align: center;
margin: 0 5px;
}
/* Try to avoid text wrapping */
@media(max-width: 600px) {
.banner {
font-size: 1em;
}
.socials {
font-size: 0.8em;
}
}
</style>

101
svelte/src/file_viewer/AdSkyscraper.svelte
View File

@@ -1,101 +0,0 @@
<script>
import { createEventDispatcher, onMount, tick } from "svelte"
import { color_by_name_no_prefix } from "../util/Util.svelte";
import * as head from "./AdHead.svelte"
let dispatch = createEventDispatcher()
let ad_type = ""
let visible = false
onMount(() => {
let url_ads = new URL(window.location.href).searchParams.get("ads")
if (url_ads) {
set_ad_type(url_ads)
return
}
// If the screen is too small to display the full skyscraper ad, we don't
// show it
if (document.body.clientWidth < 800 || document.body.clientHeight < 700) {
return
}
set_ad_type("pixfuture")
})
let set_ad_type = async t => {
ad_type = t
head.load_ad(t)
visible = true
await tick() // Wait for skyscraper div to render
dispatch("visibility", true)
console.log("skyscraper ad is " + t)
}
head.adsplus_loaded.subscribe(v => {
if (v) {
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
googletag.defineSlot('/21673142571/299__pixeldrain.com__default__160x600_1', [160, 600], 'div-gpt-ad-pixeldraincom160x600_1').addService(googletag.pubads());
googletag.pubads().collapseEmptyDivs();
googletag.enableServices();
});
googletag.cmd.push(function() { googletag.display('div-gpt-ad-pixeldraincom160x600_1'); });
}
})
head.valueimpression_loaded.subscribe(v => {
if (v) {
(vitag.Init = window.vitag.Init || []).push(function(){viAPItag.display("vi_1994884988")})
}
})
</script>
{#if visible}
<div class="skyscraper">
<div class="ad_space">
{#if ad_type === "aads"}
<iframe
data-aa="1811738"
src="//ad.a-ads.com/1811738?size=160x600&background_color={color_by_name_no_prefix('body_color')}&text_color={color_by_name_no_prefix('body_text_color')}&title_color={color_by_name_no_prefix('highlight_color')}&title_hover_color={color_by_name_no_prefix('highlight_color')}&link_color={color_by_name_no_prefix('highlight_color')}&link_hover_color={color_by_name_no_prefix('highlight_color')}"
style="width:160px; height:600px; border:0px; padding:0; overflow:hidden; background-color: transparent;"
title="A-ads advertisement">
</iframe>
{:else if ad_type === "ads.plus"}
<!-- /21673142571/299__pixeldrain.com__default__160x600_1 -->
<div id='div-gpt-ad-pixeldraincom160x600_1' style='width: 160px; height: 600px;'></div>
{:else if ad_type === "pixfuture"}
<!-- AuctionX Display platform tag START -->
<div id="27513x160x600x4605x_ADSLOT1" clickTrack="%%CLICK_URL_ESC%%" style="display: block; margin: auto;"></div>
<script type="text/javascript" async src="https://served-by.pixfuture.com/www/delivery/headerbid.js" slotId="27513x160x600x4605x_ADSLOT1" refreshTime="5" refreshInterval="60"></script>
<!-- AuctionX Display platform tag END -->
{:else if ad_type === "adaround"}
<div class="_fa7cdd4c68507744" data-zone="2a0dbd4b7c484e9e824d211a57fa6b93" style="width:160px;height:600px;display: inline-block;margin: 0 auto"></div>
{:else if ad_type === "flyingsquare"}
<div class="xc449bad4854773ff" data-zone="d675792db61d408287d0d694d03d12e5" style="width:160px;height:600px;display: inline-block;margin: 0 auto"></div>
{:else if ad_type === "valueimpression"}
<div class="adsbyvli" data-ad-slot="vi_1994884988" style="width: 160px; height: 600px"></div>
{/if}
</div>
</div>
{/if}
<style>
.skyscraper {
position: absolute;
width: 160px;
z-index: 49;
overflow: hidden;
right: 0;
bottom: 0;
top: 0;
padding: 0;
text-align: center;
}
.ad_space {
width: 100%;
height: 100%;
}
</style>

159
svelte/src/file_viewer/BottomBanner.svelte Normal file
View File

@@ -0,0 +1,159 @@
<script>
import { onMount } from "svelte"
let ad_type = ""
onMount(() => {
// 20% pixeldrain socials
// 20% reviews
// 10% battle cry
// 40% patreon
let rand = Math.random()
if (rand < 0.2) {
ad_type = "socials"
} else if (rand < 0.4) {
ad_type = "reviews"
} else if (rand < 0.5) {
ad_type = "slava_ukraini"
} else {
ad_type = "patreon_support"
}
})
</script>
{#if ad_type === "patreon_support"}
<div class="banner support_banner">
<span style="display: block; margin-bottom: 2px;">
No ads today. Pixeldrain is currently funded by our subscribers!
</span>
<a href="/#pro" rel="noreferrer" class="button button_highlight" target="_blank">
<i class="icon">bolt</i>
Support Pixeldrain to help keep the project going
</a>
</div>
{:else if ad_type === "socials"}
<div class="banner center">
<div class="socials">
Pixeldrain is on the fediverse!<br/>
<a href="https://mastodon.social/@fornax" rel="noreferrer" class="button" target="_blank" style="background-color: #595aff; color: #ffffff;">
<i class="icon small">people</i>
Mastodon
</a>
<a href="https://lemmy.fornaxian.tech/c/pixeldrain"
rel="noreferrer" class="button" target="_blank" style="background-color: #14854f; color: #ffffff;"
>
<i class="icon small">people</i>
Lemmy
</a>
</div>
<div class="socials">
And on legacy media too<br/>
<a href="https://twitter.com/Fornax96" rel="noreferrer" class="button" target="_blank" style="background-color: #1a8cd8; color: #ffffff;">
<i class="icon small">people</i>
Twitter
</a>
<a href="https://www.reddit.com/r/PixelDrain"
rel="noreferrer" class="button" target="_blank" style="background-color: #ff4500; color: #ffffff;"
>
<i class="icon small">people</i>
Reddit
</a>
</div>
</div>
{:else if ad_type === "reviews"}
<div class="banner support_banner">
<span style="display: block; margin-bottom: 2px;">
Are you liking pixeldrain? Write a review! It really helps
</span>
<a href="https://alternativeto.net/software/pixeldrain/about/"
rel="noreferrer" class="button" target="_blank" style="background-color: #0C9EF0; color: #FFFFFF; font-weight: bold;"
>
<i class="icon">rate_review</i>
AlternativeTo
</a>
<a href="https://www.trustpilot.com/review/pixeldrain.com"
rel="noreferrer" class="button" target="_blank" style="background-color: #00B67A; color: #FFFFFF; font-weight: bold;"
>
<i class="icon">rate_review</i>
Trustpilot
</a>
</div>
{:else if ad_type === "slava_ukraini"}
<a href="https://en.wikipedia.org/wiki/War_crimes_in_the_Russian_invasion_of_Ukraine" class="banner flag" target="_blank" rel="noreferrer">
<div class="flag_top">
We do not forget
</div>
<div class="flag_bottom">
Slava Ukraini!
</div>
</a>
{/if}
<style>
.banner {
display: block;
margin: auto;
transform-origin: 0 0;
font-size: 1.2em;
}
.center {
text-align: center;
}
.support_banner {
text-align: center;
padding: 2px;
}
.socials {
display: inline-block;
text-align: center;
margin: 0 5px;
}
/* Try to avoid text wrapping */
@media(max-width: 600px) {
.banner {
font-size: 1em;
}
.socials {
font-size: 0.8em;
}
}
.flag {
display: block;
margin: auto;
padding: 4px;
overflow: hidden;
text-decoration: none;
text-align: center;
font-size: 1.1em;
width: 100%;
max-width: 400px;
}
.flag_top {
background-color: #0057b7;
color: #ffd700;
padding: 2px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.flag_bottom {
background-color: #ffd700;
color: #0057b7;
padding: 2px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>

9
svelte/src/file_viewer/FileViewer.svelte
View File

@@ -12,8 +12,7 @@ import EditWindow from "./EditWindow.svelte";
import EmbedWindow from "./EmbedWindow.svelte";
import ReportWindow from "./ReportWindow.svelte";
import IntroPopup from "./IntroPopup.svelte";
import AdHead from "./AdHead.svelte";
import AdLeaderboard from "./AdLeaderboard.svelte";
import BottomBanner from "./BottomBanner.svelte";
import Sharebar from "./Sharebar.svelte";
import GalleryView from "./GalleryView.svelte";
import Downloader from "./Downloader.svelte";
@@ -383,15 +382,11 @@ const keyboard_event = evt => {
}
}
}
</script>
<svelte:window on:keydown={keyboard_event} on:hashchange={hash_change}/>
<div class="file_viewer">
<!-- Head elements for the ads -->
<AdHead></AdHead>
<LoadingIndicator loading={loading}/>
<div class="headerbar">
@@ -612,7 +607,7 @@ const keyboard_event = evt => {
</div>
{#if ads_enabled}
<AdLeaderboard></AdLeaderboard>
<BottomBanner/>
<TransferLimit/>
{:else if custom_footer}
<CustomBanner src={custom_footer} link={custom_footer_link}></CustomBanner>

9
svelte/src/file_viewer/TransferLimit.svelte
View File

@@ -20,16 +20,17 @@ $: {
}
</script>
{#if $download_limits.loaded}
<div class="progress_bar_outer" title="{title}">
<!-- Always show the outer bar to prevent layout shift -->
<div class="progress_bar_outer" title="{title}">
{#if $download_limits.loaded}
<div class="progress_bar_text">
{title}
</div>
<div class="progress_bar_inner" style="width: {percent}%;">
{title}
</div>
</div>
{/if}
{/if}
</div>
<style>
.progress_bar_outer {

2
svelte/src/home_page/FeatureTable.svelte
View File

@@ -60,7 +60,7 @@ onMount(() => {
Downloading
</div>
<div class="feature_cell free_feat">
<span class="bold">10 GB per day</span><br/>
<span class="bold">5 GB per day</span><br/>
Download speed is reduced to 1 MiB/s when exceeded. Max 3 concurrent
downloads

5
svelte/src/user_home/Home.svelte
View File

@@ -241,6 +241,11 @@ onDestroy(() => {
{#if window.user.balance_micro_eur !== 0}
<li>
Current account balance: <Euro amount={window.user.balance_micro_eur}></Euro>
{#if window.user.subscription.id === ""}
<br/>
You have account credit but no active subscription. Activate
a subscription on the <a href="/user/prepaid/subscriptions">subscriptions page</a>
{/if}
</li>
{/if}
</ul>