Improve navigation and accessibility

This commit is contained in:
2021-12-28 13:56:24 +01:00
parent 9edc1a84cd
commit fa3c6913e8
8 changed files with 138 additions and 71 deletions

View File

@@ -73,6 +73,8 @@ const toggle_play = () => playing ? player.pause() : player.play()
{#if file.id && !audio_reload}
<!-- svelte-ignore a11y-media-has-caption -->
<audio
on:loadstart={() => {dispatch("loading", true)}}
on:load={() => {dispatch("loading", false)}}
bind:this={player}
class="player"
controls

View File

@@ -38,6 +38,7 @@ let dispatch = createEventDispatcher()
const download = () => { dispatch("download") }
const next = () => { dispatch("next") }
const prev = () => { dispatch("prev") }
const loading = e => {dispatch("loading", e.detail)}
</script>
@@ -51,11 +52,11 @@ const prev = () => { dispatch("prev") }
{:else if viewer_type === "rate_limit"}
<RateLimit bind:this={viewer} on:download={download}></RateLimit>
{:else if viewer_type === "image"}
<Image bind:this={viewer}></Image>
<Image bind:this={viewer} on:loading={loading}></Image>
{:else if viewer_type === "video"}
<Video bind:this={viewer} on:download={download} on:prev={prev} on:next={next}></Video>
<Video bind:this={viewer} on:loading={loading} on:download={download} on:prev={prev} on:next={next}></Video>
{:else if viewer_type === "audio"}
<Audio bind:this={viewer} on:prev={prev} on:next={next}></Audio>
<Audio bind:this={viewer} on:loading={loading} on:prev={prev} on:next={next}></Audio>
{:else if viewer_type === "pdf"}
<PDF bind:this={viewer}></PDF>
{:else if viewer_type === "text"}

View File

@@ -1,4 +1,7 @@
<script>
import { createEventDispatcher } from "svelte"
let dispatch = createEventDispatcher()
export const set_file = f => file = f
let file = {
id: "",
@@ -51,6 +54,8 @@ const mouseup = (e) => {
<div bind:this={container} class="container" class:zoom>
<img
on:loadstart={() => {dispatch("loading", true)}}
on:load={() => {dispatch("loading", false)}}
on:dblclick={() => {zoom = !zoom}}
on:doubletap={() => {zoom = !zoom}}
on:mousedown={mousedown}

View File

@@ -62,6 +62,8 @@ let download = () => { dispatch("download", {}) }
{#if !video_reload}
<!-- svelte-ignore a11y-media-has-caption -->
<video
on:loadstart={() => {dispatch("loading", true)}}
on:load={() => {dispatch("loading", false)}}
bind:this={player}
controls
playsinline