+
+ `}}kt.styles=l`
+ .loader {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .music {
+ display: inline-flex;
+ position: relative;
+ max-width: calc(80% - 8px);
+ width: 100%;
+ max-height: calc(33% - 8px);
+ height: 100%;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .bar {
+ width: 12px;
+ border-radius: 8px;
+ animation: loader 1.5s ease-in-out infinite;
+ }
+
+ @keyframes loader {
+ 0%,
+ 100% {
+ height: 2px;
+ }
+
+ 50% {
+ height: 80%;
+ }
+ }
+
+ .music .bar:nth-child(1) {
+ background: rgba(255, 255, 255, 0.1);
+ animation-delay: 1s;
+ }
+
+ .music .bar:nth-child(2) {
+ background: rgba(255, 255, 255, 0.3);
+ animation-delay: 0.8s;
+ }
+
+ .music .bar:nth-child(3) {
+ background: rgba(255, 255, 255, 0.5);
+ animation-delay: 0.6s;
+ }
+
+ .music .bar:nth-child(4) {
+ background: rgba(255, 255, 255, 0.7);
+ animation-delay: 0.4s;
+ }
+
+ .music .bar:nth-child(5) {
+ background: rgba(255, 255, 255, 0.9);
+ animation-delay: 0.2s;
+ }
+
+ .music .bar:nth-child(6) {
+ background: rgba(255, 255, 255, 0.9);
+ animation-delay: 0.2s;
+ }
+
+ .music .bar:nth-child(7) {
+ background: rgba(255, 255, 255, 0.7);
+ animation-delay: 0.4s;
+ }
+
+ .music .bar:nth-child(8) {
+ background: rgba(255, 255, 255, 0.5);
+ animation-delay: 0.6s;
+ }
+
+ .music .bar:nth-child(9) {
+ background: rgba(255, 255, 255, 0.3);
+ animation-delay: 0.8s;
+ }
+
+ .music .bar:nth-child(10) {
+ background: rgba(255, 255, 255, 0.1);
+ animation-delay: 1s;
+ }
+ `,customElements.define("ytube-playlist-loader",kt);var Tt=l`*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+ha-card {
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+ height: auto;
+ border: none !important;
+ border-radius: 0 !important;
+ background: none !important;
+ margin: 0;
+ padding: 0;
+}
+
+.grid::-webkit-scrollbar {
+ display: none !important;
+ /* Safari and Chrome */
+}
+
+
+.grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
+ grid-gap: 0.5em;
+ width: 100%;
+ height: 100%;
+ overflow-y: auto;
+ scroll-snap-type: y mandatory;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+}
+
+.grid-item {
+ position: relative;
+ overflow: hidden;
+ height: 100%;
+ border-radius: 1em;
+ cursor: pointer;
+ transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
+ box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
+ border: 2px solid transparent;
+ scroll-snap-align: end;
+ scroll-snap-stop: always;
+}
+
+.grid-item:hover {
+ border-color: var(--primary-color);
+}
+
+.grid-item-thumbnail {
+ position: relative;
+ overflow: hidden;
+ height: 100%;
+ width: 100%;
+ filter: brightness(0.8);
+}
+
+.grid-item-thumbnail:hover {
+ filter: brightness(1);
+}
+
+.grid-item-thumbnail>img {
+ width: 100%;
+ height: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+
+.grid-item-title {
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
+ padding: 0em 0.1em;
+ overflow: hidden;
+ white-space: pretty;
+ text-align: center;
+ color: var(--text-primary-color);
+ font-size: 1.2em;
+ background-color: rgba(0, 0, 0, 0.7);
+ -webkit-backdrop-filter: blur(1px);
+ backdrop-filter: blur(1px);
+ transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.grid-item:hover .grid-item-title {
+ opacity: 1;
+}`;let Ut=class extends ut{constructor(){super(...arguments),this._cardWidth=0,this._currentChunkIndex=0,this._chunkSize=40,this._chunks=[],this._renderedItems=[]}static get styles(){return Tt}async setConfig(t){if(!t.entity||"media_player"!==t.entity.split(".")[0])throw new Error("Specify an entity from within the media_player domain");this.config=t}connectedCallback(){super.connectedCallback(),window.YtubeCard=this,this.updateComplete.then((()=>this._attachObserver()))}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect()}async _attachObserver(){this._resizeObserver||(this._resizeObserver=new ResizeObserver(Pt((()=>this._measureCard()),250,!1)));const t=this.shadowRoot.querySelector("ha-card");t&&this._resizeObserver.observe(t)}_measureCard(){const t=this.shadowRoot.querySelector("ha-card");t&&(this._cardWidth=t.clientWidth)}async firstUpdated(t){super.firstUpdated(t),this._attachObserver(),this._measureCard(),await this._loadContent()}async _loadContent(){this._loadingData=!0;const t=await this.store.haService.browseMedia("home2","Mixed for you");this._initialItems=t,this._loadingData=!1}_createStore(){this.store=new Ct(this.hass,this.config)}render(){return this.hass?(this._createStore(),Z`
+
+
+
+
+
+
+
+
+
+
+
+
+ ${this._renderedItems.map((t=>(t=>{const{thumbnail:e,title:i}=t;return Z`
+
+ `}_computeGridStyles(){const t=this._cardWidth,e=t/3*.9;return Et({gridTemplateColumns:`repeat(auto-fill, minmax(${e}px, 1fr))`,gridAutoRows:`${e+8}px`,gridGap:"8px",maxHeight:`${t}px`,overflowY:"auto"})}_handleScroll(t){const e=t.target;e.scrollHeight-e.scrollTop<=e.clientHeight+1&&this._loadMoreItems()}_loadMoreItems(){this._currentChunkIndex{}}>
+
+ `})(t)))}
+
+ 
+
+
+ ${i}
+
+