From c9e2ba8276805cfaa3573297fa9f73f3bdd1b81e Mon Sep 17 00:00:00 2001
From: jbzdarkid <jbzdarkid@gmail.com>
Date: Mon, 12 May 2025 23:38:42 -0700
Subject: [PATCH 1/5] LOTS OF THINGS

---
 index.html |   2 +
 index.js   |  50 +++++++++-----
 player.js  | 192 ++++++++++++++++++++++++++++++++++++++++++-----------
 twitch.js  |   4 +-
 youtube.js |  63 ++++++++++++++++++
 5 files changed, 257 insertions(+), 54 deletions(-)
 create mode 100644 youtube.js

diff --git a/index.html b/index.html
index d1e61d1..c2a4c3e 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,11 @@
   <meta charset="utf-8">
   <link rel="icon" href="./favicon.ico">
   <script async src="https://player.twitch.tv/js/embed/v1.js"></script>
+  <script async src="https://www.youtube.com/iframe_api"></script>
   <script src="./index.js" type="text/javascript"></script>
   <script src="./player.js" type="text/javascript"></script>
   <script src="./twitch.js" type="text/javascript"></script>
+  <script src="./youtube.js" type="text/javascript"></script>
   <script src="./races.js" type="text/javascript"></script>
   <title>Twitch VOD Sync</title>
   <style>
diff --git a/index.js b/index.js
index d81354d..d85e851 100644
--- a/index.js
+++ b/index.js
@@ -64,11 +64,21 @@ window.onload = function() {
         var videoIds = params.get(playerId)
         if (videoIds.length > 0) {
           while (document.getElementById(playerId) == null) window.addPlayer()
-          players.set(playerId, new Player())
-
-          getVideosDetails(videoIds.split('-'))
-          .then(videos => loadVideos(playerId, videos))
-          .catch(r => showText(playerId, 'Could not process video "' + videoIds + '":\n' + r, /*isError*/true))
+          
+          var firstVideo = videoIds.split('-')[0]
+          if (firstVideo.match(TWITCH_VIDEO_MATCH) != null) {
+            players.set(playerId, new TwitchPlayer())
+
+            getTwitchVideosDetails(videoIds.split('-'))
+            .then(videos => loadVideos(playerId, videos), 'twitch')
+            .catch(r => showText(playerId, 'Could not process twitch video "' + videoIds + '":\n' + r, /*isError*/true))
+          } else if (firstVideo.match(YOUTUBE_VIDEO_MATCH) != null) {
+            players.set(playerId, new YoutubePlayer())
+
+            getYoutubeVideosDetails(videoIds.split('-'))
+            .then(videos => loadVideos(playerId, videos), 'youtube')
+            .catch(r => showText(playerId, 'Could not process youtube video "' + videoIds + '":\n' + r, /*isError*/true))
+          }
         }
       }
     })(i)
@@ -348,21 +358,31 @@ function searchVideo(event) {
     return
   }
 
-  // Check to see if the user provided a direct video link
+  // Check to see if the user provided a direct twitch VOD (or VOD id)
   m = formText.match(TWITCH_VIDEO_MATCH)
   if (m != null) {
-    showText(playerId, 'Loading video...')
-    getVideosDetails([m[1]])
-    .then(videos => loadVideos(playerId, videos))
+    showText(playerId, 'Loading Twitch video...')
+    getTwitchVideosDetails([m[1]])
+    .then(videos => loadVideos(playerId, videos), 'twitch')
     .catch(r => showText(playerId, 'Could not process twitch video "' + m[1] + '":\n' + r, /*isError*/true))
     return
   }
 
+  // Check to see if the user provided a direct youtube video (or youtube video id)
+  m = formText.match(YOUTUBE_VIDEO_MATCH)
+  if (m != null) {
+    showText(playerId, 'Loading Youtube video...')
+    getYoutubeVideosDetails([m[1]])
+    .then(videos => loadVideos(playerId, videos, 'youtube'))
+    .catch(r => showText(playerId, 'Could not process youtube video "' + m[1] + '":\n' + r, /*isError*/true))
+    return
+  }
+
   // Check to see if it's a channel (in which case we can look for a matching video)
   m = formText.match(TWITCH_CHANNEL_MATCH)
   if (m != null) {
     showText(playerId, 'Loading channel videos...')
-    getChannelVideos(m[1])
+    getTwitchChannelVideos(m[1])
     .then(videos => {
       var currentTimestamp = getAveragePlayerTimestamp()
       var [timelineStart, timelineEnd] = getTimelineBounds()
@@ -387,7 +407,7 @@ function searchVideo(event) {
       }
 
       if (bestVideo != null) {
-        loadVideos(playerId, [bestVideo]) // TODO: Load all matching videos once the player can handle multiple videos
+        loadVideos(playerId, [bestVideo], 'twitch') // TODO: Load all matching videos once the player can handle multiple videos
         return
       }
 
@@ -424,14 +444,14 @@ function showVideoPicker(playerId, videos) {
       videoImg.style = 'width: 320px; height: 180px; object-fit: cover; object-position: top; cursor: pointer'
       videoImg.onclick = function() {
         videoGrid.remove()
-        loadVideos(playerId, [videos[i]])
+        loadVideos(playerId, [videos[i]], 'twitch')
       }
     })(i)
   }
 }
 
 var players = new Map()
-function loadVideos(playerId, videos) {
+function loadVideos(playerId, videos, playerType) {
   document.getElementById(playerId + '-form').style.display = 'none'
   var div = document.getElementById(playerId)
 
@@ -440,7 +460,7 @@ function loadVideos(playerId, videos) {
   params.set(div.id, videos.map(v => v.id).join('-'))
   history.pushState(null, null, '?' + params.toString())
 
-  var player = new Player(div.id, videos)
+  var player = (playerType == 'twitch') ? new TwitchPlayer(div.id, videos) : new YoutubePlayer(div.id, videos)
   players.set(div.id, player)
   if (params.has(div.id + 'offset')) {
     player.offset = parseInt(params.get(div.id + 'offset'))
@@ -535,7 +555,7 @@ function loadRace(raceDetails) {
       var playerId = 'player' + i
       if (players.has(playerId)) continue
       while (document.getElementById(playerId) == null) window.addPlayer()
-      loadVideos(playerId, [videos.shift()])
+      loadVideos(playerId, [videos.shift()], 'twitch')
     }
   })
 }
diff --git a/player.js b/player.js
index 5c15d9a..08d6349 100644
--- a/player.js
+++ b/player.js
@@ -29,47 +29,49 @@ STATE_STRINGS = [
 // When a video ends, I want to leave it paused somewhere near the end screen -- so this value represents a safe point to seek to which avoids autoplay.
 const VIDEO_END_BUFFER = 15000
 
-class Player {
+class TwitchPlayer {
   constructor(divId, videos) {
     this.state = LOADING
+    if (videos == null || videos.length == 0) return
 
-    if (videos != null && videos.length > 0) {
-      var videoDetails = videos[0] // TODO: Support multiple videos here (everything else should be wired up)
-      this.streamer = videoDetails.streamer
-      this._startTime = videoDetails.startTime
-      this._endTime = videoDetails.endTime
-      this.offset = 0
-      this.id = divId
-
-      var options = {
-        width: '100%',
-        height: '100%',
-        video: videoDetails.id,
-        autoplay: false,
-        muted: true,
-      }
-      this._player = new Twitch.Player(divId, options)
-      this._player.addEventListener('ready', () => {
-        // Only hook events once the player has loaded, so we don't have to worry about events in the LOADING state.
-        this._player.addEventListener('seek', (eventData) => {
-          var seekMillis = Math.floor(eventData.position * 1000)
-          this.eventSink('seek', this, seekMillis)
-        })
-        this._player.addEventListener('play',  () => {
-          // Twitch loads the "true" video duration once it starts playing. We use that to update our end time,
-          // since there's a chance that the video is a live VOD, and its duration doesn't match what the API returned.
-          var durationMillis = Math.floor(this._player.getDuration() * 1000)
-          this._endTime = this._startTime + durationMillis
-          this.eventSink('play', this)
-        })
-        this._player.addEventListener('pause', () => this.eventSink('pause', this))
-        this._player.addEventListener('ended', () => this.eventSink('ended', this))
-
-        // I did not end up using the 'playing' event -- for the most part, twitch pauses videos when the buffer runs out,
-        // which is a sufficient signal to sync up the videos again (although they don't start playing automatically again).
-        this.onready(this)
-      })
+    var videoDetails = videos[0] // TODO: Support multiple videos here (everything else should be wired up)
+    this.streamer = videoDetails.streamer
+    this._startTime = videoDetails.startTime
+    this._endTime = videoDetails.endTime
+    this.offset = 0
+    this.id = divId
+
+    var options = {
+      width: '100%',
+      height: '100%',
+      video: videoDetails.id,
+      autoplay: false,
+      muted: true,
     }
+    this._player = new Twitch.Player(divId, options)
+    this._player.addEventListener('ready', this.onPlayerReady)
+  }
+  
+  onPlayerReady() {
+    // Only hook events once the player has loaded, so we don't have to worry about events in the LOADING state.
+    this._player.addEventListener('seek', (eventData) => {
+      var seekMillis = Math.floor(eventData.position * 1000)
+      this.eventSink('seek', this, seekMillis)
+    })
+    this._player.addEventListener('play',  () => {
+      // Twitch loads the "true" video duration once it starts playing. We use that to update our end time,
+      // since there's a chance that the video is a live VOD, and its duration doesn't match what the API returned.
+      var durationMillis = Math.floor(this._player.getDuration() * 1000)
+      this._endTime = this._startTime + durationMillis
+      this.eventSink('play', this)
+    })
+    this._player.addEventListener('pause', () => this.eventSink('pause', this))
+    this._player.addEventListener('ended', () => this.eventSink('ended', this))
+
+    // I did not end up using the 'playing' event -- for the most part, twitch pauses videos when the buffer runs out,
+    // which is a sufficient signal to sync up the videos again (although they don't start playing automatically again).
+
+    this.onready(this) // Call back into index.js for the main bulk of 'readying'
   }
 
   get startTime() { return this._startTime + this.offset }
@@ -111,3 +113,119 @@ class Player {
     }
   }
 }
+
+class YoutubePlayer {
+  constructor(divId, videos) {
+    this.state = LOADING
+    if (videos == null || videos.length == 0) return
+
+    var videoDetails = videos[0] // TODO: Support multiple videos here (everything else should be wired up)
+    this.streamer = videoDetails.streamer
+    this._startTime = videoDetails.startTime
+    this._endTime = videoDetails.endTime
+    this.offset = 0
+    this.id = divId
+
+    var options = {
+      width: '100%',
+      height: '100%',
+      videoId: videoDetails.id,
+      playerVars: {'autoplay': 0},
+    }
+
+    // The 'onReady' event needs to be hooked precisely so that it's not called *during* the new YT.Player invocation,
+    // and so that 'this' is properly defined inside the callback
+    this._player = new YT.Player(divId, options)
+    this._player.addEventListener('onReady', () => this.onPlayerReady())
+  }
+  
+  onPlayerReady() {
+    this._player.mute() // Oddly this cannot be set in the options, so we set it on ready.
+    
+    // Only hook events once the player has loaded, so we don't have to worry about events in the LOADING state.
+    this._player.addEventListener('onStateChange', (eventData) => {
+      switch (event.data) {
+        case YT.PlayerState.UNSTARTED:
+          break
+        case YT.PlayerState.ENDED:
+          this.eventSink('ended')
+          break
+        case YT.PlayerState.PLAYING:
+          this.eventSink('play')
+          break
+        case YT.PlayerState.PAUSED:
+          this.eventSink('pause')
+          break
+        case YT.PlayerState.BUFFERING:
+          break
+        case YT.PlayerState.CUED:
+          break
+      }
+
+      // this.eventSink(eventData.data)
+      
+      /* TODO: Probably not needed for YT, I assume their APIs will give exact data (and there's no VODs here).
+      // Twitch loads the "true" video duration once it starts playing. We use that to update our end time,
+      // since there's a chance that the video is a live VOD, and its duration doesn't match what the API returned.
+      var durationMillis = Math.floor(this._player.getDuration() * 1000)
+      this._endTime = this._startTime + durationMillis
+      */
+
+    })
+
+    this.onready(this) // Call back into index.js for the main bulk of 'readying'
+  }
+
+  get startTime() { return this._startTime + this.offset }
+  get endTime() { return this._endTime + this.offset }
+
+  getCurrentTimestamp() {
+    var durationMillis = Math.floor(this._player.getCurrentTime() * 1000)
+    return this._startTime + this.offset + durationMillis
+  }
+
+  play() { this._player.playVideo() }
+  pause() { this._player.pauseVideo() }
+  seekToEnd() { this.seekTo(this.endTime) }
+  seekTo(timestamp, targetState) {
+    window.eventLog.push([new Date().getTime(), this.id, 'seekTo', targetState, timestamp])
+
+    var durationSeconds = (timestamp - this.startTime) / 1000.0
+    if (targetState === PAUSED) {
+      this.state = SEEKING_PAUSE
+      this._player.seekTo(durationSeconds)
+      this._player.pauseVideo()
+    } else if (targetState === PLAYING) {
+      this.state = SEEKING_PLAY
+      this._player.seekTo(durationSeconds)
+      this._player.playVideo()
+    }
+
+    /* TODO: I don't know if *any* of this is needed.
+    if (timestamp < this.startTime) {
+      var durationSeconds = 0.001 // I think seek(0) does something wrong, so.
+      this.state = SEEKING_START
+      this._player.pauseVideo()
+      this._player.seek(durationSeconds)
+    } else if (timestamp >= this.endTime - VIDEO_END_BUFFER) {
+      var durationSeconds = (this.endTime - this.startTime - VIDEO_END_BUFFER) / 1000.0
+      this.state = AFTER_END
+      this._player.pauseVideo()
+      this._player.seek(durationSeconds)
+    } else {
+      var durationSeconds = (timestamp - this.startTime) / 1000.0
+      if (durationSeconds === 0) durationSeconds = 0.001 // I think seek(0) does something wrong, so.
+
+      if (targetState === PAUSED) {
+        this.state = SEEKING_PAUSE
+        this._player.pauseVideo()
+        this._player.seek(durationSeconds)
+      } else if (targetState === PLAYING) {
+        this.state = SEEKING_PLAY
+        this._player.seek(durationSeconds)
+        this._player.playVideo()
+      }
+    }
+    */
+  }
+}
diff --git a/twitch.js b/twitch.js
index 01667fb..ba5d90c 100644
--- a/twitch.js
+++ b/twitch.js
@@ -84,7 +84,7 @@ function parseVideo(videoDetails) {
   }
 }
 
-window.getVideosDetails = function(videoIds) {
+window.getTwitchVideosDetails = function(videoIds) {
   // e.g. 'https://api.twitch.tv/helix/videos?id=1234&id=5678'
   return fetch('https://api.twitch.tv/helix/videos?id=' + videoIds.join('&id='), {'headers': headers})
   .then(r => {
@@ -98,7 +98,7 @@ window.getVideosDetails = function(videoIds) {
   })
 }
 
-window.getChannelVideos = function(channelName) {
+window.getTwitchChannelVideos = function(channelName) {
   return fetch('https://api.twitch.tv/helix/users?login=' + channelName, {'headers': headers})
   .then(r => {
     if (r.status == 401) showTwitchRedirect()
diff --git a/youtube.js b/youtube.js
new file mode 100644
index 0000000..19867fc
--- /dev/null
+++ b/youtube.js
@@ -0,0 +1,63 @@
+(() => { // namespace to keep our own copy of 'headers'
+
+var headers = {
+}
+// TODO: I'll need this at some point, probably just re-use the existing UX but have some dynamic param to name the website we're going to.
+/*
+window.showYoutubeRedirect = function() {
+  var authPrefs = window.localStorage.getItem('authPrefs')
+  if (authPrefs == 'autoRedirect') {
+    doYoutubeRedirect()
+    return
+  }
+
+  document.getElementById('twitchRedirect').style.display = null
+  document.getElementById('players').style.display = 'none'
+  document.getElementById('timeline').style.display = 'none'
+}
+
+window.doYoutubeRedirect = function(event) {
+  if (event != null) {
+    event.preventDefault()
+    var authPrefs = event.target.elements['authPrefs'].value
+    window.localStorage.setItem('authPrefs', authPrefs)
+  }
+
+  // If there's somehow already query params, drop them -- we're probably looping.
+  if (window.localStorage.getItem('queryParams') != null) {
+    window.localStorage.removeItem('queryParams')
+
+  // Otherwise, stash the query params before redirecting, as twitch only allows the base URL as a redirect.
+  } else if (window.location.search != null && window.location.search.length > 1) {
+    window.localStorage.setItem('queryParams', window.location.search)
+  }
+
+  // Note that this encodes the current hostname so that we can return to where we came from (e.g. dev vs production)
+  window.location.href =
+    'https://id.twitch.tv/oauth2/authorize' +
+    '?client_id=' + headers['Client-ID'] +
+    '&redirect_uri=' + encodeURIComponent(window.location.origin) +
+    '&response_type=token' +
+    '&scope='
+}
+*/
+
+// TODO: Very hacks.
+window.getYoutubeVideosDetails = function(videoIds) {
+  p = new Promise((resolve, reject) => {
+    resolve([{
+      'id': 'DGM4Mrii96E',
+      'streamer': 'jbzdarkid',
+      'title': 'The Witness any% in 15:14',
+      'preview': 'https://i.ytimg.com/vi/DGM4Mrii96E/hqdefault.jpg',
+      'preview_hover': 'todo',
+      'preview_scrub': 'todo',
+      'startTime': new Date("2020-01-24T18:07:17-08:00").getTime(),
+      'endTime': new Date("2020-01-24T18:07:17-08:00").getTime() + 1000000,
+    }])
+  })
+  
+  return p
+}
+
+})()
\ No newline at end of file

From 226a1c59108d1a75daeaead99ad930b0b335ce05 Mon Sep 17 00:00:00 2001
From: jbzdarkid <jbzdarkid@gmail.com>
Date: Thu, 15 May 2025 02:29:54 -0700
Subject: [PATCH 2/5] yet more work on youtube stuff

---
 twitch.js  | 15 ++++++-----
 youtube.js | 73 ++++++++++++++++++++++++++++++++++++++++--------------
 2 files changed, 63 insertions(+), 25 deletions(-)

diff --git a/twitch.js b/twitch.js
index ba5d90c..9bd1104 100644
--- a/twitch.js
+++ b/twitch.js
@@ -60,8 +60,9 @@ const TWITCH_DURATION_MATCH = /(([0-9]+)h)?(([0-9]+)m)?([0-9]+)s/
 function parseVideo(videoDetails) {
   m = videoDetails.duration.match(TWITCH_DURATION_MATCH)
   if (m == null) throw Error('Internal error: Twitch duration was unparseable: ' + videoDetails.duration)
-  var millis = Number(m[5]) * 1000 // Seconds
-  if (m[4] != null) millis += Number(m[4]) * 60 * 1000 // Minutes
+  var millis = 0
+  if (m[5] != null) millis += Number(m[5])           * 1000 // Seconds
+  if (m[4] != null) millis += Number(m[4])      * 60 * 1000 // Minutes
   if (m[2] != null) millis += Number(m[2]) * 60 * 60 * 1000 // Hours
 
   var parts = videoDetails.thumbnail_url.split('/')
@@ -85,7 +86,7 @@ function parseVideo(videoDetails) {
 }
 
 window.getTwitchVideosDetails = function(videoIds) {
-  // e.g. 'https://api.twitch.tv/helix/videos?id=1234&id=5678'
+  // See https://dev.twitch.tv/docs/api/reference/#get-videos
   return fetch('https://api.twitch.tv/helix/videos?id=' + videoIds.join('&id='), {'headers': headers})
   .then(r => {
     if (r.status == 401) showTwitchRedirect()
@@ -93,12 +94,13 @@ window.getTwitchVideosDetails = function(videoIds) {
     return r.json()
   })
   .then(r => {
-    if (r.data.length === 0) return Promise.reject('Could not load any of these videos:' + videoIds.join(', '))
+    if (r.data.length === 0) return Promise.reject('Could not load any of these twitch videos:' + videoIds.join(', '))
     return r.data.map(video => parseVideo(video))
   })
 }
 
 window.getTwitchChannelVideos = function(channelName) {
+  // See https://dev.twitch.tv/docs/api/reference/#get-users
   return fetch('https://api.twitch.tv/helix/users?login=' + channelName, {'headers': headers})
   .then(r => {
     if (r.status == 401) showTwitchRedirect()
@@ -106,8 +108,9 @@ window.getTwitchChannelVideos = function(channelName) {
     return r.json()
   })
   .then(r => {
-    if (r.data.length === 0) return Promise.reject('Could not load channel ' + channelName)
+    if (r.data.length === 0) return Promise.reject('Could not load twitch channel ' + channelName)
     var channelId = r.data[0].id
+    // See https://dev.twitch.tv/docs/api/reference/#get-videos
     return fetch('https://api.twitch.tv/helix/videos?type=archive&sort=time&user_id=' + channelId, {'headers': headers})
   })
   .then(r => {
@@ -116,7 +119,7 @@ window.getTwitchChannelVideos = function(channelName) {
     return r.json()
   })
   .then(r => {
-    if (r.data.length === 0) return Promise.reject('Did not find any videos for channel ' + channelName)
+    if (r.data.length === 0) return Promise.reject('Did not find any videos for twitch channel ' + channelName)
     return r.data.map(video => parseVideo(video))
   })
 }
diff --git a/youtube.js b/youtube.js
index 19867fc..4650b8d 100644
--- a/youtube.js
+++ b/youtube.js
@@ -1,9 +1,25 @@
 (() => { // namespace to keep our own copy of 'headers'
 
+// TODO: Docs on which redirect URIs I need
+
+// Generate a client ID here: https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow
+// Note: Must be a web client to include the localhost:3000 url.
+// Note: This is not the same ID as used by tests. The tests use a confidential client for auth purposes.
+// Include these redirect URLs:
+// - https://twitch-vod-sync.github.io (for production)
+// - http://localhost:3000 (for local development)
 var headers = {
+  'Client-ID': '588578868528-b3q38esqc12bs70a5mnp2tr82tocoql4.apps.googleusercontent.com',
+}
+
+window.setYoutubeTokenHeader = function(token) {
+  headers['Authorization'] = 'Bearer ' + token
 }
-// TODO: I'll need this at some point, probably just re-use the existing UX but have some dynamic param to name the website we're going to.
-/*
+
+window.overrideYoutubeClientId = function(clientId) {
+  headers['Client-ID'] = clientId
+}
+
 window.showYoutubeRedirect = function() {
   var authPrefs = window.localStorage.getItem('authPrefs')
   if (authPrefs == 'autoRedirect') {
@@ -11,7 +27,8 @@ window.showYoutubeRedirect = function() {
     return
   }
 
-  document.getElementById('twitchRedirect').style.display = null
+  // TODO: Adjust some DOM element to say "youtube" instead of "twitch" here.
+  document.getElementById('twitchRedirect').style.display = null // TODO: Rename me!
   document.getElementById('players').style.display = 'none'
   document.getElementById('timeline').style.display = 'none'
 }
@@ -38,26 +55,44 @@ window.doYoutubeRedirect = function(event) {
     '?client_id=' + headers['Client-ID'] +
     '&redirect_uri=' + encodeURIComponent(window.location.origin) +
     '&response_type=token' +
-    '&scope='
+    '&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.readonly' // TODO: I think this is the smallest scope we can ask for. This shows up as "View your YouTube account" which sounds nicely harmless, if it works.
+}
+
+// Youtube durations follow ISO8601, which in theory includes year-long durations.
+// For my sanity, this parser only handles durations up to a maximum of days.
+const YOUTUBE_DURATION_MATCH = /P(([0-9])D)?(T(([0-9]+)H)?(([0-9]+)M)?(([0-9]+)S)?)?/
+function parseVideo(videoDetails) {
+  m = videoDetails.contentDetails.duration.match(YOUTUBE_DURATION_MATCH)
+  if (m == null) throw Error('Internal error: Youtube duration was unparseable: ' + videoDetails.contentDetails.duration)
+  var millis = 0
+  if (m[9] != null) millis += Number(m[9])                * 1000 // Seconds
+  if (m[7] != null) millis += Number(m[7])           * 60 * 1000 // Minutes
+  if (m[5] != null) millis += Number(m[5])      * 60 * 60 * 1000 // Hours
+  if (m[2] != null) millis += Number(m[2]) * 24 * 60 * 60 * 1000 // Days
+
+  return {
+    'id': videoDetails.id,
+    'streamer': videoDetails.snippet.channelTitle,
+    'title': videoDetails.snippet.title,
+    'preview': videoDetails.snippet.thumbnails.high.url, // Youtube-provided thumbnail
+    'startTime': new Date(videoDetails.snippet.publishedAt).getTime(),
+    'endTime': new Date(videoDetails.snippet.publishedAt).getTime() + millis,
+  }
 }
-*/
 
-// TODO: Very hacks.
 window.getYoutubeVideosDetails = function(videoIds) {
-  p = new Promise((resolve, reject) => {
-    resolve([{
-      'id': 'DGM4Mrii96E',
-      'streamer': 'jbzdarkid',
-      'title': 'The Witness any% in 15:14',
-      'preview': 'https://i.ytimg.com/vi/DGM4Mrii96E/hqdefault.jpg',
-      'preview_hover': 'todo',
-      'preview_scrub': 'todo',
-      'startTime': new Date("2020-01-24T18:07:17-08:00").getTime(),
-      'endTime': new Date("2020-01-24T18:07:17-08:00").getTime() + 1000000,
-    }])
+  // See https://developers.google.com/youtube/v3/docs/videos/list
+  var url = 'https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet'
+  return fetch(url + '&id=' + videoIds.join(','), {'headers': headers})
+  .then(r => {
+    if (r.status == 401) showYoutubeRedirect()
+    if (r.status != 200) return Promise.reject('HTTP request failed: ' + r.status)
+    return r.json()
+  })
+  .then(r => {
+    if (r.items.length === 0) return Promise.reject('Could not load any of these youtube videos:' + videoIds.join(', '))
+    return r.items.map(video => parseVideo(video))
   })
-  
-  return p
 }
 
 })()
\ No newline at end of file

From 20e6360cb5a731a3e7a444609f01be1a7a358a7f Mon Sep 17 00:00:00 2001
From: jbzdarkid <jbzdarkid@gmail.com>
Date: Sat, 17 May 2025 03:35:24 -0700
Subject: [PATCH 3/5] Commit early, etc

---
 index.js   | 28 +++++++++++++++-------------
 twitch.js  | 28 ++++++++++++++--------------
 youtube.js | 41 +++++++++++++++++++++++++----------------
 3 files changed, 54 insertions(+), 43 deletions(-)

diff --git a/index.js b/index.js
index d85e851..febe8d6 100644
--- a/index.js
+++ b/index.js
@@ -24,27 +24,30 @@ window.onload = function() {
     })
   }
 
-  var authToken = null
+  // Check to see if the app is starting with a token (from a Twitch/Youtube redirect). If so, capture it and remove it from the URL.
   if (window.location.hash != null && window.location.hash.length > 1) {
     var params = new URLSearchParams(window.location.hash.substring(1))
-    authToken = params.get('access_token')
-    window.localStorage.setItem('twitchAuthToken', authToken)
+    var scope = params.get('scope')
+    if (scope == 'https://www.googleapis.com/auth/youtube.readonly') {
+      window.localStorage.setItem('youtubeAuthToken', params.get('access_token'))
+      var expires_at = new Date().getTime() + (params.get('expires_in') * 1000)
+      window.localStorage.setItem('youtubeAuthTokenExpires', expires_at)
+    } else if (scope == '') {
+      window.localStorage.setItem('twitchAuthToken', params.get('access_token'))
+
+      // Additional param (which won't ever come from twitch) that is used to override the client_id in tests.
+      // The tests need a confidential client (to do auth server-side) but the product needs a native client (to have a localhost redirect).
+      if (params.has('client_id')) window.overrideTwitchClientId(params.get('client_id'))
+    }
     window.location.hash = ''
-
-    // Additional param (which won't ever come from twitch) that is used to override the client_id in tests.
-    // The tests need a confidential client (to do auth server-side) but the product needs a native client (to have a localhost redirect).
-    if (params.has('client_id')) window.overrideTwitchClientId(params.get('client_id'))
-  } else {
-    authToken = window.localStorage.getItem('twitchAuthToken')
   }
 
-  if (authToken == null) {
+  // We almost always need auth for twitch. If we don't have a saved token, trigger twitch auth.
+  if (window.localStorage.getItem('twitchAuthToken') == null) {
     showTwitchRedirect()
     return
   }
 
-  setTwitchTokenHeader(authToken)
-
   // Once auth is sorted out, load any videos from the query parameters (or the stashed parameters).
   var params = null
   if (window.localStorage.getItem('queryParams') != null) {
@@ -842,4 +845,3 @@ function reloadTimeline() {
   endLabel.style = 'margin-right: 3px'
   endLabel.innerText = new Date(timelineEnd).toLocaleString(TIMELINE_DATE_FORMAT)
 }
-
diff --git a/twitch.js b/twitch.js
index 9bd1104..208062a 100644
--- a/twitch.js
+++ b/twitch.js
@@ -1,4 +1,4 @@
-(() => { // namespace to keep our own copy of 'headers'
+(() => {
 
 // Generate a client ID here: https://dev.twitch.tv/docs/authentication/register-app/
 // Note: Must be a public client to include the localhost:3000 url.
@@ -6,16 +6,16 @@
 // Include these redirect URLs:
 // - https://twitch-vod-sync.github.io (for production)
 // - http://localhost:3000 (for local development)
-var headers = {
-  'Client-ID': 'm0bgzop0z8m62bacx50hxh6v0rkiwe',
-}
-
-window.setTwitchTokenHeader = function(token) {
-  headers['Authorization'] = 'Bearer ' + token
-}
+var CLIENT_ID = 'm0bgzop0z8m62bacx50hxh6v0rkiwe'
+window.overrideTwitchClientId = function(clientId) { CLIENT_ID = clientId }
 
-window.overrideTwitchClientId = function(clientId) {
-  headers['Client-ID'] = clientId
+function getHeaders() {
+  return {
+    'headers': {
+      'Client-ID': CLIENT_ID,
+      'Authorization': 'Bearer ' + window.localStorage.getItem('twitchAuthToken'),
+    }
+  }
 }
 
 window.showTwitchRedirect = function() {
@@ -49,7 +49,7 @@ window.doTwitchRedirect = function(event) {
   // Note that this encodes the current hostname so that we can return to where we came from (e.g. dev vs production)
   window.location.href =
     'https://id.twitch.tv/oauth2/authorize' +
-    '?client_id=' + headers['Client-ID'] +
+    '?client_id=' + CLIENT_ID +
     '&redirect_uri=' + encodeURIComponent(window.location.origin) +
     '&response_type=token' +
     '&scope='
@@ -87,7 +87,7 @@ function parseVideo(videoDetails) {
 
 window.getTwitchVideosDetails = function(videoIds) {
   // See https://dev.twitch.tv/docs/api/reference/#get-videos
-  return fetch('https://api.twitch.tv/helix/videos?id=' + videoIds.join('&id='), {'headers': headers})
+  return fetch('https://api.twitch.tv/helix/videos?id=' + videoIds.join('&id='), getHeaders())
   .then(r => {
     if (r.status == 401) showTwitchRedirect()
     if (r.status != 200) return Promise.reject('HTTP request failed: ' + r.status)
@@ -101,7 +101,7 @@ window.getTwitchVideosDetails = function(videoIds) {
 
 window.getTwitchChannelVideos = function(channelName) {
   // See https://dev.twitch.tv/docs/api/reference/#get-users
-  return fetch('https://api.twitch.tv/helix/users?login=' + channelName, {'headers': headers})
+  return fetch('https://api.twitch.tv/helix/users?login=' + channelName, getHeaders())
   .then(r => {
     if (r.status == 401) showTwitchRedirect()
     if (r.status != 200) return Promise.reject('HTTP request failed: ' + r.status)
@@ -111,7 +111,7 @@ window.getTwitchChannelVideos = function(channelName) {
     if (r.data.length === 0) return Promise.reject('Could not load twitch channel ' + channelName)
     var channelId = r.data[0].id
     // See https://dev.twitch.tv/docs/api/reference/#get-videos
-    return fetch('https://api.twitch.tv/helix/videos?type=archive&sort=time&user_id=' + channelId, {'headers': headers})
+    return fetch('https://api.twitch.tv/helix/videos?type=archive&sort=time&user_id=' + channelId, getHeaders())
   })
   .then(r => {
     if (r.status == 401) showTwitchRedirect()
diff --git a/youtube.js b/youtube.js
index 4650b8d..de75c2f 100644
--- a/youtube.js
+++ b/youtube.js
@@ -1,23 +1,22 @@
 (() => { // namespace to keep our own copy of 'headers'
 
-// TODO: Docs on which redirect URIs I need
-
-// Generate a client ID here: https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow
+// Generate a client ID here: https://console.developers.google.com/auth/clients
 // Note: Must be a web client to include the localhost:3000 url.
 // Note: This is not the same ID as used by tests. The tests use a confidential client for auth purposes.
 // Include these redirect URLs:
 // - https://twitch-vod-sync.github.io (for production)
 // - http://localhost:3000 (for local development)
-var headers = {
-  'Client-ID': '588578868528-b3q38esqc12bs70a5mnp2tr82tocoql4.apps.googleusercontent.com',
-}
-
-window.setYoutubeTokenHeader = function(token) {
-  headers['Authorization'] = 'Bearer ' + token
-}
+var CLIENT_ID = '588578868528-b3q38esqc12bs70a5mnp2tr82tocoql4.apps.googleusercontent.com'
+window.overrideYoutubeClientId = function(clientId) { CLIENT_ID = clientId }
 
-window.overrideYoutubeClientId = function(clientId) {
-  headers['Client-ID'] = clientId
+function getHeaders() {
+  return {
+    'headers': {
+      'Client-ID': CLIENT_ID,
+      'Accept': 'application/json',
+      'Authorization': 'Bearer ' + window.localStorage.getItem('youtubeAuthToken'),
+    }
+  }
 }
 
 window.showYoutubeRedirect = function() {
@@ -51,8 +50,9 @@ window.doYoutubeRedirect = function(event) {
 
   // Note that this encodes the current hostname so that we can return to where we came from (e.g. dev vs production)
   window.location.href =
-    'https://id.twitch.tv/oauth2/authorize' +
-    '?client_id=' + headers['Client-ID'] +
+    'https://accounts.google.com/o/oauth2/v2/auth' +
+    '?client_id=' + CLIENT_ID +
+    // '&redirect_uri=' + 'https://twitch-vod-sync.github.io' +
     '&redirect_uri=' + encodeURIComponent(window.location.origin) +
     '&response_type=token' +
     '&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.readonly' // TODO: I think this is the smallest scope we can ask for. This shows up as "View your YouTube account" which sounds nicely harmless, if it works.
@@ -81,9 +81,18 @@ function parseVideo(videoDetails) {
 }
 
 window.getYoutubeVideosDetails = function(videoIds) {
+  if (window.localStorage.getItem('youtubeAuthToken') == null
+      || window.localStorage.getItem('youtubeAuthTokenExpires') < new Date().getTime()) {
+    // Youtube's tokens expire after an hour. If we notice it's expired, just fetch a new one.
+    showYoutubeRedirect()
+    return Promise.reject(new Error('Youtube auth token was empty or expired'))
+  }
+
   // See https://developers.google.com/youtube/v3/docs/videos/list
-  var url = 'https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet'
-  return fetch(url + '&id=' + videoIds.join(','), {'headers': headers})
+  var url = 'https://youtube.googleapis.com/youtube/v3/videos?part=contentDetails,snippet'
+  url += '&key=' + 'AIzaSyDQVitYnqFVQrGr-kVP1FxoEKcxMdQ1sOk'
+  url += '&id=' + videoIds.join(',')
+  return fetch(url, getHeaders())
   .then(r => {
     if (r.status == 401) showYoutubeRedirect()
     if (r.status != 200) return Promise.reject('HTTP request failed: ' + r.status)

From 29d82e4c6ac66aa807031e9f93b6d72d9599f340 Mon Sep 17 00:00:00 2001
From: jbzdarkid <jbzdarkid@gmail.com>
Date: Sat, 17 May 2025 17:45:21 -0700
Subject: [PATCH 4/5] I don't actually think we need/want this

---
 index.html |  1 -
 player.js  |  4 ++--
 youtube.js | 21 +++++++--------------
 3 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index c2a4c3e..f64d390 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,6 @@
   <script src="./index.js" type="text/javascript"></script>
   <script src="./player.js" type="text/javascript"></script>
   <script src="./twitch.js" type="text/javascript"></script>
-  <script src="./youtube.js" type="text/javascript"></script>
   <script src="./races.js" type="text/javascript"></script>
   <title>Twitch VOD Sync</title>
   <style>
diff --git a/player.js b/player.js
index 08d6349..dc8cf7c 100644
--- a/player.js
+++ b/player.js
@@ -127,8 +127,8 @@ class YoutubePlayer {
     this.id = divId
 
     var options = {
-      width: '100%',
-      height: '100%',
+      // width: '100%',
+      // height: '100%',
       videoId: videoDetails.id,
       playerVars: {'autoplay': 0},
     }
diff --git a/youtube.js b/youtube.js
index de75c2f..9ecdc03 100644
--- a/youtube.js
+++ b/youtube.js
@@ -9,16 +9,6 @@
 var CLIENT_ID = '588578868528-b3q38esqc12bs70a5mnp2tr82tocoql4.apps.googleusercontent.com'
 window.overrideYoutubeClientId = function(clientId) { CLIENT_ID = clientId }
 
-function getHeaders() {
-  return {
-    'headers': {
-      'Client-ID': CLIENT_ID,
-      'Accept': 'application/json',
-      'Authorization': 'Bearer ' + window.localStorage.getItem('youtubeAuthToken'),
-    }
-  }
-}
-
 window.showYoutubeRedirect = function() {
   var authPrefs = window.localStorage.getItem('authPrefs')
   if (authPrefs == 'autoRedirect') {
@@ -55,7 +45,7 @@ window.doYoutubeRedirect = function(event) {
     // '&redirect_uri=' + 'https://twitch-vod-sync.github.io' +
     '&redirect_uri=' + encodeURIComponent(window.location.origin) +
     '&response_type=token' +
-    '&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.readonly' // TODO: I think this is the smallest scope we can ask for. This shows up as "View your YouTube account" which sounds nicely harmless, if it works.
+    '&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.readonly' // TODO: I think this is the smallest scope we can ask for. This shows up as "View your YouTube account" which sounds nicely harmless.
 }
 
 // Youtube durations follow ISO8601, which in theory includes year-long durations.
@@ -89,10 +79,13 @@ window.getYoutubeVideosDetails = function(videoIds) {
   }
 
   // See https://developers.google.com/youtube/v3/docs/videos/list
-  var url = 'https://youtube.googleapis.com/youtube/v3/videos?part=contentDetails,snippet'
-  url += '&key=' + 'AIzaSyDQVitYnqFVQrGr-kVP1FxoEKcxMdQ1sOk'
+  // except that this is using the raw access_token query param for some strange reason -- it doesn't work with the header.
+  var url = 'https://youtube.googleapis.com/youtube/v3/videos'
+  url += '?part=contentDetails,snippet'
   url += '&id=' + videoIds.join(',')
-  return fetch(url, getHeaders())
+  url += '&access_token=' + window.localStorage.getItem('youtubeAuthToken')
+
+  return fetch(url)
   .then(r => {
     if (r.status == 401) showYoutubeRedirect()
     if (r.status != 200) return Promise.reject('HTTP request failed: ' + r.status)

From 069e36528fccd8ce760af5d389a556340f8eb681 Mon Sep 17 00:00:00 2001
From: jbzdarkid <jbzdarkid@gmail.com>
Date: Wed, 21 May 2025 21:05:04 -0700
Subject: [PATCH 5/5] okay man

---
 index.js  | 33 ++++++++++++++++++++++++---------
 player.js |  2 +-
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/index.js b/index.js
index febe8d6..ada2e9c 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,7 @@
 var FEATURES = {
   'HIDE_ENDING_TIMES': true,
   'SHUFFLE_RACE_VIDEOS': false,
+  'ABSOLUTE_OFFSETS': false,
   'MAX_PLAYERS': 6,
   'MIN_PLAYERS': 2,
 }
@@ -44,7 +45,7 @@ window.onload = function() {
 
   // We almost always need auth for twitch. If we don't have a saved token, trigger twitch auth.
   if (window.localStorage.getItem('twitchAuthToken') == null) {
-    showTwitchRedirect()
+    window.showTwitchRedirect()
     return
   }
 
@@ -78,7 +79,7 @@ window.onload = function() {
           } else if (firstVideo.match(YOUTUBE_VIDEO_MATCH) != null) {
             players.set(playerId, new YoutubePlayer())
 
-            getYoutubeVideosDetails(videoIds.split('-'))
+            getEmptyVideosDetails(videoIds.split('-'))
             .then(videos => loadVideos(playerId, videos), 'youtube')
             .catch(r => showText(playerId, 'Could not process youtube video "' + videoIds + '":\n' + r, /*isError*/true))
           }
@@ -169,20 +170,25 @@ window.onload = function() {
       } else {
         // Once the user hits 'a' again, we normalize the offsets so that the earliest video is at the "true" time,
         // so that the timeline shows something reasonable.
-        var largestOffset = -ASYNC_ALIGN
-        for (var player of players.values()) {
-          if (player.offset > largestOffset) largestOffset = player.offset
+        if (!FEATURES.ABSOLUTE_OFFSETS) {
+          var largestOffset = -ASYNC_ALIGN
+          for (var player of players.values()) {
+            if (player.offset > largestOffset) largestOffset = player.offset
+          }
+
+          for (var player of players.values()) {
+            player.offset -= largestOffset
+          }
         }
 
-        // Normalize offsets then save to the URL (to allow sharing)
+        // Save offsets into the URL (to allow sharing)
         var params = new URLSearchParams(window.location.search);
         for (var player of players.values()) {
-          player.offset -= largestOffset
           params.set(player.id + 'offset', player.offset)
         }
         history.pushState(null, null, '?' + params.toString())
 
-        reloadTimeline() // Reload now that the videos have comparable timers
+        reloadTimeline() // Reload now that the videos have comparable start and end times
 
         console.log('vodsync', 'Resuming all players after async alignment')
         for (var player of players.values()) {
@@ -375,7 +381,7 @@ function searchVideo(event) {
   m = formText.match(YOUTUBE_VIDEO_MATCH)
   if (m != null) {
     showText(playerId, 'Loading Youtube video...')
-    getYoutubeVideosDetails([m[1]])
+    getEmptyVideosDetails([m[1]])
     .then(videos => loadVideos(playerId, videos, 'youtube'))
     .catch(r => showText(playerId, 'Could not process youtube video "' + m[1] + '":\n' + r, /*isError*/true))
     return
@@ -453,6 +459,15 @@ function showVideoPicker(playerId, videos) {
   }
 }
 
+// Used for Youtube (and potentially other scenarios) when we don't wish to call the API for precise timestamps.
+function getEmptyVideosDetails(videoIds) {
+  return videoIds.map(videoId => {
+    'id': videoDetails.id,
+    'startTime': new Date(videoDetails.created_at).getTime(),
+    'endTime': new Date(videoDetails.created_at).getTime() + millis,
+  })
+}
+
 var players = new Map()
 function loadVideos(playerId, videos, playerType) {
   document.getElementById(playerId + '-form').style.display = 'none'
diff --git a/player.js b/player.js
index dc8cf7c..a15557c 100644
--- a/player.js
+++ b/player.js
@@ -164,7 +164,7 @@ class YoutubePlayer {
 
       // this.eventSink(eventData.data)
       
-      /* TODO: Probably not needed for YT, I assume their APIs will give exact data (and there's no VODs here).
+      /* TODO: Actually we do need this, since we're not calling YT apis anymore.
       // Twitch loads the "true" video duration once it starts playing. We use that to update our end time,
       // since there's a chance that the video is a live VOD, and its duration doesn't match what the API returned.
       var durationMillis = Math.floor(this._player.getDuration() * 1000)