Method constructor

Extensions/bookmark.js:111–178

(info)

	class CardContainer extends HTMLElement {
		constructor(info) {
			super();
			const uri = URI.fromString(info.uri);
			const isPlayable =
				uri.type === URI.Type.TRACK ||
				uri.type === URI.Type.PLAYLIST_V2 ||
				uri.type === URI.Type.ALBUM ||
				uri.type === URI.Type.EPISODE ||
				uri.type === URI.Type.PLAYLIST;

			this.innerHTML = `
<style>
.bookmark-card .ButtonInner-md-iconOnly:hover {
	transform: scale(1.06);
}
</style>
<div class="bookmark-card">
    ${
			info.imageUrl
				? `<img aria-hidden="false" draggable="false" loading="eager" src="${info.imageUrl}" alt="${info.title}" class="bookmark-card-image">`
				: ""
		}
    <div class="bookmark-card-info">
        <div class="main-type-balladBold"><span>${info.title}</span></div>
        <div class="main-type-mesto"><span>${info.description}</span></div>
        ${
					info.time
						? `
            <div class="bookmark-fixed-height">
                <div class="bookmark-progress">
                    <div class="bookmark-progress__bar" style="--progress:${info.progress}"></div>
                </div>
                <span class="bookmark-progress__time main-type-mesto">${Player.formatTime(info.time)}</span>
            </div>
        `
						: ""
				}
    </div>
    ${
			isPlayable
				? `<div class="ButtonInner-md-iconOnly"><button class="main-playButton-PlayButton main-playButton-primary" data-tippy-content="Play" style="--size:48px;"><svg role="img" height="24" width="24" viewBox="0 0 16 16" fill="currentColor"><path d="M4.018 14L14.41 8 4.018 2z"></path></svg></button></div>`
				: ""
		}
    <button class="bookmark-controls" data-tippy-content="${REMOVE_TEXT}"><svg width="8" height="8" viewBox="0 0 16 16" fill="currentColor">${
			Spicetify.SVGIcons.x
		}</svg></button>
</div>
`;

			Spicetify.Tippy(this.querySelectorAll("[data-tippy-content]"), Spicetify.TippyProps);
			if (isPlayable) {
				/** @type {HTMLButtonElement} */
				const playButton = this.querySelector("button.main-playButton-PlayButton");
				playButton.onclick = (event) => {
					onPlayClick(info);
					event.stopPropagation();
				};
			}