@oxymoron.13/tizentube-s95b 0.1.1 → 0.2.1

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
+);

package/mods/features/standaloneUserscript.js

@@ -0,0 +1,107 @@
+function redirectUrl(originalUrl) {
+    if (!originalUrl) return originalUrl;
+
+    try {
+        if (typeof originalUrl === 'string' && originalUrl.startsWith('//')) originalUrl = originalUrl.replace('//', 'https://')
+        const url = new URL(originalUrl, window.location.origin);
+        const hostname = url.hostname;
+
+        if (hostname === 'youtube.com' || hostname === 'www.youtube.com') {
+            url.protocol = 'http:';
+            url.host = 'localhost:8099';
+            return url.toString();
+        }
+
+        if (hostname.endsWith('googlevideo.com') || hostname.endsWith('youtube.com')
+            || hostname.endsWith('gstatic.com') || hostname.endsWith('.google.com')
+            || hostname.endsWith('.googleapis.com') || hostname.endsWith('googleusercontent.com')
+            || hostname.endsWith('.ggpht.com')) {
+            return 'http://localhost:8099/cors-bypass/' + url.toString();
+        }
+    } catch (e) {
+        console.error('Failed to parse URL during interception:', e);
+    }
+
+    return originalUrl;
+}
+
+export default function () {
+    const originalFetch = window.fetch;
+    if (originalFetch) {
+        window.fetch = function (input, init) {
+            let targetUrl = '';
+            let isRequestObject = false;
+
+            if (typeof input === 'string') {
+                targetUrl = redirectUrl(input);
+            } else if (input instanceof URL) {
+                targetUrl = redirectUrl(input.toString());
+                input = new URL(targetUrl);
+            } else if (input instanceof Request) {
+                isRequestObject = true;
+                targetUrl = redirectUrl(input.url);
+            }
+
+            if (isRequestObject) {
+                if (input.method === 'POST' && targetUrl.indexOf('localhost') !== -1) {
+                    const modifiedOptions = {
+                        method: input.method,
+                        headers: new Headers(input.headers),
+                        mode: input.mode,
+                        credentials: input.credentials,
+                    };
+
+                    if (input.body && !input.bodyUsed) {
+                        const requestClone = input.clone();
+                        return input.clone().arrayBuffer().then(function (buffer) {
+                            modifiedOptions.body = buffer;
+
+                            return originalFetch(targetUrl, modifiedOptions);
+                        });
+                    }
+
+                    return originalFetch(targetUrl, modifiedOptions);
+                }
+
+                input = new Request(targetUrl, input);
+            }
+
+            return originalFetch.apply(this, [targetUrl, init]);
+        };
+    }
+
+    const originalOpen = XMLHttpRequest.prototype.open;
+    XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
+        const redirectedUrl = redirectUrl(url);
+        if (redirectedUrl !== url) {
+            async = true;
+        }
+
+        if (async === undefined) {
+            async = true;
+        }
+
+        return originalOpen.apply(this, [method, redirectedUrl, async, user, password]);
+    };
+
+    if (navigator.sendBeacon) {
+        const originalSendBeacon = navigator.sendBeacon;
+        navigator.sendBeacon = function (url, data) {
+            console.log("Beacon data:", data);
+            return originalSendBeacon.apply(this, [redirectUrl(url), data]);
+        };
+    }
+
+    Object.defineProperty(HTMLImageElement.prototype, 'src', {
+        set: function(value) {
+            const descriptor = Object.getOwnPropertyDescriptor(Element.prototype, 'setAttribute');
+            descriptor.value.call(this, 'src', redirectUrl(value));
+        }
+    });
+    Object.defineProperty(HTMLScriptElement.prototype, 'src', {
+        set: function(value) {
+            const descriptor = Object.getOwnPropertyDescriptor(Element.prototype, 'setAttribute');
+            descriptor.value.call(this, 'src', redirectUrl(value));
+        }
+    });
+}

package/mods/features/updater.js

@@ -0,0 +1,119 @@
+// TizenTube Cobalt Update Checker
+
+import { buttonItem, showModal, showToast, overlayPanelItemListRenderer, scrollPaneRenderer, overlayMessageRenderer } from '../ui/ytUI.js';
+import { configRead } from '../config.js';
+import { t } from 'i18next';
+
+// If TizenTube is not running on Cobalt, do nothing
+// Add a timeout since reloading the home page while the updater pop up is shown causes the pop up to instantly disappear.
+setTimeout(() => {
+    if (window.h5vcc && window.h5vcc.tizentube && configRead('enableUpdater')) {
+        const currentEpoch = Math.floor(Date.now() / 1000);
+        if (configRead('dontCheckUpdateUntil') > currentEpoch) {
+            console.info('Skipping update check until', new Date(configRead('dontCheckUpdateUntil') * 1000).toLocaleString());
+        } else checkForUpdates();
+    }
+}, 2500);
+
+function getLatestRelease() {
+    return fetch('https://api.github.com/repos/reisxd/TizenTubeCobalt/releases/latest')
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        });
+}
+
+function checkForUpdates(showNoUpdateToast) {
+    const currentAppVersion = window.h5vcc.tizentube.GetVersion();
+    const currentEpoch = Math.floor(Date.now() / 1000);
+
+    getLatestRelease()
+        .then(release => {
+            const latestVersion = release.tag_name.replace('v', '');
+            const releaseDate = new Date(release.published_at).getTime() / 1000;
+
+            let architecture;
+            let downloadUrl;
+
+            if (window.h5vcc.tizentube.GetArchitecture) {
+                architecture = window.h5vcc.tizentube.GetArchitecture();
+            }
+
+            if (architecture) {
+                if (architecture === 'arm64-v8a') {
+                    downloadUrl = release.assets.find(asset => asset.name.includes('arm64.apk')).browser_download_url;
+                } else {
+                    downloadUrl = release.assets.find(asset => asset.name.includes('arm.apk')).browser_download_url;
+                }
+            } else downloadUrl = release.assets[0].browser_download_url;
+
+            if (latestVersion !== currentAppVersion) {
+                console.info(`New version available: ${latestVersion} (current: ${currentAppVersion})`);
+                const msg = `${t('settings.options.updater.releaseDate', { date: new Date(releaseDate * 1000).toLocaleString() })}\n${release.body}`.replace(/#/g, '').replace(/\*/g, '').trim();
+
+                const buttons = [
+                    buttonItem(
+                        { title: t('settings.options.updater.updateNow.title'), subtitle: t('settings.options.updater.updateNow.subtitle') },
+                        { icon: 'DOWN_ARROW' },
+                        [
+                            {
+                                customAction: {
+                                    action: 'UPDATE_DOWNLOAD',
+                                    parameters: downloadUrl
+                                }
+                            },
+                            {
+                                signalAction: {
+                                    signal: 'POPUP_BACK'
+                                }
+                            }
+                        ]
+                    ),
+                    buttonItem(
+                        { title: t('settings.options.updater.remindLater.title'), subtitle: t('settings.options.updater.remindLater.subtitle') },
+                        { icon: 'SEARCH_HISTORY' },
+                        [
+                            {
+                                customAction: {
+                                    action: 'UPDATE_REMIND_LATER',
+                                    parameters: currentEpoch + 86400
+                                }
+                            },
+                            {
+                                signalAction: {
+                                    signal: 'POPUP_BACK'
+                                }
+                            }
+                        ]
+                    )
+                ];
+
+                // Add an empty message so the CSS doesn't get screwed after user input
+                buttons.push(overlayMessageRenderer(' '));
+                buttons.push(overlayMessageRenderer(msg));
+
+                showModal(
+                    {
+                        title: t('settings.options.updater.updateAvailable.title'),
+                        subtitle: t('settings.options.updater.updateAvailable.subtitle', { latestVersion, currentVersion: currentAppVersion })
+                    },
+                    overlayPanelItemListRenderer(buttons),
+                    'tt-update-modal',
+                    false
+                )
+            } else {
+                console.info('You are using the latest version of TizenTube.');
+                if (showNoUpdateToast) {
+                    showToast(t('settings.options.updater.upToDate.title'), t('settings.options.updater.upToDate.subtitle', { version: currentAppVersion }), null);
+                }
+            }
+        })
+        .catch(error => {
+            console.error('Error fetching the latest release:', error);
+            showToast(t('settings.options.updater.checkFailed.title'), t('settings.options.updater.checkFailed.subtitle'), null);
+        });
+}
+
+export default checkForUpdates;