flash.moe/assets/makai.js/np/element.jsx

65 lines
2.1 KiB
React
Raw Normal View History

const MakaiNowPlayingElement = function() {
const noCoverUrl = '//now.flash.moe/resources/no-cover.png';
const hiddenClass = 'hidden';
let coverElem, titleElem, artistElem;
const element = <div class={`np ${hiddenClass}`}>
<div class="np-header">
<span class="np-header-icon"></span>
<span class="np-header-text">Now listening to...</span>
</div>
<div class="np-cover">
{coverElem = <img src={noCoverUrl} alt={noCoverUrl} onerror={() => {
coverElem.alt = noCoverUrl;
coverElem.src = noCoverUrl;
}}/>}
</div>
<div class="np-details">
<div class="np-artist">{artistElem = <a href="#" target="_blank" rel="noopener"></a>}</div>
<div class="np-title">{titleElem = <a href="#" target="_blank" rel="noopener"></a>}</div>
</div>
</div>;
return {
get element() { return element; },
get hidden() { element.classList.has(hiddenClass); },
set hidden(value) {
element.classList.toggle(hiddenClass, value);
},
get isDefaultCover() {
return coverElem.src === noCoverUrl
|| coverElem.src === (location.protocol + noCoverUrl);
},
get coverUrl() { return coverElem.src; },
set coverUrl(value) {
if(value === undefined || value === null || value === '')
value = noCoverUrl;
coverElem.alt = value;
coverElem.src = value;
},
get titleText() { return titleElem.textContent; },
set titleText(value) {
titleElem.title = value;
titleElem.textContent = value;
},
get titleUrl() { return titleElem.href; },
set titleUrl(value) {
titleElem.href = value;
},
get artistText() { return artistElem.textContent; },
set artistText(value) {
artistElem.title = value;
artistElem.textContent = value;
},
get artistUrl() { return artistElem.href; },
set artistUrl(value) {
artistElem.href = value;
},
};
};