Tokyo-Motion progress thumbnail viewer

Show progress thumbnail image on Tokyo-Motion video pages

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey, Greasemonkey или Violentmonkey.

Для установки этого скрипта вам необходимо установить расширение, такое как Tampermonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например 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);
})();