settings saved + project file version bump

2 files changed, 47 insertions, 37 deletions

diff --git a/pages/editor.tsx b/pages/editor.tsx
index b90ba7f..f9c0e80 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -18,13 +18,12 @@ import KeybindSelector from '../components/keybindselector';
 import PlaySkipIconAni from '../components/play-skip';
 import Selection from '../components/selection';
 import TimecodeInput from '../components/timeinput';
-import Project, { arrayBufferToBase64, VideoSources, VideoSourceType } from '../project';
+import Project, { arrayBufferToBase64, PresentationSettings, VideoSources, VideoSourceType } from '../project';
 import timeline, {
 	anySlide,
 	clickThroughBehaviours,
 	loopBeginSlide,
 	loopSlide,
-	presentationSettings,
 	slide,
 	slideTypes,
 	toolToSlide,
@@ -155,9 +154,6 @@ var project = createState<project>({
 	timeline: {
 		name: '',
 		slides: [],
-		settings: {
-			controlType: 'FullScreen',
-		},
 		framerate: 0,
 		framecount: 0,
 	},
@@ -967,15 +963,10 @@ function TimelineEditor() {
 }
 
 function DefaultSettings() {
-	var [nextSlideKeybinds, setNextSlideKeybinds] = useState(['Space', 'n', 'Enter']);
-	var [previousSlideKeybinds, setPreviousSlideKeybinds] = useState(['Backspace', 'p']);
-	var [showMenuKeybinds, setShowMenuKeybinds] = useState(['Escape', 'm']);
-
-	var [videoSourceType, setVideoSourceType] = useState(VideoSources[0].type);
-
-	var proj = useHookstate(project).timeline;
-
 	var ready = useHookstate(global).ready;
+	var [dummy, setDummy] = useState(false);
+	var rerender = () => setDummy(!dummy);
+
 	return <>
 		<h2 className='title posabs h0 t0'>Presentation settings</h2>
 		<div className='scroll posabs h0 b0'>
@@ -983,14 +974,23 @@ function DefaultSettings() {
 				<span className='title'>Controls</span>
 				<div className='sidebyside'>
 					<span className='body'>Allow remote control during presentation</span>
-					<Switch />
+					<Switch
+						value={projectFile.settings.remotes.AllowRemotes}
+						onChange={() => {
+							projectFile.settings.remotes.AllowRemotes = !projectFile.settings.remotes.AllowRemotes;
+							rerender();
+						}}
+					/>
 				</div>
 				<FormControl variant='filled'>
 					<InputLabel>On-screen controls</InputLabel>
 					<Select
-						value={proj.settings.controlType.get()}
-						onChange={e =>
-							proj.settings.controlType.set(e.target.value as presentationSettings['controlType'])}
+						value={projectFile.settings.controls.ControlType}
+						onChange={e => {
+							projectFile.settings.controls.ControlType = e.target
+								.value as PresentationSettings['controls']['ControlType'];
+							rerender();
+						}}
 						IconComponent={ArrowDropDownRoundedIcon}
 					>
 						<MenuItem value='FullScreen'>
@@ -1038,13 +1038,30 @@ function DefaultSettings() {
 			</div>
 			<div className={'section ' + (ready.timeline.value ? '' : 'disabled')}>
 				<span className='title'>Keybindings</span>
-				<KeybindSelector label='Next slide' value={nextSlideKeybinds} onChange={setNextSlideKeybinds} />
+				<KeybindSelector
+					label='Next slide'
+					value={projectFile.settings.keybindings.NextSlide}
+					onChange={e => {
+						projectFile.settings.keybindings.NextSlide = e;
+						rerender();
+					}}
+				/>
 				<KeybindSelector
 					label='Previous slide'
-					value={previousSlideKeybinds}
-					onChange={setPreviousSlideKeybinds}
+					value={projectFile.settings.keybindings.PreviousSlide}
+					onChange={e => {
+						projectFile.settings.keybindings.PreviousSlide = e;
+						rerender();
+					}}
+				/>
+				<KeybindSelector
+					label='Show menu'
+					value={projectFile.settings.keybindings.ShowMenu}
+					onChange={e => {
+						projectFile.settings.keybindings.ShowMenu = e;
+						rerender();
+					}}
 				/>
-				<KeybindSelector label='Show menu' value={showMenuKeybinds} onChange={setShowMenuKeybinds} />
 			</div>
 			<div className={'section ' + (ready.timeline.value ? '' : 'disabled')}>
 				<span className='title'>Source</span>
@@ -1071,7 +1088,13 @@ function DefaultSettings() {
 				<span className='title'>Remotes</span>
 				<div className='sidebyside'>
 					<span className='body'>Allow anonymous remotes</span>
-					<Switch />
+					<Switch
+						value={projectFile.settings.remotes.AllowQRRemotes}
+						onChange={() => {
+							projectFile.settings.remotes.AllowQRRemotes = !projectFile.settings.remotes.AllowQRRemotes;
+							rerender();
+						}}
+					/>
 				</div>
 			</div>
 			<div className='section'>
diff --git a/pages/present.tsx b/pages/present.tsx
index fe46a5f..a99d239 100644
--- a/pages/present.tsx
+++ b/pages/present.tsx
@@ -152,20 +152,7 @@ export class TimedVideoPlayer {
 	}
 
 	loadSlides(jsonString: string) {
-		try {
-			var timeline = JSON.parse(jsonString);
-		} catch (e) {
-			console.log('invalid json object!' + e);
-			return;
-		}
-		var ajv = new Ajv({ allErrors: true });
-		var validate = ajv.compile(timelineSchema);
-		if (!validate(timeline)) {
-			console.log('schema not passed!');
-			return;
-		}
-
-		this.timeline = timeline as timeline;
+		this.timeline = JSON.parse(jsonString) as timeline;
 
 		this.timeline.slides[-1] = {
 			id: '00000000-0000-0000-0000-000000000000',
@@ -214,7 +201,7 @@ export class TimedVideoPlayer {
 export default function Present() {
 	var [dummy, setDummy] = useState(false);
 	var rerender = () => setDummy(!dummy);
-	var [player, setPlayer] = useState(new TimedVideoPlayer());
+	var [player, _setPlayer] = useState(new TimedVideoPlayer());
 
 	useEffect(() => {
 		setInterval(() => {