Swap the file viewers

2021-11-01 22:32:46 +01:00
parent 3c92885602
commit fb92e63e94
10 changed files with 181 additions and 88 deletions
--- a/svelte/src/file_viewer/AdLeaderboard.svelte
+++ b/svelte/src/file_viewer/AdLeaderboard.svelte
@@ -6,6 +6,14 @@ let banner
 let ad_type = ""

 onMount(() => {
+	if (window.location.pathname === "/u/demo") {
+		let url_ads = new URL(window.location.href).searchParams.get("ads")
+		if (url_ads !== "") {
+			ad_type = url_ads
+			return
+		}
+	}
+
 	switch (Math.floor(Math.random() * 20)) {
 		case 0:
 			ad_type = "publisherrest_1"
@@ -124,6 +132,13 @@ const ads_plus = () => {
 				<i class="icon">shopping_cart</i>
 			</a>
 		</div>
+	{:else if ad_type === "a-ads"}
+		<iframe bind:this={banner} class="banner"
+			data-aa="73974"
+			src="//ad.a-ads.com/73974?size=728x90&background_color={window.style.layer2Color}&text_color={window.style.textColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
+			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/svelte/src/file_viewer/AdSkyscraper.svelte
+++ b/svelte/src/file_viewer/AdSkyscraper.svelte
@@ -7,6 +7,15 @@ let ad_type = ""
 let visible = false

 onMount(async () => {
+	if (window.location.pathname === "/u/demo") {
+		let url_ads = new URL(window.location.href).searchParams.get("ads")
+		if (url_ads !== "") {
+			ad_type = url_ads
+			open()
+			return
+		}
+	}
+
 	if (document.body.clientWidth < 800) {
 		visible = false
 		dispatch("visibility", false)
@@ -36,12 +45,15 @@ onMount(async () => {
 			break
 	}

+	open()
+})
+
+const open = async () => {
 	visible = true
 	await tick()
 	dispatch("visibility", true)
 	container.style.right = "0"
-})
-
+}
 const close = () => {
 	container.style.right = -container.offsetWidth + "px"
 	dispatch("visibility", false)
--- a/svelte/src/file_viewer/FileStats.svelte
+++ b/svelte/src/file_viewer/FileStats.svelte
@@ -17,7 +17,7 @@ let error_msg = ""

 $: update_stats(file.id)
 let update_stats = (id) => {
-	if (id === "") {
+	if (id === "" || id == "demo") {
 		return
 	}

--- a/svelte/src/file_viewer/FileViewer.svelte
+++ b/svelte/src/file_viewer/FileViewer.svelte
@@ -6,13 +6,14 @@ import DetailsWindow from "./DetailsWindow.svelte";
 import FilePreview from "./FilePreview.svelte";
 import ListNavigator from "./ListNavigator.svelte";
 import FileStats from "./FileStats.svelte";
-import { copy_text, domain_url } from "../util/Util.svelte";
+import { copy_text } from "../util/Util.svelte";
 import EditWindow from "./EditWindow.svelte";
 import EmbedWindow from "./EmbedWindow.svelte";
 import ReportWindow from "./ReportWindow.svelte";
 import IntroPopup from "./IntroPopup.svelte";
 import AdLeaderboard from "./AdLeaderboard.svelte";
 import AdSkyscraper from "./AdSkyscraper.svelte";
+import Sharebar from "./Sharebar.svelte";

 let is_list = false
 let embedded = false
@@ -47,12 +48,21 @@ let toggle_shuffle = () => {
 	list_navigator.set_shuffle(list_shuffle)
 }

+let sharebar
 let sharebar_visible = false
+let toggle_sharebar = () => {
+	sharebar_visible = !sharebar_visible
+	if (sharebar_visible) {
+		sharebar.show()
+	} else {
+		sharebar.hide()
+	}
+}
 let toolbar_visible = (window.innerWidth > 600)
 let toolbar_toggle = () => {
 	toolbar_visible = !toolbar_visible
-	if (!toolbar_visible) {
-		sharebar_visible = false
+	if (!toolbar_visible && sharebar_visible) {
+		toggle_sharebar()
 	}
 }
 let details_window
@@ -346,7 +356,7 @@ const keyboard_event = evt => {
 					{/if}
 				</span>
 			</button>
-			<button on:click={() => sharebar_visible = !sharebar_visible} class="toolbar_button button_full_width" class:button_highlight={sharebar_visible}>
+			<button on:click={toggle_sharebar} class="toolbar_button button_full_width" class:button_highlight={sharebar_visible}>
 				<i class="icon">share</i>
 				<span>Share</span>
 			</button>
@@ -397,24 +407,7 @@ const keyboard_event = evt => {
 			<br/>
 		</div></div></div>

-		<div id="sharebar" class="sharebar" class:sharebar_visible>
-			Share on:<br/>
-			<button class="sharebar-button button_full_width" onclick="window.open('mailto:please@set.address?subject=File%20on%20pixeldrain&body=' + window.location.href);">
-				E-Mail
-			</button>
-			<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
-				Reddit
-			</button>
-			<button class="sharebar-button button_full_width" onclick="window.open('https://twitter.com/share?url=' + window.location.href);">
-				Twitter
-			</button>
-			<button class="sharebar-button button_full_width" onclick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
-				Facebook
-			</button>
-			<button class="sharebar-button button_full_width" onclick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
-				Tumblr
-			</button>
-		</div>
+		<Sharebar bind:this={sharebar}></Sharebar>

 		<div id="file_preview" class="file_preview checkers" class:toolbar_visible class:skyscraper_visible>
 			<FilePreview
@@ -462,7 +455,7 @@ const keyboard_event = evt => {
 		<EmbedWindow file={current_file} list={current_list}></EmbedWindow>
 	</Modal>

-	<Modal bind:this={report_window} on:is_visible={e => {report_visible = e.detail}} title="Report abuse" width="650px">
+	<Modal bind:this={report_window} on:is_visible={e => {report_visible = e.detail}} title="Report abuse" width="800px">
 		<ReportWindow file={current_file} list={current_list}></ReportWindow>
 	</Modal>

@@ -594,24 +587,6 @@ const keyboard_event = evt => {
 .file_preview.toolbar_visible { left: 8em; }
 .file_preview.skyscraper_visible { right: 160px; }

-.sharebar {
-	position: absolute;
-	width: 7em;
-	left: -8em;
-	bottom: 0;
-	top: 0;
-	overflow-y: scroll;
-	overflow-x: hidden;
-	box-shadow: inset 1px 1px 5px var(--shadow_color);
-	background-color: var(--layer_1_color);
-	border-radius: 16px;
-	text-align: center;
-	z-index: 48;
-	overflow: hidden;
-	transition: left 0.5s;
-}
-.sharebar.sharebar_visible { left: 8em; }
-
 /* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
 .toolbar > div {
 	position: absolute;
@@ -638,17 +613,6 @@ const keyboard_event = evt => {
 	vertical-align: middle;
 }

-/* =========================
-	|| SHAREBAR COMPONENTS ||
-	========================= */
-
-.sharebar-button {text-align: center;}
-.sharebar-button > svg,
-.sharebar-button > img {
-	width: 40px;
-	height: 40px;
-}
-
 /* =====================
 	|| MISC COMPONENTS ||
 	===================== */
--- a/svelte/src/file_viewer/Sharebar.svelte
+++ b/svelte/src/file_viewer/Sharebar.svelte
@@ -0,0 +1,87 @@
+<script>
+export let visible = false
+export const show = () => { visible = true }
+export const hide = () => { visible = false }
+
+const share_email = () => {
+	window.open(
+		'mailto:please@set.address?subject=File%20on%20pixeldrain&body='+encodeURIComponent(window.location.href)
+	);
+}
+const share_reddit = () => {
+	window.open('https://www.reddit.com/submit?url='+encodeURIComponent(window.location.href));
+}
+const share_twitter = () => {
+	window.open('https://twitter.com/share?url='+encodeURIComponent(window.location.href));
+}
+const share_facebook = () => {
+	window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(window.location.href));
+}
+const share_tumblr = () => {
+	window.open('http://www.tumblr.com/share/link?url='+encodeURIComponent(window.location.href));
+}
+</script>
+
+<div class="sharebar" class:visible>
+	Share on:<br/>
+	<button class="button_full_width" on:click={share_email}>
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+			<path d="M22 4H2v16h20V4zm-2 4l-8 5-8-5V6l8 5 8-5v2z"/>
+		</svg>
+		<br/>
+		E-Mail
+	</button>
+	<button class="button_full_width" on:click={share_reddit}>
+		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+			<path d="M22,12.14C22,10.92 21,9.96 19.81,9.96C19.22,9.96 18.68,10.19 18.29,10.57C16.79,9.5 14.72,8.79 12.43,8.7L13.43,4L16.7,4.71C16.73,5.53 17.41,6.19 18.25,6.19C19.11,6.19 19.81,5.5 19.81,4.63C19.81,3.77 19.11,3.08 18.25,3.08C17.65,3.08 17.11,3.43 16.86,3.95L13.22,3.18C13.11,3.16 13,3.18 12.93,3.24C12.84,3.29 12.79,3.38 12.77,3.5L11.66,8.72C9.33,8.79 7.23,9.5 5.71,10.58C5.32,10.21 4.78,10 4.19,10C2.97,10 2,10.96 2,12.16C2,13.06 2.54,13.81 3.29,14.15C3.25,14.37 3.24,14.58 3.24,14.81C3.24,18.18 7.16,20.93 12,20.93C16.84,20.93 20.76,18.2 20.76,14.81C20.76,14.6 20.75,14.37 20.71,14.15C21.46,13.81 22,13.04 22,12.14M7,13.7C7,12.84 7.68,12.14 8.54,12.14C9.4,12.14 10.1,12.84 10.1,13.7A1.56,1.56 0 0,1 8.54,15.26C7.68,15.28 7,14.56 7,13.7M15.71,17.84C14.63,18.92 12.59,19 12,19C11.39,19 9.35,18.9 8.29,17.84C8.13,17.68 8.13,17.43 8.29,17.27C8.45,17.11 8.7,17.11 8.86,17.27C9.54,17.95 11,18.18 12,18.18C13,18.18 14.47,17.95 15.14,17.27C15.3,17.11 15.55,17.11 15.71,17.27C15.85,17.43 15.85,17.68 15.71,17.84M15.42,15.28C14.56,15.28 13.86,14.58 13.86,13.72A1.56,1.56 0 0,1 15.42,12.16C16.28,12.16 17,12.86 17,13.72C17,14.56 16.28,15.28 15.42,15.28Z" />
+		</svg>
+		<br/>
+		Reddit
+	</button>
+	<button class="button_full_width" on:click={share_twitter}>
+		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+			<path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
+		</svg>
+		<br/>
+		Twitter
+	</button>
+	<button class="button_full_width" on:click={share_facebook}>
+		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+			<path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z" />
+		</svg>
+		<br/>
+		Facebook
+	</button>
+	<button class="button_full_width" on:click={share_tumblr}>
+		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+			<path d="M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17" />
+		</svg>
+		<br/>
+		Tumblr
+	</button>
+</div>
+
+<style>
+.sharebar {
+	position: absolute;
+	width: 7em;
+	left: -8em;
+	bottom: 0;
+	top: 0;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	box-shadow: inset 1px 1px 5px var(--shadow_color);
+	background-color: var(--layer_1_color);
+	border-radius: 16px;
+	text-align: center;
+	z-index: 48;
+	overflow: hidden;
+	transition: left 0.5s;
+}
+.visible { left: 8em; }
+.button_full_width > svg {
+	height: 3em;
+	width: 3em;
+	fill: currentColor;
+}
+</style>
--- a/svelte/src/file_viewer/viewers/Text.svelte
+++ b/svelte/src/file_viewer/viewers/Text.svelte
@@ -122,5 +122,6 @@ const code = () => {
 .container > pre {
 	white-space: pre-wrap;
 	overflow: hidden;
+	border: none;
 }
 </style>
--- a/svelte/src/user_home/Home.svelte
+++ b/svelte/src/user_home/Home.svelte
@@ -258,19 +258,3 @@ onDestroy(() => {
 	</div>
 	<Chart bind:this={graph_direct_link} dataType="bytes" label="Hotlink bandwidth" />
 </div>
-
-<style>
-.progress_bar_outer {
-	display: block;
-	background-color: var(--layer_1_color);
-	width: 100%;
-	height: 3px;
-	margin: 6px 0 12px 0;
-}
-.progress_bar_inner {
-	background-color: var(--highlight_color);
-	height: 100%;
-	width: 0;
-	transition: width 1s;
-}
-</style>