Closes #967

ParticleCore · Mar 25, 2024 · 089aaa2 · 089aaa2
1 parent 0c5c042
commit 089aaa2
Show file tree

Hide file tree

Showing 12 changed files with 586 additions and 0 deletions.
diff --git a/src/chrome/css/content-script.css b/src/chrome/css/content-script.css
@@ -36,6 +36,24 @@ html .iridium-options:hover yt-icon {
 }
 /* end | iridium icon */
 
+/* ini | reverse playlist */
+ytd-toggle-button-renderer:has([aria-label="reversePlaylistButton"]) {
+    margin-left: 0 !important;
+}
+html[dark] [aria-label="reversePlaylistButton"] yt-icon {
+    background: #f1f1f1;
+}
+[aria-label="reversePlaylistButton"] yt-icon {
+    background: #0f0f0f;
+}
+[aria-label="reversePlaylistButton"] yt-icon {
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M352.307-467.692v-295.462L228.538-639.385 200-667.692 372.308-840l172.307 172.308-28.538 28.307-123.769-123.769v295.462h-40.001ZM586.923-120 414.615-292.308l28.539-28.307 123.769 123.769v-295.462h40v295.462l123.769-123.769 28.539 28.307L586.923-120Z"/></svg>');
+}
+[aria-label="reversePlaylistButton"][aria-pressed="true"] yt-icon {
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M320-440v-287L217-624l-57-56 200-200 200 200-57 56-103-103v287h-80ZM600-80 400-280l57-56 103 103v-287h80v287l103-103 57 56L600-80Z"/></svg>');
+}
+/* end | reverse playlist */
+
 /* ini | full titles */
 html.iridium-full-titles #video-title.ytd-video-renderer,
 html.iridium-full-titles #video-title.ytd-compact-video-renderer,

diff --git a/src/chrome/html/options.html b/src/chrome/html/options.html
@@ -378,6 +378,21 @@
                     </div>
                 </div>
             </div>
+            <div class="settingGroup">
+                <div class="settingLabel">Playlist</div>
+                <div class="settingOptions">
+                    <div class="setting" data-id="reversePlaylist">
+                        <label class="switch">
+                            <input data-setting="reversePlaylist" type="checkbox">
+                            <span class="slider"></span>
+                        </label>
+                        <div class="settingDescription">
+                            <div class="settingDescription highlight">Reverse playlist control</div>
+                            <div class="settingDescription">Show a button on playlists to reverse the playlist order</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div class="settingGroup">
                 <div class="settingLabel">Video quality</div>
                 <div class="settingOptions">

diff --git a/src/chrome/js/background-inject.js b/src/chrome/js/background-inject.js
@@ -719,6 +719,233 @@ function mainScript(extensionId, SettingData, defaultSettings) {
 
     })();
 
+    const FeaturePlaylistReverse = (() => {
+
+        const buttonId = "reversePlaylistButton";
+
+        const reversePlaylist = data => {
+
+            if (!data) {
+                return;
+            }
+
+            const watchNextResults = data?.["contents"]?.["twoColumnWatchNextResults"];
+            const playlist = watchNextResults?.["playlist"]?.["playlist"];
+
+            if (!!playlist?.["isReversed"] === iridiumSettings.reversePlaylistToggled) {
+                return;
+            }
+
+            if (playlist) {
+                playlist["isReversed"] = iridiumSettings.reversePlaylistToggled;
+            }
+
+            const topLevelButtons = playlist?.["playlistButtons"]?.["menuRenderer"]?.["topLevelButtons"];
+
+            if (topLevelButtons?.constructor === Array) {
+
+                const length = topLevelButtons.length;
+
+                for (let i = 0; i < length; i++) {
+
+                    const button = topLevelButtons[i]?.["toggleButtonRenderer"];
+
+                    if (button?.id === "reversePlaylist") {
+                        button.isToggled = iridiumSettings.reversePlaylistToggled;
+                        break;
+                    }
+
+                }
+
+            }
+
+            const autoplay = watchNextResults?.["autoplay"]?.["autoplay"];
+            const autoplaySets = autoplay?.["sets"];
+
+            if (autoplaySets?.constructor === Array) {
+
+                for (let i = 0; i < autoplaySets.length; i++) {
+
+                    const item = autoplaySets[i];
+
+                    if (!item) {
+                        continue;
+                    }
+
+                    if (item["previousButtonVideo"] && item["nextButtonVideo"]) {
+                        item["autoplayVideo"] = item["previousButtonVideo"];
+                        item["previousButtonVideo"] = item["nextButtonVideo"];
+                        item["nextButtonVideo"] = item["autoplayVideo"];
+                    }
+
+                }
+
+            }
+
+            const contents = playlist?.["contents"];
+
+            if (contents?.constructor === Array) {
+
+                contents.reverse();
+
+                const count = contents.length;
+
+                for (let i = 0; i < count; i++) {
+
+                    const item = contents[i];
+
+                    if (item?.["playlistPanelVideoRenderer"]?.["indexText"]?.["simpleText"]) {
+                        item["playlistPanelVideoRenderer"]["indexText"]["simpleText"] = `${i + 1}`;
+                    }
+
+                }
+
+                if (playlist?.["currentIndex"]?.constructor === Number) {
+                    playlist["currentIndex"] = contents.length - playlist["currentIndex"] - 1;
+                }
+
+                if (playlist?.["localCurrentIndex"]?.constructor === Number) {
+                    playlist["localCurrentIndex"] = contents.length - playlist["localCurrentIndex"] - 1;
+                }
+
+            }
+
+        }
+
+        const listener = data => {
+
+            const topLevelButtons = data
+                ?.["contents"]
+                ?.["twoColumnWatchNextResults"]
+                ?.["playlist"]
+                ?.["playlist"]
+                ?.["playlistButtons"]
+                ?.["menuRenderer"]
+                ?.["topLevelButtons"];
+
+            if (topLevelButtons?.constructor !== Array) {
+                return;
+            }
+
+            const length = topLevelButtons.length;
+
+            for (let i = 0; i < length; i++) {
+
+                if (topLevelButtons[i]?.["toggleButtonRenderer"]?.id === "reversePlaylist") {
+
+                    if (iridiumSettings.reversePlaylist !== true) {
+                        topLevelButtons.splice(i, 1);
+                    }
+
+                    break;
+
+                }
+
+                if (i === length - 1 && iridiumSettings.reversePlaylist === true) {
+                    topLevelButtons.push({
+                        toggleButtonRenderer: {
+                            id: "reversePlaylist",
+                            style: {styleType: "STYLE_GREY_TEXT"},
+                            size: {sizeType: "SIZE_DEFAULT"},
+                            isToggled: iridiumSettings.reversePlaylistToggled,
+                            isDisabled: false,
+                            defaultIcon: {iconType: "IRIDIUM_PLAYLIST_SHUFFLE"},
+                            accessibility: {label: "reversePlaylistButton"},
+                            defaultTooltip: "Reverse playlist",
+                            toggledTooltip: "Reverse playlist",
+                            toggledStyle: {styleType: "STYLE_DEFAULT_ACTIVE"}
+                        }
+                    });
+                }
+
+            }
+
+            reversePlaylist(data);
+
+        };
+
+        const updateUI = data => {
+
+            if (!data) {
+                return;
+            }
+
+            const ytPlaylistManager = document.querySelector("yt-playlist-manager");
+
+            if (!ytPlaylistManager) {
+                return;
+            }
+
+            const watchNextResults = data?.["contents"]?.["twoColumnWatchNextResults"];
+            const autoplay = watchNextResults?.["autoplay"]?.["autoplay"];
+            const playlist = structuredClone(watchNextResults?.["playlist"]?.["playlist"]);
+
+            ytPlaylistManager?.["setAutoplayRenderer"]?.(autoplay);
+            ytPlaylistManager?.["setPlaylistData"]?.(playlist);
+            ytPlaylistManager?.["setPlayerPlaybackControlData"]?.({playlistPanelRenderer: playlist});
+
+        };
+
+        const onDocumentClick = event => {
+
+            const ytdWatchData = document.querySelector("ytd-watch-flexy")?.["data"];
+            const reverseButton = document.querySelector(`ytd-toggle-button-renderer:has([aria-label='${buttonId}'])`);
+            const isReverseButton = reverseButton?.contains(event.target);
+
+            if (isReverseButton && ytdWatchData) {
+
+                iridiumSettings.reversePlaylistToggled = !iridiumSettings.reversePlaylistToggled;
+                Broadcaster.saveSetting(SettingData.reversePlaylistToggled.id);
+
+                reversePlaylist(ytdWatchData);
+                updateUI(ytdWatchData);
+
+                document.querySelector("ytd-playlist-panel-video-renderer[selected]")?.scrollIntoView({block: "nearest"});
+
+            }
+
+        };
+
+        const update = () => {
+
+            const ytdWatchData = document.querySelector("ytd-watch-flexy")?.["data"];
+
+            if (iridiumSettings.reversePlaylist) {
+
+                document.documentElement.addEventListener("click", onDocumentClick, false);
+
+                if (ytdWatchData) {
+                    listener(ytdWatchData);
+                    updateUI(ytdWatchData);
+                }
+
+            } else {
+
+                iridiumSettings.reversePlaylistToggled = false;
+                Broadcaster.saveSetting(SettingData.reversePlaylistToggled.id);
+
+                if (ytdWatchData) {
+                    listener(ytdWatchData);
+                    updateUI(ytdWatchData);
+                    document.querySelector("ytd-playlist-panel-video-renderer[selected]")?.scrollIntoView({block: "nearest"});
+                }
+
+                document.documentElement.removeEventListener("click", onDocumentClick, false);
+
+            }
+
+        };
+
+        FeatureUpdater.register(SettingData.reversePlaylist.id, update);
+
+        OnYtPageDataFetched.addListener(listener);
+        OverrideFetch.onFetchListener(listener);
+        OverrideHandleResponse.onHandleResponseListener(listener);
+
+        return {}
+
+    })();
+
     const FeatureSuperTheater = (() => {
 
         const onResize = () => {

diff --git a/src/chrome/js/chrome-wrapper.js b/src/chrome/js/chrome-wrapper.js
@@ -86,6 +86,14 @@
             id: "videoCount",
             default: true,
         },
+        reversePlaylist: {
+            id: "reversePlaylist",
+            default: true,
+        },
+        reversePlaylistToggled: {
+            id: "reversePlaylistToggled",
+            default: false,
+        },
         superTheater: {
             id: "superTheater",
             default: true,

diff --git a/src/chrome/js/content-script.js b/src/chrome/js/content-script.js
@@ -83,6 +83,14 @@ const SettingData = {
         id: "videoCount",
         default: true,
     },
+    reversePlaylist: {
+        id: "reversePlaylist",
+        default: true,
+    },
+    reversePlaylistToggled: {
+        id: "reversePlaylistToggled",
+        default: false,
+    },
     superTheater: {
         id: "superTheater",
         default: true,

diff --git a/src/chrome/js/options.js b/src/chrome/js/options.js
@@ -281,6 +281,20 @@ const Manager = {
 
         Util.updateSingleSetting(settingId, newState);
 
+    },
+    updateReversePlaylist: (newState, userInteraction) => {
+
+        const settingId = SettingData.reversePlaylist.id;
+        const ui = document.querySelector(`[data-setting=${settingId}]`);
+
+        if (ui != null && ui.checked !== newState) {
+            ui.checked = newState;
+        }
+
+        if (!userInteraction) return;
+
+        Util.updateSingleSetting(settingId, newState);
+
     },
     updateSuperTheater: (newState, userInteraction) => {
 
@@ -756,6 +770,9 @@ const Util = {
             case SettingData.videoCount.id:
                 Manager.updateVideoCount(value, userInteraction);
                 break;
+            case SettingData.reversePlaylist.id:
+                Manager.updateReversePlaylist(value, userInteraction);
+                break;
             case SettingData.superTheater.id:
                 Manager.updateSuperTheater(value, userInteraction);
                 break;

diff --git a/src/chrome/js/setting-data.js b/src/chrome/js/setting-data.js
@@ -79,6 +79,14 @@ const SettingData = {
         id: "videoCount",
         default: true,
     },
+    reversePlaylist: {
+        id: "reversePlaylist",
+        default: true,
+    },
+    reversePlaylistToggled: {
+        id: "reversePlaylistToggled",
+        default: false,
+    },
     superTheater: {
         id: "superTheater",
         default: true,

diff --git a/src/firefox/css/content-script.css b/src/firefox/css/content-script.css
@@ -36,6 +36,24 @@ html .iridium-options:hover yt-icon {
 }
 /* end | iridium icon */
 
+/* ini | reverse playlist */
+ytd-toggle-button-renderer:has([aria-label="reversePlaylistButton"]) {
+    margin-left: 0 !important;
+}
+html[dark] [aria-label="reversePlaylistButton"] yt-icon {
+    background: #f1f1f1;
+}
+[aria-label="reversePlaylistButton"] yt-icon {
+    background: #0f0f0f;
+}
+[aria-label="reversePlaylistButton"] yt-icon {
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M352.307-467.692v-295.462L228.538-639.385 200-667.692 372.308-840l172.307 172.308-28.538 28.307-123.769-123.769v295.462h-40.001ZM586.923-120 414.615-292.308l28.539-28.307 123.769 123.769v-295.462h40v295.462l123.769-123.769 28.539 28.307L586.923-120Z"/></svg>');
+}
+[aria-label="reversePlaylistButton"][aria-pressed="true"] yt-icon {
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M320-440v-287L217-624l-57-56 200-200 200 200-57 56-103-103v287h-80ZM600-80 400-280l57-56 103 103v-287h80v287l103-103 57 56L600-80Z"/></svg>');
+}
+/* end | reverse playlist */
+
 /* ini | full titles */
 html.iridium-full-titles #video-title.ytd-video-renderer,
 html.iridium-full-titles #video-title.ytd-compact-video-renderer,