secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Slimmer but more useful queue current_track

Browse Source
This commit is contained in:
James Barnsley
2019-08-09 14:08:57 +12:00
parent a94f5c2362
commit 88a88bd2a5
12 changed files with 257 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
mopidy_iris/static/app.css
View File

@ -4271,21 +4271,41 @@ select {
opacity: 0.15; }
.thumbnail {
position: relative;
z-index: 1;
perspective: 100px;
width: 100%;
max-width: 300px;
position: relative; }
max-width: 300px; }
.thumbnail__image {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
position: relative;
z-index: 2;
width: 100%;
padding-bottom: 100%;
position: relative;
background-repeat: no-repeat;
background-color: #1d1d1d;
background-position: 50% 50%;
background-size: cover;
border-radius: 3px;
z-index: 2; }
border-radius: 3px; }
.light-theme .thumbnail__image {
background-color: #f4f2f0; }
.thumbnail__image--glow {
-webkit-filter: blur(10px);
filter: blur(10px);
position: absolute;
z-index: 1;
top: 30%;
right: 30px;
left: 30px;
padding-bottom: 70%;
width: auto;
height: auto;
opacity: 0.3;
transform: rotateX(4deg);
mix-blend-mode: multiply; }
.thumbnail__zoom {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
@ -4512,10 +4532,6 @@ select {
left: 0;
margin-top: -3px; }
.slider__track__progress {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
position: absolute;
background: #08d58f;
pointer-events: none;
@ -4752,6 +4768,11 @@ select {
bottom: 2px;
left: 60px;
right: 60px; }
.playback-controls section.progress .slider__track__progress {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear; }
.playback-controls section.progress .current {
font-size: 11px;
position: absolute;
@ -5147,11 +5168,14 @@ select {
.sidebar__menu__section__title {
padding-bottom: 2px; } }
.grid, .grid * {
-webkit-backface-visibility: hidden; }
.grid__item {
display: inline-block;
position: relative !important;
display: inline-block !important;
vertical-align: top;
border-bottom: 0 !important;
position: relative;
cursor: pointer; }
.grid__item__wrapper {
display: inline-block; }
@ -5175,9 +5199,17 @@ select {
color: #888888; }
.grid__item__secondary .source {
padding-right: 6px; }
.grid__item:hover .thumbnail {
opacity: 0.75; }
.grid__item:hover .thumbnail__image {
transform: scale(1.01); }
.grid__item:hover .thumbnail__image--glow {
-webkit-filter: blur(20px);
filter: blur(20px);
transform: rotateX(6deg); }
.grid__item:active, .grid__item:focus {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
-moz-transform: scale(0.98);
-webkit-transform: scale(0.98);
transform: scale(0.98); }
@ -6851,40 +6883,45 @@ main .track-view {
height: 60vh; }
.queue-view .current-track {
text-align: center;
padding: 40px 0 60px; }
.queue-view .current-track .artwork {
padding: 40px 0 60px;
display: flex;
align-items: center;
justify-content: center; }
.queue-view .current-track__artwork {
position: relative;
margin: 0 auto;
width: 60%;
max-width: 60vh;
text-align: right;
display: block;
border: 0 !important;
z-index: 1; }
.queue-view .current-track .artwork .thumbnail {
margin: 0 auto;
max-width: 100%; }
.queue-view .current-track .artwork.radio-enabled .thumbnail {
z-index: 1;
width: 48%;
margin-right: 2%; }
.queue-view .current-track__artwork .thumbnail {
width: 30vh;
display: inline-block; }
.queue-view .current-track__artwork--radio-enabled .thumbnail {
box-sizing: border-box; }
.queue-view .current-track .artwork.radio-enabled .radio-overlay {
.queue-view .current-track__artwork--radio-enabled .radio-overlay {
position: absolute;
top: -15%;
left: -15%;
width: 130%;
height: 130%;
z-index: 2; }
.queue-view .current-track .title {
font-size: 18px;
padding-top: 30px;
.queue-view .current-track__details {
width: 48%;
margin-left: 2%; }
.queue-view .current-track__title {
font-size: 1.4rem;
position: relative;
z-index: 2; }
.queue-view .current-track .artist-sentence {
padding-top: 10px;
.queue-view .current-track__artists {
display: block;
font-size: 18px;
font-size: 1.4rem;
opacity: 0.5;
position: relative;
z-index: 2; }
.queue-view .current-track__added {
padding-top: 2rem; }
@media (max-width: 799px) {
.queue-view .current-track {
padding-bottom: 20px; }

2
mopidy_iris/static/app.css.map
View File

File diff suppressed because one or more lines are too long

88
mopidy_iris/static/app.js
View File

@ -58243,7 +58243,7 @@ var GridItem = function (_React$Component) {
onContextMenu: function onContextMenu(e) {
return _this2.onContextMenu(e);
} },
_react2.default.createElement(_Thumbnail2.default, { size: 'medium', className: 'grid__item__thumbnail', images: images }),
_react2.default.createElement(_Thumbnail2.default, { glow: true, size: 'medium', className: 'grid__item__thumbnail', images: images }),
_react2.default.createElement(
'div',
{ className: 'grid__item__name' },
@ -62537,6 +62537,7 @@ exports.default = (0, _react.memo)(function (props) {
'div',
{ className: class_name },
_react2.default.createElement('div', { className: 'thumbnail__image', style: { backgroundImage: 'url("' + (image ? image : '/iris/assets/no-image.svg') + '")' } }),
props.glow && image && _react2.default.createElement('div', { className: 'thumbnail__image thumbnail__image--glow', style: { backgroundImage: 'url("' + image + '")' } }),
zoom_icon
);
});
@ -80140,7 +80141,7 @@ var Queue = function (_React$Component) {
return _react2.default.createElement(
_URILink2.default,
{
className: this.props.radio_enabled ? 'artwork radio-enabled' : 'artwork',
className: 'current-track__artwork artwork ' + (this.props.radio_enabled ? 'current-track__artwork--radio-enabled' : ''),
type: 'album',
uri: uri },
this.props.radio_enabled ? _react2.default.createElement('img', { className: 'radio-overlay', src: '/iris/assets/radio-overlay.png' }) : null,
@ -80251,6 +80252,60 @@ var Queue = function (_React$Component) {
)
);
var added = null;
if (current_track && current_track.added_from && current_track.added_by) {
var type = current_track.added_from ? helpers.uriType(current_track.added_from) : null;
switch (type) {
case "discover":
var link = _react2.default.createElement(
_URILink2.default,
{ type: 'recommendations', uri: helpers.getFromUri('seeds', current_track.added_from) },
'discover'
);
break;
case "browse":
var link = _react2.default.createElement(
_URILink2.default,
{ type: 'browse', uri: current_track.added_from.replace("iris:browse:", "") },
'browse'
);
break;
case "search":
var link = _react2.default.createElement(
_URILink2.default,
{ type: 'search', uri: current_track.added_from.replace("iris:", "") },
'search'
);
break;
default:
var link = _react2.default.createElement(
_URILink2.default,
{ type: type, uri: current_track.added_from },
type
);
}
added = _react2.default.createElement(
'div',
{ className: 'current-track__added' },
'Added by ',
current_track.added_by,
' from ',
link
);
} else if (current_track && current_track.added_by) {
added = _react2.default.createElement(
'div',
{ className: 'current-track__added' },
'Added by ',
current_track.added_by
);
}
return _react2.default.createElement(
'div',
{ className: 'view queue-view preserve-3d' },
@ -80270,18 +80325,23 @@ var Queue = function (_React$Component) {
this.renderArtwork(current_track_image),
_react2.default.createElement(
'div',
{ className: 'title' },
current_track ? _react2.default.createElement(
_URILink2.default,
{ type: 'track', uri: current_track.uri },
current_track.name
) : _react2.default.createElement(
'span',
null,
'-'
)
),
current_track ? _react2.default.createElement(_ArtistSentence2.default, { artists: current_track.artists }) : _react2.default.createElement(_ArtistSentence2.default, null)
{ className: 'current-track__details' },
_react2.default.createElement(
'div',
{ className: 'current-track__title' },
current_track ? _react2.default.createElement(
_URILink2.default,
{ type: 'track', uri: current_track.uri },
current_track.name
) : _react2.default.createElement(
'span',
null,
'-'
)
),
current_track ? _react2.default.createElement(_ArtistSentence2.default, { className: 'current-track__artists', artists: current_track.artists }) : _react2.default.createElement(_ArtistSentence2.default, { className: 'current-track__artists' }),
added
)
),
_react2.default.createElement(
'section',

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
src/js/components/GridItem.js
View File

@ -125,7 +125,7 @@ export default class GridItem extends React.Component{
to={link}
onClick={e => helpers.scrollTo()}
onContextMenu={e => this.onContextMenu(e)}>
<Thumbnail size="medium" className="grid__item__thumbnail" images={images} />
<Thumbnail glow size="medium" className="grid__item__thumbnail" images={images} />
<div className="grid__item__name">
{item.name ? item.name : <span className="opaque-text">{item.uri}</span>}
</div>

1
src/js/components/Thumbnail.js
View File

@ -57,6 +57,7 @@ export default memo((props) => {
return (
<div className={class_name}>
<div className="thumbnail__image" style={{backgroundImage: 'url("'+(image ? image : '/iris/assets/no-image.svg')+'")'}}></div>
{props.glow && image && <div className="thumbnail__image thumbnail__image--glow" style={{backgroundImage: 'url("'+image+'")'}}></div>}
{zoom_icon}
</div>
);

49
src/js/views/Queue.js
View File

@ -115,7 +115,7 @@ class Queue extends React.Component {
}
return (
<URILink
className={this.props.radio_enabled ? 'artwork radio-enabled' : 'artwork'}
className={`current-track__artwork artwork ${this.props.radio_enabled ? 'current-track__artwork--radio-enabled' : ''}`}
type="album"
uri={uri}>
{this.props.radio_enabled ? <img className="radio-overlay" src="/iris/assets/radio-overlay.png" /> : null}
@ -194,6 +194,41 @@ class Queue extends React.Component {
</span>
)
let added = null;
if (current_track && current_track.added_from && current_track.added_by){
var type = (current_track.added_from ? helpers.uriType(current_track.added_from) : null);
switch (type){
case "discover":
var link = <URILink type="recommendations" uri={helpers.getFromUri('seeds',current_track.added_from)}>discover</URILink>
break;
case "browse":
var link = <URILink type="browse" uri={current_track.added_from.replace("iris:browse:","")}>browse</URILink>
break;
case "search":
var link = <URILink type="search" uri={current_track.added_from.replace("iris:","")}>search</URILink>
break;
default:
var link = <URILink type={type} uri={current_track.added_from}>{type}</URILink>;
}
added = (
<div className="current-track__added">
Added by {current_track.added_by} from {link}
</div>
);
} else if (current_track && current_track.added_by){
added = (
<div className="current-track__added">
Added by {current_track.added_by}
</div>
);
}
return (
<div className="view queue-view preserve-3d">
<Header options={options} uiActions={this.props.uiActions}>
@ -205,10 +240,16 @@ class Queue extends React.Component {
<div className="current-track">
{this.renderArtwork(current_track_image)}
<div className="title">
{current_track ? <URILink type="track" uri={current_track.uri}>{current_track.name}</URILink> : <span>-</span>}
<div className="current-track__details">
<div className="current-track__title">
{current_track ? <URILink type="track" uri={current_track.uri}>{current_track.name}</URILink> : <span>-</span>}
</div>
{current_track ? <ArtistSentence className="current-track__artists" artists={current_track.artists} /> : <ArtistSentence className="current-track__artists" />}
{added}
</div>
{current_track ? <ArtistSentence artists={current_track.artists} /> : <ArtistSentence />}
</div>
<section className="list-wrapper">

20
src/scss/components/_grid.scss
View File

@ -1,11 +1,15 @@
.grid {
&, * {
-webkit-backface-visibility: hidden;
}
&__item {
display: inline-block;
position: relative !important;
display: inline-block !important;
vertical-align: top;
border-bottom: 0 !important;
position: relative;
cursor: pointer;
&__wrapper {
@ -33,14 +37,22 @@
}
}
&:hover{
&:hover {
.thumbnail {
opacity: 0.75;
&__image {
transform: scale(1.01);
&--glow {
@include blur(20px);
transform: rotateX(6deg);
}
}
}
}
&:active,
&:focus {
@include noanimate();
-moz-transform: scale(0.98);
-webkit-transform: scale(0.98);
transform: scale(0.98);

24
src/scss/components/_images.scss
View File

@ -1,24 +1,42 @@
.thumbnail {
position: relative;
z-index: 1;
perspective: 100px;
width: 100%;
max-width: 300px;
position: relative;
&__image {
@include animate(0.1s);
position: relative;
z-index: 2;
width: 100%;
padding-bottom: 100%;
position: relative;
background-repeat: no-repeat;
background-color: lighten(colour(dark_grey), 2%);
background-position: 50% 50%;
background-size: cover;
border-radius: 3px;
z-index: 2;
.light-theme & {
background-color: colour(faint_grey);
}
&--glow {
@include blur(10px);
position: absolute;
z-index: 1;
top: 30%;
right: 30px;
left: 30px;
padding-bottom: 70%;
width: auto;
height: auto;
opacity: 0.3;
transform: rotateX(4deg);
mix-blend-mode: multiply;
}
}
&__zoom {

6
src/scss/components/_playback-controls.scss
View File

@ -212,6 +212,12 @@
bottom: 2px;
left: 60px;
right: 60px;
&__track {
&__progress {
@include animate(0.2s, linear);
}
}
}
.current {

1
src/scss/components/_slider.scss
View File

@ -51,7 +51,6 @@
margin-top: -3px;
&__progress {
@include animate(0.2s, linear);
position: absolute;
background: colour(turquoise);
pointer-events: none;

37
src/scss/views/_queue.scss
View File

@ -6,24 +6,26 @@
}
.current-track {
text-align: center;
padding: 40px 0 60px;
display: flex;
align-items: center;
justify-content: center;
.artwork {
&__artwork {
position: relative;
margin: 0 auto;
width: 60%;
max-width: 60vh;
text-align: right;
display: block;
border: 0 !important;
z-index: 1;
width: 48%;
margin-right: 2%;
.thumbnail {
margin: 0 auto;
max-width: 100%;
width: 30vh;
display: inline-block;
}
&.radio-enabled {
&--radio-enabled {
.thumbnail {
box-sizing: border-box;
}
@ -39,22 +41,29 @@
}
}
.title {
font-size: 18px;
padding-top: 30px;
&__details {
width: 48%;
margin-left: 2%;
}
&__title {
font-size: 1.4rem;
position: relative;
z-index: 2;
}
.artist-sentence {
padding-top: 10px;
&__artists {
display: block;
font-size: 18px;
font-size: 1.4rem;
opacity: 0.5;
position: relative;
z-index: 2;
}
&__added {
padding-top: 2rem;
}
@include responsive($bp_medium){
padding-bottom: 20px;