Skip to content

Commit fc4cc0c

Browse files
committed
feat(full-screen): make sidebar queue as a configurable option
1 parent 9569dff commit fc4cc0c

File tree

7 files changed

+51
-21
lines changed

7 files changed

+51
-21
lines changed

Extensions/full-screen/.hintrc

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,15 @@
33
"development"
44
],
55
"hints": {
6-
"no-inline-styles": "off"
6+
"no-inline-styles": "off",
7+
"compat-api/css": [
8+
"default",
9+
{
10+
"ignore": [
11+
"backdrop-filter"
12+
]
13+
}
14+
]
715
},
816
"browserslist": [
917
"defaults",

Extensions/full-screen/src/app.tsx

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,9 @@ async function main() {
124124

125125
function render() {
126126
container.classList.toggle("lyrics-active", Boolean(CFM.get("lyricsDisplay")));
127-
Utils.toggleQueuePanel(queue, false);
127+
if (CFM.get("sidebarQueue")) {
128+
Utils.toggleQueuePanel(queue, false);
129+
}
128130
container.classList.toggle(
129131
"vertical-mode",
130132
(CFM.get("verticalMonitorSupport") as Settings["verticalMonitorSupport"]) &&
@@ -232,7 +234,6 @@ async function main() {
232234
heart = container.querySelector("#fsd-heart")!;
233235
shuffle = container.querySelector("#fsd-shuffle")!;
234236
repeat = container.querySelector("#fsd-repeat")!;
235-
queue = container.querySelector("#fsd-queue")!;
236237

237238
heart.onclick = () => {
238239
Utils.fadeAnimation(heart);
@@ -247,16 +248,18 @@ async function main() {
247248
Spicetify.Player.toggleRepeat();
248249
};
249250

250-
queue.onclick = () => toggleQueue();
251-
252251
if (CFM.get("invertColors") === "auto") {
253252
invertButton = container.querySelector("#fsd-invert")!;
254253
invertButton.onclick = toggleInvert;
255254
}
256-
if (CFM.get("lyricsDisplay")) {
255+
if (CFM.get("lyricsDisplay") && !CFM.get("sidebarQueue")) {
257256
lyrics = container.querySelector("#fsd-lyrics")!;
258-
// lyrics.onclick = () => toggleLyrics();
259-
lyrics.onclick = () => recordSequence();
257+
lyrics.onclick = () => toggleLyrics();
258+
// lyrics.onclick = () => recordSequence();
259+
}
260+
if (CFM.get("sidebarQueue")) {
261+
queue = container.querySelector("#fsd-queue")!;
262+
queue.onclick = () => toggleQueue();
260263
}
261264
}
262265
}
@@ -868,7 +871,6 @@ async function main() {
868871
CFM.get("enableFullscreen") &&
869872
Utils.isModeActivated()
870873
) {
871-
console.log("Deactivating Full Screen");
872874
deactivate();
873875
}
874876
}
@@ -877,7 +879,9 @@ async function main() {
877879
const heartObserver = new MutationObserver(updateHeart);
878880

879881
async function activate() {
880-
Utils.toggleQueuePanel(queue, true);
882+
if (CFM.get("sidebarQueue")) {
883+
Utils.toggleQueuePanel(queue, true);
884+
}
881885
document.body.classList.add(...CLASSES_TO_ADD);
882886
if (CFM.get("enableFullscreen")) await Utils.fullScreenOn()?.catch((err) => {});
883887
else await Utils.fullScreenOff()?.catch((err) => {});
@@ -957,11 +961,15 @@ async function main() {
957961
if (popup) popup.remove();
958962
else openConfig();
959963
});
960-
Spicetify.Mousetrap.bind("q", toggleQueue);
964+
if (CFM.get("sidebarQueue")) {
965+
Spicetify.Mousetrap.bind("q", toggleQueue);
966+
}
961967
}
962968

963969
async function deactivate() {
964-
Utils.toggleQueuePanel(queue, false);
970+
if (CFM.get("sidebarQueue")) {
971+
Utils.toggleQueuePanel(queue, false);
972+
}
965973
modifyIsAnimationRunning(false);
966974
Spicetify.Player.removeEventListener("songchange", updateInfo);
967975
handleMouseMoveDeactivation();
@@ -1259,6 +1267,7 @@ async function main() {
12591267
},
12601268
translations[LOCALE].settings.keyActivation.description,
12611269
),
1270+
12621271
headerText(translations[LOCALE].settings.lyricsHeader),
12631272
createToggle(
12641273
translations[LOCALE].settings.lyrics,
@@ -1349,6 +1358,12 @@ async function main() {
13491358
? createToggle(translations[LOCALE].settings.fullscreen, "enableFullscreen")
13501359
: "",
13511360
headerText(translations[LOCALE].settings.extraHeader),
1361+
createToggle(
1362+
translations[LOCALE].settings.sidebarQueue,
1363+
"sidebarQueue",
1364+
(value: boolean) => saveOption("sidebarQueue", value),
1365+
translations[LOCALE].settings.sidebarQueueDescription.join("<br>"),
1366+
),
13521367
createOptions(
13531368
translations[LOCALE].settings.extraControls,
13541369
{

Extensions/full-screen/src/constants/defaults.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export const DEFAULTS: Config = {
3434
backgroundBrightness: 0.4,
3535
showRemainingTime: false,
3636
verticalMonitorSupport: false,
37+
sidebarQueue: false,
3738
},
3839
def: {
3940
lyricsDisplay: true,
@@ -68,6 +69,7 @@ export const DEFAULTS: Config = {
6869
backgroundBrightness: 0.7,
6970
showRemainingTime: false,
7071
verticalMonitorSupport: true,
72+
sidebarQueue: false,
7173
},
7274
tvMode: false,
7375
locale: "en-US",

Extensions/full-screen/src/resources/locales/en-US.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,11 @@
102102
"animatedArt": "Animated Album Art (Experimental)",
103103
"artist": "Artist artwork"
104104
},
105+
"sidebarQueue": "Enable Queue in Sidebar (replaces the lyrics button)",
106+
"sidebarQueueDescription": [
107+
"Toggle the queue in the sidebar with <kbd>Q</kbd> or the button in the extra bar.",
108+
"Make sure to enable the setting in Experimental features. Check [this.](https://github.com/daksh2k/Spicetify-stuff/issues/167#issuecomment-2199480598) "
109+
],
105110
"extraControls": "Extra Controls",
106111
"upnextDisplay": "Upnext Display",
107112
"contextDisplay": {

Extensions/full-screen/src/services/html-creator.ts

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -109,19 +109,21 @@ ${CFM.get("lyricsDisplay") ? `<div id="fad-lyrics-plus-container"></div>` : ""}
109109
}</svg>
110110
</button>
111111
${
112-
CFM.get("lyricsDisplay")
112+
CFM.get("lyricsDisplay") && !CFM.get("sidebarQueue")
113113
? `<button id="fsd-lyrics" class="fs-button ${
114114
areLyricsForceHidden ? "" : "button-active"
115115
}">
116116
${areLyricsForceHidden ? ICONS.LYRICS_ACTIVE : ICONS.LYRICS_INACTIVE}
117117
</button>`
118118
: ""
119119
}
120-
<button class="fs-button" id="fsd-queue">
121-
<svg height="20" width="20" viewBox="0 0 16 16" fill="currentColor">${
122-
Spicetify.SVGIcons["queue"]
123-
}</svg>
124-
</button>
120+
${
121+
CFM.get("sidebarQueue")
122+
? `<button class="fs-button" id="fsd-queue">
123+
<svg height="20" width="20" viewBox="0 0 16 16" fill="currentColor">${Spicetify.SVGIcons["queue"]}</svg>
124+
</button>`
125+
: ""
126+
}
125127
</div>`
126128
: ""
127129
}

Extensions/full-screen/src/styles/base.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -368,9 +368,6 @@
368368
.fsd-background-fade {
369369
transition: background-image var(--fs-transition) linear;
370370
}
371-
#fsd-lyrics {
372-
display: none;
373-
}
374371
}
375372

376373
body.fsd-activated #full-screen-display {

Extensions/full-screen/src/types/fullscreen.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export type Settings = {
4848
backgroundBrightness: number;
4949
showRemainingTime: boolean;
5050
verticalMonitorSupport: boolean;
51+
sidebarQueue: boolean;
5152
};
5253

5354
export type Cache = {

0 commit comments

Comments
 (0)