Save video playback position in browser localstorage

svelte/src/file_viewer/GalleryView.svelte

@@ -3,6 +3,8 @@ import { createEventDispatcher } from "svelte"
 import { flip } from "svelte/animate"
 import FilePicker from "./FilePicker.svelte"
 import { file_type } from "./FileUtilities.svelte";
+import { get_video_position } from "./../lib/VideoPosition.mjs"
+import ProgressBar from "./../util/ProgressBar.svelte"
 let dispatch = createEventDispatcher()
 
 export let list = {
@@ -112,6 +114,7 @@ const drop = (e, index) => {
 	{/if}
 
 	{#each list.files as file, index (file)}
+		{@const vp = get_video_position(file.id)}
 		<a
 			href="#item={index}"
 			class="file"
@@ -145,7 +148,13 @@ const drop = (e, index) => {
 						</button>
 					</div>
 				{/if}
+
+				{#if vp !== null}
+					<div class="grow"></div>
+					<ProgressBar no_margin used={vp.pos} total={vp.dur}/>
+				{/if}
 			</div>
+
 			{file.name}
 		</a>
 	{/each}
@@ -195,6 +204,8 @@ const drop = (e, index) => {
 	text-decoration: none;
 }
 .icon_container {
+	display: flex;
+	flex-direction: column;
 	margin: 3px;
 	height: 148px;
 	border-radius: 6px;
@@ -248,4 +259,7 @@ const drop = (e, index) => {
 	flex-direction: column;
 	justify-content: center;
 }
+.grow {
+	flex: 1 1 auto;
+}
 </style>

svelte/src/file_viewer/viewers/Video.svelte

@@ -1,5 +1,6 @@
 <script>
-import { onMount,  createEventDispatcher, tick } from "svelte";
+import { onMount, createEventDispatcher, tick } from "svelte";
+import { video_position } from "../../lib/VideoPosition.mjs";
 import BandwidthUsage from "./BandwidthUsage.svelte";
 import IconBlock from "../../layout/IconBlock.svelte";
 let dispatch = createEventDispatcher()
@@ -140,6 +141,7 @@ const video_keydown = e => {
 					on:play={() => playing = true }
 					on:ended={() => dispatch("next", {})}
 					on:keydown={video_keydown}
+					use:video_position={() => file.id}
 				>
 					<source src={file.get_href} type={file.mime_type} />
 				</video>