☰

Sync media

You can set the start timet to syncronize the media.

  1. // ==UserScript==
  2. // @name        Sync media
  3. // @description You can set the start timet to syncronize the media.
  4. // @namespace   utubo/syncmedia
  5. // @match       https://www.youtube.com/*
  6. // @match       https://abema.tv/*
  7. // @version     1.0
  8. // @author      -
  9. // @name:ja     Sync media
  10. // @description:ja You can set the start timet to syncronize the media.
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.   // ----------
  15.   // sync
  16.   const INTERVAL = 5000;
  17.   const RANGE = 1;
  18.   let timer = null;
  19.   let startDateTime = null;
  20.   const syncVideo = () => {
  21.     if (!startDateTime) return;
  22.     clearTimeout(timer);
  23.     timer = setTimeout(syncVideo, INTERVAL);
  24.     let target = null;
  25.     if (location.host === 'abema.tv') {
  26.       target = document.querySelector('video[preload=metadata]');
  27.     } else {
  28.       target = document.querySelector('video');
  29.     }
  30.     if (!target) return;
  31.     const syncTime = (Date.now() - startDateTime) / 1000;
  32.     if (Math.abs(target.currentTime - syncTime) > RANGE) {
  33.       target.currentTime = syncTime;
  34.     }
  35.   };
  36.  
  37.   // ----------
  38.   // ui
  39.   const msecToStr = msec => {
  40.     const tzoffset = (new Date()).getTimezoneOffset() * 60000;
  41.     return new Date(msec - tzoffset)
  42.       .toISOString()
  43.       .replace('T', ' ')
  44.       .replace(/\.\d\d\dZ$/, '');
  45.   };
  46.  
  47.   const showDlg = () => {
  48.     const val = prompt('⏱Set the start time', msecToStr(startDateTime || Date.now()));
  49.     if (val === null) return;
  50.     startDateTime = new Date(val).getTime();
  51.     syncVideo();
  52.   };
  53.  
  54.   addEventListener('keydown', e => {
  55.     if (e.altKey && e.key === 's') {
  56.       showDlg();
  57.     }
  58.   });
  59.  
  60. })();