diff --git a/package.json b/package.json index 1a5310ef..510b88c9 100644 --- a/package.json +++ b/package.json @@ -298,6 +298,7 @@ "serve": "14.2.4", "simple-youtube-age-restriction-bypass": "github:organization/Simple-YouTube-Age-Restriction-Bypass#v2.5.9", "socks": "2.8.5", + "solid-element": "1.9.1", "solid-floating-ui": "0.3.1", "solid-js": "1.9.7", "solid-styled-components": "0.28.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ac608c28..d4874d80 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -208,6 +208,9 @@ importers: socks: specifier: 2.8.5 version: 2.8.5 + solid-element: + specifier: 1.9.1 + version: 1.9.1(solid-js@1.9.7) solid-floating-ui: specifier: 0.3.1 version: 0.3.1(@floating-ui/dom@1.7.2)(solid-js@1.9.7) @@ -1976,6 +1979,9 @@ packages: resolution: {integrity: sha512-pJDh5/4wrEnXX/VWRZvruAGHkzKdr46z11OlTPN+VrATlWWhSKewNCJ1futCO5C7eJB3nPMFZA1LeYtcFboZ2A==} engines: {node: '>=0.10.0'} + component-register@0.8.7: + resolution: {integrity: sha512-clPS/o1RNfJw7L1/w4q+nkj6l7JV32kFHCx6vW5nSPOEly4B9olMeADNilEgpLV/DdeS7y8JXhHKx9YvSj8vqQ==} + compressible@2.0.18: resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==} engines: {node: '>= 0.6'} @@ -4280,6 +4286,11 @@ packages: resolution: {integrity: sha512-iF+tNDQla22geJdTyJB1wM/qrX9DMRwWrciEPwWLPRWAUEM8sQiyxgckLxWT1f7+9VabJS0jTGGr4QgBuvi6Ww==} engines: {node: '>= 10.0.0', npm: '>= 3.0.0'} + solid-element@1.9.1: + resolution: {integrity: sha512-baJy6Qz27oAUgkPlqOf3Y+7RsBiuVQrS51Nrh1ddDbrqrNPvJbIvehpUsTzLNFb2ZHIoHuNnDg330go/ZKcRdg==} + peerDependencies: + solid-js: ^1.9.3 + solid-floating-ui@0.3.1: resolution: {integrity: sha512-o/QmGsWPS2Z3KidAxP0nDvN7alI7Kqy0kU+wd85Fz+au5SYcnYm7I6Fk3M60Za35azsPX0U+5fEtqfOuk6Ao0Q==} engines: {node: '>=10'} @@ -6644,6 +6655,8 @@ snapshots: compare-version@0.1.2: {} + component-register@0.8.7: {} + compressible@2.0.18: dependencies: mime-db: 1.54.0 @@ -9218,6 +9231,11 @@ snapshots: ip-address: 9.0.5 smart-buffer: 4.2.0 + solid-element@1.9.1(solid-js@1.9.7): + dependencies: + component-register: 0.8.7 + solid-js: 1.9.7 + solid-floating-ui@0.3.1(@floating-ui/dom@1.7.2)(solid-js@1.9.7): dependencies: '@floating-ui/dom': 1.7.2 diff --git a/src/config/store.ts b/src/config/store.ts index 01df655b..3f6513ab 100644 --- a/src/config/store.ts +++ b/src/config/store.ts @@ -5,7 +5,7 @@ import defaults from './defaults'; import { DefaultPresetList, type Preset } from '@/plugins/downloader/types'; // prettier-ignore -export type IStore = InstanceType>>; +export type IStore = InstanceType>>; const migrations = { '>=3.3.0'(store: IStore) { diff --git a/src/i18n/resources/ar.json b/src/i18n/resources/ar.json index d3f49be9..969059d8 100644 --- a/src/i18n/resources/ar.json +++ b/src/i18n/resources/ar.json @@ -859,7 +859,7 @@ }, "name": "تفعيل الفيديو", "templates": { - "button": "أغنية" + "button-song": "أغنية" } }, "visualizer": { diff --git a/src/i18n/resources/bg.json b/src/i18n/resources/bg.json index bbc3fe97..192525a8 100644 --- a/src/i18n/resources/bg.json +++ b/src/i18n/resources/bg.json @@ -835,7 +835,7 @@ }, "name": "Превключване на видео", "templates": { - "button": "Песен" + "button-song": "Песен" } }, "visualizer": { diff --git a/src/i18n/resources/ca.json b/src/i18n/resources/ca.json index 3b6cb7fa..f3a9e20e 100644 --- a/src/i18n/resources/ca.json +++ b/src/i18n/resources/ca.json @@ -859,7 +859,7 @@ }, "name": "Botó de vídeo", "templates": { - "button": "Cançó" + "button-song": "Cançó" } }, "visualizer": { diff --git a/src/i18n/resources/cs.json b/src/i18n/resources/cs.json index 48a11e19..9e28ec02 100644 --- a/src/i18n/resources/cs.json +++ b/src/i18n/resources/cs.json @@ -765,7 +765,7 @@ }, "name": "Přepínač videa", "templates": { - "button": "Písnička" + "button-song": "Písnička" } }, "visualizer": { diff --git a/src/i18n/resources/de.json b/src/i18n/resources/de.json index 9f2044e1..fc9e2b50 100644 --- a/src/i18n/resources/de.json +++ b/src/i18n/resources/de.json @@ -859,7 +859,7 @@ }, "name": "Videoumschalter", "templates": { - "button": "Lied" + "button-song": "Lied" } }, "visualizer": { diff --git a/src/i18n/resources/el.json b/src/i18n/resources/el.json index 6a7c0749..595c4b5c 100644 --- a/src/i18n/resources/el.json +++ b/src/i18n/resources/el.json @@ -859,7 +859,7 @@ }, "name": "Εναλλαγή βίντεο", "templates": { - "button": "Τραγούδι" + "button-song": "Τραγούδι" } }, "visualizer": { diff --git a/src/i18n/resources/en.json b/src/i18n/resources/en.json index 41e1242e..7700c61c 100644 --- a/src/i18n/resources/en.json +++ b/src/i18n/resources/en.json @@ -381,6 +381,11 @@ }, "templates": { "title": "Open captions selector" + }, + "toast": { + "caption-changed": "Caption changed to {{language}}", + "caption-disabled": "Captions disabled", + "no-captions": "No captions available for this song" } }, "compact-sidebar": { @@ -600,7 +605,15 @@ }, "navigation": { "description": "Next/Back navigation arrows directly integrated in the interface, like in your favorite browser", - "name": "Navigation" + "name": "Navigation", + "templates": { + "back": { + "title": "Go to previous page" + }, + "forward": { + "title": "Go to next page" + } + } }, "no-google-login": { "description": "Remove Google login buttons and links from the interface", @@ -691,6 +704,11 @@ } } }, + "renderer": { + "quality-settings-button": { + "label": "Open player quality changer" + } + }, "description": "Allows changing the video quality with a button on the video overlay", "name": "Video Quality Changer" }, @@ -859,7 +877,8 @@ }, "name": "Video Toggle", "templates": { - "button": "Song" + "button-song": "Song", + "button-video": "Video" } }, "visualizer": { diff --git a/src/i18n/resources/es.json b/src/i18n/resources/es.json index 99a5685f..9d6b4450 100644 --- a/src/i18n/resources/es.json +++ b/src/i18n/resources/es.json @@ -859,7 +859,7 @@ }, "name": "Alternador de vídeo", "templates": { - "button": "Canción" + "button-song": "Canción" } }, "visualizer": { diff --git a/src/i18n/resources/fa.json b/src/i18n/resources/fa.json index b7253df4..faad3da9 100644 --- a/src/i18n/resources/fa.json +++ b/src/i18n/resources/fa.json @@ -831,7 +831,7 @@ }, "name": "ویدیو به آهنگ", "templates": { - "button": "ترانه" + "button-song": "ترانه" } }, "visualizer": { diff --git a/src/i18n/resources/fil.json b/src/i18n/resources/fil.json index 6aa8f038..1a328256 100644 --- a/src/i18n/resources/fil.json +++ b/src/i18n/resources/fil.json @@ -784,7 +784,7 @@ } }, "templates": { - "button": "Kanta" + "button-song": "Kanta" } }, "visualizer": { diff --git a/src/i18n/resources/fr.json b/src/i18n/resources/fr.json index cd78c200..5adc58bc 100644 --- a/src/i18n/resources/fr.json +++ b/src/i18n/resources/fr.json @@ -859,7 +859,7 @@ }, "name": "Basculer la vidéo", "templates": { - "button": "Musique" + "button-song": "Musique" } }, "visualizer": { diff --git a/src/i18n/resources/hu.json b/src/i18n/resources/hu.json index 4450b438..bda91585 100644 --- a/src/i18n/resources/hu.json +++ b/src/i18n/resources/hu.json @@ -831,7 +831,7 @@ }, "name": "Videó váltó", "templates": { - "button": "Zeneszám" + "button-song": "Zeneszám" } }, "visualizer": { diff --git a/src/i18n/resources/id.json b/src/i18n/resources/id.json index e1421e6e..15e04975 100644 --- a/src/i18n/resources/id.json +++ b/src/i18n/resources/id.json @@ -859,7 +859,7 @@ }, "name": "Peralih Video", "templates": { - "button": "Lagu" + "button-song": "Lagu" } }, "visualizer": { diff --git a/src/i18n/resources/is.json b/src/i18n/resources/is.json index f58bc147..33ae7a22 100644 --- a/src/i18n/resources/is.json +++ b/src/i18n/resources/is.json @@ -799,7 +799,7 @@ }, "name": "Myndbandsrofi", "templates": { - "button": "Lag" + "button-song": "Lag" } }, "visualizer": { diff --git a/src/i18n/resources/it.json b/src/i18n/resources/it.json index c4708b82..f469f39c 100644 --- a/src/i18n/resources/it.json +++ b/src/i18n/resources/it.json @@ -859,7 +859,7 @@ }, "name": "Selettore Brano/Video", "templates": { - "button": "Brano" + "button-song": "Brano" } }, "visualizer": { diff --git a/src/i18n/resources/ja.json b/src/i18n/resources/ja.json index 1d50777f..fe645ec7 100644 --- a/src/i18n/resources/ja.json +++ b/src/i18n/resources/ja.json @@ -857,7 +857,7 @@ }, "name": "動画の切り替え", "templates": { - "button": "曲" + "button-song": "曲" } }, "visualizer": { diff --git a/src/i18n/resources/ko.json b/src/i18n/resources/ko.json index 5534d42d..8d0ae5f3 100644 --- a/src/i18n/resources/ko.json +++ b/src/i18n/resources/ko.json @@ -859,7 +859,8 @@ }, "name": "영상 전환", "templates": { - "button": "노래" + "button-song": "노래", + "button-video": "영상" } }, "visualizer": { diff --git a/src/i18n/resources/lt.json b/src/i18n/resources/lt.json index b1c65c98..4fa68b61 100644 --- a/src/i18n/resources/lt.json +++ b/src/i18n/resources/lt.json @@ -618,7 +618,7 @@ }, "name": "Vaizdo įrašo perjungimas", "templates": { - "button": "Daina" + "button-song": "Daina" } }, "visualizer": { diff --git a/src/i18n/resources/ms.json b/src/i18n/resources/ms.json index 85d3bd27..8ff65735 100644 --- a/src/i18n/resources/ms.json +++ b/src/i18n/resources/ms.json @@ -381,7 +381,7 @@ } }, "templates": { - "button": "Lagu" + "button-song": "Lagu" } } } diff --git a/src/i18n/resources/nb.json b/src/i18n/resources/nb.json index bae16783..2b0c0bd3 100644 --- a/src/i18n/resources/nb.json +++ b/src/i18n/resources/nb.json @@ -577,7 +577,7 @@ }, "name": "Videoveksling", "templates": { - "button": "Spor" + "button-song": "Spor" } }, "visualizer": { diff --git a/src/i18n/resources/ne.json b/src/i18n/resources/ne.json index 92f6cf9f..fae0042d 100644 --- a/src/i18n/resources/ne.json +++ b/src/i18n/resources/ne.json @@ -859,7 +859,7 @@ }, "name": "भिडियो टगल", "templates": { - "button": "गीत" + "button-song": "गीत" } }, "visualizer": { diff --git a/src/i18n/resources/nl.json b/src/i18n/resources/nl.json index e44dcfe1..34e307db 100644 --- a/src/i18n/resources/nl.json +++ b/src/i18n/resources/nl.json @@ -859,7 +859,7 @@ }, "name": "Videoschakelaar", "templates": { - "button": "Nummer" + "button-song": "Nummer" } }, "visualizer": { diff --git a/src/i18n/resources/pl.json b/src/i18n/resources/pl.json index 560ba67b..86a1b715 100644 --- a/src/i18n/resources/pl.json +++ b/src/i18n/resources/pl.json @@ -859,7 +859,7 @@ }, "name": "Przełącznik wideo", "templates": { - "button": "Utwór" + "button-song": "Utwór" } }, "visualizer": { diff --git a/src/i18n/resources/pt-BR.json b/src/i18n/resources/pt-BR.json index f617f699..fb633efb 100644 --- a/src/i18n/resources/pt-BR.json +++ b/src/i18n/resources/pt-BR.json @@ -859,7 +859,7 @@ }, "name": "Alternar vídeo", "templates": { - "button": "Música" + "button-song": "Música" } }, "visualizer": { diff --git a/src/i18n/resources/pt.json b/src/i18n/resources/pt.json index 6bd82b3f..68af8af1 100644 --- a/src/i18n/resources/pt.json +++ b/src/i18n/resources/pt.json @@ -859,7 +859,7 @@ }, "name": "Botão de Alternar Vídeo", "templates": { - "button": "Música" + "button-song": "Música" } }, "visualizer": { diff --git a/src/i18n/resources/ro.json b/src/i18n/resources/ro.json index c7ffbe29..dba7f75e 100644 --- a/src/i18n/resources/ro.json +++ b/src/i18n/resources/ro.json @@ -859,7 +859,7 @@ }, "name": "Comutator video", "templates": { - "button": "Melodie" + "button-song": "Melodie" } }, "visualizer": { diff --git a/src/i18n/resources/ru.json b/src/i18n/resources/ru.json index 7b752b35..77e0bbb8 100644 --- a/src/i18n/resources/ru.json +++ b/src/i18n/resources/ru.json @@ -859,7 +859,7 @@ }, "name": "Переключатель видео", "templates": { - "button": "Песня" + "button-song": "Песня" } }, "visualizer": { diff --git a/src/i18n/resources/sv.json b/src/i18n/resources/sv.json index b213fbdb..15d6196f 100644 --- a/src/i18n/resources/sv.json +++ b/src/i18n/resources/sv.json @@ -222,7 +222,7 @@ } }, "templates": { - "button": "Låt" + "button-song": "Låt" } } } diff --git a/src/i18n/resources/ta.json b/src/i18n/resources/ta.json index acde8b81..f9b27d99 100644 --- a/src/i18n/resources/ta.json +++ b/src/i18n/resources/ta.json @@ -859,7 +859,7 @@ }, "name": "வீடியோ மாற்று", "templates": { - "button": "பாடல்" + "button-song": "பாடல்" } }, "visualizer": { diff --git a/src/i18n/resources/th.json b/src/i18n/resources/th.json index a2f05bc0..7b417682 100644 --- a/src/i18n/resources/th.json +++ b/src/i18n/resources/th.json @@ -859,7 +859,7 @@ }, "name": "ปุ่มวิดีโอ", "templates": { - "button": "เพลง" + "button-song": "เพลง" } }, "visualizer": { diff --git a/src/i18n/resources/tr.json b/src/i18n/resources/tr.json index 9ecbb09d..4e1e8939 100644 --- a/src/i18n/resources/tr.json +++ b/src/i18n/resources/tr.json @@ -859,7 +859,7 @@ }, "name": "Video Geçiş", "templates": { - "button": "Şarkı" + "button-song": "Şarkı" } }, "visualizer": { diff --git a/src/i18n/resources/uk.json b/src/i18n/resources/uk.json index edb2d251..9ea2e931 100644 --- a/src/i18n/resources/uk.json +++ b/src/i18n/resources/uk.json @@ -859,7 +859,7 @@ }, "name": "Перемикач відео", "templates": { - "button": "Пісня" + "button-song": "Пісня" } }, "visualizer": { diff --git a/src/i18n/resources/vi.json b/src/i18n/resources/vi.json index 89ed19a0..f53ef46a 100644 --- a/src/i18n/resources/vi.json +++ b/src/i18n/resources/vi.json @@ -857,7 +857,7 @@ }, "name": "Chuyển đổi video", "templates": { - "button": "Bài hát" + "button-song": "Bài hát" } }, "visualizer": { diff --git a/src/i18n/resources/zh-CN.json b/src/i18n/resources/zh-CN.json index d54ef98d..c96a1471 100644 --- a/src/i18n/resources/zh-CN.json +++ b/src/i18n/resources/zh-CN.json @@ -859,7 +859,7 @@ }, "name": "视频切换开关", "templates": { - "button": "歌曲" + "button-song": "歌曲" } }, "visualizer": { diff --git a/src/i18n/resources/zh-TW.json b/src/i18n/resources/zh-TW.json index c59d3f6a..ad0d190e 100644 --- a/src/i18n/resources/zh-TW.json +++ b/src/i18n/resources/zh-TW.json @@ -859,7 +859,7 @@ }, "name": "歌曲／影片切換", "templates": { - "button": "歌曲" + "button-song": "歌曲" } }, "visualizer": { diff --git a/src/index.ts b/src/index.ts index 307a7231..c297dbec 100644 --- a/src/index.ts +++ b/src/index.ts @@ -763,7 +763,7 @@ app.whenReady().then(async () => { const splited = decodeURIComponent(command).split(' '); - handleProtocol(splited.shift()!, splited); + handleProtocol(splited.shift()!, ...splited); return; } diff --git a/src/plugins/album-actions/index.ts b/src/plugins/album-actions/index.tsx similarity index 58% rename from src/plugins/album-actions/index.ts rename to src/plugins/album-actions/index.tsx index ed27c6c2..7c1b0001 100644 --- a/src/plugins/album-actions/index.ts +++ b/src/plugins/album-actions/index.tsx @@ -1,12 +1,17 @@ +import { render } from 'solid-js/web'; + +import { createSignal, Show } from 'solid-js'; + import { t } from '@/i18n'; import { createPlugin } from '@/utils'; -import { ElementFromHtml } from '@/plugins/utils/renderer'; import { waitForElement } from '@/utils/wait-for-element'; -import undislikeHTML from './templates/undislike.html?raw'; -import dislikeHTML from './templates/dislike.html?raw'; -import likeHTML from './templates/like.html?raw'; -import unlikeHTML from './templates/unlike.html?raw'; +import { + DislikeButton, + LikeButton, + UnDislikeButton, + UnLikeButton, +} from './templates'; export default createPlugin< unknown, @@ -52,19 +57,69 @@ export default createPlugin< } const continuations = await waitForElement('#continuations'); this.waiting = false; - //Gets the for buttons - const buttons: Array = [ - ElementFromHtml(undislikeHTML), - ElementFromHtml(dislikeHTML), - ElementFromHtml(likeHTML), - ElementFromHtml(unlikeHTML), - ]; + + const [showUnDislike, setShowUnDislike] = createSignal(true); + const [showDislike, setShowDislike] = createSignal(true); + const [showLike, setShowLike] = createSignal(true); + const [showUnLike, setShowUnLike] = createSignal(true); + + const DEFAULT_MASK_SIZE = '100% 50%'; + const [unDislikeMaskSize, setUnDislikeMaskSize] = + createSignal(DEFAULT_MASK_SIZE); + const [dislikeMaskSize, setDislikeMaskSize] = + createSignal(DEFAULT_MASK_SIZE); + const [likeMaskSize, setLikeMaskSize] = createSignal(DEFAULT_MASK_SIZE); + const [unLikeMaskSize, setUnLikeMaskSize] = + createSignal(DEFAULT_MASK_SIZE); + + const buttonContainer = document.createElement('div'); + buttonContainer.style.display = 'flex'; + buttonContainer.style.flexDirection = 'row'; + + render( + () => ( + <> + + + + + + + + + + + + + + ), + buttonContainer, + ); + //Finds the playlist const playlist = document.querySelector('ytmusic-playlist-shelf-renderer') ?? - Array.prototype.at.call(document.querySelectorAll('ytmusic-shelf-renderer'), -1)!; + document.querySelector(':nth-last-child(1 of ytmusic-shelf-renderer)'); + + if (!playlist) { + return; + } + // Adds an observer for every button, so it gets updated when one is clicked this.changeObserver?.disconnect(); + this.changeObserver = new MutationObserver(() => { this.stop(); this.start(); @@ -84,34 +139,57 @@ export default createPlugin< '#button-shape-dislike > button', ).length; if (continuations.children.length == 0 && listsLength > 0) { - const counts = [ - playlist?.querySelectorAll( + const counts = { + dislike: playlist?.querySelectorAll( '#button-shape-dislike > button[aria-pressed=true]', ).length, - playlist?.querySelectorAll( + undislike: playlist?.querySelectorAll( '#button-shape-dislike > button[aria-pressed=false]', ).length, - playlist?.querySelectorAll( + unlike: playlist?.querySelectorAll( '#button-shape-like > button[aria-pressed=false]', ).length, - playlist?.querySelectorAll( + like: playlist?.querySelectorAll( '#button-shape-like > button[aria-pressed=true]', ).length, - ]; - let i = 0; - for (const count of counts) { - if (count == 0) { - buttons.splice(i, 1); - i--; - } else { - ( - buttons[i].children[0].children[0] as HTMLElement - ).style.setProperty( - '-webkit-mask-size', - `100% ${100 - (count / listsLength) * 100}%`, - ); + }; + for (const [name, size] of Object.entries(counts)) { + switch (name) { + case 'dislike': + if (size > 0) { + setShowDislike(true); + setDislikeMaskSize(`100% ${100 - (size / listsLength) * 100}%`); + } else { + setShowDislike(false); + } + break; + case 'undislike': + if (size > 0) { + setShowUnDislike(true); + setUnDislikeMaskSize( + `100% ${100 - (size / listsLength) * 100}%`, + ); + } else { + setShowUnDislike(false); + } + break; + case 'like': + if (size > 0) { + setShowLike(true); + setLikeMaskSize(`100% ${100 - (size / listsLength) * 100}%`); + } else { + setShowLike(false); + } + break; + case 'unlike': + if (size > 0) { + setShowUnLike(true); + setUnLikeMaskSize(`100% ${100 - (size / listsLength) * 100}%`); + } else { + setShowUnLike(false); + } + break; } - i++; } } const menuParent = @@ -126,10 +204,7 @@ export default createPlugin< menu, menuParent.children[menuParent.children.length - 1], ); - for (const button of buttons) { - menu.appendChild(button); - button.addEventListener('click', this.loadFullList); - } + menu.appendChild(buttonContainer); } }, loadFullList(event: MouseEvent) { @@ -159,7 +234,7 @@ export default createPlugin< let playlistButtons: NodeListOf | undefined; const playlist = document.querySelector('ytmusic-playlist-shelf-renderer') ?? - Array.prototype.at.call(document.querySelectorAll('ytmusic-shelf-renderer'), -1)!; + document.querySelector(':nth-last-child(1 of ytmusic-shelf-renderer)'); switch (id) { case 'allundislike': playlistButtons = playlist?.querySelectorAll( diff --git a/src/plugins/album-actions/templates/dislike-button.tsx b/src/plugins/album-actions/templates/dislike-button.tsx new file mode 100644 index 00000000..85da24ed --- /dev/null +++ b/src/plugins/album-actions/templates/dislike-button.tsx @@ -0,0 +1,99 @@ +export interface DislikeButtonProps { + onClick?: (e: MouseEvent) => void; + maskSize: string; +} + +export const DislikeButton = (props: DislikeButtonProps) => ( +
+ +
+); diff --git a/src/plugins/album-actions/templates/dislike.html b/src/plugins/album-actions/templates/dislike.html deleted file mode 100644 index 1d00412c..00000000 --- a/src/plugins/album-actions/templates/dislike.html +++ /dev/null @@ -1,76 +0,0 @@ -
- -
diff --git a/src/plugins/album-actions/templates/index.ts b/src/plugins/album-actions/templates/index.ts new file mode 100644 index 00000000..f6221326 --- /dev/null +++ b/src/plugins/album-actions/templates/index.ts @@ -0,0 +1,4 @@ +export * from './like-button'; +export * from './dislike-button'; +export * from './undislike-button'; +export * from './unlike-button'; diff --git a/src/plugins/album-actions/templates/like-button.tsx b/src/plugins/album-actions/templates/like-button.tsx new file mode 100644 index 00000000..eacb14c1 --- /dev/null +++ b/src/plugins/album-actions/templates/like-button.tsx @@ -0,0 +1,90 @@ +export interface LikeButtonProps { + onClick?: (e: MouseEvent) => void; + maskSize: string; +} + +export const LikeButton = (props: LikeButtonProps) => ( +
+ +
+); diff --git a/src/plugins/album-actions/templates/like.html b/src/plugins/album-actions/templates/like.html deleted file mode 100644 index 9de2cfbe..00000000 --- a/src/plugins/album-actions/templates/like.html +++ /dev/null @@ -1,76 +0,0 @@ -
- -
diff --git a/src/plugins/album-actions/templates/undislike-button.tsx b/src/plugins/album-actions/templates/undislike-button.tsx new file mode 100644 index 00000000..2757c146 --- /dev/null +++ b/src/plugins/album-actions/templates/undislike-button.tsx @@ -0,0 +1,104 @@ +export interface UnDislikeButtonProps { + onClick?: (e: MouseEvent) => void; + maskSize: string; +} + +export const UnDislikeButton = (props: UnDislikeButtonProps) => ( +
+ +
+); diff --git a/src/plugins/album-actions/templates/undislike.html b/src/plugins/album-actions/templates/undislike.html deleted file mode 100644 index 9716a3ca..00000000 --- a/src/plugins/album-actions/templates/undislike.html +++ /dev/null @@ -1,76 +0,0 @@ -
- -
diff --git a/src/plugins/album-actions/templates/unlike-button.tsx b/src/plugins/album-actions/templates/unlike-button.tsx new file mode 100644 index 00000000..e4e95882 --- /dev/null +++ b/src/plugins/album-actions/templates/unlike-button.tsx @@ -0,0 +1,104 @@ +export interface UnLikeButtonProps { + onClick?: (e: MouseEvent) => void; + maskSize: string; +} + +export const UnLikeButton = (props: UnLikeButtonProps) => ( +
+ +
+); diff --git a/src/plugins/album-actions/templates/unlike.html b/src/plugins/album-actions/templates/unlike.html deleted file mode 100644 index 5ca2952a..00000000 --- a/src/plugins/album-actions/templates/unlike.html +++ /dev/null @@ -1,76 +0,0 @@ -
- -
diff --git a/src/plugins/captions-selector/back.ts b/src/plugins/captions-selector/back.ts index ce587545..83b030ad 100644 --- a/src/plugins/captions-selector/back.ts +++ b/src/plugins/captions-selector/back.ts @@ -7,7 +7,7 @@ import { t } from '@/i18n'; export default createBackend({ start({ ipc: { handle }, window }) { handle( - 'captionsSelector', + 'ytmd:captions-selector', async (captionLabels: Record, currentIndex: string) => await prompt( { diff --git a/src/plugins/captions-selector/index.ts b/src/plugins/captions-selector/index.ts index 7ef9b22e..50252fcb 100644 --- a/src/plugins/captions-selector/index.ts +++ b/src/plugins/captions-selector/index.ts @@ -1,21 +1,20 @@ import { createPlugin } from '@/utils'; -import { YoutubePlayer } from '@/types/youtube-player'; +import { t } from '@/i18n'; import backend from './back'; import renderer, { CaptionsSelectorConfig, LanguageOptions } from './renderer'; -import { t } from '@/i18n'; + +import type { YoutubePlayer } from '@/types/youtube-player'; export default createPlugin< unknown, unknown, { - captionsSettingsButton: HTMLElement; + captionsSettingsButton?: HTMLElement; captionTrackList: LanguageOptions[] | null; api: YoutubePlayer | null; config: CaptionsSelectorConfig | null; - setConfig: (config: Partial) => void; videoChangeListener: () => void; - captionsButtonClickListener: () => void; }, CaptionsSelectorConfig >({ diff --git a/src/plugins/captions-selector/renderer.ts b/src/plugins/captions-selector/renderer.ts deleted file mode 100644 index 2d0bead6..00000000 --- a/src/plugins/captions-selector/renderer.ts +++ /dev/null @@ -1,151 +0,0 @@ -import { ElementFromHtml } from '@/plugins/utils/renderer'; -import { createRenderer } from '@/utils'; - -import CaptionsSettingsButtonHTML from './templates/captions-settings-template.html?raw'; - -import { YoutubePlayer } from '@/types/youtube-player'; - -export interface LanguageOptions { - displayName: string; - id: string | null; - is_default: boolean; - is_servable: boolean; - is_translateable: boolean; - kind: string; - languageCode: string; // 2 length - languageName: string; - name: string | null; - vss_id: string; -} - -export interface CaptionsSelectorConfig { - enabled: boolean; - disableCaptions: boolean; - autoload: boolean; - lastCaptionsCode: string; -} - -export default createRenderer< - { - captionsSettingsButton: HTMLElement; - captionTrackList: LanguageOptions[] | null; - api: YoutubePlayer | null; - config: CaptionsSelectorConfig | null; - setConfig: (config: Partial) => void; - videoChangeListener: () => void; - captionsButtonClickListener: () => void; - }, - CaptionsSelectorConfig ->({ - captionsSettingsButton: ElementFromHtml(CaptionsSettingsButtonHTML), - captionTrackList: null, - api: null, - config: null, - setConfig: () => {}, - async captionsButtonClickListener() { - if (this.captionTrackList?.length) { - const currentCaptionTrack = this.api!.getOption( - 'captions', - 'track', - ); - let currentIndex = currentCaptionTrack - ? this.captionTrackList.indexOf( - this.captionTrackList.find( - (track) => - track.languageCode === currentCaptionTrack.languageCode, - )!, - ) - : null; - - const captionLabels = [ - ...this.captionTrackList.map((track) => track.displayName), - 'None', - ]; - - currentIndex = (await window.ipcRenderer.invoke( - 'captionsSelector', - captionLabels, - currentIndex, - )) as number; - if (currentIndex === null) { - return; - } - - const newCaptions = this.captionTrackList[currentIndex]; - this.setConfig({ lastCaptionsCode: newCaptions?.languageCode }); - if (newCaptions) { - this.api?.setOption('captions', 'track', { - languageCode: newCaptions.languageCode, - }); - } else { - this.api?.setOption('captions', 'track', {}); - } - - setTimeout(() => this.api?.playVideo()); - } - }, - videoChangeListener() { - if (this.config?.disableCaptions) { - setTimeout(() => this.api!.unloadModule('captions'), 100); - this.captionsSettingsButton.style.display = 'none'; - return; - } - - this.api!.loadModule('captions'); - - setTimeout(() => { - this.captionTrackList = - this.api!.getOption('captions', 'tracklist') ?? []; - - if (this.config!.autoload && this.config!.lastCaptionsCode) { - this.api?.setOption('captions', 'track', { - languageCode: this.config!.lastCaptionsCode, - }); - } - - this.captionsSettingsButton.style.display = this.captionTrackList?.length - ? 'inline-block' - : 'none'; - }, 250); - }, - async start({ getConfig, setConfig }) { - this.config = await getConfig(); - this.setConfig = setConfig; - }, - stop() { - document - .querySelector('.right-controls-buttons') - ?.removeChild(this.captionsSettingsButton); - document - .querySelector('#movie_player') - ?.unloadModule('captions'); - document - .querySelector('video') - ?.removeEventListener('ytmd:src-changed', this.videoChangeListener); - this.captionsSettingsButton.removeEventListener( - 'click', - this.captionsButtonClickListener, - ); - }, - onPlayerApiReady(playerApi) { - this.api = playerApi; - - document - .querySelector('.right-controls-buttons') - ?.append(this.captionsSettingsButton); - - this.captionTrackList = - this.api.getOption('captions', 'tracklist') ?? []; - - document - .querySelector('video') - ?.addEventListener('ytmd:src-changed', this.videoChangeListener); - this.captionsSettingsButton.addEventListener( - 'click', - this.captionsButtonClickListener, - ); - }, - onConfigChange(newConfig) { - this.config = newConfig; - }, -}); diff --git a/src/plugins/captions-selector/renderer.tsx b/src/plugins/captions-selector/renderer.tsx new file mode 100644 index 00000000..7fc98269 --- /dev/null +++ b/src/plugins/captions-selector/renderer.tsx @@ -0,0 +1,164 @@ +import { render } from 'solid-js/web'; +import { createSignal, Show } from 'solid-js'; + +import { createRenderer } from '@/utils'; +import { t } from '@/i18n'; + +import { CaptionsSettingButton } from './templates/captions-settings-template'; + +import type { YoutubePlayer } from '@/types/youtube-player'; +import type { AppElement } from '@/types/queue'; + +export interface LanguageOptions { + displayName: string; + id: string | null; + is_default: boolean; + is_servable: boolean; + is_translateable: boolean; + kind: string; + languageCode: string; // 2 length + languageName: string; + name: string | null; + vss_id: string; +} + +export interface CaptionsSelectorConfig { + enabled: boolean; + disableCaptions: boolean; + autoload: boolean; + lastCaptionsCode: string; +} + +const [hidden, setHidden] = createSignal(false); + +export default createRenderer< + { + captionsSettingsButton?: HTMLElement; + captionTrackList: LanguageOptions[] | null; + api: YoutubePlayer | null; + config: CaptionsSelectorConfig | null; + videoChangeListener: () => void; + }, + CaptionsSelectorConfig +>({ + captionTrackList: null, + api: null, + config: null, + videoChangeListener() { + if (this.config?.disableCaptions) { + setTimeout(() => this.api!.unloadModule('captions'), 100); + setHidden(true); + return; + } + + this.api!.loadModule('captions'); + + setTimeout(() => { + this.captionTrackList = + this.api!.getOption('captions', 'tracklist') ?? []; + + if (this.config!.autoload && this.config!.lastCaptionsCode) { + this.api?.setOption('captions', 'track', { + languageCode: this.config!.lastCaptionsCode, + }); + } + + setHidden(!this.captionTrackList?.length); + }, 250); + }, + async start({ getConfig }) { + this.config = await getConfig(); + }, + stop() { + this.api?.unloadModule('captions'); + document + .querySelector('video') + ?.removeEventListener('ytmd:src-changed', this.videoChangeListener); + if (this.captionsSettingsButton) { + document + .querySelector('.right-controls-buttons') + ?.removeChild(this.captionsSettingsButton); + } + }, + onPlayerApiReady(playerApi, { ipc, setConfig }) { + this.api = playerApi; + + render( + () => ( + + { + const appApi = document.querySelector('ytmusic-app'); + + if (this.captionTrackList?.length) { + const currentCaptionTrack = + playerApi.getOption('captions', 'track'); + + let currentIndex = currentCaptionTrack + ? this.captionTrackList.indexOf( + this.captionTrackList.find( + (track) => + track.languageCode === + currentCaptionTrack.languageCode, + )!, + ) + : null; + + const captionLabels = [ + ...this.captionTrackList.map((track) => track.displayName), + 'None', + ]; + + currentIndex = (await ipc.invoke( + 'ytmd:captions-selector', + captionLabels, + currentIndex, + )) as number; + if (currentIndex === null) { + return; + } + + const newCaptions = this.captionTrackList[currentIndex]; + setConfig({ lastCaptionsCode: newCaptions?.languageCode }); + if (newCaptions) { + playerApi.setOption('captions', 'track', { + languageCode: newCaptions.languageCode, + }); + appApi?.toastService?.show( + t('plugins.captions-selector.toast.caption-changed', { + language: newCaptions.displayName, + }), + ); + } else { + playerApi.setOption('captions', 'track', {}); + appApi?.toastService?.show( + t('plugins.captions-selector.toast.caption-disabled'), + ); + } + + setTimeout(() => playerApi.playVideo()); + } else { + appApi?.toastService?.show( + t('plugins.captions-selector.toast.no-captions'), + ); + } + }} + ref={this.captionsSettingsButton} + /> + + ), + document.querySelector('.right-controls-buttons')!, + ); + + this.captionTrackList = + this.api.getOption('captions', 'tracklist') ?? []; + + document + .querySelector('video') + ?.addEventListener('ytmd:src-changed', this.videoChangeListener); + }, + onConfigChange(newConfig) { + this.config = newConfig; + }, +}); diff --git a/src/plugins/captions-selector/templates/captions-settings-template.html b/src/plugins/captions-selector/templates/captions-settings-template.html deleted file mode 100644 index 6d30cdb4..00000000 --- a/src/plugins/captions-selector/templates/captions-settings-template.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - diff --git a/src/plugins/captions-selector/templates/captions-settings-template.tsx b/src/plugins/captions-selector/templates/captions-settings-template.tsx new file mode 100644 index 00000000..8a19bf92 --- /dev/null +++ b/src/plugins/captions-selector/templates/captions-settings-template.tsx @@ -0,0 +1,42 @@ +export interface CaptionsSettingsButtonProps { + label: string; + onClick: (event: MouseEvent) => void; +} + +export const CaptionsSettingButton = (props: CaptionsSettingsButtonProps) => ( + + +
+ + + + + +
+ + +); diff --git a/src/plugins/downloader/renderer.ts b/src/plugins/downloader/renderer.tsx similarity index 53% rename from src/plugins/downloader/renderer.ts rename to src/plugins/downloader/renderer.tsx index 5fe8aa33..8ec9712d 100644 --- a/src/plugins/downloader/renderer.ts +++ b/src/plugins/downloader/renderer.tsx @@ -1,26 +1,24 @@ -import downloadHTML from './templates/download.html?raw'; +import { createSignal } from 'solid-js'; + +import { render } from 'solid-js/web'; import defaultConfig from '@/config/defaults'; import { getSongMenu } from '@/providers/dom-elements'; import { getSongInfo } from '@/providers/song-info-front'; - -import { LoggerPrefix } from '@/utils'; - import { t } from '@/i18n'; +import { isMusicOrVideoTrack } from '@/plugins/utils/renderer/check'; -import { defaultTrustedTypePolicy } from '@/utils/trusted-types'; - -import { ElementFromHtml } from '../utils/renderer'; +import { DownloadButton } from './templates/download'; import type { RendererContext } from '@/types/contexts'; - import type { DownloaderPluginConfig } from './index'; -let menu: Element | null = null; -let progress: Element | null = null; -const downloadButton = ElementFromHtml(downloadHTML); +let menu: HTMLElement | null = null; +let download: () => void; -let doneFirstLoad = false; +const [downloadButtonText, setDownloadButtonText] = createSignal(''); + +let buttonContainer: HTMLDivElement | null = null; const menuObserver = new MutationObserver(() => { if (!menu) { @@ -30,46 +28,24 @@ const menuObserver = new MutationObserver(() => { } } - if (menu.contains(downloadButton)) { + if ( + menu.contains(buttonContainer) || + !isMusicOrVideoTrack() || + !buttonContainer + ) { return; } - // check for video (or music) - let menuUrl = document.querySelector( - 'tp-yt-paper-listbox [tabindex="0"] #navigation-endpoint', - )?.href; - if (!menuUrl?.includes('watch?')) { - menuUrl = undefined; - // check for podcast - for (const it of document.querySelectorAll( - 'tp-yt-paper-listbox [tabindex="-1"] #navigation-endpoint', - )) { - if (it.getAttribute('href')?.includes('podcast/')) { - menuUrl = it.getAttribute('href')!; - break; - } - } - } - - if (!menuUrl && doneFirstLoad) { - return; - } - - menu.prepend(downloadButton); - progress = document.querySelector('#ytmcustom-download'); - - if (!doneFirstLoad) { - setTimeout(() => (doneFirstLoad ||= true), 500); - } + menu.prepend(buttonContainer); }); export const onRendererLoad = ({ ipc, }: RendererContext) => { - window.download = () => { + download = () => { const songMenu = getSongMenu(); + let videoUrl = songMenu - // Selector of first button which is always "Start Radio" ?.querySelector( 'ytmusic-menu-navigation-item-renderer[tabindex="0"] #navigation-endpoint', ) @@ -108,21 +84,30 @@ export const onRendererLoad = ({ }; ipc.on('downloader-feedback', (feedback: string) => { - if (progress) { - const targetHtml = feedback || t('plugins.downloader.templates.button'); - (progress.innerHTML as string | TrustedHTML) = defaultTrustedTypePolicy - ? defaultTrustedTypePolicy.createHTML(targetHtml) - : targetHtml; - } else { - console.warn( - LoggerPrefix, - t('plugins.downloader.renderer.can-not-update-progress'), - ); - } + const targetHtml = feedback || t('plugins.downloader.templates.button'); + setDownloadButtonText(targetHtml); }); }; export const onPlayerApiReady = () => { + setDownloadButtonText(t('plugins.downloader.templates.button')); + + buttonContainer = document.createElement('div'); + buttonContainer.classList.add( + 'style-scope', + 'menu-item', + 'ytmusic-menu-popup-renderer', + ); + buttonContainer.setAttribute('aria-disabled', 'false'); + buttonContainer.setAttribute('aria-selected', 'false'); + buttonContainer.setAttribute('role', 'option'); + buttonContainer.setAttribute('tabindex', '-1'); + + render( + () => , + buttonContainer, + ); + menuObserver.observe(document.querySelector('ytmusic-popup-container')!, { childList: true, subtree: true, diff --git a/src/plugins/downloader/templates/download.html b/src/plugins/downloader/templates/download.tsx similarity index 71% rename from src/plugins/downloader/templates/download.html rename to src/plugins/downloader/templates/download.tsx index 57a8830d..4b61e76a 100644 --- a/src/plugins/downloader/templates/download.html +++ b/src/plugins/downloader/templates/download.tsx @@ -1,24 +1,23 @@ -
+export const DownloadButton = (props: { + onClick: () => void; + text: string; +}) => ( -
+
@@ -39,7 +38,7 @@ class="text style-scope ytmusic-menu-navigation-item-renderer" id="ytmcustom-download" > - + {props.text}
-
+); diff --git a/src/plugins/navigation/components/back-button.tsx b/src/plugins/navigation/components/back-button.tsx new file mode 100644 index 00000000..07951ace --- /dev/null +++ b/src/plugins/navigation/components/back-button.tsx @@ -0,0 +1,42 @@ +export interface BackButtonProps { + onClick?: (e: MouseEvent) => void; + title: string; +} + +export const BackButton = (props: BackButtonProps) => ( + +); diff --git a/src/plugins/navigation/components/forward-button.tsx b/src/plugins/navigation/components/forward-button.tsx new file mode 100644 index 00000000..0403eb61 --- /dev/null +++ b/src/plugins/navigation/components/forward-button.tsx @@ -0,0 +1,46 @@ +export interface ForwardButtonProps { + onClick?: (e: MouseEvent) => void; + title: string; +} + +export const ForwardButton = (props: ForwardButtonProps) => ( + +); diff --git a/src/plugins/navigation/index.ts b/src/plugins/navigation/index.ts deleted file mode 100644 index 3c23092b..00000000 --- a/src/plugins/navigation/index.ts +++ /dev/null @@ -1,30 +0,0 @@ -import style from './style.css?inline'; -import { createPlugin } from '@/utils'; -import { ElementFromHtml } from '@/plugins/utils/renderer'; - -import { t } from '@/i18n'; - -import forwardHTML from './templates/forward.html?raw'; -import backHTML from './templates/back.html?raw'; - -export default createPlugin({ - name: () => t('plugins.navigation.name'), - description: () => t('plugins.navigation.description'), - restartNeeded: false, - config: { - enabled: true, - }, - stylesheets: [style], - renderer: { - start() { - const forwardButton = ElementFromHtml(forwardHTML); - const backButton = ElementFromHtml(backHTML); - const menu = document.querySelector('#right-content'); - menu?.prepend(backButton, forwardButton); - }, - stop() { - document.querySelector('[tab-id=FEmusic_back]')?.remove(); - document.querySelector('[tab-id=FEmusic_next]')?.remove(); - }, - }, -}); diff --git a/src/plugins/navigation/index.tsx b/src/plugins/navigation/index.tsx new file mode 100644 index 00000000..8321637e --- /dev/null +++ b/src/plugins/navigation/index.tsx @@ -0,0 +1,48 @@ +import { render } from 'solid-js/web'; + +import style from './style.css?inline'; +import { createPlugin } from '@/utils'; + +import { t } from '@/i18n'; + +import { ForwardButton } from './components/forward-button'; +import { BackButton } from './components/back-button'; + +export default createPlugin({ + name: () => t('plugins.navigation.name'), + description: () => t('plugins.navigation.description'), + restartNeeded: false, + config: { + enabled: true, + }, + stylesheets: [style], + renderer: { + buttonContainer: document.createElement('div'), + start() { + if (!this.buttonContainer) { + this.buttonContainer = document.createElement('div'); + } + + render( + () => ( + <> + history.back()} + title={t('plugins.navigation.templates.back.title')} + /> + history.forward()} + title={t('plugins.navigation.templates.forward.title')} + /> + + ), + this.buttonContainer, + ); + const menu = document.querySelector('#right-content'); + menu?.prepend(this.buttonContainer); + }, + stop() { + this.buttonContainer.remove(); + }, + }, +}); diff --git a/src/plugins/navigation/templates/back.html b/src/plugins/navigation/templates/back.html deleted file mode 100644 index bd8c6557..00000000 --- a/src/plugins/navigation/templates/back.html +++ /dev/null @@ -1,33 +0,0 @@ - diff --git a/src/plugins/navigation/templates/forward.html b/src/plugins/navigation/templates/forward.html deleted file mode 100644 index 381754ba..00000000 --- a/src/plugins/navigation/templates/forward.html +++ /dev/null @@ -1,35 +0,0 @@ - diff --git a/src/plugins/notifications/interactive.ts b/src/plugins/notifications/interactive.ts index a7c96336..59f8c628 100644 --- a/src/plugins/notifications/interactive.ts +++ b/src/plugins/notifications/interactive.ts @@ -309,9 +309,10 @@ export default ( savedNotification?.close(); }); - changeProtocolHandler((cmd, args) => { + changeProtocolHandler((cmd, ...args) => { if (Object.keys(songControls).includes(cmd)) { - songControls[cmd as keyof typeof songControls](args as never); + // @ts-expect-error: cmd is a key of songControls + songControls[cmd as keyof typeof songControls](...args); if ( config().refreshOnPlayPause && (cmd === 'pause' || (cmd === 'play' && !config().unpauseNotification)) diff --git a/src/plugins/picture-in-picture/index.ts b/src/plugins/picture-in-picture/index.ts index 92e0add8..30414f9d 100644 --- a/src/plugins/picture-in-picture/index.ts +++ b/src/plugins/picture-in-picture/index.ts @@ -3,7 +3,7 @@ import { createPlugin } from '@/utils'; import { onConfigChange, onMainLoad } from './main'; import { onMenu } from './menu'; -import { onPlayerApiReady, onRendererLoad } from './renderer'; +import { onPlayerApiReady } from './renderer'; import { t } from '@/i18n'; export type PictureInPicturePluginConfig = { @@ -41,7 +41,6 @@ export default createPlugin({ onConfigChange, }, renderer: { - start: onRendererLoad, onPlayerApiReady, }, }); diff --git a/src/plugins/picture-in-picture/main.ts b/src/plugins/picture-in-picture/main.ts index 81e85ac2..129768f1 100644 --- a/src/plugins/picture-in-picture/main.ts +++ b/src/plugins/picture-in-picture/main.ts @@ -45,7 +45,7 @@ export const onMainLoad = async ({ window.setMaximizable(false); window.setFullScreenable(false); - send('pip-toggle', true); + send('ytmd:pip-toggle', true); app.dock?.hide(); window.setVisibleOnAllWorkspaces(true, { @@ -63,7 +63,7 @@ export const onMainLoad = async ({ window.setMaximizable(true); window.setFullScreenable(true); - send('pip-toggle', false); + send('ytmd:pip-toggle', false); window.setVisibleOnAllWorkspaces(false); window.setAlwaysOnTop(false); diff --git a/src/plugins/picture-in-picture/renderer.ts b/src/plugins/picture-in-picture/renderer.ts deleted file mode 100644 index 68070c21..00000000 --- a/src/plugins/picture-in-picture/renderer.ts +++ /dev/null @@ -1,207 +0,0 @@ -import { toKeyEvent } from 'keyboardevent-from-electron-accelerator'; -import keyEventAreEqual from 'keyboardevents-areequal'; - -import pipHTML from './templates/picture-in-picture.html?raw'; - -import { getSongMenu } from '@/providers/dom-elements'; - -import { ElementFromHtml } from '../utils/renderer'; - -import type { PictureInPicturePluginConfig } from './index'; -import type { RendererContext } from '@/types/contexts'; - -function $(selector: string) { - return document.querySelector(selector); -} - -let useNativePiP = false; -let menu: Element | null = null; -const pipButton = ElementFromHtml(pipHTML); - -let doneFirstLoad = false; - -// Will also clone -function replaceButton(query: string, button: Element) { - const svg = button.querySelector('#icon svg')?.cloneNode(true); - if (svg) { - button.replaceWith(button.cloneNode(true)); - button.remove(); - const newButton = $(query); - if (newButton) { - newButton.querySelector('#icon')?.append(svg); - } - return newButton; - } - return null; -} - -function cloneButton(query: string) { - const button = $(query); - if (button) { - replaceButton(query, button); - } - return $(query); -} - -const observer = new MutationObserver(() => { - if (!menu) { - menu = getSongMenu(); - if (!menu) { - return; - } - } - - if ( - menu.contains(pipButton) || - !( - menu.parentElement as (HTMLElement & { eventSink_: Element }) | null - )?.eventSink_?.matches('ytmusic-menu-renderer.ytmusic-player-bar') - ) { - return; - } - - // check for video (or music) - let menuUrl = $( - 'tp-yt-paper-listbox [tabindex="0"] #navigation-endpoint', - )?.href; - - if (!menuUrl?.includes('watch?')) { - menuUrl = undefined; - // check for podcast - for (const it of document.querySelectorAll( - 'tp-yt-paper-listbox [tabindex="-1"] #navigation-endpoint', - )) { - if (it.getAttribute('href')?.includes('podcast/')) { - menuUrl = it.getAttribute('href')!; - break; - } - } - } - - if (!menuUrl && doneFirstLoad) { - return; - } - - menu.prepend(pipButton); - - if (!doneFirstLoad) { - setTimeout(() => (doneFirstLoad ||= true), 500); - } -}); - -const togglePictureInPicture = async () => { - if (useNativePiP) { - const isInPiP = document.pictureInPictureElement !== null; - const video = $('video'); - const togglePiP = () => - isInPiP - ? document.exitPictureInPicture.call(document) - : video?.requestPictureInPicture?.call(video); - - try { - await togglePiP(); - $('#icon')?.click(); // Close the menu - return true; - } catch {} - } - - window.ipcRenderer.send('plugin:toggle-picture-in-picture'); - return false; -}; -// For UI (HTML) -window.togglePictureInPicture = togglePictureInPicture; - -const listenForToggle = () => { - const originalExitButton = $('.exit-fullscreen-button'); - const appLayout = $('ytmusic-app-layout'); - const expandMenu = $('#expanding-menu'); - const middleControls = $('.middle-controls'); - const playerPage = $( - 'ytmusic-player-page', - ); - const togglePlayerPageButton = $( - '.toggle-player-page-button', - ); - const fullScreenButton = $('.fullscreen-button'); - const player = $< - HTMLVideoElement & { onDoubleClick_: (() => void) | undefined } - >('#player'); - const onPlayerDblClick = player?.onDoubleClick_; - const mouseLeaveEventListener = () => middleControls?.click(); - - const titlebar = $('.cet-titlebar'); - - window.ipcRenderer.on('pip-toggle', (_, isPip: boolean) => { - if (originalExitButton && player) { - if (isPip) { - replaceButton( - '.exit-fullscreen-button', - originalExitButton, - )?.addEventListener('click', () => togglePictureInPicture()); - player.onDoubleClick_ = () => {}; - - expandMenu?.addEventListener('mouseleave', mouseLeaveEventListener); - if (!playerPage?.playerPageOpen_) { - togglePlayerPageButton?.click(); - } - - fullScreenButton?.click(); - appLayout?.classList.add('pip'); - if (titlebar) { - titlebar.style.display = 'none'; - } - } else { - $('.exit-fullscreen-button')?.replaceWith(originalExitButton); - player.onDoubleClick_ = onPlayerDblClick; - expandMenu?.removeEventListener('mouseleave', mouseLeaveEventListener); - originalExitButton.click(); - appLayout?.classList.remove('pip'); - if (titlebar) { - titlebar.style.display = 'flex'; - } - } - } - }); -}; - -export const onRendererLoad = async ({ - getConfig, -}: RendererContext) => { - const config = await getConfig(); - - useNativePiP = config.useNativePiP; - - if (config.hotkey) { - const hotkeyEvent = toKeyEvent(config.hotkey); - window.addEventListener('keydown', (event) => { - if ( - keyEventAreEqual(event, hotkeyEvent) && - !$('ytmusic-search-box')?.opened - ) { - togglePictureInPicture(); - } - }); - } -}; - -export const onPlayerApiReady = () => { - listenForToggle(); - - cloneButton('.player-minimize-button')?.addEventListener( - 'click', - async () => { - await togglePictureInPicture(); - setTimeout(() => $('#player')?.click()); - }, - ); - - // Allows easily closing the menu by programmatically clicking outside of it - $('#expanding-menu')?.removeAttribute('no-cancel-on-outside-click'); - // TODO: think about wether an additional button in songMenu is needed - const popupContainer = $('ytmusic-popup-container'); - if (popupContainer) - observer.observe(popupContainer, { - childList: true, - subtree: true, - }); -}; diff --git a/src/plugins/picture-in-picture/renderer.tsx b/src/plugins/picture-in-picture/renderer.tsx new file mode 100644 index 00000000..3387c3bd --- /dev/null +++ b/src/plugins/picture-in-picture/renderer.tsx @@ -0,0 +1,166 @@ +import { toKeyEvent } from 'keyboardevent-from-electron-accelerator'; +import keyEventAreEqual from 'keyboardevents-areequal'; +import { render } from 'solid-js/web'; + +import { getSongMenu } from '@/providers/dom-elements'; +import { isMusicOrVideoTrack } from '@/plugins/utils/renderer/check'; + +import { t } from '@/i18n'; + +import { PictureInPictureButton } from './templates/picture-in-picture-button'; + +import type { YoutubePlayer } from '@/types/youtube-player'; +import type { PictureInPicturePluginConfig } from './index'; +import type { RendererContext } from '@/types/contexts'; + +export const onPlayerApiReady = async ( + _: YoutubePlayer, + { ipc, getConfig }: RendererContext, +) => { + const config = await getConfig(); + + const togglePictureInPicture = async () => { + if ((await getConfig()).useNativePiP) { + const isInPiP = document.pictureInPictureElement !== null; + const video = document.querySelector('video'); + const togglePiP = () => + isInPiP + ? document.exitPictureInPicture() + : video?.requestPictureInPicture(); + + try { + await togglePiP(); + document.querySelector('#icon')?.click(); // Close the menu + return true; + } catch {} + } + + ipc.send('plugin:toggle-picture-in-picture'); + return false; + }; + + if (config.hotkey) { + const hotkeyEvent = toKeyEvent(config.hotkey); + window.addEventListener('keydown', (event) => { + if ( + keyEventAreEqual(event, hotkeyEvent) && + !document.querySelector( + 'ytmusic-search-box', + )?.opened + ) { + togglePictureInPicture(); + } + }); + } + + const exitFullScreenButton = document.querySelector( + '.exit-fullscreen-button', + ); + const getPlayMinimizeButton = () => + document.querySelector('.player-minimize-button'); + const appLayout = document.querySelector('ytmusic-app-layout'); + const expandMenu = document.querySelector('#expanding-menu'); + const middleControls = + document.querySelector('.middle-controls'); + const playerPage = document.querySelector< + HTMLElement & { playerPageOpen_: boolean } + >('ytmusic-player-page'); + const togglePlayerPageButton = document.querySelector( + '.toggle-player-page-button', + ); + const fullScreenButton = + document.querySelector('.fullscreen-button'); + const player = document.querySelector< + HTMLVideoElement & { onDoubleClick_: (() => void) | undefined } + >('#player'); + const onPlayerDblClick = player?.onDoubleClick_; + const mouseLeaveEventListener = () => middleControls?.click(); + + const titleBar = document.querySelector( + 'nav[data-ytmd-main-panel]', + ); + + const pipClickEventListener = async (e: Event) => { + e.stopPropagation(); + e.preventDefault(); + await togglePictureInPicture(); + }; + + ipc.on('ytmd:pip-toggle', (isPip: boolean) => { + if (exitFullScreenButton && player) { + if (isPip) { + exitFullScreenButton?.addEventListener('click', pipClickEventListener); + getPlayMinimizeButton()?.removeEventListener( + 'click', + pipClickEventListener, + ); + player.onDoubleClick_ = () => {}; + + expandMenu?.addEventListener('mouseleave', mouseLeaveEventListener); + if (!playerPage?.playerPageOpen_) { + togglePlayerPageButton?.click(); + } + + fullScreenButton?.click(); + appLayout?.classList.add('pip'); + if (titleBar) { + titleBar.style.display = 'none'; + } + } else { + exitFullScreenButton.removeEventListener( + 'click', + pipClickEventListener, + ); + getPlayMinimizeButton()?.addEventListener( + 'click', + pipClickEventListener, + ); + player.onDoubleClick_ = onPlayerDblClick; + expandMenu?.removeEventListener('mouseleave', mouseLeaveEventListener); + exitFullScreenButton.click(); + appLayout?.classList.remove('pip'); + if (titleBar) { + titleBar.style.display = 'flex'; + } + } + } + }); + + getPlayMinimizeButton()?.addEventListener('click', pipClickEventListener); + + const pipButtonContainer = document.createElement('div'); + pipButtonContainer.classList.add( + 'style-scope', + 'menu-item', + 'ytmusic-menu-popup-renderer', + ); + pipButtonContainer.setAttribute('aria-disabled', 'false'); + pipButtonContainer.setAttribute('aria-selected', 'false'); + pipButtonContainer.setAttribute('role', 'option'); + pipButtonContainer.setAttribute('tabindex', '-1'); + + render( + () => ( + + ), + pipButtonContainer, + ); + + const observer = new MutationObserver(() => { + const menu = getSongMenu(); + + if (menu?.contains(pipButtonContainer) || !isMusicOrVideoTrack()) { + return; + } + + menu?.prepend(pipButtonContainer); + }); + + observer.observe(document.querySelector('ytmusic-popup-container')!, { + childList: true, + subtree: true, + }); +}; diff --git a/src/plugins/picture-in-picture/templates/picture-in-picture-button.tsx b/src/plugins/picture-in-picture/templates/picture-in-picture-button.tsx new file mode 100644 index 00000000..86d3beba --- /dev/null +++ b/src/plugins/picture-in-picture/templates/picture-in-picture-button.tsx @@ -0,0 +1,47 @@ +export interface PictureInPictureButtonProps { + onClick?: (e: MouseEvent) => void; + text: string; +} + +export const PictureInPictureButton = (props: PictureInPictureButtonProps) => ( + +
+ + + + + +
+
+ {props.text} +
+ +); diff --git a/src/plugins/picture-in-picture/templates/picture-in-picture.html b/src/plugins/picture-in-picture/templates/picture-in-picture.html deleted file mode 100644 index fc533924..00000000 --- a/src/plugins/picture-in-picture/templates/picture-in-picture.html +++ /dev/null @@ -1,52 +0,0 @@ -
- -
diff --git a/src/plugins/playback-speed/components/slider.tsx b/src/plugins/playback-speed/components/slider.tsx new file mode 100644 index 00000000..0a828ea0 --- /dev/null +++ b/src/plugins/playback-speed/components/slider.tsx @@ -0,0 +1,92 @@ +export interface PlaybackSpeedSliderProps { + speed: number; + title: string; + onImmediateValueChanged?: (value: CustomEvent<{ value: number }>) => void; + onWheel?: (event: WheelEvent) => void; +} + +export const PlaybackSpeedSlider = (props: PlaybackSpeedSliderProps) => ( +
+