aboutsummaryrefslogtreecommitdiff
path: root/pages
diff options
context:
space:
mode:
Diffstat (limited to 'pages')
-rw-r--r--pages/editor.tsx97
1 files changed, 35 insertions, 62 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx
index fac8899..5a63cb4 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -8,18 +8,17 @@ import { v4 as uuid } from 'uuid';
import FadeThroughTransition from '../components/fadethrough';
import {
- BracketsRoundedIcon,
FullScreenControlsRoundedIcon,
MenuBarControlsRoundedIcon,
PressureIcon,
- SlashIconRounded,
+ SlashRoundedIcon,
SlideKeyframe,
} from '../components/icons';
import KeybindSelector from '../components/keybindselector';
import PlaySkipIconAni from '../components/play-skip';
import Selection from '../components/selection';
import TimecodeInput from '../components/timeinput';
-import Project, { LocalVideo } from '../project';
+import Project, { LocalVideo, VideoSources, VideoSourceType } from '../project';
import timeline, {
anySlide,
clickThroughBehaviours,
@@ -34,11 +33,8 @@ import { TimedVideoPlayer } from './present';
import AppBar from '@material-ui/core/AppBar';
import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import MuiDialogTitle from '@material-ui/core/DialogTitle';
import Fab from '@material-ui/core/Fab';
import FormControl from '@material-ui/core/FormControl';
-import IconButton from '@material-ui/core/IconButton';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
@@ -54,18 +50,13 @@ import Icon from '@mdi/react';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ArrowDropDownRoundedIcon from '@material-ui/icons/ArrowDropDownRounded';
-import CloseIcon from '@material-ui/icons/Close';
import FullscreenRoundedIcon from '@material-ui/icons/FullscreenRounded';
-import KeyboardArrowDownRoundedIcon from '@material-ui/icons/KeyboardArrowDownRounded';
import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded';
import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded';
-import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded';
import SkipPreviousRoundedIcon from '@material-ui/icons/SkipPreviousRounded';
import { mdiCursorDefault } from '@mdi/js';
import DescriptionRoundedIcon from '@material-ui/icons/DescriptionRounded';
-import GetAppRoundedIcon from '@material-ui/icons/GetAppRounded';
-import VideoLabelRoundedIcon from '@material-ui/icons/VideoLabelRounded';
var keyframeInAnimations: { [key: string]: { x: number; y: number; }; } = {};
var slideAPIs: { [key: string]: any; }[] = [];
@@ -92,9 +83,6 @@ interface globalState {
right: slideTypes | null;
};
};
- dialog: {
- projectSettings: boolean;
- };
settings: {
node: ReactNode;
name: string;
@@ -130,9 +118,6 @@ var global = createState<globalState>({
right: null,
},
},
- dialog: {
- projectSettings: false,
- },
ready: {
timeline: false,
video: {
@@ -981,50 +966,17 @@ function TimelineEditor() {
</div>;
}
-function DialogBox(props: {
- open?: boolean;
- close: () => any;
- children: ReactNode;
- title: string;
-}) {
- return <Dialog open={props.open} onClose={props.close}>
- <MuiDialogTitle>
- <span className='title'>{props.title}</span>
- <IconButton onClick={props.close} children={<CloseIcon />} />
- </MuiDialogTitle>
- <div className='inner'>
- {props.children}
- </div>
- </Dialog>;
-}
-
-function ProjectSettings() {
- var proj = useHookstate(project).timeline;
- var open = useHookstate(global).dialog.projectSettings;
-
- function close() {
- global.update.refreshLiveTimeline.value();
- open.set(false);
- }
-
- return <DialogBox open={open.get()} close={close} title='Project settings'>
- <div className='body fullwidth-inputs form-spacing'>
- <span>This is being worked on :tada:</span>
- </div>
- </DialogBox>;
-}
-
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;
-
return <>
- <ProjectSettings />
<h2 className='title posabs h0 t0'>Presentation settings</h2>
<div className='scroll posabs h0 b0'>
<div className={'section ' + (ready.timeline.value ? '' : 'disabled')}>
@@ -1094,6 +1046,34 @@ function DefaultSettings() {
/>
<KeybindSelector label='Show menu' value={showMenuKeybinds} onChange={setShowMenuKeybinds} />
</div>
+ <div className={'section ' + (ready.timeline.value ? '' : 'disabled')}>
+ <span className='title'>Source</span>
+ <FormControl variant='filled'>
+ <InputLabel>Video source</InputLabel>
+ <Select
+ value={projectFile.video?.type || ''}
+ onChange={e =>
+ projectFile.video = new (VideoSources.find(s =>
+ s.type == e.target.value as VideoSourceType
+ ).class)()}
+ IconComponent={ArrowDropDownRoundedIcon}
+ >
+ {VideoSources.map(s => <MenuItem value={s.type} children={s.name} />)}
+ </Select>
+ </FormControl>
+ {(() => {
+ if (!projectFile.video) return null;
+ var SourceSettings = VideoSources.find(s => s.type == projectFile.video.type).settings;
+ return <SourceSettings settings={projectFile.video} />;
+ })()}
+ </div>
+ <div className={'section ' + (ready.timeline.value ? '' : 'disabled')}>
+ <span className='title'>Remotes</span>
+ <div className='sidebyside'>
+ <span className='body'>Allow anonymous remotes</span>
+ <Switch />
+ </div>
+ </div>
<div className='section'>
<span className='title'>Cool temporary buttons</span>
<input
@@ -1153,7 +1133,7 @@ function DefaultSettings() {
projectFile.downloadProjectFile();
}}
/>
- <Button
+ {false && <Button
variant='contained'
color='default'
children='New project'
@@ -1170,10 +1150,9 @@ function DefaultSettings() {
global.timeline.workingTimeline.set(player.timeline.slides);
global.update.refreshLiveTimeline.value();
global.ready.timeline.set(true);
- global.dialog.projectSettings.set(true);
}}
startIcon={<AddRoundedIcon />}
- />
+ />}
</div>
</div>
</>;
@@ -1451,7 +1430,7 @@ function TitleBar() {
<h1>pressure</h1>
<div className={'posabs abscenter projarea ' + (ready.timeline.get() ? '' : 'disabled')}>
<span className='projfolder'>My presentations</span>
- <SlashIconRounded />
+ <SlashRoundedIcon />
<span
className='projname'
contentEditable
@@ -1460,12 +1439,6 @@ function TitleBar() {
onBlur={() => proj.name.set((nameRef.current as HTMLSpanElement).textContent.trim())}
children={proj.name.get()}
/>
- <KeyboardArrowDownRoundedIcon
- className='cpointer'
- onClick={() => {
- global.dialog.projectSettings.set(true);
- }}
- />
</div>
</Toolbar>
</AppBar>;