album-viewer
Version:
The `album-viewer` web component fetches and displays albums from a specified [Bandcamp](https://bandcamp.com) artist
28 lines (27 loc) • 10.4 kB
JavaScript
(function(a,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("lit")):typeof define=="function"&&define.amd?define(["exports","lit"],c):(a=typeof globalThis<"u"?globalThis:a||self,c(a.AlbumViewer={},a.lit))})(this,function(a,c){"use strict";/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const U=r=>(e,t)=>{t!==void 0?t.addInitializer(()=>{customElements.define(r,e)}):customElements.define(r,e)};/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const f=globalThis,b=f.ShadowRoot&&(f.ShadyCSS===void 0||f.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,_=Symbol(),S=new WeakMap;let v=class{constructor(e,t,s){if(this._$cssResult$=!0,s!==_)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(b&&e===void 0){const s=t!==void 0&&t.length===1;s&&(e=S.get(t)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),s&&S.set(t,e))}return e}toString(){return this.cssText}};const C=r=>new v(typeof r=="string"?r:r+"",void 0,_),O=(r,e)=>{if(b)r.adoptedStyleSheets=e.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const t of e){const s=document.createElement("style"),i=f.litNonce;i!==void 0&&s.setAttribute("nonce",i),s.textContent=t.cssText,r.appendChild(s)}},g=b?r=>r:r=>r instanceof CSSStyleSheet?(e=>{let t="";for(const s of e.cssRules)t+=s.cssText;return C(t)})(r):r;/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const{is:R,defineProperty:T,getOwnPropertyDescriptor:j,getOwnPropertyNames:M,getOwnPropertySymbols:z,getPrototypeOf:D}=Object,l=globalThis,P=l.trustedTypes,L=P?P.emptyScript:"",$=l.reactiveElementPolyfillSupport,d=(r,e)=>r,m={toAttribute(r,e){switch(e){case Boolean:r=r?L:null;break;case Object:case Array:r=r==null?r:JSON.stringify(r)}return r},fromAttribute(r,e){let t=r;switch(e){case Boolean:t=r!==null;break;case Number:t=r===null?null:Number(r);break;case Object:case Array:try{t=JSON.parse(r)}catch{t=null}}return t}},E=(r,e)=>!R(r,e),A={attribute:!0,type:String,converter:m,reflect:!1,hasChanged:E};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),l.litPropertyMetadata??(l.litPropertyMetadata=new WeakMap);class u extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??(this.l=[])).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=A){if(t.state&&(t.attribute=!1),this._$Ei(),this.elementProperties.set(e,t),!t.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(e,s,t);i!==void 0&&T(this.prototype,e,i)}}static getPropertyDescriptor(e,t,s){const{get:i,set:o}=j(this.prototype,e)??{get(){return this[t]},set(n){this[t]=n}};return{get(){return i==null?void 0:i.call(this)},set(n){const h=i==null?void 0:i.call(this);o.call(this,n),this.requestUpdate(e,h,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??A}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const e=D(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...M(t),...z(t)];for(const i of s)this.createProperty(i,t[i])}const e=this[Symbol.metadata];if(e!==null){const t=litPropertyMetadata.get(e);if(t!==void 0)for(const[s,i]of t)this.elementProperties.set(s,i)}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);i!==void 0&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const s=new Set(e.flat(1/0).reverse());for(const i of s)t.unshift(g(i))}else e!==void 0&&t.push(g(e));return t}static _$Eu(e,t){const s=t.attribute;return s===!1?void 0:typeof s=="string"?s:typeof e=="string"?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var e;this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),(e=this.constructor.l)==null||e.forEach(t=>t(this))}addController(e){var t;(this._$EO??(this._$EO=new Set)).add(e),this.renderRoot!==void 0&&this.isConnected&&((t=e.hostConnected)==null||t.call(e))}removeController(e){var t;(t=this._$EO)==null||t.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const s of t.keys())this.hasOwnProperty(s)&&(e.set(s,this[s]),delete this[s]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return O(e,this.constructor.elementStyles),e}connectedCallback(){var e;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(e=this._$EO)==null||e.forEach(t=>{var s;return(s=t.hostConnected)==null?void 0:s.call(t)})}enableUpdating(e){}disconnectedCallback(){var e;(e=this._$EO)==null||e.forEach(t=>{var s;return(s=t.hostDisconnected)==null?void 0:s.call(t)})}attributeChangedCallback(e,t,s){this._$AK(e,s)}_$EC(e,t){var o;const s=this.constructor.elementProperties.get(e),i=this.constructor._$Eu(e,s);if(i!==void 0&&s.reflect===!0){const n=(((o=s.converter)==null?void 0:o.toAttribute)!==void 0?s.converter:m).toAttribute(t,s.type);this._$Em=e,n==null?this.removeAttribute(i):this.setAttribute(i,n),this._$Em=null}}_$AK(e,t){var o;const s=this.constructor,i=s._$Eh.get(e);if(i!==void 0&&this._$Em!==i){const n=s.getPropertyOptions(i),h=typeof n.converter=="function"?{fromAttribute:n.converter}:((o=n.converter)==null?void 0:o.fromAttribute)!==void 0?n.converter:m;this._$Em=i,this[i]=h.fromAttribute(t,n.type),this._$Em=null}}requestUpdate(e,t,s){if(e!==void 0){if(s??(s=this.constructor.getPropertyOptions(e)),!(s.hasChanged??E)(this[e],t))return;this.P(e,t,s)}this.isUpdatePending===!1&&(this._$ES=this._$ET())}P(e,t,s){this._$AL.has(e)||this._$AL.set(e,t),s.reflect===!0&&this._$Em!==e&&(this._$Ej??(this._$Ej=new Set)).add(e)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var s;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[o,n]of this._$Ep)this[o]=n;this._$Ep=void 0}const i=this.constructor.elementProperties;if(i.size>0)for(const[o,n]of i)n.wrapped!==!0||this._$AL.has(o)||this[o]===void 0||this.P(o,this[o],n)}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),(s=this._$EO)==null||s.forEach(i=>{var o;return(o=i.hostUpdate)==null?void 0:o.call(i)}),this.update(t)):this._$EU()}catch(i){throw e=!1,this._$EU(),i}e&&this._$AE(t)}willUpdate(e){}_$AE(e){var t;(t=this._$EO)==null||t.forEach(s=>{var i;return(i=s.hostUpdated)==null?void 0:i.call(s)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Ej&&(this._$Ej=this._$Ej.forEach(t=>this._$EC(t,this[t]))),this._$EU()}updated(e){}firstUpdated(e){}}u.elementStyles=[],u.shadowRootOptions={mode:"open"},u[d("elementProperties")]=new Map,u[d("finalized")]=new Map,$==null||$({ReactiveElement:u}),(l.reactiveElementVersions??(l.reactiveElementVersions=[])).push("2.0.4");/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const V={attribute:!0,type:String,converter:m,reflect:!1,hasChanged:E},k=(r=V,e,t)=>{const{kind:s,metadata:i}=t;let o=globalThis.litPropertyMetadata.get(i);if(o===void 0&&globalThis.litPropertyMetadata.set(i,o=new Map),o.set(t.name,r),s==="accessor"){const{name:n}=t;return{set(h){const w=e.get.call(this);e.set.call(this,h),this.requestUpdate(n,w,r)},init(h){return h!==void 0&&this.P(n,void 0,r),h}}}if(s==="setter"){const{name:n}=t;return function(h){const w=this[n];e.call(this,h),this.requestUpdate(n,w,r)}}throw Error("Unsupported decorator location: "+s)};function y(r){return(e,t)=>typeof t=="object"?k(r,e,t):((s,i,o)=>{const n=i.hasOwnProperty(o);return i.constructor.createProperty(o,n?{...s,wrapped:!0}:s),n?Object.getOwnPropertyDescriptor(i,o):void 0})(r,e,t)}const q="https://api.music.devboi.xyz/v1/album-viewer",x=(r,e,t="large",s="ffffff",i="0687f5")=>`https://bandcamp.com/EmbeddedPlayer/${r}=${e}/size=${t}/bgcol=${s}/linkcol=${i}/transparent=true/`;var N=Object.defineProperty,B=Object.getOwnPropertyDescriptor,p=(r,e,t,s)=>{for(var i=s>1?void 0:s?B(e,t):e,o=r.length-1,n;o>=0;o--)(n=r[o])&&(i=(s?n(e,t,i):n(i))||i);return s&&i&&N(e,t,i),i};a.AlbumViewer=class extends c.LitElement{constructor(){super(...arguments),this.name="",this.iframeWidth="350px",this.iframeHeight="442px",this.iframeBorder="0"}firstUpdated(){this.fetchAlbumData()}async fetchAlbumData(){const e=`${q}/?name=${this.name}`;try{const t=await fetch(e,{method:"GET",headers:{"Content-Type":"application/json"}});if(!t.ok)throw new Error("Network response was not ok");const s=await t.json();this.displayAlbums(s)}catch(t){console.error("Failed to fetch album data:",t)}}displayAlbums(e){var s;const t=(s=this.shadowRoot)==null?void 0:s.querySelector(".album-viewer");e.forEach(i=>{const o=i.type,n=document.createElement("iframe");n.style.border=this.iframeBorder,n.style.width=this.iframeWidth,n.style.height=this.iframeHeight,n.src=x(o,i.id),t==null||t.appendChild(n)})}render(){return c.html`
<pre class="album-viewer">
<!-- Album Data will be injected here -->
</pre>
`}},a.AlbumViewer.styles=c.css`
.album-viewer {
display: flex;
justify-content: top;
overflow-x: auto;
}
`,p([y({type:String})],a.AlbumViewer.prototype,"name",2),p([y({type:String})],a.AlbumViewer.prototype,"iframeWidth",2),p([y({type:String})],a.AlbumViewer.prototype,"iframeHeight",2),p([y({type:String})],a.AlbumViewer.prototype,"iframeBorder",2),a.AlbumViewer=p([U("album-viewer")],a.AlbumViewer),Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});