diff --git a/js&css/extension/www.youtube.com/appearance/sidebar/sidebar.css b/js&css/extension/www.youtube.com/appearance/sidebar/sidebar.css index 4857f6bdb..742b562cc 100644 --- a/js&css/extension/www.youtube.com/appearance/sidebar/sidebar.css +++ b/js&css/extension/www.youtube.com/appearance/sidebar/sidebar.css @@ -237,6 +237,16 @@ html[it-hide-sidebar='true'] div#secondary div#panels, html[it-hide-sidebar='true'] div#secondary div#donation-shelf { display: none !important } +/* #1530 */ +html[it-hide-sidebar='true'] div#secondary div#panels > *([target-id*='transcript']), +html[it-hide-sidebar='true'] div#secondary div#panels > *([target-id*='chapters']) { + display: block !important +} +/* Ensure secondary has enough width for the transcript panel */ +html[it-hide-sidebar='true'][it-transcript='true'] ytd-watch-flexy[flexy] #secondary.ytd-watch-flexy { + width: fit-content !important; + min-width: max(445px, 17vw) !important +} html[it-related-videos='collapsed'] #related > ytd-watch-next-secondary-results-renderer > #items:not([it-activated])::before { content: 'Show more' !important; diff --git a/tests/unit/hide-sidebar-transcript.test.js b/tests/unit/hide-sidebar-transcript.test.js new file mode 100644 index 000000000..1f02bbf07 --- /dev/null +++ b/tests/unit/hide-sidebar-transcript.test.js @@ -0,0 +1,39 @@ +// Test for Issue #1530: Keep transcript visible when hiding the sidebar + +const fs = require('fs'); +const path = require('path'); + +describe('Hide Sidebar + Transcript Visibility (#1530)', () => { + let sidebarCssContent; + + beforeAll(() => { + const filePath = path.join(__dirname, '../../js&css/extension/www.youtube.com/appearance/sidebar/sidebar.css'); + sidebarCssContent = fs.readFileSync(filePath, 'utf8'); + }); + + test('should hide panels when sidebar is hidden but transcript is NOT enabled', () => { + expect(sidebarCssContent).toContain("html[it-hide-sidebar='true']:not([it-transcript='true']) div#secondary div#panels"); + }); + + test('should show panels when both sidebar hidden and transcript enabled', () => { + expect(sidebarCssContent).toContain("html[it-hide-sidebar='true'][it-transcript='true'] div#secondary div#panels"); + expect(sidebarCssContent).toMatch(/html\[it-hide-sidebar='true'\]\[it-transcript='true'\] div#secondary div#panels\s*\{[^}]*display:\s*block\s*!important/); + }); + + test('should hide non-transcript panels when sidebar hidden + transcript enabled', () => { + expect(sidebarCssContent).toContain("html[it-hide-sidebar='true'][it-transcript='true'] div#secondary div#panels > :not([target-id*='transcript'])"); + }); + + test('should ensure secondary has proper width when both features active', () => { + expect(sidebarCssContent).toMatch(/html\[it-hide-sidebar='true'\]\[it-transcript='true'\] ytd-watch-flexy\[flexy\] #secondary\.ytd-watch-flexy/); + expect(sidebarCssContent).toMatch(/min-width:\s*max\(445px,\s*17vw\)/); + }); + + test('should still hide related videos when sidebar is hidden', () => { + expect(sidebarCssContent).toContain("html[it-hide-sidebar='true'] #related"); + }); + + test('should still hide donation shelf when sidebar is hidden', () => { + expect(sidebarCssContent).toContain("html[it-hide-sidebar='true'] div#secondary div#donation-shelf"); + }); +});