@oxymoron.13/tizentube-s95b 0.2.2 → 0.2.3

package/mods/features/s95bCodec.js

@@ -0,0 +1,45 @@
+/* S95B Performance Edition – GPL-3.0-only.
+ * Pure, conservative format selector. Does not touch Samsung/Tizen APIs.
+ */
+export function selectCodecFormats(response, codec) {
+  if (!response || !response.streamingData || !Array.isArray(response.streamingData.adaptiveFormats)) {
+    return { changed: false, reason: 'no-formats' };
+  }
+  if (codec !== 'vp9' && codec !== 'av01' && codec !== 'avc1') {
+    return { changed: false, reason: 'automatic' };
+  }
+
+  const formats = response.streamingData.adaptiveFormats;
+  const video = formats.filter(item => item && typeof item.mimeType === 'string' && /^video\//i.test(item.mimeType));
+  const isMatch = item => {
+    const mime = item.mimeType.toLowerCase();
+    if (codec === 'vp9') return /(?:vp9|vp09)/.test(mime);
+    if (codec === 'av01') return /av01/.test(mime);
+    return /avc1/.test(mime);
+  };
+  const selected = video.filter(isMatch);
+  if (!selected.length) return { changed: false, reason: 'codec-unavailable' };
+  if (selected.length === video.length) return { changed: false, reason: 'already-selected' };
+
+  // Conservative quality parity: preserve original formats if filtering could
+  // remove the best available height/fps combination. Metadata absent => no filter.
+  const valid = item => Number.isFinite(item.height) && item.height > 0 &&
+    Number.isFinite(item.fps) && item.fps > 0;
+  if (!video.every(valid) || !selected.every(valid)) {
+    return { changed: false, reason: 'quality-unknown' };
+  }
+  const maxHeight = Math.max(...video.map(item => item.height));
+  const maxFpsAtHeight = Math.max(...video.filter(item => item.height === maxHeight).map(item => item.fps));
+  const bestMatch = selected.some(item => item.height >= maxHeight && item.fps >= maxFpsAtHeight);
+  if (!bestMatch) return { changed: false, reason: 'quality-fallback' };
+
+  // Keep audio and unrecognized entries untouched. No media decoding or resampling.
+  const next = formats.filter(item => !item || typeof item.mimeType !== 'string' ||
+    !/^video\//i.test(item.mimeType) || isMatch(item));
+  if (!next.some(item => item && /^audio\//i.test(item.mimeType || ''))) {
+    // Do not make a pre-existing audio problem worse by filtering streams.
+    return { changed: false, reason: 'missing-audio' };
+  }
+  response.streamingData.adaptiveFormats = next;
+  return { changed: true, reason: 'selected' };
+}

package/mods/features/s95bI18n.js

@@ -0,0 +1,28 @@
+/* S95B Performance Edition – GPL-3.0-only */
+export const STRINGS = Object.freeze({
+  de: Object.freeze({
+    title: 'S95B · Performance', language: 'Sprache', codec: 'Videocodec', quality: 'Bevorzugte Qualität',
+    automatic: 'Automatisch', light: 'Ressourcenschonender Modus',
+    lightHint: 'Schaltet Vorschauen und DeArrow ab; vorherige Werte werden beim Ausschalten wiederhergestellt.',
+    codecHint: 'H.264 liefert bei YouTube in der Regel höchstens 1080p; 4K gibt es nur als VP9 oder AV1. Ein Codec wird nur erzwungen, wenn dadurch keine Qualität verloren geht. Gilt ab dem nächsten Video.',
+    qualityHint: 'Eine feste Qualität gilt sofort. „Automatisch“ wirkt eventuell erst nach einem Neustart von YouTube.',
+    languageHint: 'Gilt für dieses Menü, beim nächsten Öffnen.',
+    statVideo: 'Video', statFrames: 'Verlorene Bilder', statCodec: 'Codec-Wunsch',
+    statUnavailable: 'nicht verfügbar', statWait: 'wartet auf Video',
+    languageDE: 'Deutsch', languageEN: 'English',
+  }),
+  en: Object.freeze({
+    title: 'S95B · Performance', language: 'Language', codec: 'Video codec', quality: 'Preferred quality',
+    automatic: 'Automatic', light: 'Low-overhead mode',
+    lightHint: 'Disables previews and DeArrow; the previous values are restored when switched off.',
+    codecHint: 'On YouTube, H.264 usually tops out at 1080p; 4K is only available as VP9 or AV1. A codec is only forced if no quality is lost. Applies from the next video.',
+    qualityHint: 'A fixed quality applies immediately. “Automatic” may only take effect after restarting YouTube.',
+    languageHint: 'Applies to this menu, the next time it is opened.',
+    statVideo: 'Video', statFrames: 'Dropped frames', statCodec: 'Codec preference',
+    statUnavailable: 'not available', statWait: 'waiting for video',
+    languageDE: 'Deutsch', languageEN: 'English',
+  })
+});
+export function translate(lang, key) {
+  return (STRINGS[lang] || STRINGS.de)[key] || STRINGS.en[key] || key;
+}

package/mods/features/s95bMenu.js

@@ -0,0 +1,142 @@
+/* S95B Performance Edition – GPL-3.0-only
+ * The yellow remote key opens a menu that YouTube itself draws (TizenTube's own optionShow),
+ * the same mechanism as the green (settings) and blue (speed) menus. No DOM overlay is added to the page.
+ * Uses only existing TizenTube configRead/configWrite APIs. No firmware calls, network requests or timers.
+ */
+import { configRead, configWrite, configChangeEmitter } from '../config.js';
+import { optionShow } from '../ui/settings.js';
+import { translate } from './s95bI18n.js';
+
+const STATE_KEY = 's95b-perf-edition-v1';
+const EDITED = ['enablePreviews', 'enableDeArrow', 'enableDeArrowThumbnails'];
+const CODECS = ['any', 'vp9', 'av01', 'avc1'];
+const QUALITIES = ['auto', '2160p', '1440p', '1080p', '720p'];
+const defaultState = { lang: 'de', light: false, previous: null };
+let state = { ...defaultState };
+
+function readState() {
+  try {
+    const data = JSON.parse(localStorage.getItem(STATE_KEY) || 'null');
+    if (data && typeof data === 'object') {
+      state = { ...defaultState,
+        lang: data.lang === 'en' ? 'en' : 'de', light: data.light === true,
+        previous: data.previous && typeof data.previous === 'object' ? data.previous : null };
+    }
+  } catch (_) { state = { ...defaultState }; }
+}
+function save() {
+  try { localStorage.setItem(STATE_KEY, JSON.stringify(state)); } catch (_) { /* no persistent storage */ }
+}
+function t(key) { return translate(state.lang, key); }
+
+function codecLabel(value) {
+  return value === 'any' ? t('automatic') : value === 'vp9' ? 'VP9' : value === 'av01' ? 'AV1' : 'H.264';
+}
+function qualityLabel(value) {
+  return value === 'auto' ? t('automatic') : value === '2160p' ? '2160p (4K)' : value;
+}
+function currentCodec() {
+  const value = configRead('preferredVideoCodec');
+  return CODECS.indexOf(value) >= 0 ? value : 'any';
+}
+
+// Low-overhead mode: switches off a few TizenTube features and remembers the previous values.
+function turnLight(enable) {
+  if (enable === state.light) return;
+  if (enable) {
+    const values = {};
+    EDITED.forEach(key => { values[key] = configRead(key); });
+    state.previous = values;
+    EDITED.forEach(key => configWrite(key, false));
+    state.light = true;
+  } else {
+    if (state.previous) EDITED.forEach(key => {
+      if (Object.prototype.hasOwnProperty.call(state.previous, key)) {
+        configWrite(key, state.previous[key]);
+      }
+    });
+    state.previous = null;
+    state.light = false;
+  }
+  save();
+}
+
+// One snapshot of what the web player reports, taken each time the menu opens.
+function statsLine() {
+  const video = document.querySelector('video');
+  let size = t('statWait');
+  let dropped = t('statUnavailable');
+  if (video) {
+    const width = video.videoWidth || 0;
+    const height = video.videoHeight || 0;
+    size = width > 0 && height > 0 ? width + ' × ' + height : t('statUnavailable');
+    if (typeof video.getVideoPlaybackQuality === 'function') {
+      try {
+        const q = video.getVideoPlaybackQuality();
+        if (q && Number.isFinite(q.droppedVideoFrames)) dropped = String(q.droppedVideoFrames);
+      } catch (_) { /* diagnostics must never interrupt playback */ }
+    }
+  }
+  return t('statVideo') + ': ' + size + '  |  ' + t('statFrames') + ': ' + dropped +
+    '  |  ' + t('statCodec') + ': ' + codecLabel(currentCodec());
+}
+
+function buildOptions() {
+  return [
+    { name: t('language'), value: null, menuId: 's95b-language',
+      menuHeader: { title: t('language'), subtitle: t('languageHint') },
+      options: [
+        { name: t('languageDE'), key: 's95bLanguage', value: 'de' },
+        { name: t('languageEN'), key: 's95bLanguage', value: 'en' }
+      ] },
+    { name: t('codec'), icon: 'VIDEO_QUALITY', value: null, menuId: 's95b-codec',
+      menuHeader: { title: t('codec'), subtitle: t('codecHint') },
+      options: CODECS.map(codec => ({ name: codecLabel(codec), key: 'preferredVideoCodec', value: codec })) },
+    { name: t('quality'), icon: 'VIDEO_QUALITY', value: null, menuId: 's95b-quality',
+      menuHeader: { title: t('quality'), subtitle: t('qualityHint') },
+      options: QUALITIES.map(quality => ({ name: qualityLabel(quality), key: 'preferredVideoQuality', value: quality })) },
+    { name: t('light'), subtitle: t('lightHint'), value: 's95bLowOverhead' }
+  ];
+}
+
+function openMenu() {
+  try {
+    optionShow({
+      menuId: 's95b-menu',
+      menuHeader: { title: t('title'), subtitle: statsLine() },
+      selectedIndex: 0,
+      options: buildOptions()
+    }, false);
+  } catch (e) { console.warn('[S95B] menu could not be opened:', e); }
+}
+
+function onKeys(e) {
+  const code = e.keyCode || e.which;
+  // Samsung ColorF2Yellow: 405 per Tizen docs, 170 as the alternative code TizenTube mentions, F2 on a keyboard.
+  // Red (403), green (404) and blue (406) are used by TizenTube itself. Nothing else is touched.
+  if (code === 405 || code === 170 || e.key === 'ColorF2Yellow' || e.key === 'F2') {
+    e.preventDefault(); e.stopImmediatePropagation();
+    if (e.type === undefined || e.type === 'keydown') openMenu();
+  }
+}
+
+function onConfigChange(event) {
+  const detail = event && event.detail;
+  if (!detail) return;
+  if (detail.key === 's95bLowOverhead') turnLight(detail.value === true);
+  else if (detail.key === 's95bLanguage') { state.lang = detail.value === 'en' ? 'en' : 'de'; save(); }
+}
+
+function init() {
+  // Menu entries read their current value from the TizenTube config, so mirror our stored state into it first.
+  if (configRead('s95bLowOverhead') !== state.light) configWrite('s95bLowOverhead', state.light);
+  if (configRead('s95bLanguage') !== state.lang) configWrite('s95bLanguage', state.lang);
+  configChangeEmitter.addEventListener('configChange', onConfigChange);
+  // Capture phase on window: only the yellow key is consumed.
+  window.addEventListener('keydown', onKeys, true);
+  window.addEventListener('keyup', onKeys, true);
+  window.addEventListener('keypress', onKeys, true);
+}
+
+readState();
+init();

package/mods/features/sponsorblock.js

@@ -0,0 +1,437 @@
+import sha256 from '../tiny-sha256.js';
+import { configRead } from '../config.js';
+import { showToast } from '../ui/ytUI.js';
+import { t } from 'i18next';
+
+// Copied from https://github.com/ajayyy/SponsorBlock/blob/da1a535de784540ee10166a75a3eb8537073838c/src/config.ts#L113-L134
+const barTypes = {
+  sponsor: {
+    color: '#00d400',
+    opacity: '0.7',
+    name: t('sponsorblock.segments.sponsor') || 'sponsored segment'
+  },
+  intro: {
+    color: '#00ffff',
+    opacity: '0.7',
+    name: t('sponsorblock.segments.intro') || 'intro'
+  },
+  outro: {
+    color: '#0202ed',
+    opacity: '0.7',
+    name: t('sponsorblock.segments.outro') || 'outro'
+  },
+  interaction: {
+    color: '#cc00ff',
+    opacity: '0.7',
+    name: t('sponsorblock.segments.interaction') || 'interaction reminder'
+  },
+  selfpromo: {
+    color: '#ffff00',
+    opacity: '0.7',
+    name: t('sponsorblock.segments.selfpromo') || 'self-promotion'
+  },
+  preview: {
+    color: '#008fd6',
+    opacity: '0.7',
+    name: t('sponsorblock.segments.preview') || 'recap or preview'
+  },
+  filler: {
+    color: "#7300FF",
+    opacity: "0.9",
+    name: t('sponsorblock.segments.filler') || 'tangents'
+  },
+  music_offtopic: {
+    color: '#ff9900',
+    opacity: '0.7',
+    name: t('sponsorblock.segments.music_offtopic') || 'non-music part'
+  },
+  poi_highlight: {
+    color: '#9b044c',
+    opacity: '0.7',
+    name: t('sponsorblock.segments.poi_highlight') || 'highlight'
+  }
+};
+
+const sponsorblockAPI = 'https://sponsor.ajay.app/api';
+
+class SponsorBlockHandler {
+  video = null;
+  active = true;
+
+  attachVideoTimeout = null;
+  nextSkipTimeout = null;
+  sliderInterval = null;
+
+  observer = null;
+  scheduleSkipHandler = null;
+  durationChangeHandler = null;
+  segments = null;
+  skippableCategories = [];
+  manualSkippableCategories = [];
+  skippedCategories = new Map();
+
+  constructor(videoID) {
+    this.videoID = videoID;
+  }
+
+  async init() {
+    const videoHash = sha256(this.videoID).substring(0, 4);
+    const categories = [
+      'sponsor',
+      'intro',
+      'outro',
+      'interaction',
+      'selfpromo',
+      'preview',
+      'filler',
+      'music_offtopic',
+      'poi_highlight'
+    ];
+    const resp = await fetch(
+      `${sponsorblockAPI}/skipSegments/${videoHash}?categories=${encodeURIComponent(
+        JSON.stringify(categories)
+      )}`
+    );
+    const results = await resp.json();
+
+    const result = results.find((v) => v.videoID === this.videoID);
+    console.info(this.videoID, 'Got it:', result);
+
+    if (!result || !result.segments || !result.segments.length) {
+      console.info(this.videoID, 'No segments found.');
+      return;
+    }
+
+    this.segments = result.segments;
+    this.manualSkippableCategories = configRead('sponsorBlockManualSkips');
+    this.skippableCategories = this.getSkippableCategories();
+
+    this.scheduleSkipHandler = () => {
+      const slider = document.querySelector('div[idomkey="slider"]');
+      const sliderRect = slider?.getBoundingClientRect();
+      const isOldUI = !document.querySelector('div[idomkey="Metadata-Section"]');
+      if (isOldUI && sliderRect) {
+        this.segmentsoverlay.style.setProperty('top', `${sliderRect.top}px`, 'important');
+      }
+      this.scheduleSkip();
+    }
+    this.durationChangeHandler = () => this.buildOverlay();
+
+    this.attachVideo();
+    this.buildOverlay();
+  }
+
+  getSkippableCategories() {
+    const skippableCategories = [];
+    if (configRead('enableSponsorBlockSponsor')) {
+      skippableCategories.push('sponsor');
+    }
+    if (configRead('enableSponsorBlockIntro')) {
+      skippableCategories.push('intro');
+    }
+    if (configRead('enableSponsorBlockOutro')) {
+      skippableCategories.push('outro');
+    }
+    if (configRead('enableSponsorBlockInteraction')) {
+      skippableCategories.push('interaction');
+    }
+    if (configRead('enableSponsorBlockSelfPromo')) {
+      skippableCategories.push('selfpromo');
+    }
+    if (configRead('enableSponsorBlockPreview')) {
+      skippableCategories.push('preview');
+    }
+    if (configRead('enableSponsorBlockFiller')) {
+      skippableCategories.push('filler');
+    }
+    if (configRead('enableSponsorBlockMusicOfftopic')) {
+      skippableCategories.push('music_offtopic');
+    }
+    return skippableCategories;
+  }
+
+  attachVideo() {
+    clearTimeout(this.attachVideoTimeout);
+    this.attachVideoTimeout = null;
+
+    this.video = document.querySelector('video');
+    if (!this.video) {
+      console.info(this.videoID, 'No video yet...');
+      this.attachVideoTimeout = setTimeout(() => this.attachVideo(), 100);
+      return;
+    }
+
+    console.info(this.videoID, 'Video found, binding...');
+
+    this.video.addEventListener('play', this.scheduleSkipHandler);
+    this.video.addEventListener('pause', this.scheduleSkipHandler);
+    this.video.addEventListener('timeupdate', this.scheduleSkipHandler);
+    this.video.addEventListener('durationchange', this.durationChangeHandler);
+  }
+
+  buildOverlay() {
+    if (this.segmentsoverlay) {
+      console.info('Overlay already built');
+      return;
+    }
+
+    if (!this.video || !this.video.duration) {
+      console.info('No video duration yet');
+      return;
+    }
+
+    const videoDuration = this.video.duration;
+    const slider = document.querySelector('div[idomkey="slider"]');
+    if (!slider) return setTimeout(() => this.buildOverlay(), 100);
+
+    this.segmentsoverlay = document.createElement('div');
+
+    this.segmentsoverlay.classList.add('ytLrProgressBarSlider', 'ytLrProgressBarSliderRectangularProgressBar');
+    this.segmentsoverlay.style.setProperty('z-index', '10', 'important');
+    this.segmentsoverlay.style.setProperty('background-color', 'rgba(0, 0, 0, 0)', 'important');
+    this.segmentsoverlay.style.setProperty('width', '72rem', 'important');
+    this.segmentsoverlay.style.setProperty('left', '4rem', 'important');
+    const sliderRect = slider.getBoundingClientRect();
+    if (!slider.classList.contains('ytLrProgressBarSlider')) {
+      for (let i = 0; i < slider.classList.length; i++) {
+        this.segmentsoverlay.classList.add(slider.classList[i]);
+      }
+      this.segmentsoverlay.style.setProperty('height', `${sliderRect.height}px`, 'important');
+      this.segmentsoverlay.style.setProperty('bottom', `${sliderRect.bottom - sliderRect.top}px`, 'important');      
+    }
+    this.segments.forEach((segment) => {
+      const [start, end] = segment.segment;
+      const barType = barTypes[segment.category] || {
+        color: 'blue',
+        opacity: 0.7
+      };
+
+      const leftPercent = videoDuration ? (100.0 * start) / videoDuration : 0;
+      const widthPercent = videoDuration ? (100.0 * (end - start)) / videoDuration : 0;
+
+      const elm = document.createElement('div');
+      elm.style.setProperty('background-color', barType.color, 'important');
+      elm.style.setProperty('opacity', barType.opacity, 'important');
+      elm.style.setProperty('height', '100%', 'important');
+      elm.style.setProperty('width', `${segment.category === 'poi_highlight' ? 1 : widthPercent}%`, 'important');
+      elm.style.setProperty('left', `${leftPercent}%`, 'important');
+      elm.style.setProperty('position', 'absolute', 'important');
+      console.info('Generated element', elm, 'from', segment);
+      this.segmentsoverlay.appendChild(elm);
+    });
+
+    this.observer = new MutationObserver((mutations) => {
+      mutations.forEach((m) => {
+        if (m.removedNodes) {
+          for (const node of m.removedNodes) {
+            if (node === this.segmentsoverlay) {
+              console.info('bringing back segments overlay');
+              this.slider.appendChild(this.segmentsoverlay);
+            }
+          }
+        }
+
+        if (document.querySelector('ytlr-progress-bar').getAttribute('hybridnavfocusable') === 'false') {
+          this.segmentsoverlay.style.setProperty('display', 'none', 'important');
+        } else {
+          this.segmentsoverlay.style.setProperty('display', 'block', 'important');
+        }
+      });
+    });
+
+    this.sliderInterval = setInterval(() => {
+      this.slider = document.querySelector('ytlr-redux-connect-ytlr-progress-bar');
+      if (this.slider) {
+        clearInterval(this.sliderInterval);
+        this.sliderInterval = null;
+        this.observer.observe(this.slider, {
+          childList: true,
+          subtree: true
+        });
+        this.slider.appendChild(this.segmentsoverlay);
+      }
+    }, 500);
+  }
+
+  scheduleSkip() {
+    clearTimeout(this.nextSkipTimeout);
+    this.nextSkipTimeout = null;
+
+    if (!this.active) {
+      console.info(this.videoID, 'No longer active, ignoring...');
+      return;
+    }
+
+    if (this.video.paused) {
+      console.info(this.videoID, 'Currently paused, ignoring...');
+      return;
+    }
+
+    // Sometimes timeupdate event (that calls scheduleSkip) gets fired right before
+    // already scheduled skip routine below. Let's just look back a little bit
+    // and, in worst case, perform a skip at negative interval (immediately)...
+    const nextSegments = this.segments.filter(
+      (seg) =>
+        seg.segment[0] > this.video.currentTime - 0.3 &&
+        seg.segment[1] > this.video.currentTime - 0.3
+    );
+    nextSegments.sort((s1, s2) => s1.segment[0] - s2.segment[0]);
+
+    if (!nextSegments.length) {
+      console.info(this.videoID, 'No more segments');
+      return;
+    }
+
+    const [segment] = nextSegments;
+    const [start, end] = segment.segment;
+    console.info(
+      this.videoID,
+      'Scheduling skip of',
+      segment,
+      'in',
+      start - this.video.currentTime
+    );
+
+    this.nextSkipTimeout = setTimeout(() => {
+      if (this.video.paused) {
+        console.info(this.videoID, 'Currently paused, ignoring...');
+        return;
+      }
+      if (!this.skippableCategories.includes(segment.category)) {
+        console.info(
+          this.videoID,
+          'Segment',
+          segment.category,
+          'is not skippable, ignoring...'
+        );
+        return;
+      }
+
+      const skipName = barTypes[segment.category]?.name || segment.category;
+      console.info(this.videoID, 'Skipping', segment);
+      if (!this.manualSkippableCategories.includes(segment.category)) {
+        const wasSkippedBefore = this.skippedCategories.get(segment.UUID)
+        if (wasSkippedBefore) {
+          wasSkippedBefore.count++;
+          wasSkippedBefore.lastSkipped = Date.now();
+          this.skippedCategories.set(segment.UUID, wasSkippedBefore);
+
+          if (wasSkippedBefore.lastSkipped - wasSkippedBefore.firstSkipped < 1000) {
+            if (!wasSkippedBefore.hasShownToast) {
+              if (configRead('enableSponsorBlockToasts')) {
+                showToast('SponsorBlock', t('sponsorblock.toasts.notSkipping', { segment: skipName, count: wasSkippedBefore.count }));
+              }
+              wasSkippedBefore.hasShownToast = true;
+              this.skippedCategories.set(segment.UUID, wasSkippedBefore);
+            }
+            return;
+          }
+        } else {
+          this.skippedCategories.set(segment.UUID, {
+            count: 1,
+            firstSkipped: Date.now(),
+            lastSkipped: Date.now(),
+            hasShownToast: false
+          });
+        }
+        if (configRead('enableSponsorBlockToasts')) {
+          showToast('SponsorBlock', t('sponsorblock.toasts.skipping', { segment: skipName }));
+        }
+        if (this.video.duration - end < 1) {
+          this.video.currentTime = end - 1;
+        } else this.video.currentTime = end;
+        this.scheduleSkip();
+      }
+    }, (start - this.video.currentTime) * 1000);
+  }
+
+  destroy() {
+    console.info(this.videoID, 'Destroying');
+
+    this.active = false;
+
+    if (this.nextSkipTimeout) {
+      clearTimeout(this.nextSkipTimeout);
+      this.nextSkipTimeout = null;
+    }
+
+    if (this.attachVideoTimeout) {
+      clearTimeout(this.attachVideoTimeout);
+      this.attachVideoTimeout = null;
+    }
+
+    if (this.sliderInterval) {
+      clearInterval(this.sliderInterval);
+      this.sliderInterval = null;
+    }
+
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+
+    if (this.segmentsoverlay) {
+      this.segmentsoverlay.remove();
+      this.segmentsoverlay = null;
+    }
+
+    if (this.video) {
+      this.video.removeEventListener('play', this.scheduleSkipHandler);
+      this.video.removeEventListener('pause', this.scheduleSkipHandler);
+      this.video.removeEventListener('timeupdate', this.scheduleSkipHandler);
+      this.video.removeEventListener(
+        'durationchange',
+        this.durationChangeHandler
+      );
+    }
+
+    this.skippedCategories.clear();
+  }
+}
+
+// When this global variable was declared using let and two consecutive hashchange
+// events were fired (due to bubbling? not sure...) the second call handled below
+// would not see the value change from first call, and that would cause multiple
+// SponsorBlockHandler initializations... This has been noticed on Chromium 38.
+// This either reveals some bug in chromium/webpack/babel scope handling, or
+// shows my lack of understanding of javascript. (or both)
+window.sponsorblock = null;
+
+window.addEventListener(
+  'hashchange',
+  () => {
+    const newURL = new URL(location.hash.substring(1), location.href);
+    // A hack, but it works, so...
+    const videoID = newURL.search.replace('?v=', '').split('&')[0];
+    const needsReload =
+      videoID &&
+      (!window.sponsorblock || window.sponsorblock.videoID != videoID);
+
+    console.info(
+      'hashchange',
+      videoID,
+      window.sponsorblock,
+      window.sponsorblock ? window.sponsorblock.videoID : null,
+      needsReload
+    );
+
+    if (needsReload) {
+      if (window.sponsorblock) {
+        try {
+          window.sponsorblock.destroy();
+        } catch (err) {
+          console.warn('window.sponsorblock.destroy() failed!', err);
+        }
+        window.sponsorblock = null;
+      }
+
+      if (configRead('enableSponsorBlock')) {
+        window.sponsorblock = new SponsorBlockHandler(videoID);
+        window.sponsorblock.init();
+      } else {
+        console.info('SponsorBlock disabled, not loading');
+      }
+    }
+  },
+  false
+);