From 79a7317bf18db757d9b9ec38021635c1b4cf31dc Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Mon, 24 May 2021 11:43:17 +0200
Subject: download json button :tada:

---
 package.json     |  1 +
 pages/editor.tsx | 30 ++++++++++++++++++++++++++----
 yarn.lock        |  5 +++++
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 8b6f2d4..e54d8a8 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
 		"react-use-gesture": "^9.1.3",
 		"timecode-boss": "^4.2.3",
 		"ts-json-schema-generator": "^0.92.0",
+		"uuid": "^8.3.2",
 		"zustand": "^3.5.1"
 	},
 	"devDependencies": {
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 7d8834c..3313e31 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -132,6 +132,12 @@ function TimelineKeyframe(props: {
 		if (!last) return;
 		player.timeline.slides = Array(...workingTimeline);
 		player.timeline.slides.sort((a: anySlide, b: anySlide) => a.frame - b.frame);
+		player.timeline.slides[-1] = { // TODO: dry
+			id: '00000000-0000-0000-0000-000000000000',
+			frame: 0,
+			type: 'default',
+			clickThroughBehaviour: 'ImmediatelySkip',
+		};
 	}, { domTarget: mouseUpListener, eventOptions: { passive: false } });
 
 	return <animated.div
@@ -398,6 +404,12 @@ export default function Index() {
 						reader.readAsDataURL(file);
 					}}
 				/>
+				<Button
+					variant='contained'
+					color='default'
+					children='Load video'
+					onClick={() => document.getElementById('vidUpload').click()}
+				/>
 				<input
 					type='file'
 					id='jsonUpload'
@@ -418,14 +430,24 @@ export default function Index() {
 				<Button
 					variant='contained'
 					color='default'
-					children='Load video'
-					onClick={() => document.getElementById('vidUpload').click()}
+					children='Load json'
+					onClick={() => document.getElementById('jsonUpload').click()}
 				/>
 				<Button
 					variant='contained'
 					color='default'
-					children='Load json'
-					onClick={() => document.getElementById('jsonUpload').click()}
+					children='Download json'
+					onClick={() => {
+						var timeline = Object({ ...(player.timeline) });
+						var data = JSON.stringify(timeline);
+						var blob = new Blob([data], { type: 'application/json' });
+						var a = document.createElement('a');
+						a.href = URL.createObjectURL(blob);
+						a.download = player.timeline.name
+							.toLowerCase()
+							.replace(/\s/g, '-');
+						a.click();
+					}}
 				/>
 			</div>
 			<div className='viewer'>
diff --git a/yarn.lock b/yarn.lock
index afb925c..7ea142c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2323,6 +2323,11 @@ util@^0.11.0:
   dependencies:
     inherits "2.0.3"
 
+uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
 vm-browserify@1.1.2, vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
-- 
cgit v1.2.3