Code: Select all

/// <reference path="C:\\Program Files (x86)\\Ventis\\MediaMonkey\\typescript\\src\\types\\types.ts"/>
/// <reference path="C:\\Program Files (x86)\\Ventis\\MediaMonkey\\typescript\\src\\types\\windowExtensions.ts"/>
/// <reference path="C:\\Program Files (x86)\\Ventis\\MediaMonkey\\typescript\\src\\controls\\control.ts"/>
/// <reference path="C:\\Program Files (x86)\\Ventis\\MediaMonkey\\typescript\\src\\controls\\listview.ts"/>
/// <reference path="C:\\Program Files (x86)\\Ventis\\MediaMonkey\\typescript\\src\\mminit.ts"/>


window.templates.popupRenderers.override({
    album: function ($super, LV, div, item, scrollIntoView, personID) {
        $super.apply(this, [LV, div, item, scrollIntoView, personID]);
        
        /** @type {Control} */
        let divCtrl = div.controlClass;
        
        /** @type {HTMLElement} */
        let popupItem = qe(LV.container, '[data-selected]');
        let imageInfo = qeclass(popupItem, 'imageInfo')[0];
        
        /** @type {HTMLElement} */
        let popupButtons = qe(div, 'div:has( > [data-id=btnPlayPopup])').cloneNode(true);
        let popupButtonsDict = getAllUIElements(popupButtons);
        
        // Create absolute-positioned parent so we can position it over the invisible first/second lines
        let popupButtonsParent = document.createElement('div');
        popupButtonsParent.setAttribute('data-id', 'popupButtonsParent'); // for accessing in the ListView handler
        popupButtonsParent.appendChild(popupButtons);
        // Change the CSS classes so that they are no longer left-aligned
        popupButtons.classList.remove('inline', 'left');
        popupButtons.classList.add('spacearound');

        imageInfo.appendChild(popupButtonsParent);
        
        function clickPlay(e) {
            e.preventDefault();
            e.stopPropagation();
            divCtrl.UI.btnPlayPopup.click();
        }
        function clickShuffle(e) {
            e.preventDefault();
            e.stopPropagation();
            divCtrl.UI.btnShufflePopup.click();
        }
        function clickMenu(e) {
            e.preventDefault();
            e.stopPropagation();
            let event = createNewCustomEvent('mousedown', {});
            divCtrl.UI.btnMenuPopup.dispatchEvent(event);
        }
        divCtrl.localListen(popupButtonsDict.btnPlayPopup, 'click', clickPlay);
        divCtrl.localListen(popupButtonsDict.btnPlayPopup, 'touchend', clickPlay);
        divCtrl.localListen(popupButtonsDict.btnShufflePopup, 'click', clickShuffle);
        divCtrl.localListen(popupButtonsDict.btnShufflePopup, 'touchend', clickShuffle);
        divCtrl.localListen(popupButtonsDict.btnMenuPopup, 'click', clickMenu);
        divCtrl.localListen(popupButtonsDict.btnMenuPopup, 'touchend', clickMenu);
        addEnterAsClick(divCtrl, popupButtonsDict.btnPlayPopup);
        addEnterAsClick(divCtrl, popupButtonsDict.btnShufflePopup);
    },
});

window.templates.override({
    setLVPopupStyles: function($super, img, div, doDullenColor) {
        $super(img, div, doDullenColor);
        
        let LV = div.parentListView;
        let selectedDiv = LV.getDiv(LV.focusedIndex);
        if (!selectedDiv) return console.error('selected div not returned!');
        selectedDiv.style.backgroundColor = div.style.backgroundColor;
        selectedDiv.classList.add('custom-background-color'); // save this so we can retrieve it in showPopup() (we could just as easily use a "data-" attribute but it doesn't really matter what we use)
    }
})

ListView.prototype.override({
    showPopup: function($super, index, isFast) {
        // search to see if the popup button exists anywhere in the list
        let popupButtonsParent = qeid(this.container, 'popupButtonsParent');
        if (popupButtonsParent) {
            popupButtonsParent.parentElement.removeChild(popupButtonsParent);
        }
        // we expect divsWithBG to be length 0 or 1, and a forEach() works just fine for this case. 
        let divsWithBG = qeclass(this.container, 'custom-background-color');
        forEach(divsWithBG, div => {
            div.classList.remove('custom-background-color');
            div.style.backgroundColor = '';
        })
        $super.apply(this, [index, isFast]);
    },
})

Code: Select all

//-------------------------------- Album View Display Info (lvPopupContainer) ----------------------------
// DONE: Remove album image (redundant); Make header text all one line (compactness); Remove top-right close button (redundant)
// TODO: Move play/shuffle controls to underneath album art; Hide text underneath album art; Make bkd around selected album the same unique color as the info-text bkd

[data-control-class="ArtworkRectangle"] {
    display: none;
}
[data-id="albumTitle"] {
    font-size: 16px  !important;
    margin-left: 20px !important;
}
[data-id="releaseYear"] {
    font-size: 16px  !important;
}
[data-id="albumArtist"] {
    font-size: 16px  !important;
}
[data-id="popupHeader"] div:has([data-id="btnPlayPopup"]) {
    display: none;
}
.lvItem.griditem.imageItem .imageInfo:has([data-id=popupButtonsParent]){
    position: relative; // to allow popup buttons to be placed over the first/second lines
    & [data-id=firstLine], & [data-id=secondLine] {
        opacity: 0; // keep their size but just make them invisible
    }
    & [data-id=popupButtonsParent] {
        position: absolute;
        top: 0;
        width: 100%; // allow buttons to stretch to full width of the parent
    }
}
.popupHeader br {
    display: none !important;
}
.lvPopupContainer .closebutton {
    display: none;
}
//---------------------------------

Code: Select all

//-------------------------------- Album View Display Info (lvPopupContainer) ----------------------------
// DONE: Remove album image (redundant); Make header text all one line (compactness); Remove top-right close button (redundant)
// TODO: Move play/shuffle controls to underneath album art; Hide text underneath album art; Make bkd around selected album the same unique color as the info-text bkd

[data-control-class="ArtworkRectangle"] {
    display: none;
}
[data-id="albumTitle"] {
    font-size: 16px  !important;
    margin-left: 20px !important;
}
[data-id="releaseYear"] {
    font-size: 16px  !important;
}
[data-id="albumArtist"] {
    font-size: 16px  !important;
}
.popupHeader br {
    display: none !important;
}
.lvPopupContainer .closebutton {
    display: none;
}
//---------------------------------