YouTube Timestamps

[GitMurf]

✂️ Copy of your #42SmartBlock from Roam

• #42SmartBlock YouTube TimeStamp
  

  • {{Add Timestamp:42SmartBlock:YouTube TimeStamp:varYTbut=y}}
    

  • <%IFTRUE:"<%GET:varYTbut%>" == "y"%><%JAVASCRIPT:
    ```javascript
    
    if (window.YT !== undefined) {
        if (Array.from(document.getElementsByTagName('IFRAME')).filter(iframe => iframe.src.includes('youtube.com'))[0]) {
            var getClosestParent = function (elem, srcStr) {
                for (; elem && elem !== document; elem = elem.parentNode) {
                    if (elem.getElementsByTagName('IFRAME').length > 0) {
                        var foundIframe = elem.getElementsByTagName('IFRAME')[0];
                        if (foundIframe.src.includes(srcStr)) { return foundIframe };
                    }
                }
                return null;
            };
            var ytIframe = getClosestParent(document.getElementsByTagName('TEXTAREA')[0], 'youtube.com');
            if (ytIframe) {
                var ytIframeId = ytIframe.id;
                var ytPlayer = YT.get(ytIframeId);
                var currentTime = ytPlayer.getCurrentTime() - 5;
                if (currentTime < 1) { currentTime = 1 };
                return (new Date(currentTime * 1000).toISOString().substr(11, 8)) + ' - ';
            }
            else {
                return "No YouTube Player Open!";
            }
        }
        else {
            return "No YouTube Player Open!";
        }
    }
    ```
    %><%CURSOR%>
    

  • <%IFTRUE:"<%GET:varYTbut%>" != "y"%> <%CURSOR%>
    

  • <%SET:varYTbut,n%><%NOBLOCKOUTPUT%>
    

HERE IS A DEMO (click the GIF to start it over)

---

---

BONUS: Embed a youtube link in proper Roam format & add timestamp button underneath it

• #42SmartBlock z_Shortcut embed youtube
  

  • <%SET:varCurBlock,<%RESOLVEBLOCKREF:<%CURRENTBLOCKREF%>%>%><%NOBLOCKOUTPUT%>
    

  • <%JAVASCRIPT:
    ```javascript
    
    document.activeElement.value = '';
    var curBlock = roam42.smartBlocks.activeWorkflow.vars["varCurBlock"];
    var newVal = curBlock.substring(0,curBlock.indexOf(';;')).trim();
    roam42.smartBlocks.activeWorkflow.vars["varCurBlock"] = newVal;
    return '';```
    %><%NOBLOCKOUTPUT%>
    

  • Adding #[[[[youtube]] [[timestamp]]]]s to my #Video
    

    • <%CONCAT:{,{[,[youtube]]:,<%GET:varCurBlock%>,}}%>
      

      • <%NOBLOCKOUTPUT%>
        

      • <%SMARTBLOCK:YouTube TimeStamp%>
        

HERE IS A DEMO

---

---

THIS IS THE OLD VERSION WITHOUT THE BUTTON

• #42SmartBlock YouTube TimeStamp (OLD)
  

  • <%JAVASCRIPT:
    ```javascript
    
    if (window.YT !== undefined) {
    if (Array.from(document.getElementsByTagName('IFRAME')).filter(iframe => iframe.src.includes('youtube.com'))[0]) {
    var getClosestParent = function (elem, srcStr) {
    for (; elem && elem !== document; elem = elem.parentNode) {
    if (elem.getElementsByTagName('IFRAME').length > 0) {
    var foundIframe = elem.getElementsByTagName('IFRAME')[0];
    if (foundIframe.src.includes(srcStr)) { return foundIframe };
    }
    }
    return null;
    };
    var ytIframe = getClosestParent(document.getElementsByTagName('TEXTAREA')[0], 'youtube.com');
    if (ytIframe) {
    var ytIframeId = ytIframe.id;
    var ytPlayer = YT.get(ytIframeId);
    var currentTime = ytPlayer.getCurrentTime() - 5;
    if (currentTime < 1) { currentTime = 1 };
    return (new Date(currentTime * 1000).toISOString().substr(11, 8)) + ' - ';
    }
    else {
    return "No YouTube Player Open!";
    }
    }
    else {
    return "No YouTube Player Open!";
    }
    }
    ```
    %>
    

---

📋 Describe the SmartBlock

I created a SmartBlock to access the current timestamp while watching a YouTube video so that you can quickly add notes by doing ;;YouTube which inserts the timestamp automatically and then you can write some notes about it. Make sure to install CCC's YouTube Player script first (see Prerequisites below).

✅ Describe any prerequisites or dependencies that are required for this SmartBlock

You need to first install CCC's awesome YouTube player script. See links to Tweet and Gist below.

• https://twitter.com/cococ_rr/status/1329130839205171203?s=21
• https://gist.github.com/c3founder/0d47fe3f15f677a0a6f0e96b4868e46a

📷 Screenshot of your #42SmartBlock workflow/template from Roam

💡 Additional Info

Notice on this line: var currentTime = ytPlayer.getCurrentTime() - 5; I add -5 as that way as I am watching video and like a part it will actually set the timestamp to 5 seconds earlier which gives me a couple seconds to activate the smart block and then make sure I don't have the time stamp start too late. Gives a little leeway into the part I want to mark.

If you are having any issues with this SmartBlock, make sure that you paste the JavaScript block as plain text using (on Windows) Ctrl + Shift + V so that the "soft line breaks" are preserved and the entire JavaScript is pasted into a single block in Roam. This means you must copy/paste the JavaScript block separate from the title/parent block. See the GIF below.

[GitMurf]

Added a button to add the timestamps each time. Also added another small SB that converts a youtube link into the roam format youtube embed and auto indents underneath it the youtube timestamp button.

HERE IS A DEMO (click the GIF to start it over)

[GitMurf]

By Abhay:

cc: <@U01147Z3CMQ> - just something to watch out with the new YT timestamps JS. If someone changes the name they will need to update the button _{View in Slack}

[GitMurf]

<@U013S9LL1FA> yep this is due to the "recurssive" nature / ability of smartblocks being able to call each other and itself via buttons. Remember the downsides I mentioned to you about making everything into one single SB as opposed to breaking them up into chunks :wink: hehe

https://roamresearch.slack.com/archives/CN10T100K/p1607972028263200?thread_ts=1607091041.208200&amp;cid=CN10T100K _{View in Slack}

[GitMurf]

But actually <@U013S9LL1FA> this gives me an idea... you can access the name/title of the smartblock I believe, right <@U016YEJAKT4>? So when I build out the buttons, I would use the actual name of the smartblock so that it would be "dynamic" I believe so that you can change it to whatever you want. If this works it probably would be a best practice. Because I totally understand why folks would want to change the names of their SB to their liking instead of just being stuck with whatever the creator uses :slightly_smiling_face: _{View in Slack}

[GitMurf]

CSS by Abhay:

Of course! They follow my themeset too! https://github.com/abhayprasanna/abhayprasanna.github.io/blob/master/optional.css

/* CCC's YT Timestamps JS customization */

.timestamp-control {
  color: var(--icons);
  margin-top: 3px;
  border: none;
  transition   : color 0.3s ease, border 0.3s ease;
}
.timestamp-control:hover {
  color: var(--icons-hover);
  transition   : color 0.3s ease, border 0.3s ease;
}

_{View in Slack}

[JimmyLv]

@GitMurf @roamhacker hi~ anyway to add a keyboard shortcut for clicking the Add Timestamp button to generate timestrap directly?

[agoodbear]

By Abhay:

cc: <@U01147Z3CMQ> - just something to watch out with the new YT timestamps JS. If someone changes the name they will need to update the button View in Slack

How can I change the 『Add Stamp』button background color?I use the dark mode in roam,therefore the background color let this 『Add Stamp』not obviously~~~

[abhayprasanna]

Here is a simple SmartBlock add-on for this that will set up the following template for you if you have a YouTube URL copied into your clipboard.

• #42SmartBlock yt - YouTube
  

  • {{[[youtube]]: <%CLIPBOARDPASTETEXT%>}}
    

    • transcript notes:: {{Add Timestamp:42SmartBlock:YouTube Timestamp:varYTbut=y}}
      

      • <%CURSOR%>
        

[agoodbear]

Something wrong with this js code? When type a youtube link,then initiate the Smartblock->Always showed as below:

https://user-images.githubusercontent.com/71975781/103166960-0f8fa880-4862-11eb-9d72-6110d1235d4e.mp4

Does somebody had the same problem and how to solve it?

[eyangs]

Something wrong with this js code? When type a youtube link,then initiate the Smartblock->Always showed as below:

CleanShot.2020-12-27.at.16.37.46.mp4 Does somebody had the same problem and how to solve it?

same error with agoodbear!

[Yulin-Rog]

Hi all! I'm encountering a problem like this (i keep pressing the "timestamp" button, but it won't trigger anything or make a timestamp but showing up with a this code), anyone meets a similar situation or knows how to solve it? Many thx in advance 🥰

[geekhuashan]

knows how to solve it? Many thx in advan

I was also encountered this problem， how to fix the problem

[growingtreesss]

hi, I tried many youtube links, they didn't work. it just indicates"is not a valid youtube url", does anybody have the same problem?

[abhayprasanna]

Everyone, you have to have @c3founder's YT timestamps script for any of this to work in the first place. And since he has updated his extension to have a keyboard shortcut to add timestamps, you don't even need this SmartBlock anymore. https://c3founder.github.io/Roam-Enhancement/

[natterstefan]

Thanks for making me aware of that change, @abhayprasanna. Works like a charm now!