From 92a770d8b217974f4a705262af0ee0597ae87bfa Mon Sep 17 00:00:00 2001
From: Jonathan Dortheimer <jonathan@dortheimer.com>
Date: Fri, 30 Jul 2021 16:37:40 +0300
Subject: [PATCH 1/2] Reorganizing code

---
 src/App.svelte                                | 317 ++++++++++--------
 src/Temp.svelte                               |  29 --
 src/{ => componenets}/Controls.svelte         |   2 +-
 src/{ => componenets}/DataTable.svelte        |   0
 src/{ => componenets}/MainVid.svelte          |   8 +-
 src/{ => componenets}/Map.svelte              |   8 +-
 src/{ => componenets}/Tagbox.svelte           |   2 +-
 src/{ => componenets}/Transcript.svelte       |   4 +-
 src/{ => componenets}/View.svelte             |   0
 src/{ => componenets}/Views.svelte            |   4 +-
 .../WaveSurferControler.svelte                |   3 +-
 src/stores.ts                                 |  97 ------
 src/util.js                                   |   7 -
 13 files changed, 193 insertions(+), 288 deletions(-)
 delete mode 100644 src/Temp.svelte
 rename src/{ => componenets}/Controls.svelte (99%)
 rename src/{ => componenets}/DataTable.svelte (100%)
 rename src/{ => componenets}/MainVid.svelte (90%)
 rename src/{ => componenets}/Map.svelte (98%)
 rename src/{ => componenets}/Tagbox.svelte (97%)
 rename src/{ => componenets}/Transcript.svelte (98%)
 rename src/{ => componenets}/View.svelte (100%)
 rename src/{ => componenets}/Views.svelte (93%)
 rename src/{ => componenets}/WaveSurferControler.svelte (99%)
 delete mode 100644 src/stores.ts
 delete mode 100644 src/util.js

diff --git a/src/App.svelte b/src/App.svelte
index 6c697ae..36010b1 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,27 +1,34 @@
 <script>
   // Creates a Svelte store (https://svelte.dev/tutorial/writable-stores) that syncs with the named Traitlet in widget.ts and example.py.
-  import { createValue, curKeypoint, timingObject, keypointDefined } from './stores';
+  import {
+    createValue,
+    curKeypoint,
+    timingObject,
+    keypointDefined,
+  } from './stores';
   import { onMount } from 'svelte';
-  import Map from './Map.svelte';
-  import MainVid from './MainVid.svelte';
-  import Transcript from './Transcript.svelte'
-  import WaveSurferControler from './WaveSurferControler.svelte'
-  import Views from './Views.svelte'
-  import Tagbox from './Tagbox.svelte'
-  import Controls from './Controls.svelte'
-  import DataTable from './DataTable.svelte'
+  import Map from './componenets/Map.sveltes/Map.svelte';
+  import MainVid from './componenets/MainVid.svelte';
+  import Transcript from './componenets/Transcript.svelte';
+  import WaveSurferControler from './componenets/WaveSurferControler.svelte';
+  import Tagbox from './componenets/Tagbox.svelte';
+  import Controls from './componenets/Controls.svelte';
+  import DataTable from './componenets/DataTable.svelte';
+
+  import Views from './componenets/Views.svelte';
+
   export let model;
-  $: console.log(setActiveRegion)
+  $: console.log(setActiveRegion);
 
-  let gps = createValue(model, 'gps', '')
-  let vidSrc= createValue(model, 'src', '')
+  let gps = createValue(model, 'gps', '');
+  let vidSrc = createValue(model, 'src', '');
   let transcriptSrc = createValue(model, 'transcript', '');
-  let transcriptLang = createValue(model, 'transcript_lang', '')
-  let mapStyle = createValue(model, 'map_style', '')
-  let duration = createValue(model, 'duration', '')
-  let views = createValue(model, 'views', [])
-  let author = createValue(model, 'author', '')
-  let keypoints = createValue(model, '_keypoints', [])
+  let transcriptLang = createValue(model, 'transcript_lang', '');
+  let mapStyle = createValue(model, 'map_style', '');
+  let duration = createValue(model, 'duration', '');
+  let views = createValue(model, 'views', []);
+  let author = createValue(model, 'author', '');
+  let keypoints = createValue(model, '_keypoints', []);
 
   // setup static values of curKeypoint
   $curKeypoint.src = $vidSrc;
@@ -29,8 +36,10 @@
 
   let vid;
   const togglePlay = () => {
-    $timingObject.query().velocity ? $timingObject.update({velocity:0}): $timingObject.update({velocity:1})
-  }
+    $timingObject.query().velocity
+      ? $timingObject.update({ velocity: 0 })
+      : $timingObject.update({ velocity: 1 });
+  };
 
   let tagChecks;
   let quickTag;
@@ -42,22 +51,24 @@
   let position = 0;
   let volume;
   let updateZoom;
-  const updateTiming = (timestamp) =>{
-    ({velocity, position} =  $timingObject.query());
+  const updateTiming = (timestamp) => {
+    ({ velocity, position } = $timingObject.query());
     // console.log(timeString)
 
-    requestAnimationFrame(updateTiming)
-  }
+    requestAnimationFrame(updateTiming);
+  };
 
-  $: if($tags.length){ shortcuts= "qwerasdfzxcvtyuighjk".slice(0,$tags.length)}
-  let tags = createValue(model, 'tags', [])
+  $: if ($tags.length) {
+    shortcuts = 'qwerasdfzxcvtyuighjk'.slice(0, $tags.length);
+  }
+  let tags = createValue(model, 'tags', []);
 
   // for async passing data to componenents when video loads
   let onCuesLoad;
   let onTimelineDataLoad;
   let onMapDataLoad;
-  let selectNextTag
-  let tagAction
+  let selectNextTag;
+  let tagAction;
   let syncKeypoints;
   let hideSaved;
   let setActiveRegion;
@@ -67,161 +78,181 @@
   let topRow;
 
   // TODO: this is hacky and should be done properly with css?
-  $:if (topRow){ topRow.style.height =`${height}px` }
+  $: if (topRow) {
+    topRow.style.height = `${height}px`;
+  }
   let transcript;
   let timeline;
   let widget;
-  
-  const handleTranscript = (vid) => {
-    onCuesLoad(vid.detail) 
 
-  }
+  const handleTranscript = (vid) => {
+    onCuesLoad(vid.detail);
+  };
 
   const handleTimeline = (vid) => {
-    onTimelineDataLoad(vid.detail)
-    if($gps){onMapDataLoad(vid.detail)}
-  }
+    onTimelineDataLoad(vid.detail);
+    if ($gps) {
+      onMapDataLoad(vid.detail);
+    }
+  };
 
-  const handleBackendMsg =(e) =>{
-    switch(e.type){
+  const handleBackendMsg = (e) => {
+    switch (e.type) {
       case 'keypoints_updated':
         syncKeypoints();
         break;
       default:
         break;
     }
-  }
+  };
 
   // i think this is the best way to handle keyboard shortcuts when the widget is in focus
   // I could be totally wrong about that but it seems like you want to capture keypresses at then pass them to the relevent componenets?
   // do we want to "take up" the tab key like this?
   let onKeypress = (e) => {
-      console.log(e)
-      if(e.ctrlKey){
-        switch (e.code) {
-          case "KeyQ":
-            quickTag = !quickTag
-            break;
-          case "KeyS":
-            tagAction('save')
-            break;
-          case "Backspace":
-            tagAction('delete')
-          case 'KeyH':
-            toggleHideSaved()
-          default:
-            break;
-        }
-      } else if(e.shiftKey){
-        switch(e.key){
-          case " ":
-            e.preventDefault()
-            togglePlay() 
-            break;
-          case "Tab":
-            e.preventDefault();
-            selectNextTag('reverse')
-            break;
-          case "ArrowLeft":
-            e.preventDefault();
-            updatePos(-10)
-            break;
-          case "ArrowRight":
-            e.preventDefault();
-            updatePos(10)
-            break;
-          default: 
-            break;
-        }
+    console.log(e);
+    if (e.ctrlKey) {
+      switch (e.code) {
+        case 'KeyQ':
+          quickTag = !quickTag;
+          break;
+        case 'KeyS':
+          tagAction('save');
+          break;
+        case 'Backspace':
+          tagAction('delete');
+        case 'KeyH':
+          toggleHideSaved();
+        default:
+          break;
+      }
+    } else if (e.shiftKey) {
+      switch (e.key) {
+        case ' ':
+          e.preventDefault();
+          togglePlay();
+          break;
+        case 'Tab':
+          e.preventDefault();
+          selectNextTag('reverse');
+          break;
+        case 'ArrowLeft':
+          e.preventDefault();
+          updatePos(-10);
+          break;
+        case 'ArrowRight':
+          e.preventDefault();
+          updatePos(10);
+          break;
+        default:
+          break;
+      }
+    } else {
+      const idx = shortcuts.indexOf(e.key);
+      if (e.key == 'Tab') {
+        e.preventDefault();
+        selectNextTag('forward');
+      } else if (quickTag && idx >= 0) {
+        tagChecks.children[idx].firstElementChild.click();
       }
-      else{
-        const idx = shortcuts.indexOf(e.key)
-        if(e.key == "Tab") {e.preventDefault(); selectNextTag('forward') }
-        
-        else if (quickTag && idx >=0){ tagChecks.children[idx].firstElementChild.click() }
-          }
     }
+  };
 
   onMount(() => {
-    widget.onkeydown =  e => onKeypress(e) 
+    widget.onkeydown = (e) => onKeypress(e);
     model.on('msg:custom', handleBackendMsg);
     requestAnimationFrame(updateTiming);
-  })
-  
+  });
 </script>
 
-
-<style>
-  .widget:focus {
-    outline-width: 0;
-    /*height: 90vh;*/
-  }
-  .container {
-    display: flex;
-    flex-direction: row;
-    /*overflow: auto;*/
-    min-height: 25vh;
-  }
-
-  .bottom-row {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      grid-gap: 10px;
-  }
-
-</style>
 <div class="widget" bind:this={widget} tabindex="-1">
- <div class="container" bind:this={topRow}>
-  <div>
-      <MainVid src={$vidSrc}
-               transcript={$transcriptSrc}
-               transcript_lang={$transcriptLang}
-               bind:height
-               bind:volume
-               on:trackLoaded={handleTranscript}
-               on:durationLoaded|once={handleTimeline}/>
+  <div class="container" bind:this={topRow}>
+    <div>
+      <MainVid
+        src={$vidSrc}
+        transcript={$transcriptSrc}
+        transcript_lang={$transcriptLang}
+        bind:height
+        bind:volume
+        on:trackLoaded={handleTranscript}
+        on:durationLoaded|once={handleTimeline}
+      />
     </div>
     {#if $views[0]}
       <Views views={$views} />
     {/if}
     {#if $transcriptSrc}
-      <Transcript bind:onCuesLoad/>
+      <Transcript bind:onCuesLoad />
     {/if}
     {#if $gps}
-      <Map gps={$gps} mapStyle={$mapStyle} bind:onMapDataLoad bind:position/>
+      <Map gps={$gps} mapStyle={$mapStyle} bind:onMapDataLoad bind:position />
     {/if}
   </div>
-  <WaveSurferControler bind:keypoints={$keypoints}
-                       bind:onTimelineDataLoad 
-                       bind:selectNextTag
-                       bind:tagAction
-                       bind:syncKeypoints
-                       bind:updateZoom
-                       bind:hideSaved
-                       bind:setActiveRegion/>
-        <Controls bind:velocity 
-                bind:position 
-                bind:volume 
-                bind:updateZoom 
-                bind:updatePos 
-                bind:hideSaved/>
-  <div class='bottom-row'>
+  <WaveSurferControler
+    bind:keypoints={$keypoints}
+    bind:onTimelineDataLoad
+    bind:selectNextTag
+    bind:tagAction
+    bind:syncKeypoints
+    bind:updateZoom
+    bind:hideSaved
+    bind:setActiveRegion
+  />
+  <Controls
+    bind:velocity
+    bind:position
+    bind:volume
+    bind:updateZoom
+    bind:updatePos
+    bind:hideSaved
+  />
+  <div class="bottom-row">
     <div>
-      <DataTable bind:keypoints={$keypoints} bind:setActiveRegion/>
+      <DataTable bind:keypoints={$keypoints} bind:setActiveRegion />
     </div>
-    <Tagbox 
-    bind:tags={$tags} 
-    bind:activeRegion 
-    bind:tagChecks 
-    bind:quickTag 
-    bind:locked 
-    bind:position>
-
+    <Tagbox
+      bind:tags={$tags}
+      bind:activeRegion
+      bind:tagChecks
+      bind:quickTag
+      bind:locked
+      bind:position
+    >
       {#if $keypointDefined.start}
-        <button on:click={()=>{tagAction('delete')}}> Delete Tag </button>
-        <button on:click={()=>{tagAction('save')}}> Save Tag </button>
+        <button
+          on:click={() => {
+            tagAction('delete');
+          }}
+        >
+          Delete Tag
+        </button>
+        <button
+          on:click={() => {
+            tagAction('save');
+          }}
+        >
+          Save Tag
+        </button>
       {/if}
-
     </Tagbox>
   </div>
 </div>
+
+<style>
+  .widget:focus {
+    outline-width: 0;
+    /*height: 90vh;*/
+  }
+  .container {
+    display: flex;
+    flex-direction: row;
+    /*overflow: auto;*/
+    min-height: 25vh;
+  }
+
+  .bottom-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 10px;
+  }
+</style>
diff --git a/src/Temp.svelte b/src/Temp.svelte
deleted file mode 100644
index 23771c6..0000000
--- a/src/Temp.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- By default there are no controls so let's turn them on. -->
-<script >
-  import { Player, Video } from '@vime/svelte';
-</script>
-
-<style>
-  div{
-    width: 100%;
-  }
-</style>
-
-<div>
-<Player controls>
-  <video crossorigin="" poster="https://media.vimejs.com/poster.png">
-    <!-- These are passed directly to the underlying HTML5 `<video>` element. -->
-    <!-- Why `data-src`? Lazy loading, you can always use `src` if you prefer.  -->
-    <source data-src="https://media.vimejs.com/720p.mp4" type="video/mp4" />
-    <track
-      default
-      kind="subtitles"
-      src="https://media.vimejs.com/subs/english.vtt"
-      srclang="en"
-      label="English"
-    />
-  </video>
-
-  <!-- ... -->
-</Player>
-</div>
\ No newline at end of file
diff --git a/src/Controls.svelte b/src/componenets/Controls.svelte
similarity index 99%
rename from src/Controls.svelte
rename to src/componenets/Controls.svelte
index 6e3c701..b2b46cd 100644
--- a/src/Controls.svelte
+++ b/src/componenets/Controls.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
-	import { curTime, curKeypoint, keypointDefined, timingObject } from './stores';
+	import { curTime, curKeypoint, keypointDefined, timingObject } from '../lib/stores';
 
 	export let velocity;
 	export let position;
diff --git a/src/DataTable.svelte b/src/componenets/DataTable.svelte
similarity index 100%
rename from src/DataTable.svelte
rename to src/componenets/DataTable.svelte
diff --git a/src/MainVid.svelte b/src/componenets/MainVid.svelte
similarity index 90%
rename from src/MainVid.svelte
rename to src/componenets/MainVid.svelte
index 8020ab1..e276c4c 100644
--- a/src/MainVid.svelte
+++ b/src/componenets/MainVid.svelte
@@ -1,7 +1,9 @@
 <script>
-	import { curTime, timingObject } from './stores';
-	import { onMount } from 'svelte';
-	import { setTimingsrc } from 'timingsrc';
+		import { onMount } from 'svelte';
+		import { setTimingsrc } from 'timingsrc';
+
+	import { curTime, timingObject } from '../lib/stores';
+
 	let vid;
 	let container;
 	export let height;
diff --git a/src/Map.svelte b/src/componenets/Map.svelte
similarity index 98%
rename from src/Map.svelte
rename to src/componenets/Map.svelte
index e7a1fb5..0803cbc 100644
--- a/src/Map.svelte
+++ b/src/componenets/Map.svelte
@@ -4,10 +4,12 @@
   import { gpx } from "@tmcw/togeojson";
   import mapboxgl from 'mapbox-gl';
   import { onMount } from 'svelte';
-  import { curTime, curKeypoint, timingObject } from './stores.ts';
-  import { point } from '@turf/helpers';
-  import { getId } from './util'
   import nearestPointOnLine from '@turf/nearest-point-on-line';
+  import { point } from '@turf/helpers';
+
+  import { curTime, curKeypoint, timingObject } from '../lib/stores.ts';
+  import { getId } from '../lib/util'
+  
   let mapRef;
   let line;
   let container
diff --git a/src/Tagbox.svelte b/src/componenets/Tagbox.svelte
similarity index 97%
rename from src/Tagbox.svelte
rename to src/componenets/Tagbox.svelte
index f48e494..e35bb51 100644
--- a/src/Tagbox.svelte
+++ b/src/componenets/Tagbox.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
-	import { curTime, curKeypoint, keypointDefined} from './stores';
+	import { curTime, curKeypoint, keypointDefined} from '../lib/stores';
 
 	// export let activeRegion
 	export let locked = new Set();
diff --git a/src/Transcript.svelte b/src/componenets/Transcript.svelte
similarity index 98%
rename from src/Transcript.svelte
rename to src/componenets/Transcript.svelte
index 225f741..4a612e3 100644
--- a/src/Transcript.svelte
+++ b/src/componenets/Transcript.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { onMount, tick } from 'svelte';
-	import { curTime, curKeypoint, keypointDefined, timingObject } from './stores';
-	import { getId } from './util'
+	import { curTime, curKeypoint, keypointDefined, timingObject } from '../lib/stores';
+	import { getId } from '../lib/util'
 	let cueData;
 	let transcriptBox;
 	let currentCue;
diff --git a/src/View.svelte b/src/componenets/View.svelte
similarity index 100%
rename from src/View.svelte
rename to src/componenets/View.svelte
diff --git a/src/Views.svelte b/src/componenets/Views.svelte
similarity index 93%
rename from src/Views.svelte
rename to src/componenets/Views.svelte
index 041619d..b2260a7 100644
--- a/src/Views.svelte
+++ b/src/componenets/Views.svelte
@@ -1,7 +1,9 @@
 <script>
-	import { curTime, timingObject } from './stores';
 	import { onMount } from 'svelte';
 	import View from './View.svelte'
+
+	import { curTime, timingObject } from '../lib/stores';
+
 	export let views;
 	let hidden = false;
 
diff --git a/src/WaveSurferControler.svelte b/src/componenets/WaveSurferControler.svelte
similarity index 99%
rename from src/WaveSurferControler.svelte
rename to src/componenets/WaveSurferControler.svelte
index 6e7ded7..0cfc3d3 100644
--- a/src/WaveSurferControler.svelte
+++ b/src/componenets/WaveSurferControler.svelte
@@ -1,10 +1,11 @@
 <script>
-	import { curTime, curKeypoint, keypointDefined, timingObject } from './stores';
 	import WaveSurfer from "wavesurfer.js";
 	import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.min.js';
 	import RegionsPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.regions.min.js';
 	import MinimapPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.minimap.js';
 	import { onMount, onDestroy } from "svelte";
+	import { curTime, curKeypoint, keypointDefined, timingObject } from '../lib/stores';
+
 	import Tagbox from './Tagbox.svelte';
 
 	let wavesurfer
diff --git a/src/stores.ts b/src/stores.ts
deleted file mode 100644
index d0a67d9..0000000
--- a/src/stores.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import type { Writable } from 'svelte/store';
-import { writable, get, derived } from 'svelte/store';
-
-import { TimingObject } from 'timing-object';
-export const timingObject: Writable<any> = writable(new TimingObject());
-
-interface pt {
-  src: string;
-  author: string;
-  id: string | null | undefined;
-  start: number | null | undefined;
-  end: number | null | undefined;
-  tags: Array<string>;
-  comments: string | null | undefined;
-}
-function Keypoint() {
-  const store: Writable<pt> = writable({
-    src: '',
-    author: '',
-    id: '',
-    start: null,
-    end: null,
-    tags: [],
-    comments: null,
-  });
-  return {
-    set: store.set,
-    subscribe: store.subscribe,
-    resetKeypoint: () => {
-      store.update((state: pt) => {
-        state.start = null;
-        state.end = null;
-        state.tags = [];
-        state.id = null;
-        state.comments = null;
-        return state;
-      });
-    },
-    resetKeypointTimes: () => {
-      store.update((state: pt) => {
-        console.log(state);
-        state.start = null;
-        state.end = null;
-        state.id = null;
-        console.log(state);
-        return state;
-      });
-    },
-    getValues: () => {
-      return get(store);
-    }, //i can delete this?
-  };
-}
-export const curKeypoint = Keypoint();
-export const keypointDefined = derived(curKeypoint, ($curKeypoint) => {
-  return {
-    start: $curKeypoint.start || $curKeypoint.start === 0 ? true : false,
-    end: $curKeypoint.end || $curKeypoint.end === 0 ? true : false,
-    full:
-      ($curKeypoint.start || $curKeypoint.start === 0) &&
-      ($curKeypoint.end || $curKeypoint.end === 0)
-        ? true
-        : false,
-  };
-});
-export function createValue(model: any, name_: string, value_: any) {
-  const name: string = name_;
-  // const curVal: Writable<any> = writable(value_);
-  const modelValue = model.get(name);
-  // https://github.com/cabreraalex/widget-svelte-cookiecutter/pull/7/commits/a63f0151b198b86c7a4a9c533f4cb22a03b65f54
-  const curVal: Writable<any> = writable(
-    modelValue === undefined ? value_ : modelValue
-  );
-
-  model.on('change:' + name, () => curVal.set(model.get(name)), null);
-
-  return {
-    set: (v: any) => {
-      curVal.set(v);
-      model.set(name, v);
-      model.save_changes();
-    },
-    subscribe: curVal.subscribe,
-    update: (func: any) => {
-      curVal.update((v: any) => {
-        const out = func(v);
-        model.set(name, out);
-        model.save_changes();
-        return out;
-      });
-    },
-  };
-}
-
-export const curTime: Writable<any> = writable(0);
-export const tags: Writable<any> = writable([]);
-// export const activeRegion: Writable<any> = writable({});
diff --git a/src/util.js b/src/util.js
deleted file mode 100644
index eb19f18..0000000
--- a/src/util.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// https://github.com/katspaugh/wavesurfer.js/blob/master/src/util/get-id.js
-export function getId(prefix) {
-  if (prefix === undefined) {
-    prefix = '_';
-  }
-  return prefix + Math.random().toString(32).substring(2);
-}

From c608c7f0fc43cfa3ec218fdde8f990dfbcec3799 Mon Sep 17 00:00:00 2001
From: Jonathan Dortheimer <jonathan@dortheimer.com>
Date: Fri, 30 Jul 2021 17:54:22 +0300
Subject: [PATCH 2/2] Fixed import and keyboard events

---
 src/App.svelte | 71 ++++++++++++++++----------------------------------
 1 file changed, 22 insertions(+), 49 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 36010b1..54ccac8 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -5,9 +5,9 @@
     curKeypoint,
     timingObject,
     keypointDefined,
-  } from './stores';
+  } from './lib/stores';
   import { onMount } from 'svelte';
-  import Map from './componenets/Map.sveltes/Map.svelte';
+  import Map from './componenets/Map.svelte';
   import MainVid from './componenets/MainVid.svelte';
   import Transcript from './componenets/Transcript.svelte';
   import WaveSurferControler from './componenets/WaveSurferControler.svelte';
@@ -109,53 +109,24 @@
   // i think this is the best way to handle keyboard shortcuts when the widget is in focus
   // I could be totally wrong about that but it seems like you want to capture keypresses at then pass them to the relevent componenets?
   // do we want to "take up" the tab key like this?
-  let onKeypress = (e) => {
-    console.log(e);
-    if (e.ctrlKey) {
-      switch (e.code) {
-        case 'KeyQ':
-          quickTag = !quickTag;
-          break;
-        case 'KeyS':
-          tagAction('save');
-          break;
-        case 'Backspace':
-          tagAction('delete');
-        case 'KeyH':
-          toggleHideSaved();
-        default:
-          break;
-      }
-    } else if (e.shiftKey) {
-      switch (e.key) {
-        case ' ':
-          e.preventDefault();
-          togglePlay();
-          break;
-        case 'Tab':
-          e.preventDefault();
-          selectNextTag('reverse');
-          break;
-        case 'ArrowLeft':
-          e.preventDefault();
-          updatePos(-10);
-          break;
-        case 'ArrowRight':
-          e.preventDefault();
-          updatePos(10);
-          break;
-        default:
-          break;
-      }
-    } else {
-      const idx = shortcuts.indexOf(e.key);
-      if (e.key == 'Tab') {
-        e.preventDefault();
-        selectNextTag('forward');
-      } else if (quickTag && idx >= 0) {
-        tagChecks.children[idx].firstElementChild.click();
-      }
-    }
+
+  const onKeypress = (e) => {
+    
+    const idx = shortcuts.indexOf(e.key);
+
+    if (e.ctrlKey && e.code === 'KeyQ') return quickTag = !quickTag;
+    if (e.ctrlKey && e.code === 'KeyS') return tagAction('save');
+    if (e.ctrlKey && e.code === 'Backspace') return tagAction('delete');
+    if (e.ctrlKey && e.code === 'KeyH') return toggleHideSaved();
+
+    if (e.shiftKey && e.key === ' ') {e.preventDefault(); return toggleHideSaved();}
+    if (e.shiftKey && e.key === 'Tab') {e.preventDefault(); return selectNextTag('reverse');}
+    if (e.shiftKey && e.key === 'ArrowLeft') {e.preventDefault(); return updatePos(-10);}
+    if (e.shiftKey && e.key === 'ArrowRight') {e.preventDefault(); return updatePos(10);}
+
+    if (e.key == 'Tab') { e.preventDefault(); return selectNextTag('forward'); }
+    if (quickTag && idx >= 0) tagChecks.children[idx].firstElementChild.click();
+
   };
 
   onMount(() => {
@@ -165,6 +136,8 @@
   });
 </script>
 
+<svelte:window on:onKeypress={onKeypress}/>
+
 <div class="widget" bind:this={widget} tabindex="-1">
   <div class="container" bind:this={topRow}>
     <div>