add file viewers and improve directory viewer
This commit is contained in:
@@ -5,12 +5,8 @@ import Sharebar from './Sharebar.svelte'
|
||||
import Spinner from '../util/Spinner.svelte'
|
||||
import Modal from '../util/Modal.svelte'
|
||||
import Directory from './viewers/Directory.svelte';
|
||||
|
||||
let file = {
|
||||
views: 6,
|
||||
downloads: 12,
|
||||
size: 24,
|
||||
}
|
||||
import Audio from './viewers/Audio.svelte';
|
||||
import Image from './viewers/Image.svelte';
|
||||
|
||||
// Elements
|
||||
let file_viewer
|
||||
@@ -32,22 +28,30 @@ let preview
|
||||
|
||||
// State
|
||||
let currentNode = initialNode
|
||||
let path_base = "/d/"+currentNode.bucket.id
|
||||
let loading = true
|
||||
let viewer_type = ""
|
||||
|
||||
const download = () => {
|
||||
file.downloads++
|
||||
}
|
||||
window.onpopstate = (e) => {
|
||||
if(e.state){
|
||||
let locsplit = document.location.pathname.split(currentNode.bucket.id+"/", 2)
|
||||
navigate(decodeURIComponent(locsplit[1]))
|
||||
}
|
||||
};
|
||||
|
||||
const navigate = (path) => {
|
||||
const navigate = (path, pushHist) => {
|
||||
loading = true
|
||||
fetch(
|
||||
apiEndpoint+"/filesystem/"+currentNode.bucket.id+"/"+encodeURIComponent(path)+"?stat",
|
||||
).then(resp => resp.json()).then(resp => {
|
||||
window.history.pushState(
|
||||
"page2",
|
||||
resp.base.name+" in "+resp.bucket.name+" ~ pixeldrain",
|
||||
"/d/"+resp.bucket.id+resp.base.path,
|
||||
)
|
||||
window.apiEndpoint+"/filesystem/"+currentNode.bucket.id+"/"+encodeURIComponent(path)+"?stat",
|
||||
).then(
|
||||
resp => resp.json()
|
||||
).then(resp => {
|
||||
window.document.title = resp.base.name+" ~ pixeldrain"
|
||||
if (pushHist) {
|
||||
window.history.pushState(
|
||||
{}, window.document.title, "/d/"+resp.bucket.id+resp.base.path,
|
||||
)
|
||||
}
|
||||
currentNode = resp
|
||||
openPath()
|
||||
}).catch(err => {
|
||||
@@ -60,6 +64,16 @@ const openPath = () => {
|
||||
console.log(currentNode.base.type)
|
||||
if (currentNode.base.type === "bucket" || currentNode.base.type === "dir") {
|
||||
viewer_type = "dir"
|
||||
} else if (
|
||||
currentNode.base.file_type.startsWith("image")
|
||||
) {
|
||||
viewer_type = "image"
|
||||
} else if (
|
||||
currentNode.base.file_type.startsWith("audio") ||
|
||||
currentNode.base.file_type === "application/ogg" ||
|
||||
currentNode.base.name.endsWith(".mp3")
|
||||
) {
|
||||
viewer_type = "audio"
|
||||
}
|
||||
loading = false
|
||||
}
|
||||
@@ -81,31 +95,31 @@ onMount(openPath)
|
||||
<svelte:window on:keydown={keydown}/>
|
||||
|
||||
<div bind:this={file_viewer} class="file_viewer">
|
||||
{#if loading}
|
||||
<div style="position: absolute; right: 0; top: 0; height: 48px; width: 48px; z-index: 100;">
|
||||
<Spinner></Spinner>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div bind:this={header_bar} class="file_viewer_headerbar highlight_1">
|
||||
<button on:click={toolbar_toggle} class="button_toggle_toolbar" class:button_highlight={toolbar_visible}>
|
||||
<i class="icon">menu</i>
|
||||
</button>
|
||||
<a href="/" id="button_home" class="button button_home"><i class="icon">home</i></a>
|
||||
<div class="file_viewer_headerbar_title">
|
||||
<div>
|
||||
{#if currentNode.parents.length > 0}
|
||||
{currentNode.parents[currentNode.parents.length-1].path}
|
||||
{/if}
|
||||
/{currentNode.base.name}
|
||||
</div>
|
||||
{#each currentNode.parents as parent}
|
||||
<div class="breadcrumb breadcrumb_button" on:click={() => {navigate(parent.path, true)}}>{parent.name}</div> /
|
||||
{/each}
|
||||
<div class="breadcrumb breadcrumb_last">{currentNode.base.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list_navigator"></div>
|
||||
<div class="file_viewer_window">
|
||||
<div class="toolbar" class:toolbar_visible><div><div>
|
||||
<div class="toolbar_label">Views</div>
|
||||
<div class="toolbar_statistic">{formatThousands(file.views)}</div>
|
||||
<div class="toolbar_label">Downloads</div>
|
||||
<div class="toolbar_statistic">{formatThousands(file.downloads)}</div>
|
||||
<div class="toolbar_label">Size</div>
|
||||
<div class="toolbar_statistic">{formatDataVolume(file.size)}</div>
|
||||
<div class="toolbar_statistic">{formatDataVolume(currentNode.base.file_size, 3)}</div>
|
||||
|
||||
<button on:click={download} class="toolbar_button button_full_width">
|
||||
<button class="toolbar_button button_full_width">
|
||||
<i class="icon">save</i> Download
|
||||
</button>
|
||||
<button id="btn_download_list" class="toolbar_button button_full_width" style="display: none;">
|
||||
@@ -127,12 +141,12 @@ onMount(openPath)
|
||||
<Sharebar bind:this={sharebar}></Sharebar>
|
||||
|
||||
<div bind:this={preview} class="file_viewer_file_preview" class:toolbar_visible>
|
||||
{#if loading}
|
||||
<div class="center" style="width: 128px; height: 128px;">
|
||||
<Spinner></Spinner>
|
||||
</div>
|
||||
{:else if viewer_type === "dir"}
|
||||
<Directory bind:this={preview} node={currentNode} on:navigate={e => {navigate(e.detail)}}></Directory>
|
||||
{#if viewer_type === "dir"}
|
||||
<Directory bind:this={preview} node={currentNode} path_base={path_base} on:navigate={e => {navigate(e.detail, true)}}></Directory>
|
||||
{:else if viewer_type === "audio"}
|
||||
<Audio bind:this={preview} node={currentNode}></Audio>
|
||||
{:else if viewer_type === "image"}
|
||||
<Image bind:this={preview} node={currentNode}></Image>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -183,27 +197,48 @@ onMount(openPath)
|
||||
text-align: left;
|
||||
z-index: 10;
|
||||
box-shadow: none;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* Headerbar components */
|
||||
.file_viewer > .file_viewer_headerbar > * {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
display: inline;
|
||||
align-self: center;
|
||||
}
|
||||
.file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
line-height: 1.2em; /* When the page is a list there will be two lines. Dont's want to stretch the container*/
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
}
|
||||
.breadcrumb {
|
||||
border-radius: 1em;
|
||||
min-width: 1em;
|
||||
text-align: center;
|
||||
line-height: 1.2em;
|
||||
padding: 3px 8px;
|
||||
margin: 2px 6px;
|
||||
}
|
||||
.breadcrumb_button {
|
||||
cursor: pointer;
|
||||
background-color: var(--layer_2_color);
|
||||
transition: 0.2s background-color;
|
||||
}
|
||||
.breadcrumb_button:hover, .breadcrumb_button:focus, .breadcrumb_button:active {
|
||||
background-color: var(--input_color);
|
||||
}
|
||||
.breadcrumb_last {
|
||||
background-color: var(--highlight_color);
|
||||
color: var(--highlight_text_color);
|
||||
}
|
||||
|
||||
.button_home::after {
|
||||
content: "pixeldrain";
|
||||
}
|
||||
@@ -259,16 +294,6 @@ onMount(openPath)
|
||||
box-shadow: inset 2px 2px 8px var(--shadow_color);
|
||||
}
|
||||
|
||||
.file_viewer > .file_viewer_window > .file_viewer_file_preview > .center{
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
|
||||
38
svelte/src/filesystem/viewers/Audio.svelte
Normal file
38
svelte/src/filesystem/viewers/Audio.svelte
Normal file
@@ -0,0 +1,38 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
let dispatch = createEventDispatcher()
|
||||
|
||||
export let node;
|
||||
|
||||
const ended = () => {
|
||||
dispatch("next")
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
{node.base.name}
|
||||
<br/><br/>
|
||||
<audio
|
||||
class="player"
|
||||
src={window.apiEndpoint+"/filesystem/"+node.bucket.id+"/"+node.base.path}
|
||||
autoplay="autoplay"
|
||||
controls="controls"
|
||||
on:ended={ended}>
|
||||
<track kind="captions"/>
|
||||
</audio>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 50px 0 0 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.player {
|
||||
width: 90%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,15 +1,29 @@
|
||||
<script>
|
||||
import { formatDataVolume } from '../../util/Formatting.svelte'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
let dispatch = createEventDispatcher()
|
||||
|
||||
export let node;
|
||||
export let path_base;
|
||||
let mode = "viewing"
|
||||
|
||||
const navigate_to = (path) => {
|
||||
dispatch("navigate", path)
|
||||
$: children = node.base.children.reduce((accum, val) => {
|
||||
val["selected"] = false
|
||||
accum.push(val)
|
||||
return accum
|
||||
}, [])
|
||||
|
||||
const node_click = (node, index) => {
|
||||
if (mode === "viewing") {
|
||||
dispatch("navigate", node.path)
|
||||
} else if (mode === "selecting") {
|
||||
children[index].selected = !children[index].selected
|
||||
}
|
||||
}
|
||||
const navigate_up = () => {
|
||||
// Go to the path of the last parent
|
||||
if (node.parents.length !== 0) {
|
||||
navigate_to(node.parents[node.parents.length-1].path)
|
||||
dispatch("navigate", node.parents[node.parents.length-1].path)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -45,23 +59,50 @@ const node_icon = node => {
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="toolbar">
|
||||
<button on:click={navigate_up}><i class="icon">arrow_upward</i> up</button>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="directory">
|
||||
{#if Array.isArray(node.base.children)}
|
||||
{#each node.base.children as child}
|
||||
<div on:click={navigate_to(child.path)} class="node">
|
||||
<img src={node_icon(child)} alt="icon"/>
|
||||
<div>{child.name}</div>
|
||||
</div>
|
||||
<div class="width_container">
|
||||
<div class="toolbar">
|
||||
<!-- {#if node.parents.length !== 0} -->
|
||||
<button on:click={navigate_up} class:hidden={node.parents.length === 0}><i class="icon">arrow_back</i></button>
|
||||
<!-- {/if} -->
|
||||
<div class="toolbar_spacer"></div>
|
||||
<button on:click={navigate_up}><i class="icon">cloud_upload</i></button>
|
||||
<button on:click={navigate_up}><i class="icon">create_new_folder</i></button>
|
||||
<button on:click={navigate_up}><i class="icon">delete</i></button>
|
||||
</div>
|
||||
<br/>
|
||||
<table class="directory">
|
||||
<tr>
|
||||
<!-- <td><input type="checkbox" /></td> -->
|
||||
<td></td>
|
||||
<td>name</td>
|
||||
<td>size</td>
|
||||
</tr>
|
||||
{#each children as child, index}
|
||||
<a
|
||||
href={path_base+child.path}
|
||||
on:click|preventDefault={() => {node_click(child, index)}}
|
||||
class="node"
|
||||
class:node_selected={child.selected}>
|
||||
<!-- <td on:click|preventDefault class="node_checkbox">
|
||||
<input type="checkbox" />
|
||||
</td> -->
|
||||
<td>
|
||||
<img src={node_icon(child)} class="node_icon" alt="icon"/>
|
||||
</td>
|
||||
<td class="node_name">
|
||||
{child.name}
|
||||
</td>
|
||||
<td class="node_size">
|
||||
{formatDataVolume(child.file_size, 3)}
|
||||
</td>
|
||||
</a>
|
||||
{/each}
|
||||
{/if}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hidden { visibility: hidden; }
|
||||
.container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -69,59 +110,72 @@ const node_icon = node => {
|
||||
overflow-y: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.width_container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 94%;
|
||||
width: 1000px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.toolbar {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 800px;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
margin: 20px 0 0 0;
|
||||
margin: 16px 0 0 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.toolbar > * { flex: 0 0 auto; }
|
||||
.toolbar_spacer { flex: 1 1 auto; }
|
||||
|
||||
.directory {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 800px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
width: 100%;
|
||||
margin: 20px 0 40px 0;
|
||||
margin: 16px 0 16px 0;
|
||||
text-align: left;
|
||||
background-color: var(--layer_2_color);
|
||||
box-shadow: 1px 1px var(--layer_2_shadow) var(--shadow_color);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.node {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
margin: 4px;
|
||||
padding: 4px;
|
||||
display: table-row;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
padding: 6px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
.node:not(:last-child) {
|
||||
border-bottom: 1px solid var(--layer_3_color);
|
||||
}
|
||||
.node:hover:not(.node_selected) {
|
||||
background-color: var(--input_color_dark);
|
||||
color: var(--input_text_color);
|
||||
text-decoration: none;
|
||||
}
|
||||
/* .node_selected {
|
||||
.node.node_selected {
|
||||
background-color: var(--highlight_color);
|
||||
color: var(--highlight_text_color);
|
||||
} */
|
||||
.node > div {
|
||||
height: 100%;
|
||||
}
|
||||
td {
|
||||
padding: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.node_icon {
|
||||
height: 32px;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.node_name {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
line-height: 32px;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
.node_size {
|
||||
min-width: 50px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.node > img {
|
||||
max-height: 100%;
|
||||
margin-right: 6px;
|
||||
width: auto;
|
||||
min-width: auto;
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
85
svelte/src/filesystem/viewers/Image.svelte
Normal file
85
svelte/src/filesystem/viewers/Image.svelte
Normal file
@@ -0,0 +1,85 @@
|
||||
<script>
|
||||
export let node
|
||||
let container
|
||||
let zoom = false
|
||||
let x, y = 0
|
||||
let dragging = false
|
||||
|
||||
const mousedown = (e) => {
|
||||
if (!dragging && e.which === 1 && zoom) {
|
||||
x = e.pageX
|
||||
y = e.pageY
|
||||
dragging = true
|
||||
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
return false
|
||||
}
|
||||
}
|
||||
const mousemove = (e) => {
|
||||
if (dragging) {
|
||||
container.scrollLeft = container.scrollLeft - (e.pageX - x)
|
||||
container.scrollTop = container.scrollTop - (e.pageY - y)
|
||||
|
||||
x = e.pageX
|
||||
y = e.pageY
|
||||
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
return false
|
||||
}
|
||||
}
|
||||
const mouseup = (e) => {
|
||||
if (dragging) {
|
||||
dragging = false
|
||||
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
return false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:mousemove={mousemove} on:mouseup={mouseup} />
|
||||
|
||||
<div bind:this={container} class="container" class:zoom>
|
||||
<img
|
||||
on:dblclick={() => {zoom = !zoom}}
|
||||
on:doubletap={() => {zoom = !zoom}}
|
||||
on:mousedown={mousedown}
|
||||
class="image" class:zoom
|
||||
src={window.apiEndpoint+"/filesystem/"+node.bucket.id+"/"+node.base.path}
|
||||
alt="no description available" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.container.zoom {
|
||||
overflow: auto;
|
||||
}
|
||||
.image {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
top: 50%;
|
||||
cursor: pointer;
|
||||
transform: translateY(-50%);
|
||||
box-shadow: 1px 1px var(--layer_3_shadow) var(--shadow_color);
|
||||
}
|
||||
.image.zoom {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
top: 0;
|
||||
cursor: move;
|
||||
transform: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user