Initial SpoTUI package

README.md

@@ -0,0 +1,113 @@
+# SpoTUI
+
+SpoTUI is a terminal-style Spotify skin built for Spicetify.
+
+It combines:
+- a custom UI overlay in `theme.js`
+- theme styling in `user.css`
+- Spotify color values in `color.ini`
+
+## Screenshot
+
+![SpoTUI preview](preview.png)
+
+## Features
+
+- Terminal-inspired interface
+- Built-in playback controls
+- Playlist browsing and management
+- Spotify-native fallback mode
+- Copy-log and hide/show controls
+
+## Installation
+
+<details>
+<summary>Linux</summary>
+
+1. Open a terminal.
+2. Go to your Spicetify themes directory:
+   ```bash
+   cd ~/.config/spicetify/Themes
+   ```
+3. Clone or pull this repo into that folder:
+   ```bash
+   git clone <your-repo-url> SpoTUI
+   ```
+   If you already have it locally, update it instead:
+   ```bash
+   cd SpoTUI
+   git pull
+   ```
+4. Set SpoTUI as your current theme:
+   ```bash
+   spicetify config current_theme SpoTUI
+   ```
+5. Apply Spicetify:
+   ```bash
+   spicetify apply
+   ```
+
+</details>
+
+<details>
+<summary>Windows</summary>
+
+1. Open PowerShell or Command Prompt.
+2. Go to your Spicetify themes directory:
+   ```powershell
+   cd $env:APPDATA\spicetify\Themes
+   ```
+3. Clone or pull this repo into that folder:
+   ```powershell
+   git clone <your-repo-url> SpoTUI
+   ```
+   If you already have it locally, update it instead:
+   ```powershell
+   cd SpoTUI
+   git pull
+   ```
+4. Set SpoTUI as your current theme:
+   ```powershell
+   spicetify config current_theme SpoTUI
+   ```
+5. Apply Spicetify:
+   ```powershell
+   spicetify apply
+   ```
+
+</details>
+
+
+## Usage
+
+After applying the theme, open Spotify and use the SpoTUI interface directly from the client.
+
+The built-in command list includes:
+
+- `tui -m [command|cli]`
+- `playlist`
+- `list`
+- `queue`
+- `play`
+- `pause`
+- `p`
+- `skip`
+- `back`
+- `v <percent>`
+- `volume <percent>`
+- `shuffle`
+- `loop [on|off]`
+- `superloop [on|off]`
+- `search`
+- `clear`
+
+## Theme Files
+
+- `theme.js` - JavaScript UI logic
+- `user.css` - Spotify UI styling overrides
+- `color.ini` - theme colors
+- `preview.png` - Marketplace preview image
+
+## Author
+
+SkenS - https://github.com/SkenSMasteR

color.ini

@@ -0,0 +1,14 @@
+[SpoTUI - SkenS]
+text               = e6e6e6
+subtext            = b3b3b3
+sidebar-text       = e6e6e6
+sidebar-background = 0a0a0a
+main               = 0a0a0a
+button             = 1a1a1a
+button-active      = ff8c42
+button-disabled    = 2a2a2a
+tab-active         = ff8c42
+notification       = 1a1a1a
+notification-error = ff5555
+playback-bar       = 2a2a2a
+misc               = ff8c42

manifest.json

@@ -0,0 +1,11 @@
+{
+    "name": "SpoTUI",
+    "description": "Terminal interface for Spotify...",
+    "preview": "preview.png",
+    "readme": "README.md",
+    "branch": "release",
+    "authors": [
+        { "name": "SkenS", "url": "https://github.com/SkenSMasteR" }
+    ],
+    "tags": ["tui", "beta", "dev", "commands", "terminal", "cli"]
+}

user.css

@@ -0,0 +1,486 @@
+.Root__main-view,
+.Root__nav-bar,
+.main-topBar-container,
+.main-yourLibraryX-libraryRootlist,
+.main-yourLibraryX-entryPoints,
+.main-buddy-list,
+.main-trackList-trackList,
+.main-card-card,
+.main-gridContainer-gridContainer,
+.main-entityHeader-container {
+    display: none !important;
+}
+
+body.spotui-spotify-enabled .Root__main-view,
+body.spotui-spotify-enabled .Root__nav-bar,
+body.spotui-spotify-enabled .main-topBar-container,
+body.spotui-spotify-enabled .main-appShell-topBar,
+body.spotui-spotify-enabled .main-yourLibraryX-libraryRootlist,
+body.spotui-spotify-enabled .main-yourLibraryX-entryPoints,
+body.spotui-spotify-enabled .Root__right-sidebar,
+body.spotui-spotify-enabled .main-buddy-list,
+body.spotui-spotify-enabled .main-nowPlayingView-section,
+body.spotui-spotify-enabled .main-trackList-trackList,
+body.spotui-spotify-enabled .main-card-card,
+body.spotui-spotify-enabled .main-gridContainer-gridContainer,
+body.spotui-spotify-enabled .main-entityHeader-container {
+    display: revert !important;
+}
+
+body.spotui-spotify-enabled .Root__main-view,
+body.spotui-spotify-enabled .main-view-container {
+    display: block !important;
+}
+
+body.spotui-spotify-enabled .Root__nav-bar,
+body.spotui-spotify-enabled .main-topBar-container,
+body.spotui-spotify-enabled .main-appShell-topBar,
+body.spotui-spotify-enabled .main-yourLibraryX-libraryRootlist,
+body.spotui-spotify-enabled .main-yourLibraryX-entryPoints,
+body.spotui-spotify-enabled .Root__right-sidebar,
+body.spotui-spotify-enabled .main-buddy-list,
+body.spotui-spotify-enabled .main-nowPlayingView-section,
+body.spotui-spotify-enabled .main-trackList-trackList {
+    display: flex !important;
+}
+
+body.spotui-spotify-enabled .main-appShell-topBar {
+    background: #000 !important;
+    border-bottom: 1px solid #ff8c42 !important;
+    box-shadow: inset 0 -1px 0 rgba(255, 140, 66, 0.18) !important;
+    color: #ddd !important;
+    font-family: "JetBrains Mono", "Fira Code", monospace !important;
+}
+
+body.spotui-spotify-enabled .main-appShell-topBar .main-topBar-background,
+body.spotui-spotify-enabled .main-appShell-topBar .main-topBar-overlay,
+body.spotui-spotify-enabled .main-appShell-topBar .main-topBar-withBackgroundBlur {
+    background: #000 !important;
+    background-image: none !important;
+    opacity: 1 !important;
+    backdrop-filter: none !important;
+}
+
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchSection,
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchContainer,
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputContainer,
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputSection,
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputWrapper,
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputTextWrapper,
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-historyButtonsContainer,
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-historyButtonsWrapper,
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-contentRight {
+    display: flex !important;
+    align-items: center !important;
+    gap: 8px !important;
+    min-height: 56px !important;
+}
+
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-navLink,
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-historyButtons button,
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchContainer button,
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchContainer [role="button"] {
+    color: #ff8c42 !important;
+    border-radius: 0 !important;
+}
+
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-navLink:hover,
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-historyButtons button:hover,
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchContainer button:hover,
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchContainer [role="button"]:hover {
+    color: #ffb26f !important;
+}
+
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchContainer,
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputContainer {
+    background: #000 !important;
+    border: 1px solid #ff8c42 !important;
+    border-radius: 0 !important;
+    box-shadow: inset 0 1px 0 rgba(255, 140, 66, 0.15) !important;
+}
+
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputText,
+body.spotui-spotify-enabled .main-appShell-topBar .x-searchInput-searchInputInput,
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputTextWrapper input {
+    color: #ff8c42 !important;
+    background: transparent !important;
+    border: none !important;
+    outline: none !important;
+    font-family: "JetBrains Mono", "Fira Code", monospace !important;
+    caret-color: #ff8c42 !important;
+}
+
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputText::placeholder,
+body.spotui-spotify-enabled .main-appShell-topBar .x-searchInput-searchInputInput::placeholder,
+body.spotui-spotify-enabled .main-appShell-topBar .main-globalNav-searchInputTextWrapper input::placeholder {
+    color: #777 !important;
+}
+
+.main-connectBar-connectBar,
+.main-devicePicker-button,
+.main-devicePicker-controlButton,
+.main-devicePicker-moreButton,
+.main-devicePicker-tooltip {
+    display: none !important;
+}
+
+.Root__now-playing-bar {
+    display: flex !important;
+    position: fixed !important;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100vw !important;
+    height: 90px;
+    border-radius: 0 !important;
+}
+
+.Root__now-playing-bar .main-nowPlayingBar-container,
+.Root__now-playing-bar .main-nowPlayingBar-nowPlayingBar {
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
+    flex: 1 1 auto !important;
+}
+
+.Root__now-playing-bar .main-nowPlayingBar-nowPlayingBar {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    background: #000 !important;
+    border-top: 1px solid #ff8c42;
+    box-shadow: inset 0 1px 0 rgba(255, 140, 66, 0.18);
+    color: #ddd !important;
+    font-family: "JetBrains Mono", "Fira Code", monospace !important;
+}
+
+.Root__now-playing-bar .main-nowPlayingBar-left,
+.Root__now-playing-bar .main-nowPlayingBar-center,
+.Root__now-playing-bar .main-nowPlayingBar-right {
+    min-width: 0 !important;
+}
+
+.Root__now-playing-bar .main-nowPlayingBar-left {
+    flex: 1.2 1 0 !important;
+}
+
+.Root__now-playing-bar .main-nowPlayingBar-center {
+    flex: 1.8 1 0 !important;
+}
+
+.Root__now-playing-bar .main-nowPlayingBar-right {
+    flex: 1.1 1 0 !important;
+    justify-content: flex-end !important;
+}
+
+.Root__now-playing-bar .main-trackInfo-container,
+.Root__now-playing-bar .main-trackInfo-contentContainer,
+.Root__now-playing-bar .main-trackInfo-contentWrapper {
+    min-width: 0 !important;
+}
+
+.Root__now-playing-bar .main-trackInfo-name {
+    color: #ff8c42 !important;
+    font-family: inherit !important;
+    letter-spacing: 0.02em;
+}
+
+.Root__now-playing-bar .main-trackInfo-artists a,
+.Root__now-playing-bar .main-trackInfo-artists {
+    color: #b8b8b8 !important;
+    font-family: inherit !important;
+}
+
+.Root__now-playing-bar .main-nowPlayingBar-container button,
+.Root__now-playing-bar .main-nowPlayingBar-container [role="button"],
+.Root__now-playing-bar .volume-bar__icon-button {
+    border-radius: 0 !important;
+    color: #ff8c42 !important;
+}
+
+.Root__now-playing-bar .main-nowPlayingBar-container button:hover,
+.Root__now-playing-bar .main-nowPlayingBar-container [role="button"]:hover,
+.Root__now-playing-bar .volume-bar__icon-button:hover {
+    color: #ffb26f !important;
+}
+
+.Root__now-playing-bar .x-progressBar-progressBarBg,
+.Root__now-playing-bar .x-progressBar-progressBar {
+    background: #202020 !important;
+}
+
+.Root__now-playing-bar .x-progressBar-progressFillColor,
+.Root__now-playing-bar .x-progressBar-fillColor,
+.Root__now-playing-bar .x-progressBar-handle {
+    background: #ff8c42 !important;
+}
+
+.Root__now-playing-bar .volume-bar {
+    color: #ff8c42 !important;
+}
+
+.Root__now-playing-bar .volume-bar__slider-container {
+    filter: saturate(0.9);
+}
+
+body:not(.spotui-lyrics-open) .Root__right-sidebar,
+body:not(.spotui-lyrics-open) .main-nowPlayingView-section,
+body:not(.spotui-lyrics-open) .main-lyricsCinema-container,
+body:not(.spotui-lyrics-open) .lyrics-lyrics-container,
+body:not(.spotui-lyrics-open) .lyrics-lyricsContainer-LyricsContainer {
+    display: none !important;
+}
+
+body.spotui-lyrics-open .Root__right-sidebar,
+body.spotui-lyrics-open .main-nowPlayingView-section,
+body.spotui-lyrics-open .main-lyricsCinema-container {
+    display: flex !important;
+}
+
+body.spotui-lyrics-open .Root__right-sidebar {
+    width: min(420px, 100vw) !important;
+    min-width: min(420px, 100vw) !important;
+    max-width: min(420px, 100vw) !important;
+}
+
+body.spotui-lyrics-open .Root__right-sidebar,
+body.spotui-lyrics-open .main-nowPlayingView-section,
+body.spotui-lyrics-open .main-lyricsCinema-container,
+body.spotui-lyrics-open .lyrics-lyrics-container,
+body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsContainer {
+    background: #000 !important;
+    color: #ddd !important;
+    font-family: "JetBrains Mono", "Fira Code", monospace !important;
+    border-top: 1px solid #ff8c42 !important;
+    box-shadow: inset 0 1px 0 rgba(255, 140, 66, 0.18) !important;
+}
+
+body.spotui-lyrics-open .main-nowPlayingView-lyricsContent,
+body.spotui-lyrics-open .main-nowPlayingView-lyricsControls,
+body.spotui-lyrics-open .main-lyricsCinema-content,
+body.spotui-lyrics-open .lyrics-lyrics-container,
+body.spotui-lyrics-open .lyrics-lyrics-contentContainer,
+body.spotui-lyrics-open .lyrics-lyrics-contentWrapper,
+body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsContainer,
+body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsBackground {
+    background: #000 !important;
+    color: #ddd !important;
+    padding: 20px 24px 28px !important;
+    box-sizing: border-box !important;
+}
+
+body.spotui-lyrics-open .main-nowPlayingView-lyricsContent,
+body.spotui-lyrics-open .main-lyricsCinema-container,
+body.spotui-lyrics-open .lyrics-lyrics-container,
+body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsContainer {
+    overflow: auto !important;
+    scrollbar-width: none !important;
+    -ms-overflow-style: none !important;
+}
+
+body.spotui-lyrics-open .main-nowPlayingView-lyricsContent::-webkit-scrollbar,
+body.spotui-lyrics-open .main-lyricsCinema-container::-webkit-scrollbar,
+body.spotui-lyrics-open .lyrics-lyrics-container::-webkit-scrollbar,
+body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsContainer::-webkit-scrollbar {
+    width: 0 !important;
+    height: 0 !important;
+}
+
+body.spotui-lyrics-open .main-nowPlayingBar-lyricsButton {
+    color: #ff8c42 !important;
+    border-radius: 0 !important;
+}
+
+body.spotui-lyrics-open .main-nowPlayingBar-lyricsButton:hover {
+    color: #ffb26f !important;
+}
+
+body.spotui-lyrics-open .main-nowPlayingView-lyricsTitle,
+body.spotui-lyrics-open .lyrics-lyricsContent-provider,
+body.spotui-lyrics-open .lyrics-lyricsContainer-Provider {
+    color: #ff8c42 !important;
+    font-family: inherit !important;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+body.spotui-lyrics-open .main-nowPlayingView-lyricsContent,
+body.spotui-lyrics-open .lyrics-lyricsContent-text,
+body.spotui-lyrics-open .lyrics-lyricsContent-lyric,
+body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsLine,
+body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsLine a {
+    color: #b8b8b8 !important;
+    font-family: inherit !important;
+    line-height: 1.55 !important;
+}
+
+body.spotui-lyrics-open .lyrics-lyricsContent-active,
+body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsLine-active,
+body.spotui-lyrics-open .lyrics-lyricsContainer-Karaoke-WordActive {
+    color: #ff8c42 !important;
+}
+
+body.spotui-lyrics-open .lyrics-lyricsContent-previous,
+body.spotui-lyrics-open .lyrics-lyricsContent-upcoming,
+body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsLine-past {
+    color: #777 !important;
+}
+
+body.spotui-lyrics-open .main-nowPlayingView-lyricsGradient,
+body.spotui-lyrics-open .lyrics-lyrics-background,
+body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsBackground {
+    background: linear-gradient(180deg, rgba(255, 140, 66, 0.12), rgba(0, 0, 0, 0)) !important;
+}
+
+body.spotui-lyrics-open .main-nowPlayingView-lyricsControls button,
+body.spotui-lyrics-open .main-nowPlayingView-lyricsControls [role="button"],
+body.spotui-lyrics-open .lyrics-config-button,
+body.spotui-lyrics-open .lyrics-config-button-container button {
+    border-radius: 0 !important;
+    color: #ff8c42 !important;
+}
+
+body.spotui-lyrics-open .main-nowPlayingView-lyricsControls button:hover,
+body.spotui-lyrics-open .main-nowPlayingView-lyricsControls [role="button"]:hover,
+body.spotui-lyrics-open .lyrics-config-button:hover,
+body.spotui-lyrics-open .lyrics-config-button-container button:hover {
+    color: #ffb26f !important;
+}
+
+body.spotui-lyrics-open .lyrics-lyricsContainer-LyricsLine {
+    line-height: 1.55 !important;
+}
+
+.Root__main-view,
+.main-view-container,
+.main-buddy-list {
+    background: #000 !important;
+}
+
+body {
+    background: #000 !important;
+    overflow: hidden !important;
+}
+
+body.spotui-spotify-enabled {
+    overflow: auto !important;
+}
+
+html:has(body.spotui-spotify-enabled) {
+    overflow: auto !important;
+    height: 100% !important;
+}
+
+body.spotui-spotify-enabled .Root,
+body.spotui-spotify-enabled .Root__main-view,
+body.spotui-spotify-enabled .main-view-container {
+    position: relative !important;
+    height: calc(100vh - 90px) !important;
+    overflow: auto !important;
+}
+
+#spotui-tui {
+    width: 100vw !important;
+    max-width: 100vw !important;
+    box-sizing: border-box !important;
+    overflow-x: hidden !important;
+}
+
+body.spotui-spotify-enabled #spotui-tui {
+    display: flex !important;
+}
+
+body.spotui-tui-hidden #spotui-tui {
+    display: none !important;
+}
+
+body.spotui-spotify-enabled .main-topBar-searchBar,
+body.spotui-spotify-enabled .search-modal-searchBar,
+body.spotui-spotify-enabled .collection-searchBar-searchBar {
+    background: #000 !important;
+    border: 1px solid #ff8c42 !important;
+    border-radius: 0 !important;
+    box-shadow: inset 0 1px 0 rgba(255, 140, 66, 0.15) !important;
+}
+
+body.spotui-spotify-enabled .main-globalNav-searchInputContainer,
+body.spotui-spotify-enabled .main-globalNav-searchInputSection,
+body.spotui-spotify-enabled .main-globalNav-searchInputWrapper,
+body.spotui-spotify-enabled .search-modal-searchBar {
+    background: #000 !important;
+}
+
+body.spotui-spotify-enabled .x-searchInput-searchInputInput,
+body.spotui-spotify-enabled .main-globalNav-searchInputText,
+body.spotui-spotify-enabled .search-modal-searchBar input {
+    color: #ff8c42 !important;
+    background: transparent !important;
+    border: none !important;
+    outline: none !important;
+    font-family: "JetBrains Mono", "Fira Code", monospace !important;
+    caret-color: #ff8c42 !important;
+}
+
+body.spotui-spotify-enabled .x-searchInput-searchInputInput::placeholder,
+body.spotui-spotify-enabled .main-globalNav-searchInputText::placeholder,
+body.spotui-spotify-enabled .search-modal-searchBar input::placeholder {
+    color: #777 !important;
+}
+
+body.spotui-spotify-enabled .x-searchInput-searchInputSearchIcon,
+body.spotui-spotify-enabled .x-searchInput-searchInputClearButton,
+body.spotui-spotify-enabled .x-searchInput-searchInputClearIcon {
+    color: #ff8c42 !important;
+}
+
+body.spotui-spotify-enabled .x-searchInput-searchInputClearButton:hover,
+body.spotui-spotify-enabled .x-searchInput-searchInputSearchIcon:hover {
+    color: #ffb26f !important;
+}
+
+body.spotui-lyrics-open #spotui-tui {
+    width: calc(100vw - 420px) !important;
+    max-width: calc(100vw - 420px) !important;
+}
+
+body.spotui-search-mode #spotui-tui {
+    display: none !important;
+}
+
+body.spotui-search-mode #spotui-controls {
+    display: none !important;
+}
+
+body.spotui-tui-hidden #spotui-back-btn,
+body.spotui-spotify-enabled #spotui-back-btn,
+body.spotui-search-mode #spotui-back-btn {
+    position: fixed !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    z-index: 10020 !important;
+    display: block !important;
+    min-width: 160px;
+    padding: 10px 16px;
+}
+
+body:not(.spotui-tui-hidden):not(.spotui-spotify-enabled):not(.spotui-search-mode) #spotui-back-btn {
+    display: none !important;
+}
+
+#spotui-popup {
+    width: min(480px, calc(100vw - 32px)) !important;
+}
+
+.main-topBar-topbarContent {
+    display: none !important;
+}
+
+body.spotui-spotify-enabled .main-topBar-topbarContent {
+    display: flex !important;
+}
+
+button,
+[role="button"] {
+    border-radius: 0 !important;
+}