Replace Timestamps with YouTube Link

[torantine]

I make a fair amount of notes from YouTube and dislike manually adding the url to each reference to the video timestamp where a note is. I know there are services that do this but I like to just put in the timestamps myself. This templater script will look through the content of a page for timestamps prepended with "YT=" and replace all of them with a link to a YouTube video. If there is a url frontmatter field it will use that. Otherwise, it will prompt the user for the link.

So assuming you have a file that looks like:

---
url: https://www.youtube.com/watch?v=sEgzrRNkgsE
---

- YT=50:23 - Rows Object
- YT=54:46 - Dataview: Due Date Example
     - where dueDate >= date(today) AND dueDate <= date(today) + dur(45 days)

this script will replace it with:

---
url: https://www.youtube.com/watch?v=sEgzrRNkgsE
---

- [50:23](https://www.youtube.com/watch?v=sEgzrRNkgsE&t=50m23s) - Rows Object
- [54:46](https://www.youtube.com/watch?v=sEgzrRNkgsE&t=54m46s) - Dataview: Due Date Example
     - where dueDate >= date(today) AND dueDate <= date(today) + dur(45 days)

and here is the code to do so

templater.replace.youtube.md

<%*
// define function to replace timestamps in file
function replaceTimestamp () {
	const regexHHMM = /(YT=\d\d:[0-5]\d)/g; 
	// change "YT=" if you want a different search term. currently videos cannot be longer than 99m59s
	var content = tp.file.content; // *content of file*
	var matches = content.match(regexHHMM); // *find all regex matches in file*
	const matchesLength = matches.length; // *length of array containing all matches*
	for(var i = 0; i < matchesLength; i++){
		content = content.replace(
			matches[0], 
			"["+matches[0].slice(-5)+"]("+urlPrompt+"&t="+matches[0].slice(-5,-3)+"m"+matches[0].slice(-2)+"s)"
			); // *make YouTube URL from first match*
		matches = content.match(regexHHMM); // *find matches in altered content*
	}
	var file = app.workspace.activeLeaf.view.file; // *get current file*
	app.vault.modify(file, content); // *replace content with new content*
}

// if url is in frontmatter and contains youtube, check if it contains http then run function, else prompt user for url
var url = tp.frontmatter.url; // *get url field from frontmatter*
if(url != undefined && url.contains("youtube.com/watch?v=") === true){
	if (url.includes("https://www.") === false){
		url = "https://www." + url;
		};
	urlPrompt = url;
	replaceTimestamp();
} else {	
if(url === undefined){url = "Enter a YouTube URL"}; // *if url doesnt exist*
var urlPrompt;
while(urlPrompt == null || urlPrompt.length < 1 || urlPrompt.contains("youtube.com/watch?v=") === false){urlPrompt = (await tp.system.prompt("YouTube URL:", url, 1))}; 
// *proper conditions are not met, reprompt*
if (urlPrompt.includes("https://www.") === false){urlPrompt = "https://www." + urlPrompt}
replaceTimestamp();
}

%>

[terabell]

Hi, I think it looks good - note that you can actually add a link to the exact timestamp by adding to the "url" &t=XXmYYs

where you put in the minutes and seconds i.e.
https://www.youtube.com/watch?v=sEgzrRNkgsE&t=1m05s

[torantine]

It does do this actually haha. I just missed putting it in the example... The post has been updated to reflect what the outcome should be. Thanks for catching this!

[terabell]

well done - sorry, just read the example output, not the code.

[welpdx]

Wow this is such a nice and useful script! I take notes with youtube often as well but after a while I end up just giving up on hyperlinking the time stamps lol. Thanks for thinking of this and creating a solution via templater!

[welpdx]

I currently having some issues with the script. See gif below.

Something about cant get length of null...

[cocofoco]

I think this is a small bug that happens when you write something like YT = 1:42 instead of YT= 01:42.

Proposed Solution: write the lines in the expected format → YT= XX:XX

Why I think it happens:
The parser is coded like this: const regexHHMM = /(YT=\d\d:[0-5]\d)/g → it expects a variable with 5 characters, formatted like this: xx:xx.

[more precisely, it expects: 1 digit; 1 digit; ":"; a number between 0-5 (included); a digit.]

[cocofoco]

I am having issues using the script provided. As right now, when I call the script, the text is not replaced properly:

• when there is a youtube link in url frontmatter → the script runs, but the text is not replaced.
• when there is no link → there is a prompt, and when a link is inserted the script runs, but no text is replaced.

Maybe I am not calling the script properly?
I have added the script to the Templates folder, and I use the Templater: insert template command to select the file and call the script.

Am I doing something wrong?

Thank you in advance.

[jiamingz42]

I had trouble running this function as well. After some debugging, I found that app.vault.modify returns a Promise. I can get into more details if you are into the async / await stuff of JavaScript but otherwise, here is the fix:

<%*
// define function to replace timestamps in file
async function replaceTimestamp () {
	const regexHHMM = /(YT=\d\d:[0-5]\d)/g; 
	// change "YT=" if you want a different search term. currently videos cannot be longer than 99m59s
	var content = tp.file.content; // *content of file*
	var matches = content.match(regexHHMM); // *find all regex matches in file*
	const matchesLength = matches.length; // *length of array containing all matches*
	for(var i = 0; i < matchesLength; i++){
		content = content.replace(
			matches[0], 
			"["+matches[0].slice(-5)+"]("+urlPrompt+"&t="+matches[0].slice(-5,-3)+"m"+matches[0].slice(-2)+"s)"
			); // *make YouTube URL from first match*
		matches = content.match(regexHHMM); // *find matches in altered content*
	}
	var file = app.workspace.activeLeaf.view.file; // *get current file*
	await app.vault.modify(file, content); // *replace content with new content*
}

// if url is in frontmatter and contains youtube, check if it contains http then run function, else prompt user for url
var url = tp.frontmatter.url; // *get url field from frontmatter*
if(url != undefined && url.contains("youtube.com/watch?v=") === true){
	if (url.includes("https://www.") === false){
		url = "https://www." + url;
		};
	urlPrompt = url;
	await replaceTimestamp();
} else {	
if(url === undefined){url = "Enter a YouTube URL"}; // *if url doesnt exist*
var urlPrompt;
while(urlPrompt == null || urlPrompt.length < 1 || urlPrompt.contains("youtube.com/watch?v=") === false){urlPrompt = (await tp.system.prompt("YouTube URL:", url, 1))}; 
// *proper conditions are not met, reprompt*
if (urlPrompt.includes("https://www.") === false){urlPrompt = "https://www." + urlPrompt}
await replaceTimestamp();
}

%>

[jiamingz42]

This script doesn't work. I am wondering if Obsidian make some change after OP share this snippet. But the fix is simple, we'll simple need to add some async or await:

<%*
// define function to replace timestamps in file
async function replaceTimestamp () {
	const regexHHMM = /(YT=\d\d:[0-5]\d)/g; 
	// change "YT=" if you want a different search term. currently videos cannot be longer than 99m59s
	var content = tp.file.content; // *content of file*
	var matches = content.match(regexHHMM); // *find all regex matches in file*
	const matchesLength = matches.length; // *length of array containing all matches*
	for(var i = 0; i < matchesLength; i++){
		content = content.replace(
			matches[0], 
			"["+matches[0].slice(-5)+"]("+urlPrompt+"&t="+matches[0].slice(-5,-3)+"m"+matches[0].slice(-2)+"s)"
			); // *make YouTube URL from first match*
		matches = content.match(regexHHMM); // *find matches in altered content*
	}
	var file = app.workspace.activeLeaf.view.file; // *get current file*
	await app.vault.modify(file, content); // *replace content with new content*
}

// if url is in frontmatter and contains youtube, check if it contains http then run function, else prompt user for url
var url = tp.frontmatter.url; // *get url field from frontmatter*
if(url != undefined && url.contains("youtube.com/watch?v=") === true){
	if (url.includes("https://www.") === false){
		url = "https://www." + url;
		};
	urlPrompt = url;
	await replaceTimestamp();
} else {	
if(url === undefined){url = "Enter a YouTube URL"}; // *if url doesnt exist*
var urlPrompt;
while(urlPrompt == null || urlPrompt.length < 1 || urlPrompt.contains("youtube.com/watch?v=") === false){urlPrompt = (await tp.system.prompt("YouTube URL:", url, 1))}; 
// *proper conditions are not met, reprompt*
if (urlPrompt.includes("https://www.") === false){urlPrompt = "https://www." + urlPrompt}
await replaceTimestamp();
}

%>

[duckpuppy]

I've updated this a bit to allow for using any timestamps (not just up to 99:59).

<%*
// define function to replace timestamps in file
async function replaceTimestamp () {
	const regexHHMM = /YT=((\d+):([0-5]\d))/g; 
	// change "YT=" if you want a different search term. currently videos cannot be longer than 99m59s
	var content = tp.file.content; // *content of file*
	var matches = content.matchAll(regexHHMM); // *find all regex matches in file*
	for(let match of matches){
		content = content.replace(
			match[0], 
			"["+match[1]+"]("+urlPrompt+"&t="+match[2]+"m"+match[3]+"s)"
			); // *make YouTube URL from first match*
	}
	var file = app.workspace.activeLeaf.view.file; // *get current file*
	await app.vault.modify(file, content); // *replace content with new content*
}

// if url is in frontmatter and contains youtube, check if it contains http then run function, else prompt user for url
var url = tp.frontmatter.url; // *get url field from frontmatter*
if(url != undefined && url.contains("youtube.com/watch?v=") === true){
	if (url.includes("https://www.") === false){
		url = "https://www." + url;
		};
	urlPrompt = url;
	await replaceTimestamp();
} else {	
if(url === undefined){url = "Enter a YouTube URL"}; // *if url doesnt exist*
var urlPrompt;
while(urlPrompt == null || urlPrompt.length < 1 || urlPrompt.contains("youtube.com/watch?v=") === false){urlPrompt = (await tp.system.prompt("YouTube URL:", url, 1))}; 
// *proper conditions are not met, reprompt*
if (urlPrompt.includes("https://www.") === false){urlPrompt = "https://www." + urlPrompt}
await replaceTimestamp();
}

%>