Offset youtube Timestamp

Questions & Help
1

Hi im a disabled person and would love an access feature for timestamp on youtube so offset to the timestamp when i hit the command? There was a convrsation back in 2022 but wondered if code was easily modifiable? Thank you in advance.

1 Like
2

Sounds possible, but could you get more specific?

3

Thanks for picking up! What I’d love is when i click the / then command timstamp to off set it by say 5 or seconds so that when you replay via the timecode it starts a few seconds before. So i might click the command and it registers at 1.25 then when i go that timestamp it would give a few seconds lead in so would actually start at 1.20 or 1.10. Hope that clarifies. Essentially as i use a pointer…by the time the stamp is created its already past where i wan so ineed to press a rewind or similar and that looses my flow. Thanks for your thoughts/solutions on this.

4

When you create a timestamp with /Embed Youtube timestamp , the produced markdown has the form of {{youtube-timestamp 123}} or {{youtube-timestamp 02:03}}.

  • You can edit it directly to replace the number (in seconds) with a smaller one.
  • Alternatively, could automatically subtract a preset number of seconds, but let me know:
    • if this is necessary
    • if you are willing to run some custom javascript for it
5

I’m not much of a coder but it seems your second solution is what im looking for i recognise the first timestamp example (123), Id love it just to do it as typing in for me takes longer n longer as i use a pointer (like one fnger)
Thanks for your help, really appreciated.

6

Here is a simplistic implementation:

  • It is not tested in many scenarios.
  • It expects that the command is given in an empty block.
  • The offset is preset to 5 secs.
    • You can change the value in the code, as it is the only 5.
  • Add the following code into file custom.js :
    const timestamps = document.getElementsByClassName("youtube-timestamp");
const timestampObserver = new MutationObserver(function onMutated(){
    Array.prototype.map.call(timestamps, (anchor)=>{
        const data = anchor.dataset
        const offset = data.offset
        if (offset) return

        const parent = anchor.closest(".ls-block")
        const uuid = parent.querySelector(".block-content").getAttribute("blockid")
        const content = logseq.api.get_block(uuid).content
        if (content.includes(", \"timestamp-offset\"}}")) return

        const num = data.offset = content.slice(20, content.length - 2) - 5
        if (isNaN(num)) return

        const newContent = "{{youtube-timestamp " + num + ", \"timestamp-offset\"}}"
        logseq.api.update_block(uuid, newContent)
    })
});
timestampObserver.observe(document.getElementById("app-container"), {
    attributes: true,
    subtree: true,
    attributeFilter: ["class"]
});
2 Likes
7

Hi, first of all thank you soooo much for your kindnes and time given to my trying to resolve this, I really appreciate it, thank you. My last silly question which you or anyoone may know is…ive created the j.son file but not sure where I place it and then trigger it…sorry if this is a silly basic thing I should know. Once again thank you for your kindness and help.

8

Inside the folder of your graph, there is a folder named logseq, which contains files custom.css, config.edn etc. There should place file custom.js with the mentioned code inside. Be careful with both the code and the filename, as they should be exact.

9

I will dig around and give it a go. I should name th file custom.js