Tokyo-Motion progress thumbnail viewer

Show progress thumbnail image on Tokyo-Motion video pages

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

You will need to install an extension such as Tampermonkey to install this script.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         Tokyo-Motion progress thumbnail viewer
// @namespace    tokyo-motion-progressthumb
// @version      1.0
// @description  Show progress thumbnail image on Tokyo-Motion video pages
// @match        https://www.tokyomotion.net/*
// @grant        none
// @license      MIT 
// ==/UserScript==

(function () {
  'use strict';

  // URLから動画IDを抽出
  const match = location.pathname.match(/\/([0-9]{1,})\/?/);
  if (!match) return;

  const id = match[1];

  // 上位ディレクトリ計算(3桁以下にも対応)
  const baseDir = id.length > 3 ? id.slice(0, -3) : '0';

  // 画像URL生成
  const imgUrl =
    `https://cdn.tokyo-motion.net/media/videos/vjsslides/${baseDir}/${id}_progressthumb.jpg`;

  // img要素作成
  const img = document.createElement('img');
  img.src = imgUrl;
  img.alt = 'progress thumbnail';
  img.style.maxWidth = '100%';
  img.style.display = 'block';
  img.style.margin = '10px auto';
  img.style.border = '1px solid #666';

  // 読み込み失敗時は何もしない
  img.onerror = () => img.remove();

  // ページ先頭に挿入
  document.body.prepend(img);
})();