YouTube Timestamps - Githubissues

GitMurf commented 4 years ago

✂️ 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)

youtube timestamp button2

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

youtube timestamp embed

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.

📷 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.

eE2NOolazM