Improve navigation and accessibility

svelte/src/file_viewer/AdLeaderboard.svelte

@@ -13,13 +13,10 @@ onMount(() => {
 		return
 	}
 
-	switch (Math.floor(Math.random()*4)) {
+	switch (Math.floor(Math.random()*3)) {
 		case 0:
 			set_ad_type("aads")
 			break
-		case 1:
-			set_ad_type("brave")
-			break
 		case 2:
 			set_ad_type("ads.plus")
 			break

svelte/src/file_viewer/FileViewer.svelte

@@ -20,7 +20,15 @@ import GalleryView from "./GalleryView.svelte";
 import Spinner from "../util/Spinner.svelte";
 import Downloader from "./Downloader.svelte";
 
-let loading = true
+let loading = 0
+const on_loading = e => {
+	if (e.detail) {
+		loading++
+	} else {
+		loading--
+	}
+}
+
 let embedded = false
 let view_token = ""
 let ads_enabled = false
@@ -84,6 +92,7 @@ let embed_visible = false
 let skyscraper_visible = false
 
 onMount(() => {
+	loading++
 	let viewer_data = window.viewer_data
 	embedded = viewer_data.embedded
 
@@ -101,10 +110,10 @@ onMount(() => {
 	}
 
 	ads_enabled = list.files[0].show_ads
-	loading = false
+	loading--
 })
 const reload = async () => {
-	loading = true
+	loading++
 	if (is_list) {
 		try {
 			const resp = await fetch(list.info_href);
@@ -129,7 +138,7 @@ const reload = async () => {
 			alert(err)
 		}
 	}
-	loading = false
+	loading--
 }
 
 const open_list = l => {
@@ -145,14 +154,18 @@ const open_list = l => {
 	// correct file is opened
 	is_list = true
 
+	hash_change()
+}
+const hash_change = () => {
 	// Skip to the file defined in the link hash
-	let matches = location.hash.match(new RegExp('item=([^&]*)'))
+	let matches = location.hash.match(/item=([\d]+)/)
-	let hashID = parseInt(matches ? matches[1] : null)
+	let index = parseInt(matches ? matches[1] : null)
-	if (Number.isInteger(hashID)) {
+	if (Number.isInteger(index)) {
 		// The URL contains an item number. Navigate to that item
-		open_file_index(hashID)
+		open_file_index(index)
 	} else if (view !== "gallery") {
-		toggle_gallery()
+		view = "gallery"
+		file = file_struct // Empty the file struct
 	}
 }
 const open_file_index = async index => {
@@ -161,6 +174,11 @@ const open_file_index = async index => {
 	} else if (index < 0) {
 		index = list.files.length - 1
 	}
+	if (list.files[index] === file) {
+		console.debug("ignoring request to load the same file that is currently loaded")
+		return
+	}
+
 	console.debug("received request to open file", index)
 
 	file_set_href(list.files[index])
@@ -174,8 +192,8 @@ const open_file_index = async index => {
 	file_preview.set_file(file)
 
 	if (is_list) {
-		// Update the URL
+		// Update the URL without pushing a new history entry
-		location.replace("#item=" + index)
+		window.location.replace("#item=" + index)
 		list_navigator.set_item(index)
 	}
 
@@ -188,11 +206,9 @@ const open_file_index = async index => {
 }
 const toggle_gallery = () => {
 	if (view === "gallery") {
-		open_file_index(0)
+		window.location.hash = "#item=0"
 	} else {
-		location.replace("#gallery")
+		window.location.hash = "#gallery"
-		view = "gallery"
-		file = file_struct // Empty the file struct
 	}
 }
 
@@ -305,31 +321,45 @@ const keyboard_event = evt => {
 
 </script>
 
-<svelte:window on:keydown={keyboard_event}/>
+<svelte:window on:keydown={keyboard_event} on:hashchange={hash_change}/>
 
 <div id="file_viewer" class="file_viewer">
 	<!-- Head elements for the ads -->
 	<AdHead></AdHead>
 
-	{#if loading}
+	{#if loading !== 0}
 		<div class="spinner_container">
 			<Spinner></Spinner>
 		</div>
 	{/if}
 
 	<div id="headerbar" class="headerbar" class:embedded>
-		<button on:click={toolbar_toggle} class="button_toggle_toolbar round" class:button_highlight={toolbar_visible}>
+		<button
+			on:click={toolbar_toggle}
+			class="button_toggle_toolbar round"
+			class:button_highlight={toolbar_visible}
+			title="Open or close the toolbar">
 			<i class="icon">menu</i>
 		</button>
-		<a href="/" bind:this={button_home} class="button button_home round" target={embedded ? "_blank" : ""}>
+
+		<a
+			href="/"
+			bind:this={button_home}
+			class="button button_home round"
+			target={embedded ? "_blank" : ""}
+			title="Go to the pixeldrain home page">
 			<PixeldrainLogo style="height: 1.6em; width: 1.6em; margin: 0 4px 0 0;"></PixeldrainLogo>
 		</a>
+
 		<div id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">
 			{#if list.title !== ""}{list.title}<br/>{/if}
 			{#if file.name !== ""}{file.name}{/if}
 		</div>
 		{#if embedded && supports_fullscreen}
-			<button class="round" on:click={toggle_fullscreen}>
+			<button
+				class="round"
+				on:click={toggle_fullscreen}
+				title="Open this page in full-screen mode">
 				<i class="icon" id="btn_fullscreen_icon">fullscreen</i>
 			</button>
 		{/if}
@@ -352,29 +382,42 @@ const keyboard_event = evt => {
 			{/if}
 
 			{#if is_list}
-				<button on:click={toggle_gallery} class="toolbar_button button_full_width" class:button_highlight={view === "gallery"}>
+				<button
+					on:click={toggle_gallery}
+					class="toolbar_button button_full_width"
+					class:button_highlight={view === "gallery"}
+					title="Opens a gallery view of the album">
 					<i class="icon">photo_library</i>
 					Gallery
 				</button>
 			{/if}
 
 			{#if file.abuse_type === "" && view === "file"}
-				<button on:click={downloader.download_file} class="toolbar_button button_full_width">
+				<button
+					on:click={downloader.download_file}
+					class="toolbar_button button_full_width"
+					title="Save this file to your computer">
 					<i class="icon">download</i>
 					<span>Download</span>
 				</button>
 			{/if}
+
 			{#if file.abuse_type === "" && is_list}
-				<button on:click={downloader.download_list} class="toolbar_button button_full_width">
+				<button
+					on:click={downloader.download_list}
+					class="toolbar_button button_full_width"
+					title="Download all files in this album as a zip archive">
 					<i class="icon">download</i>
 					<span>DL all files</span>
 				</button>
 			{/if}
 
-			<button on:click={copy_url}
+			<button
+				on:click={copy_url}
 				class="toolbar_button button_full_width"
 				class:button_highlight={copy_url_status === "copied"}
-				class:button_red={copy_url_status === "error"}>
+				class:button_red={copy_url_status === "error"}
+				title="Copy a link to this page to your clipboard">
 				<i class="icon">content_copy</i>
 				<span>
 					{#if copy_url_status === "copied"}
@@ -387,12 +430,20 @@ const keyboard_event = evt => {
 				</span>
 			</button>
 
-			<button on:click={toggle_sharebar} class="toolbar_button button_full_width" class:button_highlight={sharebar_visible}>
+			<button
+				on:click={toggle_sharebar}
+				class="toolbar_button button_full_width"
+				class:button_highlight={sharebar_visible}
+				title="Share this file on social media">
 				<i class="icon">share</i>
 				<span>Share</span>
 			</button>
 
-			<button class="toolbar_button button_full_width" on:click={qr_window.toggle} class:button_highlight={qr_visible}>
+			<button
+				class="toolbar_button button_full_width"
+				on:click={qr_window.toggle}
+				class:button_highlight={qr_visible}
+				title="Show a QR code with a link to this page. Useful for sharing files in-person">
 				<i class="icon">qr_code</i>
 				<span>QR code</span>
 			</button>
@@ -400,7 +451,7 @@ const keyboard_event = evt => {
 			{#if is_list}
 				<button
 					class="toolbar_button button_full_width"
-					title="Randomize the order of the files in this list"
+					title="Go to a random file when pressing → or clicking the next file button"
 					class:button_highlight={list_shuffle}
 					on:click={toggle_shuffle}>
 					<i class="icon">shuffle</i>
@@ -413,7 +464,11 @@ const keyboard_event = evt => {
 			{/if}
 
 			{#if view === "file"}
-				<button class="toolbar_button button_full_width" on:click={details_window.toggle} class:button_highlight={details_visible}>
+				<button
+					class="toolbar_button button_full_width"
+					on:click={details_window.toggle}
+					class:button_highlight={details_visible}
+					title="Information and statistics about this file">
 					<i class="icon">help</i>
 					<span>Deta<u>i</u>ls</span>
 				</button>
@@ -422,26 +477,41 @@ const keyboard_event = evt => {
 			<hr/>
 
 			{#if file.can_edit || list.can_edit}
-				<button class="toolbar_button button_full_width" on:click={edit_window.toggle} class:button_highlight={edit_visible}>
+				<button
+					class="toolbar_button button_full_width"
+					on:click={edit_window.toggle}
+					class:button_highlight={edit_visible}
+					title="Edit or delete this file or album">
 					<i class="icon">edit</i>
 					<span><u>E</u>dit</span>
 				</button>
 			{/if}
 
 			{#if view === "file" && window.user_authenticated && !file.can_edit}
-				<button on:click={grab_file} class="toolbar_button button_full_width" title="Copy this file to your own pixeldrain account">
+				<button
+					on:click={grab_file}
+					class="toolbar_button button_full_width"
+					title="Copy this file to your own pixeldrain account">
 					<i class="icon">save_alt</i>
 					<span><u>G</u>rab file</span>
 				</button>
 			{/if}
 
-			<button class="toolbar_button button_full_width" title="Include this file in your own webpages" on:click={embed_window.toggle} class:button_highlight={embed_visible}>
+			<button
+				class="toolbar_button button_full_width"
+				title="Include this file in your own webpages"
+				on:click={embed_window.toggle}
+				class:button_highlight={embed_visible}>
 				<i class="icon">code</i>
 				<span>E<u>m</u>bed</span>
 			</button>
 
 			{#if view === "file"}
-				<button class="toolbar_button button_full_width" title="Report abuse in this file" on:click={report_window.toggle} class:button_highlight={report_visible}>
+				<button
+					class="toolbar_button button_full_width"
+					title="Report this file as abusive"
+					on:click={report_window.toggle}
+					class:button_highlight={report_visible}>
 					<i class="icon">flag</i>
 					<span>Report</span>
 				</button>
@@ -455,14 +525,14 @@ const keyboard_event = evt => {
 					bind:this={file_preview}
 					on:download={downloader.download_file}
 					on:prev={() => { if (list_navigator) { list_navigator.prev() }}}
-					on:next={() => { if (list_navigator) { list_navigator.next() }}}>
+					on:next={() => { if (list_navigator) { list_navigator.next() }}}
+					on:loading={on_loading}>
 				</FilePreview>
 			{:else if view === "gallery"}
 				<GalleryView
 					list={list}
-					on:set_file={e => { open_file_index(e.detail) }}
 					on:reload={reload}
-					on:loading={e => {loading = e.detail}}>
+					on:loading={on_loading}>
 				</GalleryView>
 			{/if}
 		</div>

svelte/src/file_viewer/GalleryView.svelte

@@ -15,10 +15,6 @@ export let list = {
 
 let file_picker;
 
-const click_file = index => {
-	dispatch("set_file", index)
-}
-
 const update_list = async new_files => {
 	dispatch("loading", true)
 
@@ -125,9 +121,9 @@ const drop = (e, index) => {
 
 <div class="gallery">
 	{#each list.files as file, index (file)}
-		<div
+		<a
+			href="#item={index}"
 			class="file"
-			on:click={() => {click_file(index)}}
 			draggable={list.can_edit}
 			on:dragstart={e => drag(e, index)}
 			on:drop|preventDefault={e => drop(e, index)}
@@ -141,14 +137,14 @@ const drop = (e, index) => {
 				class:editing={list.can_edit}
 				style="background-image: url('{file.icon_href}?width=256&height=256');">
 				{#if list.can_edit}
-					<i class="icon" on:click|stopPropagation style="cursor: grab;">drag_indicator</i>
+					<i class="icon" on:click|stopPropagation|preventDefault style="cursor: grab;">drag_indicator</i>
-					<i class="icon" on:click|stopPropagation={() => {move_left(index)}}>chevron_left</i>
+					<i class="icon" on:click|stopPropagation|preventDefault={() => {move_left(index)}}>chevron_left</i>
-					<i class="icon" on:click|stopPropagation={() => {move_right(index)}}>chevron_right</i>
+					<i class="icon" on:click|stopPropagation|preventDefault={() => {move_right(index)}}>chevron_right</i>
-					<i class="icon" on:click|stopPropagation={() => {delete_file(index)}}>delete</i>
+					<i class="icon" on:click|stopPropagation|preventDefault={() => {delete_file(index)}}>delete</i>
 				{/if}
 			</div>
 			{file.name}
-		</div>
+		</a>
 	{/each}
 
 	{#if list.can_edit}
@@ -190,6 +186,7 @@ const drop = (e, index) => {
 	text-overflow: ellipsis;
 	text-decoration: none;
 	vertical-align: top;
+	color: var(--text_color);
 }
 .file:hover, .highlight {
 	box-shadow: 0 0 2px 2px var(--highlight_color);

svelte/src/file_viewer/ListNavigator.svelte

@@ -11,13 +11,12 @@ let selected_file_index = 0
 export const next = () => {
 	if (shuffle) {
 		rand_item()
-		return
+	} else {
+		dispatch("set_file", selected_file_index+1)
 	}
-
-	select_item_event(selected_file_index+1)
 }
 export const prev = () => {
-	select_item_event(selected_file_index-1)
+	dispatch("set_file", selected_file_index-1)
 }
 
 let history = []
@@ -29,14 +28,7 @@ export const rand_item = () => {
 		console.log("rand is " + rand)
 	} while(history.indexOf(rand) > -1)
 
-	select_item_event(rand)
+	dispatch("set_file", rand)
-}
-
-// select_item_event signals to the FileViewer that the file needs to be
-// changed. The FileViewer then calls set_item if the change has been approved.
-// ListNavigator cannot call set_item itself because it will cause a loop.
-const select_item_event = idx => {
-	dispatch("set_file", idx)
 }
 
 export const set_item = idx => {
@@ -81,13 +73,14 @@ export const set_item = idx => {
 		<i class="icon">chevron_left</i>
 	</button>
 	<div bind:this={file_list_div} class="list_navigator">
-		{#each files as file, index}
+		{#each files as file, index (file)}
-			<div class="list_item file_button"
+			<a
-				class:file_button_selected={file.selected}
+				href="#item={index}"
-				on:click={() => { select_item_event(index) }}>
+				class="list_item file_button"
+				class:file_button_selected={file.selected}>
 				<img src={file.icon_href+"?width=48&height=48"} alt={file.name} class="list_item_thumbnail" loading="lazy"/>
 				{file.name}
-			</div>
+			</a>
 		{/each}
 	</div>
 	<button class="nav_button" style="margin-left: 0;" on:click={next}>

svelte/src/file_viewer/viewers/Audio.svelte

@@ -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

svelte/src/file_viewer/viewers/FilePreview.svelte

@@ -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"}

svelte/src/file_viewer/viewers/Image.svelte

@@ -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}

svelte/src/file_viewer/viewers/Video.svelte

@@ -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