Temporarily disable ads, add text to download bar

svelte/src/file_viewer/AdLeaderboard.svelte

@@ -15,13 +15,13 @@ onMount(() => {
 	}
 
 	// 10% pixeldrain socials
-	// 90% pixfuture
+	// 90% patreon
 
 	let rand = Math.random()
 	if (rand < 0.1) {
 		set_ad_type("pixeldrain_social")
 	} else {
-		set_ad_type("pixfuture")
+		set_ad_type("pixeldrain_patreon")
 	}
 })
 
@@ -96,31 +96,7 @@ head.valueimpression_loaded.subscribe(v => {
 </svelte:head>
 
 <div bind:this={container}>
-	{#if ad_type === "publisherrest_1"}
+	{#if ad_type === "aads"}
-		<div style="text-align: center; line-height: 1.4em; font-size: 22px;">
-			<a href="https://pixeldrain.com/vouchercodes/" class="button button_highlight" style="margin: 8px;">
-				<i class="icon">shopping_cart</i>
-				Click here for online shopping discounts!
-				<i class="icon">shopping_cart</i>
-			</a>
-		</div>
-	{:else if ad_type === "publisherrest_2"}
-		<div style="text-align: center; line-height: 1.4em; font-size: 22px;">
-			<a href="https://pixeldrain.com/vouchercodes/" class="button button_highlight" style="margin: 8px;">
-				<i class="icon">shopping_cart</i>
-				Check our online shopping discounts!
-				<i class="icon">shopping_cart</i>
-			</a>
-		</div>
-	{:else if ad_type === "publisherrest_3"}
-		<div style="text-align: center; line-height: 1.4em; font-size: 22px;">
-			<a href="https://pixeldrain.com/vouchercodes/" class="button button_highlight" style="margin: 8px;">
-				<i class="icon">shopping_cart</i>
-				Free coupon codes for online shopping!
-				<i class="icon">shopping_cart</i>
-			</a>
-		</div>
-	{:else 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')}"
@@ -154,13 +130,27 @@ head.valueimpression_loaded.subscribe(v => {
 			<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 === "pixeldrain_patreon"}
+		<div class="banner highlight_green" style="font-size: 1.1em; border-radius: 0;">
+			<span style="display: block; margin-bottom: 2px;">
+				No ads today. Pixeldrain is currently funded by our subscribers!
+			</span>
+			<a href="https://www.patreon.com/join/pixeldrain" rel="noreferrer" class="button button_highlight" target="_blank">
+				<i class="icon">bolt</i>
+				Support Pixeldrain to help keep the project going
+			</a>
+		</div>
 	{/if}
 </div>
 

svelte/src/file_viewer/FileViewer.svelte

@@ -571,9 +571,9 @@ const keyboard_event = evt => {
 
 		<Sharebar bind:this={sharebar}></Sharebar>
 
-		{#if ads_enabled}
+		<!-- {#if ads_enabled}
 			<AdSkyscraper on:visibility={e => {skyscraper_visible = e.detail}}></AdSkyscraper>
-		{/if}
+		{/if} -->
 	</div>
 
 	{#if ads_enabled}

svelte/src/file_viewer/TransferLimit.svelte

@@ -13,7 +13,7 @@ $: {
 		percent = ($download_limits.transfer_limit_used / $download_limits.transfer_limit) * 100
 	}
 
-	title = "Transfer limit used: " +
+	title = "Download limit used: " +
 		formatDataVolume($download_limits.transfer_limit_used, 3) +
 		" of " +
 		formatDataVolume($download_limits.transfer_limit, 3);
@@ -22,24 +22,56 @@ $: {
 
 {#if $download_limits.loaded}
 	<div class="progress_bar_outer" title="{title}">
+		<div class="progress_bar_text">
+			{title}
+		</div>
 		<div class="progress_bar_inner" style="width: {percent}%;">
+			{title}
 		</div>
 	</div>
 {/if}
 
 <style>
 .progress_bar_outer {
+	position: relative;
 	display: block;
 	width: 100%;
-	height: 6px;
+	/* the font-size is two pixels smaller than the progress bar, this leaves
+	one px margin top and bottom */
+	height: 16px;
+	font-size: 14px;
+	line-height: 15px;
 	overflow: hidden;
 }
 .progress_bar_inner {
+	position: absolute;
+	display: block;
 	background: var(--highlight_background);
 	height: 100%;
 	width: 0;
-	border-top-right-radius: 6px;
+	border-top-right-radius: 10px;
-	border-bottom-right-radius: 6px;
+	border-bottom-right-radius: 10px;
 	transition: width 5s linear;
+
+	/* Welcome to Hacktown! What's happening here is that the text in the
+	progress bar and the text behind the progress bar are perfectly aligned. The
+	text in the background is dark and the text on the foreground is light, this
+	makes it look like the text changes colour as the progress bar progresses.
+	The text-align: right makes the text move along with the tip of the progress
+	bar once the width of the text has been exceeded. */
+	text-align: right;
+	overflow: hidden;
+	white-space: nowrap;
+	color: var(--highlight_text_color);
+	padding-right: 4px;
+	padding-left: 4px;
+	z-index: 2;
+}
+.progress_bar_text {
+	position: absolute;
+	display: block;
+	top: 0;
+	left: 4px;
+	z-index: 1;
 }
 </style>

svelte/src/file_viewer/UkraineModal.svelte

@@ -1,135 +0,0 @@
-<script>
-import { onMount, tick } from "svelte";
-import Modal from "../util/Modal.svelte";
-
-let modal
-
-const close = () => {
-	localStorage.setItem("ukraine_modal_dismissed", "🇺🇦")
-	modal.hide()
-}
-onMount(async () => {
-	if (localStorage.getItem("ukraine_modal_dismissed") === "🇺🇦") {
-		return
-	}
-
-	let country = localStorage.getItem("country_code")
-	if (country === null) {
-		try {
-			const resp = await fetch(window.api_endpoint+"/misc/geo_ip")
-			if(resp.status >= 400) {
-				throw new Error(await resp.text())
-			}
-			country = (await resp.json()).country.iso_code;
-			localStorage.setItem("country_code", country)
-		} catch (err) {
-			console.log("Failed to get geo IP data: ", err)
-			return
-		}
-	}
-
-	if (country === "RU" || country === "BY") {
-		modal.show()
-		await tick()
-		resize()
-	}
-})
-
-let video
-const resize = () => {
-	video.style.height = (video.clientWidth*0.56)+"px"
-}
-
-let language = "RU"
-</script>
-
-<svelte:window on:resize={resize} />
-
-<Modal bind:this={modal} title="Vladimir Putin is lying to you!" width="1000px">
-	<iframe bind:this={video}
-		style="width: 100%; height: 562px;"
-		src="https://www.youtube-nocookie.com/embed/Y0IobS_JDww?start=1996"
-		title="YouTube video player"
-		frameborder="0"
-		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-		allowfullscreen
-	>
-	</iframe>
-	<br/>
-
-	{#if language === "EN"}
-		<div style="text-align: center; font-size: 1.4em;">
-			<a href="https://www.youtube.com/watch?v=Y0IobS_JDww&t=1996s" class="button" target="_blank">
-				<i class="icon">play_circle</i>
-				Watch on YouTube
-			</a>
-			<a href="https://pixeldrain.com/u/JZ9D7RFC" class="button" target="_blank">
-				<i class="icon">play_circle</i>
-				Watch on Pixeldrain
-			</a>
-		</div>
-		<div class="indent">
-			<p>
-				An independent news agency asked me to show this video to my
-				Russian visitors. The goal is to prevent the spread of
-				misinformation. Russian news agencies are spreading propaganda,
-				they cannot be trusted.
-			</p>
-			<p>
-				Ukraine is not governed by nazis. The Ukrainian parliament and
-				president were democratically elected. It is a peaceful nation.
-			</p>
-			<p>
-				The Russian army is bombing cities and committing genocide
-				across the country. Thousands of civilians have been brutally
-				murdered. This has to stop as soon as possible.
-			</p>
-		</div>
-	{:else if language === "RU"}
-		<div style="text-align: center; font-size: 1.4em;">
-			<a href="https://www.youtube.com/watch?v=Y0IobS_JDww&t=1996s" class="button" target="_blank">
-				<i class="icon">play_circle</i>
-				Смотреть на YouTube
-			</a>
-			<a href="https://pixeldrain.com/u/JZ9D7RFC" class="button" target="_blank">
-				<i class="icon">play_circle</i>
-				Смотреть на Pixeldrain
-			</a>
-		</div>
-		<div class="indent">
-			<p>
-				Независимое информационное агентство попросило меня показать это
-				видео моим российским посетителям. Цель состоит в том, чтобы
-				предотвратить распространение дезинформации. Российские
-				информационные агентства распространяют пропаганду, им нельзя
-				доверять.
-			</p>
-			<p>
-				Украина не управляется нацистами. Украинский парламент и
-				президент были избраны демократическим путем. Это миролюбивая
-				нация.
-			</p>
-			<p>
-				Российская армия бомбит города и совершает геноцид через всю
-				страну. Тысячи мирных жителей были зверски убиты. Это должно
-				прекратиться как можно скорее.
-			</p>
-		</div>
-	{/if}
-
-	<button on:click={() => language = "RU"} class:button_highlight={language === "RU"} style="float: left; margin: 8px; margin-right: 0;">
-		<i class="icon">translate</i> RU
-	</button>
-	<button on:click={() => language = "EN"} class:button_highlight={language === "EN"} style="float: left; margin: 8px;">
-		<i class="icon">translate</i> EN
-	</button>
-
-	<button style="float: right; margin: 8px;" on:click={close}>
-		<i class="icon">close</i>
-		{#if language === "EN"}
-			Don't show this again
-		{:else if language === "RU"}
-			Не показывать это снова
-		{/if}
-	</button>
-</Modal>

svelte/src/file_viewer/UkrainePopup.svelte

@@ -1,45 +0,0 @@
-<script>
-import { onMount } from "svelte";
-import { fade } from "svelte/transition";
-
-let visible = false
-
-const close = () => {
-	localStorage.setItem("ukraine_popup_dismissed", "🇺🇦")
-	visible = false
-}
-onMount(() => {
-	if (localStorage.getItem("ukraine_popup_dismissed") !== "🇺🇦") {
-		visible = true
-	}
-})
-</script>
-
-{#if visible}
-	<div in:fade out:fade class="notice highlight_yellow">
-		<div class="text">
-			🇺🇦 Russia has invaded Ukraine and is attacking civilians! 🇺🇦<br/>
-			There are a number of ways you can help:
-			<a href="https://helpukrainewin.org/" rel="noreferrer" target="_blank">Click here for more information</a>.
-		</div>
-		<button on:click={close} class="close button_highlight round">
-			<i class="icon">close</i>
-		</button>
-	</div>
-{/if}
-
-<style>
-.notice {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-}
-.text {
-	display: inline;
-	flex: 1 1 auto;
-}
-.close {
-	flex: 0 0 auto;
-	margin: 0;
-}
-</style>

svelte/src/file_viewer/viewers/Abuse.svelte

@@ -24,6 +24,10 @@ let file = {
 			The file was reported by users of pixeldrain with the report button
 			in the toolbar.
 
+		{:else}
+
+			The file was reported through pixeldrain's abuse e-mail address.
+
 		{/if}
 	</p>
 	<p>

svelte/src/file_viewer/viewers/Video.svelte

@@ -94,6 +94,15 @@ const fullscreen = () => {
 {#if file.allow_video_player}
 	{#if !video_reload}
 		<div class="container">
+
+			{#if file.mime_type === "video/x-matroska" || file.mime_type === "video/quicktime"}
+				<div class="compatibility_warning">
+					This video file type is not compatible with every web
+					browser. If the video fails to play you can try downloading
+					the video and watching it locally.
+				</div>
+			{/if}
+
 			<div class="player">
 				<!-- svelte-ignore a11y-media-has-caption -->
 				<video
@@ -167,7 +176,7 @@ const fullscreen = () => {
 		<a href="/register" class="button">
 			<i class="icon">how_to_reg</i> Sign up
 		</a>
-		<a href="https://www.patreon.com/join/pixeldrain" target="_blank" class="button button_highlight" rel="noreferrer">
+		<a href="https://www.patreon.com/join/pixeldrain" target="_blank" class="button" rel="noreferrer">
 			<i class="icon">bolt</i> Get Pixeldrain Pro
 		</a>
 	</TextBlock>
@@ -230,4 +239,9 @@ h1 {
 		flex-direction: column;
 	}
 }
+.compatibility_warning {
+	background-color: var(--shaded_background);
+	border-bottom: 2px solid #6666FF;
+	padding: 4px;
+}
 </style>

svelte/src/home_page/FeatureTable.svelte

@@ -53,12 +53,13 @@ onMount(() => {
 			Data transfer limit
 		</div>
 		<div class="feat_normal">
-			20 GB data transfer per week (168 hours). When this threshold is reached
+			<span class="text_highlight">20 GB</span> data transfer per week
-			your download speed will be reduced
+			(168 hours). When this threshold is reached your download speed will
+			be reduced
 		</div>
 		<div class="feat_pro">
-			Transfer limit of <span class="text_highlight">2 terabyte</span> per
+			Transfer limit of <span class="text_highlight">2 terabytes</span>
-			month. If the transfer limit is exceeded the restrictions of the
+			per month. If the transfer limit is exceeded the restrictions of the
 			free plan will apply
 		</div>
 	</div>
@@ -84,9 +85,9 @@ onMount(() => {
 		<div class="feat_label">
 			Adver&shy;tise&shy;ments
 		</div>
-		<div class="feat_normal">
+		<!-- <div class="feat_normal">
 			Banner advertisements on the file viewer page
-		</div>
+		</div> -->
 		<div class="feat_pro">
 			<span class="text_highlight">No ads</span> on files
 			you share. No ads when viewing files uploaded by
@@ -95,14 +96,13 @@ onMount(() => {
 	</div>
 	<div>
 		<div class="feat_label">Privacy</div>
-		<div class="feat_normal">
+		<!-- <div class="feat_normal">
 			No trackers, but advertisers can see your IP address
 			and browser fingerprint
-		</div>
+		</div> -->
 		<div class="feat_pro">
-			<span class="text_highlight">Completely
+			<span class="text_highlight">Completely private</span>. No third
-			private</span>. No third party scripts and no
+			party tracking scripts and no logging
-			logging
 		</div>
 	</div>
 	<div>

svelte/src/home_page/UploadWidget.svelte

@@ -465,16 +465,15 @@ const keydown = (e) => {
 			<span class="instruction_text">Support me on Patreon!</span>
 		</div>
 		<p>
-			Pixeldrain is struggling to get by financially. Because anyone
+			Pixeldrain costs a lot of money to maintain. Currently the site
-			can upload anything it's hard to find reputable advertisers who
+			makes just barely enough money to pay for hosting. I have never been
-			want to advertise on pixeldrain. Every month the ad revenue just
+			able to compensate myself for the hours I have put in developing
-			barely covers the bandwidth costs. If this continues I will have
+			this project. Please consider getting getting a subscription so I
-			to reduce the file size and bandwidth limits even more. That's
+			can continue working on pixeldrain and make it even better.
-			not something I would like to do.
 		</p>
 		<p>
-			Pro costs only <b>€40 per year</b> or €4 per month. You will get
+			Pro costs only <b>€40 per year</b> or <b>€4 per month</b>. You will
-			some nice benefits and more features are on the way. You can
+			get some nice benefits and more features are on the way. You can
 			help with making pixeldrain the easiest and fastest way to share
 			files online!
 		</p>