From 3d396c2a11784a755fa96bb5031250c5d3d52e9e Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Sun, 25 Jul 2021 12:06:34 +0200
Subject: mostly working?

---
 pages/editor.tsx | 73 ++++++++++++++++++++++++++++----------------------------
 1 file changed, 36 insertions(+), 37 deletions(-)

(limited to 'pages')

diff --git a/pages/editor.tsx b/pages/editor.tsx
index 1ae1587..c8de635 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -61,7 +61,8 @@ var keyframeInAnimations: { [key: string]: { x: number; y: number; }; } = {};
 var slideAPIs: { [key: string]: any; }[] = [];
 
 var player = new TimedVideoPlayer();
-var projectFile = new Project();
+var project = new Project();
+player.project = project;
 
 export interface globalState {
 	timeline: {
@@ -140,7 +141,7 @@ var global = createState<globalState>({
 				type: 'default',
 				clickThroughBehaviour: 'ImmediatelySkip',
 			};
-			projectFile.timeline = player.timeline;
+			project.timeline = player.timeline;
 		},
 	},
 });
@@ -497,7 +498,7 @@ function TimelineSelection(props: { selectionDragArea: Ref<ReactNode>; }) {
 				selectionPosAPI.start({ visibility: 0 });
 			} else {
 				var endingFrame = startingFrame + frameWidth;
-				var expandedTimeline = new Array(...projectFile.timeline);
+				var expandedTimeline = new Array(...project.timeline);
 				for (let i = 0; i < expandedTimeline.length; i++) {
 					var slide = expandedTimeline[i];
 					if (slide.type != 'loop') continue;
@@ -656,7 +657,7 @@ function divs(int: number) {
 function getMarkerSpacing() {
 	var zoom = global.timeline.zoom.value;
 	var frameWidth = zoomToPx(zoom);
-	var divvable = divs(Math.round(projectFile?.video?.framerate));
+	var divvable = divs(Math.round(project?.video?.framerate));
 	if (divvable.length == 0) return 30;
 	var minSpacing = 120;
 	var multiply = 1;
@@ -709,7 +710,7 @@ function TimelineEditor() {
 
 	useMousetrap(['.'], () => { // TODO: dry
 		if (!global.ready.timeline.value) return;
-		var frame = Math.min(projectFile?.video?.framecount, global.timeline.frame.value + 1);
+		var frame = Math.min(project?.video?.framecount, global.timeline.frame.value + 1);
 		global.timeline.frame.set(frame);
 		scrubberSpring.start({ frame });
 	});
@@ -919,7 +920,7 @@ function TimelineEditor() {
 			</animated.div>
 			<div
 				className='keyframes'
-				style={{ '--total-frames': projectFile?.video?.framecount } as CSSProperties}
+				style={{ '--total-frames': project?.video?.framecount } as CSSProperties}
 			>
 				<div className='selectionarea posabs v0' ref={selectionDragArea} />
 				{workingTimeline.map(slide =>
@@ -960,9 +961,9 @@ function DefaultSettings() {
 				<div className='sidebyside'>
 					<span className='body'>Allow remote control during presentation</span>
 					<Switch
-						value={projectFile.settings.remotes.AllowRemotes}
+						value={project.settings.remotes.AllowRemotes}
 						onChange={() => {
-							projectFile.settings.remotes.AllowRemotes = !projectFile.settings.remotes.AllowRemotes;
+							project.settings.remotes.AllowRemotes = !project.settings.remotes.AllowRemotes;
 							rerender();
 						}}
 					/>
@@ -970,9 +971,9 @@ function DefaultSettings() {
 				<FormControl variant='filled'>
 					<InputLabel>On-screen controls</InputLabel>
 					<Select
-						value={projectFile.settings.controls.ControlType}
+						value={project.settings.controls.ControlType}
 						onChange={e => {
-							projectFile.settings.controls.ControlType = e.target
+							project.settings.controls.ControlType = e.target
 								.value as PresentationSettings['controls']['ControlType'];
 							rerender();
 						}}
@@ -1025,25 +1026,25 @@ function DefaultSettings() {
 				<span className='title'>Keybindings</span>
 				<KeybindSelector
 					label='Next slide'
-					value={projectFile.settings.keybindings.NextSlide}
+					value={project.settings.keybindings.NextSlide}
 					onChange={e => {
-						projectFile.settings.keybindings.NextSlide = e;
+						project.settings.keybindings.NextSlide = e;
 						rerender();
 					}}
 				/>
 				<KeybindSelector
 					label='Previous slide'
-					value={projectFile.settings.keybindings.PreviousSlide}
+					value={project.settings.keybindings.PreviousSlide}
 					onChange={e => {
-						projectFile.settings.keybindings.PreviousSlide = e;
+						project.settings.keybindings.PreviousSlide = e;
 						rerender();
 					}}
 				/>
 				<KeybindSelector
 					label='Show menu'
-					value={projectFile.settings.keybindings.ShowMenu}
+					value={project.settings.keybindings.ShowMenu}
 					onChange={e => {
-						projectFile.settings.keybindings.ShowMenu = e;
+						project.settings.keybindings.ShowMenu = e;
 						rerender();
 					}}
 				/>
@@ -1053,9 +1054,9 @@ function DefaultSettings() {
 				<FormControl variant='filled'>
 					<InputLabel>Video source</InputLabel>
 					<Select
-						value={projectFile.video?.type || ''}
+						value={project.video?.type || ''}
 						onChange={e => {
-							projectFile.video = new (VideoSources.find(s =>
+							project.video = new (VideoSources.find(s =>
 								s.type == e.target.value as VideoSourceType
 							).class)();
 							rerender();
@@ -1066,9 +1067,9 @@ function DefaultSettings() {
 					</Select>
 				</FormControl>
 				{(() => {
-					if (!projectFile.video) return null;
-					var SourceSettings = VideoSources.find(s => s.type == projectFile.video.type).settings;
-					return <SourceSettings settings={projectFile.video} player={player} global={global} />;
+					if (!project.video) return null;
+					var SourceSettings = VideoSources.find(s => s.type == project.video.type).settings;
+					return <SourceSettings settings={project.video} player={player} global={global} />;
 				})()}
 			</div>
 			<div className={'section ' + (ready.timeline.value ? '' : 'disabled')}>
@@ -1076,9 +1077,9 @@ function DefaultSettings() {
 				<div className='sidebyside'>
 					<span className='body'>Allow anonymous remotes</span>
 					<Switch
-						value={projectFile.settings.remotes.AllowQRRemotes}
+						value={project.settings.remotes.AllowQRRemotes}
 						onChange={() => {
-							projectFile.settings.remotes.AllowQRRemotes = !projectFile.settings.remotes.AllowQRRemotes;
+							project.settings.remotes.AllowQRRemotes = !project.settings.remotes.AllowQRRemotes;
 							rerender();
 						}}
 					/>
@@ -1096,15 +1097,15 @@ function DefaultSettings() {
 						if (!file) return;
 						var reader = new FileReader();
 						reader.addEventListener('load', async ev => {
-							await projectFile.openProject(ev.target.result as ArrayBuffer);
+							await project.openProject(ev.target.result as ArrayBuffer);
 
-							player.loadSlides(projectFile.timeline);
-							projectFile.timeline = player.timeline;
+							player.loadSlides(project.timeline);
+							project.timeline = player.timeline;
 							global.timeline.workingTimeline.set(player.timeline);
 							global.update.refreshLiveTimeline.value();
 							global.ready.timeline.set(true);
 
-							player.loadVideo(arrayBufferToBase64(projectFile.video.source, projectFile.video.mimetype));
+							player.loadVideo(arrayBufferToBase64(project.video.source, project.video.mimetype));
 							global.ready.video.available.set(true);
 
 							player.player.addEventListener(
@@ -1131,9 +1132,9 @@ function DefaultSettings() {
 					children='Download .prspr'
 					startIcon={<DescriptionRoundedIcon />}
 					onClick={async () => {
-						projectFile.timeline = player.timeline;
-						projectFile.saveProject();
-						projectFile.downloadProjectFile();
+						project.timeline = player.timeline;
+						project.saveProject();
+						project.downloadProjectFile();
 					}}
 				/>
 				<Button
@@ -1142,8 +1143,8 @@ function DefaultSettings() {
 					children='New project'
 					onClick={() => {
 						player.loadSlides([]);
-						projectFile.timeline = player.timeline;
-						projectFile.name = 'New project';
+						project.timeline = player.timeline;
+						project.name = 'New project';
 						global.timeline.workingTimeline.set(player.timeline);
 						global.update.refreshLiveTimeline.value();
 						global.ready.timeline.set(true);
@@ -1279,11 +1280,9 @@ function Tools() {
 	useMousetrap(['e'], switchToTool('delay'));
 	useMousetrap(['s'], switchToTool('speedChange'));
 
-	// ! TODO: read fps from projectFile
-
 	return <div className='tools'>
 		<div className={'time posrel ' + (ready.timeline.get() ? '' : 'disabled')}>
-			<span className='framerate numbers posabs l0 t0'>@{projectFile?.video?.framerate}fps</span>
+			<span className='framerate numbers posabs l0 t0'>@{project?.video?.framerate}fps</span>
 			<h2 className='timecode numbers posabs r0 t0'>
 				{player.frameToTimestampString(frame.get(), false)}
 			</h2>
@@ -1433,8 +1432,8 @@ function TitleBar() {
 					contentEditable
 					spellCheck={false}
 					ref={nameRef}
-					onBlur={() => projectFile.name = (nameRef.current as HTMLSpanElement).textContent.trim()}
-					children={projectFile.name}
+					onBlur={() => project.name = (nameRef.current as HTMLSpanElement).textContent.trim()}
+					children={project.name}
 				/>
 			</div>
 		</Toolbar>
-- 
cgit v1.2.3