diff --git a/main.ts b/main.ts index 8f2727a..b63c8a9 100644 --- a/main.ts +++ b/main.ts @@ -4,6 +4,7 @@ import ReactPlayer from 'react-player/lazy' import { VideoView, VIDEO_VIEW } from './view/VideoView'; import { TimestampPluginSettings, TimestampPluginSettingTab, DEFAULT_SETTINGS } from 'settings'; +import { MarkdownRenderChild } from "obsidian"; 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", @@ -26,6 +27,40 @@ export default class TimestampPlugin extends Plugin { // Register settings await this.loadSettings(); + this.registerMarkdownPostProcessor((el, ctx) => { + const codeblocks = el.querySelectorAll("code"); + + for (let index = 0; index < codeblocks.length; index++) { + const codeblock = codeblocks.item(index); + const text = codeblock.innerText.trim(); + + const isTS = text.startsWith(":vts="); + + if (isTS) { + const time = text.substr(5); + console.log('extracted text ' + time); + + //create button for each timestamp + const button = el.createEl("button"); + button.innerText = time; + button.style.backgroundColor = this.settings.timestampColor; + button.style.color = this.settings.timestampTextColor; + button.style.padding = "0 5px"; + button.style.margin = "0"; + button.style.fontSize = "inherit"; + + // convert timestamp to seconds and seek to that position when clicked + button.addEventListener("click", () => { + const timeArr = time.split(":").map((v) => parseInt(v)); + const [hh, mm, ss] = timeArr.length === 2 ? [0, ...timeArr] : timeArr; + const seconds = (hh || 0) * 3600 + (mm || 0) * 60 + (ss || 0); + if (this.player) this.player.seekTo(seconds); + }); + codeblock.replaceWith(button); + } + } + }); + // Markdown processor that turns timestamps into buttons this.registerMarkdownCodeBlockProcessor("timestamp", (source, el, ctx) => { // Match mm:ss or hh:mm:ss timestamp format @@ -116,7 +151,29 @@ export default class TimestampPlugin extends Plugin { const time = (hours > 0 ? leadingZero(hours) + ":" : "") + leadingZero(minutes) + ":" + leadingZero(seconds); // insert timestamp into editor - editor.replaceSelection("```timestamp \n " + time + "\n ```\n") + editor.replaceSelection("```timestamp \n " + time + "```\n") + } + }); + + this.addCommand({ + id: 'timestamp-insert-inline', + name: 'Insert inline timestamp based on videos current play time', + editorCallback: (editor: Editor, view: MarkdownView) => { + if (!this.player) { + editor.replaceSelection(ERRORS["NO_ACTIVE_VIDEO"]) + return + } + + // 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); + const seconds = totalSeconds - (hours * 3600) - (minutes * 60); + const time = (hours > 0 ? leadingZero(hours) + ":" : "") + leadingZero(minutes) + ":" + leadingZero(seconds); + + // insert timestamp into editor + editor.replaceSelection("`:vts=" + time + "`\n") } });