65 lines
2.1 KiB
React
65 lines
2.1 KiB
React
|
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;
|
||
|
|
},
|
||
|
|
};
|
||
|
|
};
|