2021-11-01 17:15:23 +01:00
|
|
|
<script>
|
2022-02-07 12:00:22 +01:00
|
|
|
import ThemePicker from "../util/ThemePicker.svelte";
|
2021-11-01 17:15:23 +01:00
|
|
|
import { copy_text, domain_url } from "../util/Util.svelte";
|
2021-11-28 15:19:00 +01:00
|
|
|
import { file_type } from "./FileUtilities.svelte";
|
2021-11-01 17:15:23 +01:00
|
|
|
|
|
|
|
export let file = {
|
|
|
|
id: "",
|
2021-11-28 15:19:00 +01:00
|
|
|
mime_type: "",
|
|
|
|
get_href: "",
|
|
|
|
download_href: "",
|
2021-11-01 17:15:23 +01:00
|
|
|
}
|
|
|
|
export let list = {
|
|
|
|
id: "",
|
|
|
|
}
|
|
|
|
|
2021-11-28 15:19:00 +01:00
|
|
|
let tab = "iframe"
|
2021-11-01 17:15:23 +01:00
|
|
|
let embed_html = ""
|
|
|
|
let preview_area
|
|
|
|
|
|
|
|
$: update_file(file.id, list.id)
|
|
|
|
let update_file = () => {
|
2021-11-28 15:19:00 +01:00
|
|
|
if (preview_area) {
|
|
|
|
preview_area.innerHTML = ""
|
|
|
|
}
|
|
|
|
|
|
|
|
if (tab === "iframe") {
|
|
|
|
embed_iframe()
|
|
|
|
} else if (tab === "hotlink") {
|
|
|
|
embed_hotlink()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-11-28 15:58:04 +01:00
|
|
|
let style = ""
|
|
|
|
let set_style = s => {
|
|
|
|
style = s
|
|
|
|
embed_iframe()
|
2022-02-07 12:00:22 +01:00
|
|
|
update_example()
|
2021-11-28 15:58:04 +01:00
|
|
|
}
|
|
|
|
|
2021-11-28 15:19:00 +01:00
|
|
|
let embed_iframe = () => {
|
|
|
|
tab = "iframe"
|
|
|
|
|
2021-11-28 15:58:04 +01:00
|
|
|
let style_part = ""
|
|
|
|
if (style) {
|
|
|
|
style_part = "&style="+style
|
|
|
|
}
|
|
|
|
|
2021-11-01 17:15:23 +01:00
|
|
|
let url
|
|
|
|
if (list.id === "") {
|
|
|
|
// Not a list, use file ID
|
2021-11-28 15:58:04 +01:00
|
|
|
url = domain_url()+"/u/"+file.id+"?embed"+style_part
|
2021-11-01 17:15:23 +01:00
|
|
|
} else {
|
2021-11-28 15:58:04 +01:00
|
|
|
url = domain_url()+"/l/"+list.id+"?embed"+style_part+window.location.hash
|
2021-11-01 17:15:23 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
embed_html = `<iframe ` +
|
|
|
|
`src="${url}" ` +
|
2021-11-28 15:19:00 +01:00
|
|
|
`style="border: none; width: 800px; max-width: 100%; height: 600px; max-height: 100%; border-radius: 16px;"` +
|
2021-11-01 17:15:23 +01:00
|
|
|
`></iframe>`
|
|
|
|
}
|
2021-11-28 15:19:00 +01:00
|
|
|
let embed_hotlink = () => {
|
|
|
|
tab = "hotlink"
|
|
|
|
|
|
|
|
let t = file_type(file)
|
|
|
|
if (t === "video") {
|
|
|
|
embed_html = `<video controls playsinline autoplay style="max-width: 100%; max-height: 100%;">`+
|
|
|
|
`<source src="${domain_url()}${file.get_href}" type="${file.mime_type}" />`+
|
|
|
|
`</video>`
|
|
|
|
} else if (t === "audio") {
|
|
|
|
embed_html = `<audio controls autoplay style="width: 100%;">`+
|
|
|
|
`<source src="${domain_url()}${file.get_href}" type="${file.mime_type}" />`+
|
|
|
|
`</audio>`
|
|
|
|
} else if (t === "image") {
|
|
|
|
embed_html = `<img src="${domain_url()}${file.get_href}" alt="${html_escape(file.name)}" style="max-width: 100%; max-height: 100%;">`
|
|
|
|
} else {
|
|
|
|
embed_html = `<a href="${domain_url()}${file.download_href}">`+
|
|
|
|
`Download ${html_escape(file.name)} here`+
|
|
|
|
`</a>`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
let html_escape = s => {
|
|
|
|
return s.replace(/&/g, "&").
|
|
|
|
replace(/</g, "<").
|
|
|
|
replace(/>/g, ">").
|
|
|
|
replace(/"/g, """).
|
|
|
|
replace(/'/g, "'");
|
|
|
|
}
|
2021-11-01 17:15:23 +01:00
|
|
|
|
|
|
|
let copy_status = "" // empty, success or error
|
|
|
|
const copy = () => {
|
|
|
|
if (copy_text(embed_html)) {
|
|
|
|
copy_status = "success"
|
|
|
|
} else {
|
|
|
|
copy_status = "error"
|
|
|
|
alert("Your browser does not support copying text.")
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-02-07 12:00:22 +01:00
|
|
|
let example = false
|
|
|
|
const toggle_example = () => {
|
|
|
|
example = !example
|
|
|
|
update_example()
|
|
|
|
}
|
|
|
|
const update_example = () => {
|
|
|
|
if (example) {
|
|
|
|
preview_area.innerHTML = embed_html
|
|
|
|
} else {
|
|
|
|
preview_area.innerHTML = ""
|
|
|
|
}
|
2021-11-01 17:15:23 +01:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2021-11-28 15:19:00 +01:00
|
|
|
<div class="container">
|
2022-01-04 15:55:20 +01:00
|
|
|
<div class="indent">
|
|
|
|
<p>
|
|
|
|
If you have a website you can embed pixeldrain files in your own
|
|
|
|
webpages here.
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
The IFrame embed gives you a frame with a slightly more minimalistic
|
|
|
|
file viewer in it. The embedded file viewer has a fullscreen button
|
|
|
|
and the toolbar is collapsed by default. If you do not have a
|
|
|
|
pixeldrain Pro account the frame will also have advertisements in
|
|
|
|
it.
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
The hotlink embed option only works for single files uploaded with a
|
|
|
|
Pro account. You can use this to directly embed a video player,
|
|
|
|
audio player, photo element or a download button in your site. Make
|
|
|
|
sure you have bandwidth sharing enabled on your
|
|
|
|
<a href="/user/subscription">subscription page</a> or the embed will
|
|
|
|
not work.
|
|
|
|
</p>
|
|
|
|
</div>
|
2021-11-28 15:19:00 +01:00
|
|
|
<div class="tab_bar">
|
|
|
|
<button on:click={embed_iframe} class:button_highlight={tab === "iframe"}>
|
|
|
|
<i class="icon">code</i>
|
|
|
|
IFrame
|
|
|
|
</button>
|
|
|
|
{#if file.id}
|
|
|
|
<button on:click={embed_hotlink} class:button_highlight={tab === "hotlink"}>
|
|
|
|
<i class="icon">code</i>
|
|
|
|
Hotlink
|
|
|
|
</button>
|
2021-11-01 17:15:23 +01:00
|
|
|
{/if}
|
2021-11-28 15:19:00 +01:00
|
|
|
</div>
|
2021-11-28 15:58:04 +01:00
|
|
|
|
2022-01-04 15:55:20 +01:00
|
|
|
<div class="indent">
|
|
|
|
{#if tab === "iframe"}
|
|
|
|
<h3>Appearance</h3>
|
|
|
|
<p>
|
|
|
|
You can change the pixeldrain theme for your embedded file. Try the
|
|
|
|
available themes <a href="/appearance">here</a>.
|
|
|
|
</p>
|
2022-02-07 12:00:22 +01:00
|
|
|
|
|
|
|
<ThemePicker on:theme_change={e => set_style(e.detail)}></ThemePicker>
|
2022-01-04 15:55:20 +01:00
|
|
|
{:else}
|
|
|
|
<h3>Direct link</h3>
|
|
|
|
<p>
|
|
|
|
You can directly download the file from this link without using the
|
|
|
|
file viewer:
|
|
|
|
<br/>
|
|
|
|
{domain_url()}{file.get_href}
|
|
|
|
</p>
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
<h3>Code</h3>
|
2021-11-28 15:58:04 +01:00
|
|
|
<p>
|
2022-01-04 15:55:20 +01:00
|
|
|
Put this code in your website to embed the file.
|
2021-11-28 15:58:04 +01:00
|
|
|
</p>
|
|
|
|
<div class="center">
|
2022-01-04 15:55:20 +01:00
|
|
|
<textarea bind:value={embed_html} style="width: 99%; height: 4em;"></textarea>
|
|
|
|
<br/>
|
|
|
|
<button on:click={copy} class:button_highlight={copy_status === "success"} class:button_red={copy_status === "error"}>
|
|
|
|
<i class="icon">content_copy</i>
|
|
|
|
{#if copy_status === "success"}
|
|
|
|
Copied!
|
|
|
|
{:else if copy_status === "error"}
|
|
|
|
Error!
|
|
|
|
{:else}
|
|
|
|
Copy HTML
|
|
|
|
{/if}
|
2021-11-28 15:58:04 +01:00
|
|
|
</button>
|
2022-02-07 12:00:22 +01:00
|
|
|
<button on:click={toggle_example} class:button_highlight={example}>
|
2022-01-04 15:55:20 +01:00
|
|
|
<i class="icon">visibility</i> Show example
|
2021-11-28 15:58:04 +01:00
|
|
|
</button>
|
|
|
|
</div>
|
2022-01-04 15:55:20 +01:00
|
|
|
<h3>Example</h3>
|
2021-11-28 15:19:00 +01:00
|
|
|
</div>
|
2021-11-01 17:15:23 +01:00
|
|
|
<div bind:this={preview_area} style="text-align: center;"></div>
|
|
|
|
</div>
|
2021-11-28 15:19:00 +01:00
|
|
|
|
|
|
|
<style>
|
|
|
|
.center {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.container {
|
|
|
|
width: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
</style>
|