Skip to content

Commit

Permalink
cleaned up code, added icon, removed ribbon icon
Browse files Browse the repository at this point in the history
  • Loading branch information
juliang22 committed Jun 5, 2022
1 parent e18bc34 commit 010cf24
Show file tree
Hide file tree
Showing 10 changed files with 2,812 additions and 121 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ This plugin solves this issue by allowing you to:
- Title that is pasted when 'Open Video Player' hotkey is used

## Usage
- Highlight a video url and select either the Ribbon clock icon or use the 'Open Video Player' hotkey
- Highlight a video url and use the 'Open Video Player' hotkey
- Jot down notes and anytime you want to insert a timestamp, press the registered hotkey
- Toggle pausing/playing the video by using hotkey (my default is option space)
- Open videos at the timestamp you left off on (this is reset if plugin is disabled)
Expand Down
62 changes: 17 additions & 45 deletions main.js

Large diffs are not rendered by default.

39 changes: 12 additions & 27 deletions main.ts
Original file line number Diff line number Diff line change
@@ -1,28 +1,20 @@
import { Editor, MarkdownView, Notice, Plugin, } from 'obsidian';
import { Editor, MarkdownView, Plugin, } from 'obsidian';
import ReactPlayer from 'react-player/lazy'

import { VideoView, VIDEO_VIEW } from './view/VideoView';
import { TimestampPluginSettings, TimestampPluginSettingTab, DEFAULT_SETTINGS } from 'settings';
import { SetupVideoModal } from 'ribbonModal';


const ERRORS: { [key: string]: string } = {
"INVALID_URL": "\n> [!error] Invalid Video URL\n> The highlighted link is not a valid video url. Please try again with a valid link.\n",
"NO_ACTIVE_VIDEO": "\n> [!caution] Select Video\n> A video needs to be opened before using this hotkey.\n Click the TimestampVideo ribbon icon or highlight your video link and input your 'Open video player' hotkey to register a video.\n",
"NO_ACTIVE_VIDEO": "\n> [!caution] Select Video\n> A video needs to be opened before using this hotkey.\n Highlight your video link and input your 'Open video player' hotkey to register a video.\n",
}

export default class TimestampPlugin extends Plugin {
settings: TimestampPluginSettings;
player: ReactPlayer;
setPlaying: React.Dispatch<React.SetStateAction<boolean>>;
editor: Editor;
// Helper function to validate url and activate view
validateURL = (url: string) => {
url = url.trim();
if (!ReactPlayer.canPlay(url)) return ERRORS["INVALID_URL"];
if (this.settings.noteTitle) return "\n" + this.settings.noteTitle
return "";
}

async onload() {
// Register view
Expand All @@ -34,17 +26,6 @@ export default class TimestampPlugin extends Plugin {
// Register settings
await this.loadSettings();

// Create ribbon button that opens modal to use for inserting video url
this.addRibbonIcon("clock", "Timestamp Notes", () => {
new SetupVideoModal(this.app, async (url) => {
new Notice(`Opening, ${url}!`)
this.validateURL(url);
// Activate the view with the valid link
this.activateView(url);
if (this.editor) this.editor.replaceSelection("```timestamp-url \n " + url + "\n ```\n");
}).open();
});

// Markdown processor that turns timestamps into buttons
this.registerMarkdownCodeBlockProcessor("timestamp", (source, el, ctx) => {
// Match mm:ss or hh:mm:ss timestamp format
Expand Down Expand Up @@ -85,7 +66,7 @@ export default class TimestampPlugin extends Plugin {
button.style.color = this.settings.urlTextColor;

button.addEventListener("click", () => {
this.editor ? this.activateView(url, this.editor) : this.activateView(url);
this.activateView(url, this.editor);
});
} else {
if (this.editor) {
Expand All @@ -99,14 +80,18 @@ export default class TimestampPlugin extends Plugin {
id: 'trigger-player',
name: 'Open video player (copy video url and use hotkey)',
editorCallback: (editor: Editor, view: MarkdownView) => {
// Get selected text and match against video url to convert link to video video id => also triggers activateView in validateURL
// Get selected text and match against video url to convert link to video video id
const url = editor.getSelection().trim();

// Activate the view with the valid link
if (ReactPlayer.canPlay(url)) {
this.activateView(url, editor);
editor.replaceSelection("```timestamp-url \n " + url + "\n ```\n");
this.settings.noteTitle ?
editor.replaceSelection("\n" + this.settings.noteTitle + "\n" + "```timestamp-url \n " + url + "\n ```\n") :
editor.replaceSelection("```timestamp-url \n " + url + "\n ```\n")
this.editor = editor;
} else {
editor.replaceSelection(ERRORS["INVALID_URL"])
}
editor.setCursor(editor.getCursor().line + 1)
}
Expand All @@ -119,11 +104,11 @@ export default class TimestampPlugin extends Plugin {
editorCallback: (editor: Editor, view: MarkdownView) => {
if (!this.player) {
editor.replaceSelection(ERRORS["NO_ACTIVE_VIDEO"])
return
}

const leadingZero = (num: number) => num < 10 ? "0" + num.toFixed(0) : num.toFixed(0);

// convert current video time into timestamp
const leadingZero = (num: number) => num < 10 ? "0" + num.toFixed(0) : num.toFixed(0);
const totalSeconds = Number(this.player.getCurrentTime().toFixed(2));
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds - (hours * 3600)) / 60);
Expand Down Expand Up @@ -156,7 +141,7 @@ export default class TimestampPlugin extends Plugin {
}

// This is called when a valid url is found => it activates the View which loads the React view
async activateView(url: string, editor: Editor = null) {
async activateView(url: string, editor: Editor) {
this.app.workspace.detachLeavesOfType(VIDEO_VIEW);

await this.app.workspace.getRightLeaf(false).setViewState({
Expand Down
2 changes: 1 addition & 1 deletion manifest.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"id": "obsidian-timestamp-notes",
"name": "Timestamp Notes",
"version": "1.0.6",
"version": "1.0.7",
"minAppVersion": "0.12.0",
"description": "This plugin allows side-by-side notetaking with videos. Annotate your notes with timestamps to directly control the video and remember where each note comes from.",
"author": "Julian Grunauer",
Expand Down
Loading

0 comments on commit 010cf24

Please sign in to comment.