VOD Convert

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  body { font-family: system-ui, sans-serif; max-width: 460px; margin: 2rem auto; padding: 0 1rem; }
  .row { display: flex; align-items: center; gap: 10px; margin-bottom: 1.25rem; }
  label { white-space: nowrap; color: #555; }
  input { flex: 1; padding: 8px; font-size: 16px; }
  button { padding: 8px 14px; font-size: 15px; cursor: pointer; }
  #out { display: none; background: #f3f3f3; border-radius: 10px; padding: 1rem 1.25rem; }
  #v2 { font-size: 24px; font-weight: 600; margin: 4px 0 12px; }
  a { word-break: break-all; }
  #err { display: none; color: #c0392b; margin-top: 8px; }
</style>
</head>
<body>
  <div class="row">
    <label for="ts">Put PSP timestamp in this box</label>
    <input id="ts" type="text" placeholder="1:42:28" />
    <button id="go">Convert</button>
  </div>

  <div id="out">
    <div style="font-size:13px;color:#777;">And here's Deme's VOD timestamp</div>
    <div id="v2">—</div>
    <a id="link" href="#" target="_blank" rel="noopener"></a>
  </div>

  <div id="err"></div>

<script>
const VIDEO_ID = "nfHv0QSD90Q";
const OFFSET = 39 * 60 + 52;

function toSeconds(ts) {
  const parts = ts.split(":").map(p => {
    if (!/^\d+$/.test(p.trim())) throw new Error("bad");
    return parseInt(p, 10);
  });
  while (parts.length < 3) parts.unshift(0);
  if (parts.length > 3) throw new Error("bad");
  const [h, m, s] = parts;
  return h * 3600 + m * 60 + s;
}

function toTimestamp(secs) {
  const h = Math.floor(secs / 3600);
  const m = Math.floor((secs % 3600) / 60);
  const s = secs % 60;
  return h + ":" + String(m).padStart(2, "0") + ":" + String(s).padStart(2, "0");
}

function convert() {
  const out = document.getElementById("out");
  const err = document.getElementById("err");
  const raw = document.getElementById("ts").value.trim();
  out.style.display = "none";
  err.style.display = "none";
  if (!raw) return;
  let...