Wim Brand
4c57a363b2
* 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
137 lines
3.6 KiB
Svelte
137 lines
3.6 KiB
Svelte
<script lang="ts">
|
|
import { domain_url } from "util/Util";
|
|
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 { user } from "lib/UserStore";
|
|
|
|
let {
|
|
file = $bindable(),
|
|
options = $bindable(),
|
|
}: {
|
|
file?: FSNode;
|
|
options: NodeOptions;
|
|
} = $props();
|
|
|
|
let is_shared = $derived(file.is_shared() || options.link_permissions?.read)
|
|
let embed_html: string = $derived.by(() => {
|
|
if (!is_shared) {
|
|
return "File is not shared, can't generate embed code"
|
|
}
|
|
|
|
let url = domain_url()+"/d/"+file.id
|
|
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 (is_shared) {
|
|
example = !example
|
|
if (example) {
|
|
preview_area.innerHTML = embed_html
|
|
} else {
|
|
preview_area.innerHTML = ""
|
|
}
|
|
}
|
|
}
|
|
|
|
let share_link = $derived(window.location.protocol+"//"+window.location.host+"/d/"+file.id)
|
|
</script>
|
|
|
|
{#if $user.subscription.file_sharing === false}
|
|
<div class="highlight_yellow">
|
|
Your account does not support sharing features. Access controls will not
|
|
have any effect until you upgrade to premium.
|
|
</div>
|
|
{/if}
|
|
|
|
<fieldset>
|
|
<legend>Public link</legend>
|
|
|
|
{#if file.abuse_type !== undefined}
|
|
<div class="highlight_red">
|
|
This file or directory has received an abuse report. It cannot be
|
|
shared.<br/>
|
|
Type of abuse: {file.abuse_type}<br/>
|
|
Report time: {formatDate(file.abuse_report_time, true, true, true)}
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="link_grid">
|
|
<a href={share_link}>{share_link}</a>
|
|
<CopyButton text={share_link}>Copy</CopyButton>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<AccessControl options={options}/>
|
|
|
|
<fieldset>
|
|
<legend>Embedding</legend>
|
|
<p>
|
|
If you have a website you can embed Nova directories and files in your
|
|
own webpages with the code below. If you embed a directory then all
|
|
subdirectories and files will be accessible through the frame. Branding
|
|
options will also apply in the frame, but only when applied to this
|
|
directory. It will not inherit the style from parent directories.
|
|
</p>
|
|
<p>
|
|
Put this code in your website to embed the file or directory.
|
|
</p>
|
|
<div class="center">
|
|
<textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea>
|
|
<br/>
|
|
<CopyButton text={embed_html} disabled={!is_shared}>Copy HTML</CopyButton>
|
|
<button onclick={toggle_example} class:button_highlight={example} disabled={!is_shared}>
|
|
<i class="icon">visibility</i> Show example
|
|
</button>
|
|
</div>
|
|
<hr/>
|
|
|
|
<div bind:this={preview_area} style="text-align: center;"></div>
|
|
</fieldset>
|
|
|
|
<!-- <fieldset>
|
|
<legend>Custom domain</legend>
|
|
<p>
|
|
Experimental options
|
|
</p>
|
|
<div class="form_grid">
|
|
<label for="custom_domain_name">Domain name</label>
|
|
<input
|
|
id="custom_domain_name"
|
|
bind:value={options.custom_domain_name}
|
|
type="text"
|
|
disabled={!options.shared}
|
|
/>
|
|
|
|
<label for="custom_domain_cert">Certificate</label>
|
|
<textarea id="custom_domain_cert" bind:value={options.custom_domain_cert} style="height: 4em;"></textarea>
|
|
|
|
<label for="custom_domain_key">Key</label>
|
|
<textarea id="custom_domain_key" bind:value={options.custom_domain_key} style="height: 4em;"></textarea>
|
|
</div>
|
|
</fieldset> -->
|
|
|
|
<style>
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.link_grid {
|
|
display: grid;
|
|
grid-template-columns: 10fr auto;
|
|
align-items: center;
|
|
}
|
|
/* .form_grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
align-items: center;
|
|
} */
|
|
</style>
|