closes #4; add local video support

main.ts

@@ -1,4 +1,4 @@
-import { Editor, MarkdownView, Plugin, } from 'obsidian';
+import { Editor, MarkdownView, Plugin, Modal, App } from 'obsidian';
 import ReactPlayer from 'react-player/lazy'
 
 import { VideoView, VIDEO_VIEW } from './view/VideoView';
@@ -147,6 +147,18 @@ export default class TimestampPlugin extends Plugin {
 			}
 		});
 
+		// This adds a complex command that can check whether the current state of the app allows execution of the command
+		this.addCommand({
+			id: 'open-sample-modal-complex',
+			name: 'Open sample modal (complex)',
+			editorCallback: (editor: Editor, view: MarkdownView) => {
+				this.editor = editor;
+				new SampleModal(this.app, this.activateView.bind(this), editor).open();
+				// This command will only show up in Command Palette when the check function returns true
+				return true;
+			}
+		});
+
 		// This adds a settings tab so the user can configure various aspects of the plugin
 		this.addSettingTab(new TimestampPluginSettingTab(this.app, this));
 	}
@@ -220,3 +232,35 @@ export default class TimestampPlugin extends Plugin {
 		await this.saveData(this.settings);
 	}
 }
+
+class SampleModal extends Modal {
+	editor: Editor;
+	activateView: (url: string, editor: Editor) => void;
+	constructor(app: App, activateView: (url: string, editor: Editor) => void, editor: Editor) {
+		super(app);
+		this.activateView = activateView;
+		this.editor = editor;
+	}
+
+	onOpen() {
+		const { contentEl } = this;
+		// add an input field to contentEl
+
+		const input = contentEl.createEl('input');
+		input.setAttribute("type", "file");
+		input.onchange = (e: any) => {
+			// accept local video input and make a url from input
+			const url = URL.createObjectURL(e.target.files[0]);
+			this.activateView(url, this.editor);
+
+			// Can't get the buttons to work with local videos unfortunately
+			// this.editor.replaceSelection("\n" + "```timestamp-url \n " + url.trim() + "\n ```\n")
+			this.close();
+		}
+	}
+
+	onClose() {
+		const { contentEl } = this;
+		contentEl.empty();
+	}
+}

view/VideoContainer.tsx

@@ -26,18 +26,19 @@ export const VideoContainer = ({ url, setupPlayer, start, setupError }: VideoCon
 	}
 
 	return (
-		<ReactPlayer
-			ref={playerRef}
-			url={url}
-			playing={playing}
-			//toggleplaying={(tmp: number) => setPlaying(!playing)}
-			controls={true}
-			width='100%'
-			height='100%'
-			onReady={onReady}
-			onError={(err) => setupError(err ?
-				err.message :
-				`Video is unplayable due to privacy settings, streaming permissions, etc.`)} // Error handling for invalid URLs
-		/>
+		<>
+			<ReactPlayer
+				ref={playerRef}
+				url={url}
+				playing={playing}
+				controls={true}
+				width='100%'
+				height='95%'
+				onReady={onReady}
+				onError={(err) => setupError(err ?
+					err.message :
+					`Video is unplayable due to privacy settings, streaming permissions, etc.`)} // Error handling for invalid URLs
+			/>
+		</>
 	)
 };