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

Temporarily disable ads, add text to download bar

Browse Source
This commit is contained in:
Fornax
2023-01-11 19:23:02 +01:00
parent be13b12c22
commit 8dfadf1167
9 changed files with 92 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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"}
<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"}
{#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>

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

@@ -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}

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

@@ -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-bottom-right-radius: 6px;
border-top-right-radius: 10px;
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>

135
svelte/src/file_viewer/UkraineModal.svelte
View File

@@ -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>

45
svelte/src/file_viewer/UkrainePopup.svelte
View File

@@ -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>

4
svelte/src/file_viewer/viewers/Abuse.svelte
View File

@@ -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>

16
svelte/src/file_viewer/viewers/Video.svelte
View File

@@ -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>

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

@@ -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
your download speed will be reduced
<span class="text_highlight">20 GB</span> data transfer per week
(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
month. If the transfer limit is exceeded the restrictions of the
Transfer limit of <span class="text_highlight">2 terabytes</span>
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
private</span>. No third party scripts and no
logging
<span class="text_highlight">Completely private</span>. No third
party tracking scripts and no logging
</div>
</div>
<div>

15
svelte/src/home_page/UploadWidget.svelte
View File

@@ -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
can upload anything it's hard to find reputable advertisers who
want to advertise on pixeldrain. Every month the ad revenue just
barely covers the bandwidth costs. If this continues I will have
to reduce the file size and bandwidth limits even more. That's
not something I would like to do.
Pixeldrain costs a lot of money to maintain. Currently the site
makes just barely enough money to pay for hosting. I have never been
able to compensate myself for the hours I have put in developing
this project. Please consider getting getting a subscription so I
can continue working on pixeldrain and make it even better.
</p>
<p>
Pro costs only <b>€40 per year</b> or €4 per month. You will get
some nice benefits and more features are on the way. You can
Pro costs only <b>€40 per year</b> or <b>€4 per month</b>. You will
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>