Publish Vulpes Preview 15 sources for desktop, Android and Tundra
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
This commit is contained in:
OverSu
parent
93e3a48004
commit
b38dea0597
25901 changed files with 9982925 additions and 369 deletions
158
assets/webapps/music.gaiamobile.org/elements/music-artwork.js
Normal file
158
assets/webapps/music.gaiamobile.org/elements/music-artwork.js
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
;(function(window){'use strict';const HIDE_OVERLAY_TIMEOUT=5000;const REPEAT_VALUES=['off','list','song'];const SHUFFLE_VALUES=['off','on'];var proto=Object.create(HTMLElement.prototype);proto.createdCallback=function(){var shadowRoot=this.createShadowRoot();shadowRoot.innerHTML=`<style>
|
||||
[data-icon]:before { /* Copied from /components/gaia-icons/gaia-icons.css */
|
||||
font-family: "gaia-icons";
|
||||
content: attr(data-icon);
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
text-decoration: inherit;
|
||||
text-transform: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 30px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
#container {
|
||||
background-color: #000;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
#container > img {
|
||||
background-color: #000;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
#container > img[data-layer="front"] {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 150ms linear, visibility 0s linear 150ms;
|
||||
}
|
||||
#container > img[data-layer="front"].active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition-delay: 0s, 0s;
|
||||
}
|
||||
#container button {
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: #fff;
|
||||
flex: 0 0 auto;
|
||||
margin: 0 1rem;
|
||||
width: 6rem;
|
||||
transition: background 200ms ease;
|
||||
}
|
||||
#container button:hover {
|
||||
background: transparent;
|
||||
}
|
||||
#container button:active {
|
||||
background: #00caf2;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
#container button:disabled,
|
||||
#container button[data-value="off"] {
|
||||
opacity: 0.3;
|
||||
}
|
||||
#container button:disabled:active {
|
||||
background: transparent;
|
||||
}
|
||||
#container button[data-icon="repeat"][data-value="song"]:before {
|
||||
content: 'repeat-once'
|
||||
}
|
||||
#caption,
|
||||
#controls {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
visibility: hidden;
|
||||
transition: transform 300ms ease-in-out, visibility 0s linear 300ms;
|
||||
}
|
||||
#caption {
|
||||
top: 0;
|
||||
transform: translateY(-5rem);
|
||||
}
|
||||
#controls {
|
||||
bottom: 0;
|
||||
transform: translateY(5rem);
|
||||
}
|
||||
.show-overlay > #caption,
|
||||
.show-overlay > #controls {
|
||||
transform: translateY(0);
|
||||
visibility: visible;
|
||||
transition-delay: 0s, 0s;
|
||||
}
|
||||
#caption-text {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% - 8rem);
|
||||
}
|
||||
#artist,
|
||||
#album {
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
text-shadow: 0 0.1rem rgba(0, 0, 0, 0.5);
|
||||
text-indent: 3rem;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#artist {
|
||||
font-size: 1.9rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
#album {
|
||||
font-size: 1.7rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
#rating {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
</style>
|
||||
<div id="container">
|
||||
<img data-layer="back">
|
||||
<img data-layer="front" class="active">
|
||||
<div id="caption">
|
||||
<div id="caption-text">
|
||||
<h1 id="artist"></h1>
|
||||
<h2 id="album"></h2>
|
||||
</div>
|
||||
<button type="button"
|
||||
data-action="share"
|
||||
data-icon="share"
|
||||
data-l10n-id="share-song">
|
||||
</button>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button type="button"
|
||||
data-action="repeat"
|
||||
data-icon="repeat"
|
||||
data-l10n-id="repeat-off">
|
||||
</button>
|
||||
<music-rating id="rating"></music-rating>
|
||||
<button type="button"
|
||||
data-action="shuffle"
|
||||
data-icon="shuffle"
|
||||
data-l10n-id="shuffle-toggle">
|
||||
</button>
|
||||
</div>
|
||||
</div>`;var $=shadowRoot.querySelector.bind(shadowRoot);this.els={container:$('#container'),backImage:$('img[data-layer="back"]'),frontImage:$('img[data-layer="front"]'),caption:$('#caption'),controls:$('#controls'),artist:$('#artist'),album:$('#album'),share:$('[data-action="share"]'),repeat:$('[data-action="repeat"]'),shuffle:$('[data-action="shuffle"]'),rating:$('#rating')};var onImageLoad=(evt)=>{const image=evt.target;window.requestAnimationFrame(()=>{var newActiveImage=image.closest('img:not(.active)');if(!newActiveImage){return;}
|
||||
var oldActiveImage=this.els.container.querySelector('img.active');newActiveImage.classList.add('active');oldActiveImage.classList.remove('active');});};[].forEach.call(this.els.container.querySelectorAll('img'),(img)=>{img.addEventListener('load',onImageLoad);});this.els.container.addEventListener('transitionend',(evt)=>{if(!evt.target.matches('img:not(.active)')){return;}
|
||||
var oldActiveImage=evt.target;oldActiveImage.src=null;});this.els.container.addEventListener('click',(evt)=>{var button=evt.target.closest('button');if(!button){if(evt.target.closest('#rating')){this.overlayVisible=true;return;}
|
||||
this.overlayVisible=!this.overlayVisible;return;}
|
||||
var action=button.dataset.action;switch(action){case'repeat':this.nextRepeat();break;case'shuffle':this.nextShuffle();break;}
|
||||
this.overlayVisible=true;this.dispatchEvent(new CustomEvent(action));});this.els.rating.addEventListener('change',(evt)=>{this.dispatchEvent(new CustomEvent('ratingchange',{detail:evt.detail}));});this.onDOMRetranslated=()=>{document.l10n.translateFragment(shadowRoot);};this.repeat=this.getAttribute('repeat');this.shuffle=this.getAttribute('shuffle');this.overlayVisible=true;};proto.attachedCallback=function(){document.addEventListener('DOMRetranslated',this.onDOMRetranslated);this.onDOMRetranslated();};proto.detachedCallback=function(){document.removeEventListener('DOMRetranslated',this.onDOMRetranslated);};proto.attributeChangedCallback=function(attr,oldVal,newVal){switch(attr){case'artist':this.els.artist.textContent=newVal;break;case'album':this.els.album.textContent=newVal;break;case'repeat':this.els.repeat.dataset.value=REPEAT_VALUES.indexOf(newVal)!==-1?newVal:REPEAT_VALUES[0];break;case'shuffle':this.els.shuffle.dataset.value=SHUFFLE_VALUES.indexOf(newVal)!==-1?newVal:SHUFFLE_VALUES[0];break;case'src':this.els.container.querySelector('img:not(.active)').src=newVal;break;}};proto.nextRepeat=function(){this.repeat=REPEAT_VALUES[REPEAT_VALUES.indexOf(this.repeat)+1];};proto.nextShuffle=function(){this.shuffle=SHUFFLE_VALUES[SHUFFLE_VALUES.indexOf(this.shuffle)+1];};['artist','album','src'].forEach(function(prop){Object.defineProperty(proto,prop,{get:function(){return this.getAttribute(prop);},set:function(value){this.setAttribute(prop,value||'');}});});Object.defineProperty(proto,'repeat',{get:function(){return this.getAttribute('repeat')||REPEAT_VALUES[0];},set:function(value){value=REPEAT_VALUES.indexOf(value)!==-1?value:REPEAT_VALUES[0];this.setAttribute('repeat',value);this.els.repeat.dataset.l10nId='repeat-'+value;this.onDOMRetranslated();}});Object.defineProperty(proto,'shuffle',{get:function(){return this.getAttribute('shuffle')||SHUFFLE_VALUES[0];},set:function(value){value=SHUFFLE_VALUES.indexOf(value)!==-1?value:SHUFFLE_VALUES[0];this.setAttribute('shuffle',value);}});Object.defineProperty(proto,'overlayVisible',{get:function(){return this.els.container.classList.contains('show-overlay');},set:function(value){var overlayVisible=!!value;clearTimeout(this._hideOverlayTimeout);if(overlayVisible){this.els.container.classList.add('show-overlay');this._hideOverlayTimeout=setTimeout(()=>{this.overlayVisible=false;},HIDE_OVERLAY_TIMEOUT);}
|
||||
else{this.els.container.classList.remove('show-overlay');}}});try{window.MusicArtwork=document.registerElement('music-artwork',{prototype:proto});}catch(e){if(e.name!=='NotSupportedError'){throw e;}}})(window);
|
||||
Loading…
Reference in a new issue