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>