fnx_web/svelte/src/filesystem/ShareDialog.svelte

<script lang="ts">
import type { FSNavigator } from "./FSNavigator";
import { fs_check_is_error, fs_node_icon, fs_share_hotlink_url, fs_share_url, fs_update, type FSNode, type FSPermissions } from "lib/FilesystemAPI.svelte";
import CopyButton from "layout/CopyButton.svelte";
import Dialog from "layout/Dialog.svelte";
import { fade } from "svelte/transition";
import { get_user } from "lib/NovaAPI";
import Button from "layout/Button.svelte";

let { nav }: {
	nav: FSNavigator;
} = $props();

let path: FSNode[]
let base: FSNode = $state()
let share_url = $state("")
let direct_share_url = $state("")
let parent_node: FSNode = $state()

let dialog: Dialog = $state()
let dialog_not_allowed: Dialog = $state()
export const open = async (e: MouseEvent, p: FSNode[]) => {
	path = p
	base = path[path.length-1]

	const user = await get_user()
	if (user.subscription.file_sharing === false && base.created_by === user.id) {

	}

	share_url = fs_share_url(path)
	if (share_url === "") {
		// File is not public, make public
		try {
			await make_public()
		} catch (err) {
			if (fs_check_is_error(err, "sharing_not_allowed")) {
				if (e.target instanceof HTMLButtonElement) {
					dialog_not_allowed.open(e.target.getBoundingClientRect())
				} else {
					dialog_not_allowed.open((e.target as HTMLElement).parentElement.getBoundingClientRect())
				}
				return
			} else {
				alert("Error file making file public: "+err)
			}
		}
	}

	await share()

	if (e.target instanceof HTMLButtonElement) {
		dialog.open(e.target.getBoundingClientRect())
	} else {
		dialog.open((e.target as HTMLElement).parentElement.getBoundingClientRect())
	}
}

const make_public = async () => {
	if (!base.is_shared()) {
		base = await fs_update(
			base.path,
			{link_permissions: {read: true} as FSPermissions},
		)
		await nav.reload()

		// Insert the new FSNode into the path
		path[path.length-1] = base
	}
}

let share_parent = $state(false)
let navigator_share = $state(false)
const share = async () => {
	// If the base node is not shared then the file is shared through a parent
	// node. In that case we ask the user if it was their intention to share the
	// parent directory
	share_parent = !base.is_shared()
	navigator_share = navigator.share !== undefined

	if (!base.is_shared()) {
		// Walk path backwards looking for the last public ID
		for (let i = path.length - 1; i >= 0; i--) {
			if (path[i].is_shared()) {
				parent_node = path[i]
				break
			}
		}
	}

	share_url = fs_share_url(path)
	direct_share_url = fs_share_hotlink_url(path)
}

const nav_share = async (url: string) => {
	await navigator.share({
		title: base.name,
		text: "I would like to share '" + base.name + "' with you",
		url: url,
	})
}
</script>

<Dialog bind:this={dialog_not_allowed}>
	<div class="dialog_inner">
		<div class="highlight_yellow" transition:fade>
			Sharing is not allowed on free accounts. Upgrade to premium to
			enable this feature
		</div>
	</div>
</Dialog>

<Dialog bind:this={dialog}>
	<div class="dialog_inner">
		<div>Sharing link</div>
		<div class="link_copy">
			<div class="button_container">
				<CopyButton text={share_url}>Copy</CopyButton>
				{#if navigator_share}
					<Button icon="share" label="Share" click={() => {nav_share(share_url)}}/>
				{/if}
			</div>
			<a href="{share_url}">{share_url}</a>
		</div>
		<div class="separator"></div>
		<div>Direct sharing link (hotlink)</div>
		<div class="link_copy">
			<div class="button_container">
				<CopyButton text={direct_share_url}>Copy</CopyButton>
				{#if navigator_share}
					<Button icon="share" label="Share" click={() => {nav_share(direct_share_url)}}/>
				{/if}
			</div>
			<a href="{direct_share_url}">{direct_share_url}</a>
		</div>

		{#if share_parent}
			<div class="separator"></div>
			<div>
				This link also gives access to
				<img src={fs_node_icon(parent_node, 64, 64)} class="node_icon" alt="icon"/>
				{parent_node.name}
				<br/>
				<button onclick={async e => {await make_public(); await share()}} style="display: inline;">
					Only share
					<img src={fs_node_icon(base, 64, 64)} class="node_icon" alt="icon"/>
					{base.name}
				</button>
			</div>
		{/if}
	</div>
</Dialog>

<style>
.dialog_inner {
	display: flex;
	flex-direction: column;
	text-align: center;
	max-width: 40em;
}
.link_copy {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5em;
}
.link_copy > .button_container {
	flex: 0 0 auto;
}
.link_copy > a {
	flex: 1 1 auto;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow-x: hidden;
}
.node_icon {
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
}
.separator {
	height: 1px;
	border: none;
	background-color: var(--separator);
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
</style>