@oxymoron.13/tizentube-s95b 0.2.2 → 0.3.0

package/mods/ui/sidebarModification.js

@@ -0,0 +1,179 @@
+import { getGuide } from '../utils/innerTubeCalls.js';
+import { configRead, configWrite } from '../config.js';
+import { buttonItem, overlayPanelItemListRenderer, showModal } from './ytUI.js';
+import { t } from 'i18next';
+
+function showSetting(settingType, parameters) {
+    if (settingType === 'MOVE_GUIDE_BUTTON') {
+        const order = configRead('sidebarContentsOrder');
+
+        const browseId = parameters.item.guideEntryRenderer.navigationEndpoint?.browseEndpoint?.browseId
+            || (parameters.item.guideEntryRenderer.navigationEndpoint?.searchEndpoint && 'search');
+        const index = order.findIndex(item => {
+            if (typeof item === 'object' && item !== null) {
+                return item.browseId === browseId;
+            } else {
+                return item === browseId;
+            }
+        });
+
+        if (index === -1) {
+            return showSetting('', true);
+        }
+
+        if (parameters.direction === 'up' && index > 0) {
+            const temp = order[index - 1];
+            order[index - 1] = order[index];
+            order[index] = temp;
+        } else if (parameters.direction === 'down' && index < order.length - 1) {
+            const temp = order[index + 1];
+            order[index + 1] = order[index];
+            order[index] = temp;
+        }
+        configWrite('sidebarContentsOrder', order);
+
+        return showSetting('', true);
+    } else if (settingType === 'SHOW_GUIDE_BUTTONS') {
+        const title = parameters.item.guideEntryRenderer.formattedTitle.simpleText;
+
+        const buttons = [];
+        buttons.push(
+            buttonItem(
+                {
+                    title: t('settings.options.uiSettings.options.sortSidebarContents.moveUp.title'),
+                    subtitle: t('settings.options.uiSettings.options.sortSidebarContents.moveUp.subtitle')
+                },
+                {
+                    icon: 'UP_ARROW'
+                },
+                [
+                    {
+                        customAction: {
+                            action: 'MOVE_GUIDE_BUTTON',
+                            parameters: {
+                                settingType,
+                                direction: 'up',
+                                item: parameters.item
+                            }
+                        }
+                    },
+                    {
+                        signalAction: {
+                            signal: 'POPUP_BACK'
+                        }
+                    }
+                ]
+            )
+        )
+
+        buttons.push(
+            buttonItem(
+                {
+                    title: t('settings.options.uiSettings.options.sortSidebarContents.moveDown.title'),
+                    subtitle: t('settings.options.uiSettings.options.sortSidebarContents.moveDown.subtitle')
+                },
+                {
+                    icon: 'DOWN_ARROW'
+                },
+                [
+                    {
+                        customAction: {
+                            action: 'MOVE_GUIDE_BUTTON',
+                            parameters: {
+                                settingType,
+                                direction: 'down',
+                                item: parameters.item
+                            }
+                        }
+                    },
+                    {
+                        signalAction: {
+                            signal: 'POPUP_BACK'
+                        }
+                    }
+                ]
+            )
+        )
+
+        return showModal(
+            title,
+            overlayPanelItemListRenderer(buttons),
+            'tt-move-guide-button-modal'
+        );
+    }
+    getGuide().then(guide => {
+        const buttons = [];
+
+        let idx = 0;
+        const guideItems = guide.items[0].guideSectionRenderer.originalItems
+            || guide.items[0].guideSectionRenderer.items;
+        for (const item of guideItems) {
+            const title = item.guideEntryRenderer.formattedTitle.simpleText;
+            const icon = item.guideEntryRenderer.icon?.iconType;
+            const browseId = item.guideEntryRenderer.navigationEndpoint?.browseEndpoint ? item.guideEntryRenderer.navigationEndpoint.browseEndpoint.browseId : 'search';
+
+            buttons.push(
+                buttonItem(
+                    {
+                        title,
+                    },
+                    {
+                        icon,
+                        secondaryIcon: settingType === 'disabledSidebarContents' ?
+                            configRead(settingType)?.includes(browseId) ?
+                                'CHECK_BOX' : 'CHECK_BOX_OUTLINE_BLANK'
+                            : null
+                    },
+                    [
+                        settingType === 'disabledSidebarContents' ?
+                            {
+                                setClientSettingEndpoint: {
+                                    settingDatas: [
+                                        {
+                                            clientSettingEnum: {
+                                                item: 'disabledSidebarContents'
+                                            },
+                                            arrayValue: browseId
+                                        }
+                                    ]
+                                }
+                            } :
+                            {
+                                customAction: {
+                                    action: 'SHOW_GUIDE_BUTTONS',
+                                    parameters: {
+                                        settingType,
+                                        idx,
+                                        item
+                                    }
+                                }
+                            },
+                        ...(settingType === 'disabledSidebarContents' ? [{
+                            customAction: {
+                                action: 'RELOAD_GUIDE_OPTIONS',
+                                parameters: {
+                                    settingType,
+                                    idx,
+                                    item
+                                }
+                            }
+                        }] : [])
+                    ]
+                )
+            );
+            idx++;
+        }
+
+        showModal(
+            {
+                title: settingType === 'disabledSidebarContents' ? t('settings.options.uiSettings.options.disableSidebarContents.title') : t('settings.options.uiSettings.options.sortSidebarContents.title'),
+                subtitle: settingType === 'disabledSidebarContents' ? t('settings.options.uiSettings.options.disableSidebarContents.subtitle') : t('settings.options.uiSettings.options.sortSidebarContents.subtitle')
+            },
+            overlayPanelItemListRenderer(buttons),
+            'tt-sidebar-settings',
+            parameters === true
+        );
+    });
+}
+
+export default showSetting;

package/mods/ui/speedUI.js

@@ -0,0 +1,119 @@
+import { configRead } from '../config.js';
+import { showModal, buttonItem, overlayPanelItemListRenderer } from './ytUI.js';
+import { t } from 'i18next';
+
+const interval = setInterval(() => {
+    const videoElement = document.querySelector('video');
+    if (videoElement) {
+        execute_once_dom_loaded_speed();
+        clearInterval(interval);
+    }
+}, 1000);
+
+function execute_once_dom_loaded_speed() {
+    document.querySelector('video').addEventListener('canplay', () => {
+        document.getElementsByTagName('video')[0].playbackRate = configRead('videoSpeed');;
+    });
+
+    const eventHandler = (evt) => {
+        if (evt.keyCode == 406 || evt.keyCode == 191) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            if (evt.type === 'keydown') {
+                speedSettings();
+                return false;
+            }
+            return true;
+        };
+    }
+
+    // Red, Green, Yellow, Blue
+    // 403, 404, 405, 406
+    // ---, 172, 170, 191
+    document.addEventListener('keydown', eventHandler, true);
+    document.addEventListener('keypress', eventHandler, true);
+    document.addEventListener('keyup', eventHandler, true);
+}
+
+function speedSettings() {
+    const currentSpeed = configRead('videoSpeed');
+    let selectedIndex = 0;
+    const maxSpeed = 5;
+    const increment = configRead('speedSettingsIncrement') || 0.25;
+    const buttons = [];
+    for (let speed = increment; speed <= maxSpeed; speed += increment) {
+        const fixedSpeed = Math.round(speed * 100) / 100;
+        buttons.push(
+            buttonItem(
+                { title: `${fixedSpeed}x` },
+                null,
+                [
+                    {
+                        signalAction: {
+                            signal: 'POPUP_BACK'
+                        }
+                    },
+                    {
+                        setClientSettingEndpoint: {
+                            settingDatas: [
+                                {
+                                    clientSettingEnum: {
+                                        item: 'videoSpeed'
+                                    },
+                                    intValue: fixedSpeed.toString()
+                                }
+                            ]
+                        }
+                    },
+                    {
+                        customAction: {
+                            action: 'SET_PLAYER_SPEED',
+                            parameters: fixedSpeed.toString()
+                        }
+                    }
+                ]
+            )
+        );
+        if (currentSpeed === fixedSpeed) {
+            selectedIndex = buttons.length - 1;
+        }
+    }
+
+    buttons.push(
+        buttonItem(
+            { title: t('player.playbackSpeed.fixStuttering') },
+            null,
+            [
+                {
+                    signalAction: {
+                        signal: 'POPUP_BACK'
+                    }
+                },
+                {
+                    setClientSettingEndpoint: {
+                        settingDatas: [
+                            {
+                                clientSettingEnum: {
+                                    item: 'videoSpeed'
+                                },
+                                intValue: '1.0001'
+                            }
+                        ]
+                    }
+                },
+                {
+                    customAction: {
+                        action: 'SET_PLAYER_SPEED',
+                        parameters: '1.0001'
+                    }
+                }
+            ]
+        )
+    );
+
+    showModal(t('player.playbackSpeed.title'), overlayPanelItemListRenderer(buttons, selectedIndex), 'tt-speed');
+}
+
+export {
+    speedSettings
+}

package/mods/ui/theme.js

@@ -0,0 +1,26 @@
+import { configRead } from '../config.js';
+
+const style = document.createElement('style');
+let css = '';
+
+function updateStyle() {
+    css = `
+    ytlr-guide-response yt-focus-container {
+        background-color: ${configRead('focusContainerColor')};
+    }
+
+    #container {
+        background-color: ${configRead('routeColor')} !important;
+    }
+`;
+    const existingStyle = document.querySelector('style[nonce]');
+    if (existingStyle) {
+        existingStyle.textContent += css;
+    } else {
+        style.textContent = css;
+    }
+};
+
+document.head.appendChild(style);
+updateStyle();
+export default updateStyle;

package/mods/ui/ui.css

@@ -0,0 +1,157 @@
+.ytaf-ui-container {
+  position: absolute;
+  top: 10%;
+  left: 10%;
+  right: 10%;
+  bottom: 10%;
+
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  border-radius: 20px;
+  padding: 20px;
+  font-size: 1.5rem;
+  z-index: 1000;
+}
+
+.ytaf-ui-container :focus {
+  outline: 4px red solid;
+}
+
+.ytaf-ui-container h1 {
+  margin: 0;
+  margin-bottom: 0.5em;
+  text-align: center;
+}
+
+.ytaf-ui-container input[type='checkbox'] {
+  width: 1.4rem;
+  height: 1.4rem;
+}
+
+.ytaf-ui-container input[type='radio'] {
+  width: 1.4rem;
+  height: 1.4rem;
+}
+
+.ytaf-ui-container label {
+  display: block;
+  font-size: 1.4rem;
+}
+
+.ytaf-notification-container {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  font-size: 16pt;
+  z-index: 1200;
+}
+
+.ytaf-notification-container .message {
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 1em;
+  margin: 0.5em;
+  transition: all 0.3s ease-in-out;
+  opacity: 1;
+  line-height: 1;
+  border-right: 10px solid rgba(50, 255, 50, 0.3);
+  display: inline-block;
+  float: right;
+}
+
+.ytaf-notification-container .message-hidden {
+  opacity: 0;
+  margin: 0 0.5em;
+  padding: 0 1em;
+  line-height: 0;
+}
+
+/* Fixes transparency effect for the video player */
+
+.ytLrWatchDefaultShadow,
+div[idomkey="shadow"] {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.8) 90%) !important;
+  background-color: rgba(0, 0, 0, 0.3) !important;
+  display: block !important;
+  height: 100% !important;
+  pointer-events: none !important;
+  position: absolute !important;
+  width: 100% !important;
+}
+
+/* https://github.com/webosbrew/youtube-webos/commit/4fbe38a18df31ddd62b6cf15f141dd58e1d1a71d */
+.ytLrWatchDefault2025Shadow {
+  background-color: rgba(11, 11, 11, 0.5) !important;
+}
+
+/* Fixes shorts having a black background */
+
+.ytLrTileHeaderRendererShorts {
+  background-image: none !important;
+}
+
+/* Multiline support for strings in the UI */
+
+.ytLrOverlayPanelHeaderRendererSubtitle {
+  white-space: pre-wrap !important;
+}
+
+/* Fixes SponsorBlock segments overlapping with the playhead */
+
+.ytLrProgressBarPlayhead {
+  z-index: 1 !important;
+}
+
+.ytLrProgressBarPlayed {
+  z-index: 1 !important;
+}
+
+.ytLrSearchBarSearchVoice {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: auto
+}
+
+.ytLrSearchVoiceHost {
+    font-size: 3rem;
+}
+
+.ytLrSearchVoiceMicButtonHost {
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.ytLrSearchVoiceMicButtonHost {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    color: #f1f1f1;
+    display: block;
+    text-align: center;
+    width: 1em;
+    height: 1em;
+}
+
+.ytLrSearchVoiceMicButtonIcon {
+    display: inline-block;
+    font-size: .5em;
+    height: .5em;
+    width: .5em;
+    height: 1em;
+    width: 1em;
+    margin-top: .5em;
+    vertical-align: top !important;
+}
+
+.ytContribIconHost {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.ytContribIconTvArrowLeft::before {
+    content: "\e822";
+}
+
+.ytContribIconHost::before {
+    font-family: "YouTube Icons Outlined";
+}