Suggestion with code: Clean up edit view timestamps using inline blocks instead of timestamp code blocks

[enly1]

Hi,

I cloned your plugin to fix the video rendering size for me #8 (removing 40% and replacing with 100% in VideoContainer.tsx), but while I had the plugin in development mode, I took the opportunity to hack in a cosmetic change to use inline blocks for timestamps.

Inline Blocks

The code blocks for the timestamps was very off-putting to me while editing in markdown mode, so thought I would adapt the plugin to render inline blocks. I have yet to replace the inserting of the fenced code block / adding another inline timestamp option, but sharing the idea.

`:vts=HH:MM`now gets processed the same as your timestamp fenced code blocks.

I'm afraid, I don't have time to productionise this and create a PR, but wanted to share in case you wanted to adopt the approach. For me, its a much cleaner experience.

Examples of the look below in case you want to include a clean version of the approach in this plugin:

The main.ts fail onload() method has been adapted as follows with the new registerMarkdownPostProcessor call inserted.

        // 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 div = el.createEl("div");
                    const button = div.createEl("button");
                    button.innerText = time;
                    button.style.backgroundColor = this.settings.timestampColor;
                    button.style.color = this.settings.timestampTextColor;

                    // 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);
                    });
                    div.appendChild(button);
                    codeblock.replaceWith(div);
                }
            }
        });

        // Markdown processor that turns timestamps into buttons
        this.registerMarkdownCodeBlockProcessor("timestamp", (source, el, ctx) => {

[enly1]

Just another benefit that someone may find useful from this approach - its just a inline code block at the end of the day, so we can also do this ...

[enly1]

And wrapping it up with automatic toc, making the timestamp inline code blocks ##### headings ..

You get the idea ... anyway, will leave it there for your consideration.

[enly1]

Sorry, one last update to the sample code, which enables the inline code blocks to render inline with content and font size styling to match its parent ...

You can throw them anywhere now - so they can be in lists etc also, which should fix both of your known faults in the main readme.

        // 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);
                }
            }
        });

[FelipeDrytven]

Hello, @enly1! How could I install your amazing modifications? Thank you so much!

[enly1]

Hello, @enly1! How could I install your amazing modifications? Thank you so much!

I don't expect @juliang22 will ever merge this into the repo based on the comments and I wont be progressing this any time soon. I would recommend you stick with the main project ( or an alternative plugin like https://github.com/aidenlx/media-extended if it better suits your needs ).

If you really must have these updates and you are happy that functionality will never move beyond that point, you can of course clone the branch that this PR is based on and use that like I do, but there will be no support for that option.

My Inline Mode branch: https://github.com/enly1/ObsidianTimestampNotes/tree/inline-mode

[FelipeDrytven]

Thank you very much, @enly1! The features you added are fantastic. The Extended Media seems to be dead. I have no idea about this project, since @juliang22 did not add its improvements - maybe he gave up either. Unfortunately, the features that allow you to take notes on video players are extremely scarce. The best thing is annotate.tv, and yet it's not so good - I miss something that works with local videos. Please, can you explain how to activate inline mode in "Edit Mode"? For example, in the image below, you realize that Julian's default code displays the button, but the Inline code does not, so that I can only see the button when I activate the Reading mode.

[enly1]

I think you have found one of the challenges he raised - Live Preview.

I use source view mode, which works as expected - live preview does not render as the rendering is handled by a totally different process and the code to make that work was another learning curve for me.

So, if you want it to work like my screenshots, you will have to switch to source mode in edit in preferences.

[keeprock]

Just my 2c - I've end up using Logseq just for the sake of using inline timestamps for YT. Maybe, you (or others) can use that option too.

[Bakr-Ali]

Just my 2c - I've end up using Logseq just for the sake of using inline timestamps for YT. Maybe, you (or others) can use that option too.

How do you use/insert timestamps in Logseq? @keeprock

[mishipal]

Amazing Work bro. Exact features i have been looking for. Please continue the mods.

Also if you can add local video functionality or like adding a file path from and folder to drive