Chiristuff for your Bandcamp collection — M O R E S O N G

Chiristuff for your Bandcamp collection.md

Chiristuff for your Bandcamp Collection

• Dark theme
• Expands your collection horizontally to fill your entire monitor width
• Toggle a "compressed" view by clicking on the collection tab
• Loops albums automagically
• Moves the search/hidden items bar in your collection into the tabs bar when the bandcamp menu bar is not visible
• Right click the title of the currently playing track or tracks in the queue to dislike them. Disliked tracks are automatically skipped

chiristuff-for-bandcamp.css

/* S H O R T */

[data-grid-id="collection-grid"] {
	cursor: pointer !important;
}

.compressed .collection-item-details-container {
    display: none;
}

.compressed li.collection-item-container {
    min-height: 280px;
}

.compressed .release-label {
    display: none;
}


/* W I D E */

.fan-container .fan-bio-wrapper, 
.fan-container .tabs, 
.fan-container .owner-controls, 
.fan-banner-inner, 
.subscriber-landing > .content, 
.fan-container .grid-header, 
.fan-container .grid.follow-grid, 
.fan-container .tabs.small, 
.fan-container .grid {
    width: calc(100% - 63px);
}

ol.collection-grid {
    width: 100%;
}

.collection-grid > li {
    margin: 0;
}

ol.collection-grid > li.placeholder {
    margin: 10px 10px 5px 9px;
}


/* S K I P */

.info.disliked {
	opacity: 0.3;
}


/* D A R K */

:root {
    --background: #222;
    --border-carousel: #444;
    --background-progress-bar: #888;
    --background-progress-buffer: #666;
    --background-progress-background: #333;
    --color-carousel: #aaa;
    --color-collection-item-why: #888;
    --color-item-link: #aaa;
    --color-favourite-track: #666;
    --color-favourite-track-link: #999;
    --color-favourite-track-link-private: #777;
    --border-player-icon: #ccc;
    --fill-carousel-icon: #ccc;
    --background-menubar: var(--background);
    --border-menubar: #444;
    --color-tab-active: #ccc;
    --border-tabs: #444;
    --color-bio: #ccc;
    --color-bio-edit: #aaa;
    --background-bio-edit: var(--background);
    --border-bio-edit: #444;
    --background-menubar-hover: #333;
    --background-search: #333;
    --background-search-focus: #444;
    --color-search: #fff;
    --color-search-placeholder: #aaa;
    --background-search-results: var(--background);
    --background-search-results-see-all: #292929;
    --color-search-results-see-all: #fff;
    --background-search-results-see-all-hover: #555;
    --color-search-results: #ccc;
    --background-search-results-hover: #333;
    --border-search: #444;
    --background-badge: #333;
    --color-badge: #888;
    --color-header: #ccc;
    --background-queue: #292929;
    --border-queue-track: var(--background-queue);
    --background-queue-track-active: #333;
    --border-playpause-icon: #ccc;
    --fill-queue-close: #ccc;
    --border-item-playing: #555;
    --border-item-hover: #444;
}

#pgBd, body, #propOpenWrapper, #menubar-wrapper.header-rework-2018 {
    background: var(--background);
}

#grid-tabs-sticky.fixed {
    background: var(--background);
}

.carousel-player-inner {
    background: var(--background);
    border-top-color: var(--border-carousel);
}

.carousel-player .progress-bar {
    background: var(--background);
}

.carousel-player .progress {
    background: var(--background-progress-bar);
}

.carousel-player .buffer {
    background: var(--background-progress-buffer);
}

.carousel-player .progress-bg {
    background: var(--background-progress-background);
}

.collection-item-why {
    color: var(--color-collection-item-why);
}

.carousel-player {
    color: var(--color-carousel);
}

.item-link {
    color: var(--color-item-link);
}

.grids {
    color: #888;
}

.favoriteTrackLabel {
    color: var(--color-favourite-track);
}

.collection-item-fav-track .fav-track-link {
    color: var(--color-favourite-track-link);
}

.collection-item-fav-track .fav-track-link.private {
    color: var(--color-favourite-track-link-private);
}

.carousel-player .playpause .pause {
    border-color: var(--border-player-icon);
}

.carousel-player .playpause .play {
    border-left-color: var(--border-player-icon);
}

.carousel-player .playpause .busy {
    filter: brightness(0.87) invert();
}

.carousel-player .transport .icon {
    filter: invert();
}

.carousel-player .playpause {
    border-color: var(--border-carousel);
}

.carousel-player .queue-icon {
    fill: var(--fill-carousel-icon);
}

.carousel-player .vol {
    filter: invert();
}

#menubar-wrapper.header-rework-2018 .menubar-outer, .menubar-2018 {
    background-color: var(--background-menubar);
    box-shadow: 0 1px var(--border-menubar);
}

.grids ol.tabs li.active, .grids ol.tabs li.active:hover {
    color: var(--color-tab-active);
    border-color: currentColor;
}

.grids ol.tabs {
    border-color: var(--border-tabs);
}

.fan-bio {
    color: var(--color-bio);
}

.fan-bio .edit-profile > a {
    color: var(--color-bio-edit);
    border-color: var(--border-bio-edit);
    background: var(--background-bio-edit);
}

.has-menubar.invertIconography #menubar.menubar-2018 .autocomplete-form.signup-tooltip-parent.show-tooltip .svg-icon, .has-menubar.invertIconography #menubar.menubar-2018 .menubar-item.signup-tooltip-parent.show-tooltip .svg-icon, .has-menubar.invertIconography #menubar.menubar-2018 .inner-circle-wrapper .svg-icon, .menubar-2018 .svg-icon {
    fill: #ccc;
}

.menubar-2018 .hoverable:hover {
    background: var(--background-menubar-hover);
}

.bclogo {
    filter: invert() hue-rotate(180deg);
}

.menubar-2018 input#search-field {
    background: var(--background-search);
    color: var(--color-search);
}

.menubar-2018 input#search-field::placeholder {
    color: var(--color-search-placeholder) !important;
}

.menubar-2018 .search .keyboard-focus #search-field.focused {
    background: var(--background-search-focus);
}

#autocomplete-results.autocompleted {
    background: var(--background-search-results);
}

#autocomplete-results.header-rework-2018 .see-all {
    background: var(--background-search-results-see-all);
    color: var(--color-search-results-see-all);
}

#autocomplete-results.header-rework-2018 .see-all .arrow::after {
    border-color: currentColor;
}

#autocomplete-results.header-rework-2018 .see-all:hover, #autocomplete-results.header-rework-2018 .selected.see-all {
    background: var(--background-search-results-see-all-hover);
}

.menubar-2018 a, .menubar-2018 li, .menubar-2018 .ui-widget-content a,
#autocomplete-results .results-list .results-item .results-name, #autocomplete-results .results-list .results-item .results-title, #autocomplete-results .results-list .results-item .results-type {
    color: var(--color-search-results);
}

#autocomplete-results.header-rework-2018 .results-list .elem-selected {
    background: var(--background-search-results-hover);
}

.grids .search .search-box {
    background: var(--background-search);
    border-color: var(--border-search);
    color: var(--color-search);
}

li.collection-item-container .release-label, li.collection-item-container .release-label-dark,
.collection-item-private-container .private-badge {
    background: var(--background-badge);
    color: var(--color-badge);
}

.release-label, .release-label > a {
    color: var(--color-badge);
}

.hidden-items-header {
    color: var(--color-header);
}

.carousel-player .queue {
    background: var(--background-queue);
    box-shadow: 0px 0px 3px 0px #000;
}

.carousel-player .queue li.active, .carousel-player .queue li:hover, .carousel-player .queue li:focus {
    background: var(--background-queue-track-active);
}

.carousel-player .queue li {
    border-color: var(--border-queue-track);
}

.carousel-player .queue-playpause .play {
    border-left-color: var(--border-playpause-icon);
}

.carousel-player .queue-playpause .pause {
    border-color: var(--border-playpause-icon);
}

.carousel-player .queue-header .close-icon {
    fill: var(--fill-queue-close);
}

li.collection-item-container.playing, li.collection-item-container.active {
    border-color: var(--border-item-playing);
}

li.collection-item-container:hover {
    border-color: var(--border-item-hover);
}


/* B E C O M E   O N E */

@media (min-width: 1200px) {
    #owner-controls {
        transition: all .25s ease-out;
        margin: 20px 30px 16px 30px;
    }

    #grid-tabs-sticky.fixed:not(.menubar-visible) {
        box-shadow: 0 2px 4px #0006;
    }

    #grid-tabs-sticky.fixed:not(.menubar-visible) #owner-controls {
        margin-top: -30px !important;
        margin-left: 580px;
        margin-bottom: 5px;
        width: calc(100% - 580px - 200px);
    }

    #grid-tabs-sticky.fixed:not(.menubar-visible) .search-box {
        background: none;
        border-color: transparent;
        box-shadow: none;
        padding-bottom: 6px;
    }

    #collection-search .search-box {
        transition: all .25s ease-out;
    }

    #grid-tabs-sticky.fixed:not(.menubar-visible) .search-box:focus {
        border-bottom-color: #ccc;
        box-shadow: 0 1px #ccc;
    }

    #grid-tabs-sticky.fixed:not(.menubar-visible) #collection-search:focus-within .search-icon {
        fill: #ccc;
    }
}

chiristuff-for-bandcamp.js

/* S H O R T */

document.addEventListener("click", event =>
    event.target.closest("[data-grid-id='collection-grid']")
        && document.documentElement.classList.toggle("compressed"));


/* L O O P   &   S K I P */

setInterval(async () => {
	checkRestartAlbum();
	checkSkipSong();
	markDislikedSongs();
}, 100);

function checkRestartAlbum() {
    if (document.querySelector(".carousel-player .playpause .play")?.style.display === "none"
        || !document.querySelector(".carousel-player .transport .next .icon.disabled")
        || document.querySelector(".carousel-player .info-progress .pos-dur [data-bind*='positionStr']")?.textContent !== document.querySelector(".carousel-player .info-progress .pos-dur [data-bind*='durationStr']")?.textContent)
            return;

    seekFirstTrack();
}

async function seekFirstTrack() {
    let isOpen = !!document.querySelector(".queue.show");
    if (!isOpen) {
        document.querySelector(".carousel-player .controls-extra > [data-bind*='click: toggleQueue']")?.click();
        await new Promise(resolve => setTimeout(resolve, 10));
    }

    document.querySelector(".carousel-player .queue ol > li:first-child")?.click();

    if (!isOpen) {
        await new Promise(resolve => setTimeout(resolve, 10));
        document.querySelector(".carousel-player .queue-header .close-icon")?.dispatchEvent(new Event("click"));
    }
}

function getIdFromInfo(info) {
	return !info ? undefined : getId(info.querySelector("[data-bind$='trackNumber']").textContent, info.querySelector("[data-bind$='trackTitle']").textContent);
}

function getId(track, title) {
    return `dislike.${track}.${title}`;
}

document.addEventListener("contextmenu", event => {
    const info = event.target.closest(".carousel-player .progress-transport .info, .queue li");
    if (info) {
        const id = getIdFromInfo(info);
        if (localStorage.getItem(id)) {
            localStorage.removeItem(id);
            info.classList.remove("disliked");
        } else {
            localStorage.setItem(id, true);
            info.classList.add("disliked");
            checkSkipSong(id);
        }

        event.preventDefault();
    }
});

function checkSkipSong(skipId) {
    const info = document.querySelector(".carousel-player .progress-transport .info");
    if (!info)
        return;

    id = getIdFromInfo(info);
    if (skipId && id !== skipId)
    	return;

    if (skipId || localStorage.getItem(id)) {
        const next = document.querySelector(".carousel-player .transport .next-icon:not(.disabled)");
        if (next) 
            next.click();
        else 
            seekFirstTrack();
    }
}

function markDislikedSongs() {
	const queue = document.querySelector(".queue.show");
	if (!queue)
		return;

	for (const song of queue.querySelectorAll("li .info"))
		song.classList.toggle("disliked", !!localStorage.getItem(getIdFromInfo(song)));
}