YouTube annotation isn't working for me

[huyz]

First, the https://annotate.tv/videos/620d5a42b9ab630009bf3e31 says "video not found". Not sure if that's intended. But I proceed to save the website resources anyway.

Then, I create my own Google Drive link as instructed, and the link works, as confirmed when I use wget manually:

❯ wget 'https://drive.google.com/uc?export=download&id=[REDACTED]'
--2022-07-27 08:37:43--  https://drive.google.com/uc?export=download&id=[REDACTED]
Resolving drive.google.com (drive.google.com)... 142.251.12.101, 142.251.12.138, 142.251.12.100, ...
Connecting to drive.google.com (drive.google.com)|142.251.12.101|:443... connected.
HTTP request sent, awaiting response... 303 See Other
Location: https://doc-04-88-docs.googleusercontent.com/docs/securesc/ [following]
Warning: wildcards not supported in HTTP.
--2022-07-27 08:37:51--  https://doc-04-88-docs.googleusercontent.com/docs/securesc/
Resolving doc-04-88-docs.googleusercontent.com (doc-04-88-docs.googleusercontent.com)... 74.125.68.132
Connecting to doc-04-88-docs.googleusercontent.com (doc-04-88-docs.googleusercontent.com)|74.125.68.132|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 1672490 (1.6M) [application/zip]
Saving to: ‘uc?export=download&id=’

uc?export=download&id=[REDACTED] 100%[================================================>]   1.59M  1.34MB/s    in 1.2s

2022-07-27 08:37:56 (1.34 MB/s) - ‘uc?export=download&id=[REDACTED]’ saved [1672490/1672490]

But when I launch Obsidian, I see this in the console:

A 303 error on fetching the Google Drive file:

A CORS error on the Youtube video:

I'm not sure which of these 3 errors are at a play.

[kennethbruskiewicz]

I'm also getting CORS errors when attempting to download from an alternate source with direct-download URLs.

[aladmit]

@elias-sundqvist could you help me with that please? I fixed CORS issue with YouTube, but video annotation still fails. I see empty view and 404 errors. All of them look like this one: GET https://annotate.tv/_next/static/chunks/570-9d744d6eeeb86b1dae1c.js net::ERR_ABORTED 404

I figured out this urls defined in genericAnnotation, but I'm not sure how to fix/update them.

[elias-sundqvist]

Sure, I'll try to fix it sometime this week.

[huyz]

So people are only talking about the CORS issue. Does that mean that no one else is getting the first two problems I got?

[elias-sundqvist]

Regarding the first issue, I think the urls may be unique per user. I need to change things so that any any annotate.tv video url can be used.

I'm not sure about the 303 error yet. I'll check that later.

[elias-sundqvist]

@aladmit I have created a new branch, fix/video-annotation now.

With the new code, you should be able to use any annotate.tv video url, not just https://annotate.tv/videos/620d5a42b9ab630009bf3e
(I think these urls are user specific, so I was probably the only one who could do this before)

Also, I couldn't get videos to play without reintroducing node-fetch, so presumably this branch will break things on ipads again. I don't have an ipad though, so I can't check.

RequestURL seems to have some bug that prevents it from recognizing the urls for streaming youtube video chunks as valid urls.

[aladmit]

Yep, plugin fails on iPad again 😢 Also, I thought eslint plugin:compat/recommended with browserlist would error in case we use something incompatible with iPad, but no, there is no error about it :(

I'll see what I can do about it.

[aladmit]

I removed node-fetch one more time)) On Desktop youtube annotation works again. Video plays, note creates, etc. Plugin starts on iPad again, but instead of video annotator I get a black screen :(

@elias-sundqvist Check how it works on android, please. And I'll try to find a way to get all exceptions and log messages from mobile. It could take a while, because all debug obsidian plugins fail to start on iPad 🤡 If I don't find a solution soon, I suggest to disable video annotation on iPad for a while.

[elias-sundqvist]

Now it works for me as well even though you removed node-fetch. I don't really understand why, but that's great :)

I tried running it on android, but I just get a blank screen.

Maybe we can publish this fix as-is and make a separate issue for getting video annotations to work on mobile?

[aladmit]

Agreed 👍🏻 I'll add an error message on mobile and release it.

Why it works without node-fetch
I logged all exceptions which caused to fallback to node-fetch, and there was a type error. It happened because requestUrl.body: string | ArrayBuffer, although RequestInit.body: ReadableStream | XMLHttpRequestBodyInit. YouTube video fetch requests have body with json, so I added a function which checks type of RequestInit.body. If it's a string, it passes it into requestUrl.body, if it's something else, it sets body as null.

It's not perfect, but it works for now 😄

P.S. Also I learned that TS ignores types when you do func({ ...object }) 😢

[huyz]

I finally had a chance to try it. And it works for me now.

Very impressive work integrating all these third-party tools.

Thanks @aladmit and @elias-sundqvist !

[rushowr]

@aladmit and @elias-sundqvist, I'm sorry to say it but it's not working for me.
Steps taken before issuing this report:

1. Installed Annotate plugin from within Obsidian
2. Installed chrome extension per changelog info.
3. Downloaded all resources from annotate.tv link given in changelog
4. Uploaded resulting resources zip archive to Google drive and created a direct link.
5. Configured Annotator with the drive link listed in previous step.
6. Created a new note (unique, timestamp filename)
7. Added the following frontmatter properties:
   • annotation-target: https://youtu.be/6w2cwJmVNbU?si=5YScyZqwejxnVpIE
   • annotation-target-type: video
8. Closed the note and reopened the note.
9. Switched to annotate mode from menu.

Upon entering annotate mode, I believe I should have been presented with an interface similar to Annotate.tv's, but instead I only get the following message:

No Content: https://annotate.tv/videos/620d5a42b9ab630009bf3e31

You may note that the link provided doesn't even reference my annotation-target, is this part of the issue?

Obsidian version is up to date according to the updater as of the writing of this comment, and annotator should be up to date as well since it is a fresh install.

Did I miss something?