@oxymoron.13/tizentube-s95b 0.2.1 → 0.2.3

package/mods/features/s95bI18n.js

@@ -1,33 +1,25 @@
 /* S95B Performance Edition – GPL-3.0-only */
 export const STRINGS = Object.freeze({
   de: Object.freeze({
-    title: 'S95B · Performance', subtitle: 'TizenTube Performance Edition 0.2.1',
-    language: 'Sprache', codec: 'Videocodec', quality: 'Bevorzugte Qualität', automatic: 'Automatisch',
-    light: 'Ressourcenschonender Modus', diag: 'Diagnoseanzeige',
-    reset: 'Änderungen zurücksetzen', close: 'Schließen', on: 'Ein', off: 'Aus',
-    hint: 'Gelbe Taste: Einstellungen · Pfeile: Navigieren · OK: Ändern · Zurück: Schließen',
-    restart: 'Codec-Änderungen gelten ab dem nächsten Video. Eine feste Qualität gilt sofort; „Automatisch“ wirkt eventuell erst nach einem Neustart von YouTube.',
-    safe: 'Kein Eingriff in Firmware, Bildrate oder Decoder.',
+    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: 'Vom Web-Player nicht verfügbar', statWait: 'Warte auf Video',
-    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.',
-    lightHint: 'Schaltet Vorschauen und DeArrow ab; vorherige Werte werden gesichert.',
-    restoreHint: 'Stellt nur die von diesem Menü geänderten Werte wieder her.',
+    statUnavailable: 'nicht verfügbar', statWait: 'wartet auf Video',
     languageDE: 'Deutsch', languageEN: 'English',
   }),
   en: Object.freeze({
-    title: 'S95B · Performance', subtitle: 'TizenTube Performance Edition 0.2.1',
-    language: 'Language', codec: 'Video codec', quality: 'Preferred quality', automatic: 'Automatic',
-    light: 'Low-overhead mode', diag: 'Diagnostic overlay',
-    reset: 'Restore changed settings', close: 'Close', on: 'On', off: 'Off',
-    hint: 'Yellow button: settings · Arrows: navigate · OK: change · Back: close',
-    restart: 'Codec changes apply from the next video. A fixed quality applies immediately; “Automatic” may only take effect after restarting YouTube.',
-    safe: 'No firmware, display-rate or decoder changes.',
+    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 from web player', statWait: 'Waiting for video',
-    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.',
-    lightHint: 'Disables previews and DeArrow; original values are backed up.',
-    restoreHint: 'Restores only values changed from this menu.',
+    statUnavailable: 'not available', statWait: 'waiting for video',
     languageDE: 'Deutsch', languageEN: 'English',
   })
 });

package/mods/features/s95bMenu.js

@@ -1,20 +1,18 @@
 /* S95B Performance Edition – GPL-3.0-only
- * No global player hooks, firmware calls, network requests, or external scripts.
- * UI runs only when the TizenTube userscript loads, keyboard events only when
- * explicitly invoked. Uses existing TizenTube configRead/configWrite APIs.
+ * 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 } from '../config.js';
+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 defaultState = { lang: 'de', light: false, diagnostics: false, previous: null, codecPrevious: null, qualityPrevious: null };
+const CODECS = ['any', 'vp9', 'av01', 'avc1'];
+const QUALITIES = ['auto', '2160p', '1440p', '1080p', '720p'];
+const defaultState = { lang: 'de', light: false, previous: null };
 let state = { ...defaultState };
-let overlay = null;
-let diagnostic = null;
-let diagTimer = null;
-let menuButtons = [];
-let selected = 0;
 
 function readState() {
   try {
@@ -22,43 +20,27 @@ function readState() {
     if (data && typeof data === 'object') {
       state = { ...defaultState,
         lang: data.lang === 'en' ? 'en' : 'de', light: data.light === true,
-        diagnostics: data.diagnostics === true,
-        previous: data.previous && typeof data.previous === 'object' ? data.previous : null,
-        codecPrevious: typeof data.codecPrevious === 'string' ? data.codecPrevious : null,
-        qualityPrevious: typeof data.qualityPrevious === 'string' ? data.qualityPrevious : null };
+        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 currentCodec() {
-  const value = configRead('preferredVideoCodec');
-  return value === 'vp9' || value === 'av01' || value === 'avc1' ? value : 'any';
-}
+function t(key) { return translate(state.lang, key); }
+
 function codecLabel(value) {
-  return value === 'any' ? translate(state.lang, 'automatic') : value === 'vp9' ? 'VP9' : value === 'av01' ? 'AV1' : 'H.264';
-}
-const CODECS = ['any', 'vp9', 'av01', 'avc1'];
-function changeCodec() {
-  if (state.codecPrevious === null) state.codecPrevious = String(configRead('preferredVideoCodec') || 'any');
-  configWrite('preferredVideoCodec', CODECS[(CODECS.indexOf(currentCodec()) + 1) % CODECS.length]);
-  save();
-}
-// Uses TizenTube's own preferredVideoQuality setting and handler (same values as its settings menu).
-const QUALITIES = ['auto', '2160p', '1440p', '1080p', '720p'];
-function currentQuality() {
-  const value = String(configRead('preferredVideoQuality') || 'auto');
-  return QUALITIES.indexOf(value) >= 0 ? value : 'auto';
+  return value === 'any' ? t('automatic') : value === 'vp9' ? 'VP9' : value === 'av01' ? 'AV1' : 'H.264';
 }
 function qualityLabel(value) {
-  return value === 'auto' ? translate(state.lang, 'automatic') : value === '2160p' ? '2160p (4K)' : value;
+  return value === 'auto' ? t('automatic') : value === '2160p' ? '2160p (4K)' : value;
 }
-function changeQuality() {
-  if (state.qualityPrevious === null) state.qualityPrevious = String(configRead('preferredVideoQuality') || 'auto');
-  configWrite('preferredVideoQuality', QUALITIES[(QUALITIES.indexOf(currentQuality()) + 1) % QUALITIES.length]);
-  save();
+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) {
@@ -78,169 +60,83 @@ function turnLight(enable) {
   }
   save();
 }
-function reset() {
-  turnLight(false);
-  if (state.codecPrevious !== null) {
-    configWrite('preferredVideoCodec', state.codecPrevious);
-    state.codecPrevious = null;
-  }
-  if (state.qualityPrevious !== null) {
-    configWrite('preferredVideoQuality', state.qualityPrevious);
-    state.qualityPrevious = null;
-  }
-  state.diagnostics = false;
-  stopDiagnostics();
-  save();
-}
-function create(tag, attrs, value) {
-  const n = document.createElement(tag);
-  if (attrs) Object.keys(attrs).forEach(key => {
-    if (key === 'className') n.className = attrs[key];
-    else n.setAttribute(key, attrs[key]);
-  });
-  if (typeof value === 'string') n.textContent = value;
-  return n;
-}
-function drawMenu() {
-  if (!overlay) return;
-  overlay.textContent = '';
-  const t = key => translate(state.lang, key);
-  const card = create('section', { className: 's95b-card', role: 'dialog', 'aria-modal': 'true', 'aria-label': t('title') });
-  const eyebrow = create('div', { className: 's95b-eyebrow' }, t('subtitle'));
-  const title = create('h2', null, t('title'));
-  card.append(eyebrow, title);
-  const fields = [
-    [t('language'), state.lang === 'de' ? t('languageDE') : t('languageEN'), () => { state.lang = state.lang === 'de' ? 'en' : 'de'; save(); }],
-    [t('codec'), codecLabel(currentCodec()), changeCodec],
-    [t('quality'), qualityLabel(currentQuality()), changeQuality],
-    [t('light'), state.light ? t('on') : t('off'), () => turnLight(!state.light)],
-    [t('diag'), state.diagnostics ? t('on') : t('off'), () => { state.diagnostics = !state.diagnostics; save(); if (state.diagnostics) startDiagnostics(); else stopDiagnostics(); }],
-    [t('reset'), '', reset],
-    [t('close'), '', hideMenu]
-  ];
-  menuButtons = fields.map((field, index) => {
-    const button = create('button', { type: 'button', className: 's95b-option', 'data-index': String(index) });
-    button.append(create('span', null, field[0]), create('strong', null, field[1]));
-    button.addEventListener('click', () => { selected = index; field[2](); if (overlay) drawMenu(); });
-    card.appendChild(button);
-    return button;
-  });
-  card.append(create('p', { className: 's95b-explanation' }, t('codecHint')));
-  card.append(create('p', { className: 's95b-explanation' }, t('lightHint')));
-  card.append(create('p', { className: 's95b-note' }, t('restart')));
-  card.append(create('p', { className: 's95b-note' }, t('restoreHint')));
-  card.append(create('p', { className: 's95b-footer' }, t('safe')));
-  card.append(create('p', { className: 's95b-footer' }, t('hint')));
-  overlay.appendChild(card);
-  selected = Math.max(0, Math.min(selected, menuButtons.length - 1));
-  highlight();
-}
-function highlight() {
-  menuButtons.forEach((b, i) => {
-    b.classList.toggle('s95b-active', i === selected);
-    b.setAttribute('tabindex', i === selected ? '0' : '-1');
-  });
-  if (menuButtons[selected]) menuButtons[selected].focus();
-}
-function openMenu() {
-  if (!document.body) return;
-  if (overlay) { hideMenu(); return; }
-  overlay = create('div', { id: 's95b-overlay' });
-  document.body.appendChild(overlay);
-  selected = 0;
-  drawMenu();
-}
-function hideMenu() {
-  if (overlay) overlay.remove();
-  overlay = null;
-  menuButtons = [];
-}
-function fmtVideo(v) {
-  const t = key => translate(state.lang, key);
-  if (!v) return t('statWait');
-  const width = v.videoWidth || 0;
-  const height = v.videoHeight || 0;
-  return width > 0 && height > 0 ? `${width} × ${height}` : t('statUnavailable');
-}
-function updateDiagnostics() {
-  if (!diagnostic) return;
-  const t = key => translate(state.lang, key);
+
+// One snapshot of what the web player reports, taken each time the menu opens.
+function statsLine() {
   const video = document.querySelector('video');
-  const codec = codecLabel(currentCodec());
+  let size = t('statWait');
   let dropped = t('statUnavailable');
-  if (video && typeof video.getVideoPlaybackQuality === 'function') {
-    try {
-      const q = video.getVideoPlaybackQuality();
-      if (q && Number.isFinite(q.droppedVideoFrames)) dropped = String(q.droppedVideoFrames);
-    } catch (_) { /* diagnostics should never interrupt playback */ }
+  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 */ }
+    }
   }
-  diagnostic.textContent = [t('statVideo') + ': ' + fmtVideo(video), t('statFrames') + ': ' + dropped,
-    t('statCodec') + ': ' + codec].join('  |  ');
+  return t('statVideo') + ': ' + size + '  |  ' + t('statFrames') + ': ' + dropped +
+    '  |  ' + t('statCodec') + ': ' + codecLabel(currentCodec());
 }
-function startDiagnostics() {
-  if (!document.body || diagnostic) return;
-  diagnostic = create('div', { id: 's95b-diagnostics', role: 'status' });
-  document.body.appendChild(diagnostic);
-  updateDiagnostics();
-  // Interval is deliberately disabled unless explicitly enabled by the user.
-  diagTimer = setInterval(updateDiagnostics, 2000);
+
+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 stopDiagnostics() {
-  if (diagTimer !== null) clearInterval(diagTimer);
-  diagTimer = null;
-  if (diagnostic) diagnostic.remove();
-  diagnostic = null;
+
+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;
-  const isKeydown = e.type === undefined || e.type === 'keydown';
-  // Samsung ColorF2Yellow: 405 per Tizen docs; 170 is the alternative code TizenTube
-  // documents for yellow (it handles 172/191 for green/blue the same way). F2 = keyboard.
-  // Red (403), green (404) and blue (406) are already used by TizenTube itself.
+  // 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 (isKeydown) openMenu();
-    return;
+    if (e.type === undefined || e.type === 'keydown') openMenu();
   }
-  if (!overlay) return; // Do not interfere with normal YouTube key navigation.
-  const back = code === 10009 || code === 8 || code === 27 || e.key === 'Escape' || e.key === 'Backspace';
-  const up = code === 38 || e.key === 'ArrowUp';
-  const down = code === 40 || e.key === 'ArrowDown';
-  const enter = code === 13 || e.key === 'Enter';
-  if (!(back || up || down || enter)) return;
-  // keyup/keypress of handled keys are swallowed too, so the YouTube UI below never sees half a key press.
-  e.preventDefault(); e.stopImmediatePropagation();
-  if (!isKeydown) return;
-  if (back) hideMenu();
-  else if (up || down) { selected = (selected + (up ? -1 : 1) + menuButtons.length) % menuButtons.length; highlight(); }
-  else if (menuButtons[selected]) menuButtons[selected].click();
 }
+
+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() {
-  if (!document.body || document.getElementById('s95b-style')) return;
-  const css = `
-#s95b-overlay {position:fixed;top:0;left:0;right:0;bottom:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.78);font-family:Arial,Helvetica,sans-serif;color:#f7fafc;}
-#s95b-overlay * {box-sizing:border-box;}
-#s95b-overlay .s95b-card {width:88vw;max-width:930px;max-height:90vh;overflow:auto;background:#111a27;border:2px solid #34506c;border-radius:18px;padding:28px 34px;box-shadow:0 20px 70px rgba(0,0,0,.55);}
-#s95b-overlay .s95b-eyebrow {font-size:19px;color:#a8cce0;}
-#s95b-overlay h2 {font-size:38px;line-height:1.2;margin:6px 0 18px;}
-#s95b-overlay button {width:100%;display:flex;align-items:center;justify-content:space-between;font-size:24px;line-height:1.2;color:#fff;text-align:left;padding:14px 18px;margin:6px 0;border:2px solid #26374b;border-radius:10px;background:#192638;cursor:pointer;}
-#s95b-overlay button strong {color:#bcecff;font-size:22px;margin-left:24px;}
-#s95b-overlay button.s95b-active,#s95b-overlay button:focus {background:#176687;border-color:#bcecff;outline:none;}
-#s95b-overlay p {font-size:17px;line-height:1.45;}
-#s95b-overlay .s95b-explanation {color:#bcd9df;margin:17px 0 4px;}
-#s95b-overlay .s95b-note {color:#d7dce5;margin:7px 0;}
-#s95b-overlay .s95b-footer {color:#91a0b3;margin:10px 0 0;font-size:15px;}
-#s95b-diagnostics {pointer-events:none;position:fixed;bottom:2vh;left:2vw;z-index:2147483645;padding:10px 16px;color:white;background:rgba(0,0,0,.7);font:15px Arial,Helvetica,sans-serif;border-radius:8px;}
-`;
-  const style = create('style', { id: 's95b-style' });
-  style.textContent = css;
-  document.head.appendChild(style);
-  // Register our listener in the capture phase; only known menu keys are consumed.
+  // 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);
-  if (state.diagnostics) startDiagnostics();
 }
+
 readState();
-if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, { once: true });
-else init();
+init();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oxymoron.13/tizentube-s95b",
   "appName": "TizenTube S95B Performance (Fork)",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Unofficial fork of TizenTube (@foxreis/tizentube) for TizenBrew: reversible performance profile, German/English settings, smaller bundle.",
   "packageType": "mods",
   "websiteURL": "https://youtube.com/tv?additionalDataUrl=http%3A%2F%2Flocalhost%3A8085%2Fdial%2Fapps%2FYouTube",