2 files changed, 45 insertions, 1 deletions
diff --git a/src/invidious/views/components/player.ecr b/src/invidious/views/components/player.ecr
index 3ab44899..ef434fa3 100644
--- a/src/invidious/views/components/player.ecr
+++ b/src/invidious/views/components/player.ecr
@@ -213,6 +213,49 @@ if (bpb) {
 
 player.httpSourceSelector();
 
+<% if !params[:listen] %>
+var video_container = document.getElementById("player");
+let xhr = new XMLHttpRequest();
+xhr.responseType = "text";
+xhr.timeout = 60000;
+xhr.open("GET", "/api/v1/annotations/<%= video.id %>", true);
+xhr.send();
+
+xhr.onreadystatechange = function () {
+  if (xhr.readyState === 4) {
+    if (xhr.status === 200) {
+      videojs.registerPlugin("youtubeAnnotationsPlugin", youtubeAnnotationsPlugin);
+      if (!player.paused()) {
+        player.youtubeAnnotationsPlugin({annotationXml: xhr.response, videoContainer: video_container});
+      } else {
+        player.one('play', function(event) {
+          player.youtubeAnnotationsPlugin({annotationXml: xhr.response, videoContainer: video_container});
+        });
+      }
+    }
+  }
+};
+
+window.addEventListener("__ar_annotation_click", e => {
+    const { url, target, seconds } = e.detail;
+
+    var path = new URL(url);
+
+    if (path.href.startsWith("https://www.youtube.com/watch?") && seconds) {
+        path.search += "&t=" + seconds;
+    }
+
+    path  = path.pathname + path.search;
+
+    if (target === "current") {
+        window.location.href = path;
+    }
+    else if (target === "new") {
+        window.open(path, "_blank");
+    }
+});
+<% end %>
+
 // Since videojs-share can sometimes be blocked, we try to load it last
 player.share(shareOptions);
 </script>
diff --git a/src/invidious/views/components/player_sources.ecr b/src/invidious/views/components/player_sources.ecr
index 37fac6b1..a8b4522b 100644
--- a/src/invidious/views/components/player_sources.ecr
+++ b/src/invidious/views/components/player_sources.ecr
@@ -2,13 +2,14 @@
 <link rel="stylesheet" href="/css/videojs-http-source-selector.css">
 <link rel="stylesheet" href="/css/videojs.markers.min.css">
 <link rel="stylesheet" href="/css/videojs-share.css">
+<link rel="stylesheet" href="/css/videojs-youtube-annotations.css">
 <script src="/js/video.min.js"></script>
 <script src="/js/videojs-contrib-quality-levels.min.js"></script>
 <script src="/js/videojs-http-source-selector.min.js"></script>
 <script src="/js/videojs.hotkeys.min.js"></script>
 <script src="/js/videojs-markers.min.js"></script>
 <script src="/js/videojs-share.min.js"></script>
-
+<script src="/js/videojs-youtube-annotations.js"></script>
 <% if params[:quality] != "dash" %>
 <link rel="stylesheet" href="/css/quality-selector.css">
 <script src="/js/silvermine-videojs-quality-selector.min.js"></script>