pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use flexbox to center images and video

Browse Source
This commit is contained in:
Fornax
2022-10-25 12:13:50 +02:00
parent 01f407e4b1
commit 64d0b364ba
5 changed files with 31 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
svelte/src/file_viewer/FileViewer.svelte
View File

@@ -569,6 +569,7 @@ const keyboard_event = evt => {
{#if view === "file"}
<FilePreview
bind:this={file_preview}
is_list={is_list}
on:download={downloader.download_file}
on:prev={() => { if (list_navigator) { list_navigator.prev() }}}
on:next={() => { if (list_navigator) { list_navigator.next() }}}

19
svelte/src/file_viewer/viewers/Audio.svelte
View File

@@ -3,7 +3,8 @@ import { createEventDispatcher, tick } from "svelte";
import BandwidthUsage from "./BandwidthUsage.svelte";
let dispatch = createEventDispatcher()
export let file = {
export let is_list = false
let file = {
id: "",
name: "",
mime_type: "",
@@ -53,9 +54,11 @@ const toggle_play = () => playing ? player.pause() : player.play()
<div class="container">
<h1>{file.name}</h1>
<button on:click={() => dispatch("prev") }>
<i class="icon">skip_previous</i>
</button>
{#if is_list}
<button on:click={() => dispatch("prev") }>
<i class="icon">skip_previous</i>
</button>
{/if}
<button on:click={() => player.currentTime -= 10 }>
<i class="icon">replay_10</i>
</button>
@@ -69,9 +72,11 @@ const toggle_play = () => playing ? player.pause() : player.play()
<button on:click={() => player.currentTime += 10 }>
<i class="icon">forward_10</i>
</button>
<button on:click={() => dispatch("next") }>
<i class="icon">skip_next</i>
</button>
{#if is_list}
<button on:click={() => dispatch("next") }>
<i class="icon">skip_next</i>
</button>
{/if}
<br/><br/>
{#if file.id && !audio_reload}

5
svelte/src/file_viewer/viewers/FilePreview.svelte
View File

@@ -15,6 +15,7 @@ import SpeedLimit from "./SpeedLimit.svelte";
let viewer
let viewer_type = "loading"
export let is_list = false
export const set_file = async file => {
if (file.id === "") {
@@ -54,9 +55,9 @@ export const set_file = async file => {
{:else if viewer_type === "image"}
<Image bind:this={viewer} on:loading></Image>
{:else if viewer_type === "video"}
<Video bind:this={viewer} on:loading on:download on:prev on:next on:reload></Video>
<Video bind:this={viewer} is_list={is_list} on:loading on:download on:prev on:next on:reload></Video>
{:else if viewer_type === "audio"}
<Audio bind:this={viewer} on:loading on:prev on:next on:reload></Audio>
<Audio bind:this={viewer} is_list={is_list} on:loading on:prev on:next on:reload></Audio>
{:else if viewer_type === "pdf"}
<PDF bind:this={viewer}></PDF>
{:else if viewer_type === "text"}

9
svelte/src/file_viewer/viewers/Image.svelte
View File

@@ -67,10 +67,10 @@ const mouseup = (e) => {
<style>
.container {
display: block;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
text-align: center;
overflow: hidden;
}
.container.zoom {
@@ -82,16 +82,11 @@ const mouseup = (e) => {
margin: auto;
max-width: 100%;
max-height: 100%;
top: 50%;
cursor: pointer;
transform: translateY(-50%);
box-shadow: 0 0 4px var(--shadow_color);
}
.image.zoom {
max-width: none;
max-height: none;
top: 0;
cursor: move;
transform: none;
}
</style>

22
svelte/src/file_viewer/viewers/Video.svelte
View File

@@ -4,6 +4,7 @@ import BandwidthUsage from "./BandwidthUsage.svelte";
import TextBlock from "./TextBlock.svelte";
let dispatch = createEventDispatcher()
export let is_list = false
let file = {
id: "",
size: 0,
@@ -112,9 +113,11 @@ const fullscreen = () => {
<div class="controls">
<div class="spacer"></div>
<button on:click={() => dispatch("prev") }>
<i class="icon">skip_previous</i>
</button>
{#if is_list}
<button on:click={() => dispatch("prev") }>
<i class="icon">skip_previous</i>
</button>
{/if}
<button on:click={() => seek_relative(-10)}>
<i class="icon">replay_10</i>
</button>
@@ -128,9 +131,11 @@ const fullscreen = () => {
<button on:click={() => seek_relative(10)}>
<i class="icon">forward_10</i>
</button>
<button on:click={() => dispatch("next") }>
<i class="icon">skip_next</i>
</button>
{#if is_list}
<button on:click={() => dispatch("next") }>
<i class="icon">skip_next</i>
</button>
{/if}
<div style="width: 16px; height: 8px;"></div>
<button on:click={mute} class:button_red={player && player.muted}>
{#if player && player.muted}
@@ -186,6 +191,8 @@ h1 {
}
.player {
flex: 1 1 auto;
display: flex;
justify-content: center;
text-align: center;
overflow: hidden;
}
@@ -209,9 +216,6 @@ h1 {
margin: auto;
max-width: 100%;
max-height: 100%;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 0 4px var(--shadow_color);
}
.video_icon {
display: inline-block;