Fix:

* Breadcrumbs too wide in deeply nested directories
* Sharedialog copies link and calls navigator.share at the same time
* Link copy feedback is not clear
* Show embed code when public read
* Hide hidden files from audio playlist

svelte/src/filesystem/Breadcrumbs.svelte

@@ -36,7 +36,7 @@ onMount(() => {
 			{:else if node.is_shared()}
 				<i class="icon small">share</i>
 			{/if}
-			<div class="node_name" class:base={$nav.base_index === i}>
+			<div class="node_name" class:base={$nav.base_index === i} class:small={$nav.path.length > 10}>
 				{node.name}
 			</div>
 		</a>
@@ -64,6 +64,9 @@ onMount(() => {
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
+.small {
+	max-width: 10vw;
+}
 .base {
 	/* The base name uses all available space */
 	max-width: unset;

svelte/src/filesystem/ShareDialog.svelte

@@ -1,11 +1,11 @@
 <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 { copy_text } from "util/Util";
 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;
@@ -13,10 +13,8 @@ let { nav }: {
 
 let path: FSNode[]
 let base: FSNode = $state()
-let toast = $state("")
 let share_url = $state("")
 let direct_share_url = $state("")
-let is_parent = $state(false)
 let parent_node: FSNode = $state()
 
 let dialog: Dialog = $state()
@@ -71,15 +69,19 @@ const make_public = async () => {
 	}
 }
 
+let share_parent = $state(false)
+let navigator_share = $state(false)
 const share = async () => {
-	// If the base node does not have a public ID then the file is shared
+	// If the base node is not shared then the file is shared through a parent
-	// through a parent node. In that case we ask the user if it was their
+	// node. In that case we ask the user if it was their intention to share the
-	// intention to share the parent directory
+	// parent directory
-	is_parent = base.id === undefined
+	share_parent = !base.is_shared()
-	if (is_parent) {
+	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].id !== undefined && path[i].id !== "me") {
+			if (path[i].is_shared()) {
 				parent_node = path[i]
 				break
 			}
@@ -88,25 +90,21 @@ const share = async () => {
 
 	share_url = fs_share_url(path)
 	direct_share_url = fs_share_hotlink_url(path)
+}
 
+const nav_share = async (url: string) => {
 	try {
 		await navigator.share({
 			title: base.name,
 			text: "I would like to share '" + base.name + "' with you",
-			url: share_url,
+			url: url,
 		})
-	} catch(_) {
+	} catch(err) {
-		if (copy_text(share_url)) {
+		alert("navigator share not available: "+ err)
-			toast = "Link copied to clipboard"
-			setTimeout(() => {toast = ""}, 10000)
-		} else {
-			alert("Could not copy text")
-		}
 	}
 }
 </script>
 
-
 <Dialog bind:this={dialog_not_allowed}>
 	<div class="dialog_inner">
 		<div class="highlight_yellow" transition:fade>
@@ -118,15 +116,13 @@ const share = async () => {
 
 <Dialog bind:this={dialog}>
 	<div class="dialog_inner">
-		{#if toast !== ""}
-			<div class="highlight_green" transition:fade>{toast}</div>
-			<div class="separator" transition:fade></div>
-		{/if}
-
 		<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>
@@ -135,11 +131,14 @@ const share = async () => {
 		<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 is_parent}
+		{#if share_parent}
 			<div class="separator"></div>
 			<div>
 				This link also gives access to

svelte/src/filesystem/Toolbar.svelte

@@ -40,7 +40,6 @@ export const copy_link = () => {
 	<FileStats nav={nav} bind:expanded={toolbar_expanded}/>
 
 	<div class="grid" class:hide={!toolbar_expanded}>
-
 		<div class="button_row">
 			<button onclick={() => {nav.open_sibling(-1)}}>
 				<i class="icon">skip_previous</i>
@@ -73,7 +72,11 @@ export const copy_link = () => {
 		{#if path_is_shared($nav.path)}
 			<button onclick={copy_link} class:button_highlight={link_copied}>
 				<i class="icon">content_copy</i>
-				<span><u>C</u>opy link</span>
+				{#if link_copied}
+					<span>Link copied!</span>
+				{:else}
+					<span><u>C</u>opy link</span>
+				{/if}
 			</button>
 		{/if}
 

svelte/src/filesystem/edit_window/SharingOptions.svelte

@@ -4,7 +4,6 @@ import CopyButton from "layout/CopyButton.svelte";
 import { formatDate } from "util/Formatting";
 import { type FSNode, type NodeOptions } from "lib/FilesystemAPI.svelte";
 import AccessControl from "./AccessControl.svelte";
-import { onMount } from 'svelte';
 import { user } from "lib/UserStore";
 
 let {
@@ -15,27 +14,24 @@ let {
 	options: NodeOptions;
 } = $props();
 
-let embed_html: string = $state()
+let is_shared = $derived(file.is_shared() || options.link_permissions?.read)
-let preview_area: HTMLDivElement = $state()
+let embed_html: string = $derived.by(() => {
-
+	if (!is_shared) {
-const embed_iframe = (file: FSNode, options: NodeOptions) => {
+		return "File is not shared, can't generate embed code"
-	if (!file.is_shared()) {
-		example = false
-		embed_html = "File is not shared, can't generate embed code"
-		return
 	}
 
 	let url = domain_url()+"/d/"+file.id
-	embed_html = `<iframe ` +
+	return `<iframe ` +
 		`src="${url}" ` +
 		`style="border: none; width: 100%; max-width 90vw; height: 800px; max-height: 75vh; border-radius: 6px;" ` +
 		`allowfullscreen` +
 		`></iframe>`
-}
+})
+let preview_area: HTMLDivElement = $state()
 
 let example = $state(false)
 const toggle_example = () => {
-	if (file.is_shared()) {
+	if (is_shared) {
 		example = !example
 		if (example) {
 			preview_area.innerHTML = embed_html
@@ -46,9 +42,6 @@ const toggle_example = () => {
 }
 
 let share_link = $derived(window.location.protocol+"//"+window.location.host+"/d/"+file.id)
-onMount(() => {
-	embed_iframe(file, options)
-});
 </script>
 
 {#if $user.subscription.file_sharing === false}
@@ -93,8 +86,8 @@ onMount(() => {
 	<div class="center">
 		<textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea>
 		<br/>
-		<CopyButton text={embed_html}>Copy HTML</CopyButton>
+		<CopyButton text={embed_html} disabled={!is_shared}>Copy HTML</CopyButton>
-		<button onclick={toggle_example} class:button_highlight={example} disabled={!file.is_shared()}>
+		<button onclick={toggle_example} class:button_highlight={example} disabled={!is_shared}>
 			<i class="icon">visibility</i> Show example
 		</button>
 	</div>

svelte/src/filesystem/viewers/Audio.svelte

@@ -91,16 +91,18 @@ onMount(() => {
 		</div>
 
 		<h2>Tracklist</h2>
-		{#each siblings as sibling (sibling.path)}
+		{#each siblings as sibling (sibling.id)}
-			<a href={"/d"+fs_encode_path(sibling.path)} class="node" class:playing={sibling.path === $nav.base.path}>
+			{#if !sibling.is_hidden()}
-				{#if sibling.path === $nav.base.path}
+				<a href={"/d"+fs_encode_path(sibling.path)} class="node" class:playing={sibling.path === $nav.base.path}>
-					<i class="play_arrow icon">play_arrow</i>
+					{#if sibling.path === $nav.base.path}
-				{:else}
+						<i class="play_arrow icon">play_arrow</i>
-					<img src={fs_node_icon(sibling, 64, 64)} class="node_icon" alt="icon"/>
+					{:else}
-				{/if}
+						<img src={fs_node_icon(sibling, 64, 64)} class="node_icon" alt="icon"/>
-					<span>{sibling.name}</span>
+					{/if}
-				<br/>
+						<span>{sibling.name}</span>
-			</a>
+					<br/>
+				</a>
+			{/if}
 		{/each}
 	</TextBlock>
 </div>

svelte/src/layout/CopyButton.svelte

@@ -6,6 +6,7 @@ let {
 	style = "",
 	large_icon = false,
 	small_icon = false,
+	disabled = false,
 	children,
 	onclick,
 }: {
@@ -13,6 +14,7 @@ let {
 	style?: string;
 	large_icon?: boolean;
 	small_icon?: boolean;
+	disabled?: boolean;
 	children?: import('svelte').Snippet;
 	onclick?: (e: MouseEvent) => void;
 } = $props();
@@ -50,7 +52,7 @@ export const copy = (e: MouseEvent) => {
 	class:large_icon
 	class:small_icon
 	title="Copy text to clipboard"
-	disabled={text === ""}
+	disabled={disabled}
 >
 	<i class="icon">content_copy</i>
 	<span>