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

Converting playback bar to flexbox

Browse Source
This commit is contained in:
James Barnsley
2020-04-22 21:07:20 +12:00
parent 26c365a9a3
commit bf9e14012a
9 changed files with 255 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

318
mopidy_iris/static/app.css
View File

@ -2733,7 +2733,7 @@ main {
position: absolute;
top: 0;
left: 0;
bottom: 60px;
bottom: 50px;
right: 0;
padding-left: 220px;
perspective: 1000px;
@ -4588,7 +4588,7 @@ select {
background: rgba(0, 0, 0, 0.2);
border-radius: 2px;
height: 4px;
top: 42%;
top: 50%;
right: 0;
left: 0;
margin-top: -3px; }
@ -4664,26 +4664,32 @@ select {
bottom: 0;
right: 0;
left: 0;
height: 60px;
transform-style: preserve-3d;
border-left: 230px solid transparent; }
.dark-theme .playback-controls {
background: #383734;
color: #FFFFFF;
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.6);
border-color: #383734; }
.light-theme .playback-controls {
background: #FFFFFF;
color: #121212;
border-color: #FFFFFF;
box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.1); }
.playback-controls .current-track {
display: flex;
flex-flow: row;
align-items: center;
align-content: center; }
.playback-controls__background {
height: 100%;
width: 100%;
position: absolute;
bottom: 0;
z-index: -1; }
.dark-theme .playback-controls {
color: #FFFFFF; }
.dark-theme .playback-controls__background {
background: #383734;
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.6); }
.light-theme .playback-controls {
color: #121212; }
.light-theme .playback-controls__background {
background: #FFFFFF;
box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.1); }
.playback-controls .current-track {
width: 210px;
left: -230px;
padding-right: 20px;
z-index: 1;
text-decoration: none; }
text-decoration: none;
display: flex; }
@keyframes slide_left {
0% {
@ -4720,7 +4726,6 @@ select {
.playback-controls .current-track__transition--next {
animation-name: slide_left; } }
.playback-controls .current-track .thumbnail {
float: left;
cursor: pointer;
width: 44px;
margin: 8px;
@ -4768,7 +4773,8 @@ select {
opacity: 1;
line-height: 1.1rem;
font-size: 0.9rem;
padding-top: 1.05rem; }
padding-top: 1.05rem;
min-width: 0; }
.playback-controls .current-track .text .title {
white-space: nowrap;
overflow: hidden;
@ -4840,155 +4846,139 @@ select {
color: #08d58f !important; }
.playback-controls .control:hover, .playback-controls .control:focus {
opacity: 1; }
.playback-controls section {
position: absolute;
bottom: 10px; }
.playback-controls section.playback {
bottom: 7px;
left: 0;
width: 10rem; }
.playback-controls section.playback .control {
padding-left: 4px;
padding-right: 4px; }
.playback-controls section.playback .control .icon {
font-size: 1.3rem; }
.playback-controls section.playback .control.play {
margin-bottom: -0.8rem; }
.light-theme .playback-controls section.playback .control.play {
color: #08d58f; }
.playback-controls section.playback .control.play .icon {
font-size: 3rem; }
.playback-controls section.progress {
bottom: 13px;
left: 10rem;
right: 25rem;
padding-left: 20px;
padding-right: 20px; }
.playback-controls section.progress .slider {
position: absolute;
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;
bottom: 6px;
left: 0;
width: 50px;
text-align: right; }
.playback-controls section.progress .total {
font-size: 11px;
position: absolute;
bottom: 6px;
right: 0;
width: 50px; }
.playback-controls section.settings {
right: 14rem;
width: 10rem;
text-align: center; }
.playback-controls section.volume {
right: 2rem;
width: 10rem;
font-size: 18px; }
.playback-controls section.volume .slider__wrapper {
position: absolute;
bottom: 6px;
right: 0;
left: 30px; }
.playback-controls section.triggers {
.playback-controls section.playback {
display: flex;
align-items: center; }
.playback-controls section.playback .control {
padding-left: 4px;
padding-right: 4px; }
.playback-controls section.playback .control .icon {
font-size: 1.3rem; }
.light-theme .playback-controls section.playback .control.play {
color: #08d58f; }
.playback-controls section.playback .control.play .icon {
font-size: 3rem; }
.playback-controls section.progress {
flex-grow: 1;
display: flex;
align-items: center; }
.playback-controls section.progress .slider {
flex-grow: 1; }
.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 .time {
font-size: 11px;
width: 40px; }
.playback-controls section.progress .time--current {
text-align: right;
padding-right: 10px; }
.playback-controls section.progress .time--total {
padding-left: 10px; }
.playback-controls section.settings {
text-align: center;
padding: 0 30px; }
.playback-controls section.volume {
font-size: 18px;
width: 10rem;
padding-right: 30px;
display: flex;
align-items: center; }
.playback-controls section.volume .slider__wrapper {
flex-grow: 1; }
.playback-controls section.triggers {
display: none; }
@media (max-width: 799px) {
.playback-controls--touch-enabled .control.next {
display: none; }
@media (max-width: 799px) {
.playback-controls {
border-left: none; }
.playback-controls--touch-enabled .control.next {
display: none; }
.playback-controls .current-track {
width: auto;
bottom: 0.65rem;
left: 80px;
right: 80px;
text-align: center;
font-size: 0.9rem;
line-height: 1.2em;
margin: auto; }
.playback-controls .current-track .title,
.playback-controls .current-track .artist {
.playback-controls .current-track {
order: 2;
flex-grow: 1;
text-align: center;
font-size: 0.9rem;
line-height: 1.2em;
margin: 0;
padding: 0;
display: flex; }
.playback-controls .current-track .text {
padding: 0;
flex-grow: 1; }
.playback-controls .current-track .text .title,
.playback-controls .current-track .text .artist {
padding-top: 0; }
.playback-controls .current-track .thumbnail {
display: none; }
.playback-controls section.playback {
left: 0;
width: 6rem; }
.playback-controls section.playback .control.play {
margin-bottom: -1rem; }
.playback-controls section.playback .control.previous {
display: none; }
.playback-controls section.playback .control.stop {
display: none; }
.playback-controls section.settings {
.playback-controls .current-track .thumbnail-wrapper {
display: none; }
.playback-controls section.volume {
.playback-controls section.playback {
order: 1;
width: 6rem; }
.playback-controls section.playback .control.play {
padding: 4px; }
.playback-controls section.playback .control.previous, .playback-controls section.playback .control.stop {
display: none; }
.playback-controls section.progress {
display: none; }
.playback-controls section.triggers {
display: block;
right: 10px; }
.playback-controls section.triggers .icon {
font-size: 1.2rem; } }
@media only screen and (max-width: 799px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 799px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 799px) and (-o-min-device-pixel-ratio: 2), only screen and (max-width: 799px) and (min-device-pixel-ratio: 2), only screen and (max-width: 799px) and (min-resolution: 192dpi), only screen and (max-width: 799px) and (min-resolution: 2dppx) {
.playback-controls section.triggers {
bottom: 4px; }
.playback-controls section.triggers .icon {
font-size: 1.4rem; } }
@media (max-width: 799px) {
.playback-controls section.triggers .sidebar-toggle.open {
opacity: 1 !important; }
.playback-controls section.triggers .sidebar-toggle.open:before {
background: rgba(0, 0, 0, 0.8);
content: "";
display: block;
position: fixed;
bottom: 0;
right: 0;
width: 100vw;
height: 100vh;
z-index: 99; }
.playback-controls--expanded {
height: 140px;
max-height: 100%; }
.playback-controls--expanded section.settings {
display: block;
right: 0;
bottom: 90px;
padding-right: 10px;
text-align: right;
width: 100px; }
.playback-controls--expanded section.volume {
width: auto;
display: block;
right: 100px;
left: 10px;
bottom: 88px; } }
@media only screen and (max-width: 799px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 799px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 799px) and (-o-min-device-pixel-ratio: 2), only screen and (max-width: 799px) and (min-device-pixel-ratio: 2), only screen and (max-width: 799px) and (min-resolution: 192dpi), only screen and (max-width: 799px) and (min-resolution: 2dppx) {
.playback-controls--expanded section.volume {
right: 115px; }
.playback-controls--expanded section.volume .slider__wrapper {
bottom: 9px; } }
@media (max-width: 799px) {
.playback-controls--expanded section.progress {
display: block;
bottom: 55px;
left: -15px;
right: -15px; } }
.playback-controls section.settings, .playback-controls section.volume, .playback-controls section.progress {
display: none; }
.playback-controls section.triggers {
display: block;
width: 6rem;
order: 3;
text-align: center; }
.playback-controls section.triggers .icon {
font-size: 1.2rem; } }
@media only screen and (max-width: 799px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 799px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 799px) and (-o-min-device-pixel-ratio: 2), only screen and (max-width: 799px) and (min-device-pixel-ratio: 2), only screen and (max-width: 799px) and (min-resolution: 192dpi), only screen and (max-width: 799px) and (min-resolution: 2dppx) {
.playback-controls .control {
padding: 14px 8px; } }
.playback-controls section.triggers {
bottom: 4px; }
.playback-controls section.triggers .icon {
font-size: 1.4rem; } }
@media (max-width: 799px) {
.playback-controls section.triggers .sidebar-toggle.open {
opacity: 1 !important; }
.playback-controls section.triggers .sidebar-toggle.open:before {
background: rgba(0, 0, 0, 0.8);
content: "";
display: block;
position: fixed;
bottom: 0;
right: 0;
width: 100vw;
height: 100vh;
z-index: 99; }
.playback-controls--expanded {
max-height: 100%; }
.playback-controls--expanded .playback-controls__background {
height: 230px; }
.playback-controls--expanded section.settings {
position: absolute;
display: flex;
right: 0;
bottom: 90px;
padding-right: 10px;
text-align: right;
width: 100px; }
.playback-controls--expanded section.volume {
position: absolute;
width: auto;
display: flex;
right: 100px;
left: 10px;
bottom: 88px; } }
@media only screen and (max-width: 799px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 799px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 799px) and (-o-min-device-pixel-ratio: 2), only screen and (max-width: 799px) and (min-device-pixel-ratio: 2), only screen and (max-width: 799px) and (min-resolution: 192dpi), only screen and (max-width: 799px) and (min-resolution: 2dppx) {
.playback-controls--expanded section.volume {
right: 115px; }
.playback-controls--expanded section.volume .slider__wrapper {
bottom: 9px; } }
@media (max-width: 799px) {
.playback-controls--expanded section.progress {
position: absolute;
display: flex;
bottom: 60px;
left: 0;
right: 0; } }
@media only screen and (max-width: 799px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 799px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 799px) and (-o-min-device-pixel-ratio: 2), only screen and (max-width: 799px) and (min-device-pixel-ratio: 2), only screen and (max-width: 799px) and (min-resolution: 192dpi), only screen and (max-width: 799px) and (min-resolution: 2dppx) {
.playback-controls .control {
padding: 14px 8px; } }
.output-control {
position: relative; }

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

File diff suppressed because one or more lines are too long

11
mopidy_iris/static/app.js
View File

@ -69165,6 +69165,7 @@ var PlaybackControls = function (_React$Component) {
return _react2.default.createElement(
'div',
{ className: 'playback-controls' + (expanded ? ' playback-controls--expanded' : '') + (touch_enabled ? ' playback-controls--touch-enabled' : '') },
_react2.default.createElement('div', { className: 'playback-controls__background' }),
_react2.default.createElement(_Stream2.default, null),
next_track && next_track.images ? _react2.default.createElement(_Thumbnail2.default, { className: 'hide', size: 'large', images: next_track.images }) : null,
this.state.transition_track && this.state.transition_direction ? _react2.default.createElement(
@ -69241,15 +69242,15 @@ var PlaybackControls = function (_React$Component) {
_react2.default.createElement(
'section',
{ className: 'progress' },
_react2.default.createElement(_ProgressSlider2.default, null),
_react2.default.createElement(
'span',
{ className: 'current' },
'div',
{ className: 'time time--current' },
time_position ? _react2.default.createElement(_Dater2.default, { type: 'length', data: time_position }) : '-'
),
_react2.default.createElement(_ProgressSlider2.default, null),
_react2.default.createElement(
'span',
{ className: 'total' },
'div',
{ className: 'time time--total' },
current_track ? _react2.default.createElement(_Dater2.default, { type: 'length', data: current_track.duration }) : '-'
)
),

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

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -100,7 +100,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1587373232";
var build = "1587543156";
var version = "3.47.0";
// Construct the script tag

10
src/js/components/PlaybackControls.js
View File

@ -184,6 +184,8 @@ class PlaybackControls extends React.Component {
return (
<div className={`playback-controls${expanded ? ' playback-controls--expanded' : ''}${touch_enabled ? ' playback-controls--touch-enabled' : ''}`}>
<div className="playback-controls__background" />
<Stream />
{next_track && next_track.images ? <Thumbnail className="hide" size="large" images={next_track.images} /> : null}
@ -233,9 +235,13 @@ class PlaybackControls extends React.Component {
</section>
<section className="progress">
<div className="time time--current">
{time_position ? <Dater type="length" data={time_position} /> : '-'}
</div>
<ProgressSlider />
<span className="current">{ time_position ? <Dater type="length" data={time_position} /> : '-' }</span>
<span className="total">{ current_track ? <Dater type="length" data={current_track.duration} /> : '-' }</span>
<div className="time time--total">
{current_track ? <Dater type="length" data={current_track.duration} /> : '-'}
</div>
</section>
<section className="settings">

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

@ -4,31 +4,43 @@
bottom: 0;
right: 0;
left: 0;
height: 60px;
transform-style: preserve-3d;
border-left: 230px solid transparent;
display: flex;
flex-flow: row;
align-items: center;
align-content: center;
&__background {
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
}
.dark-theme & {
background: colour(grey);
color: colour(white);
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.6);
border-color: colour(grey);
&__background {
background: colour(grey);
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.6);
}
}
.light-theme & {
background: colour(white);
color: colour(darkest_grey);
border-color: colour(white);
box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.1);
&__background {
background: colour(white);
box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.1);
}
}
.current-track {
position: absolute;
bottom: 0;
width: 210px;
left: -230px;
padding-right: 20px;
z-index: 1;
text-decoration: none;
display: flex;
@keyframes slide_left {
0% {
@ -80,7 +92,6 @@
}
.thumbnail {
float: left;
cursor: pointer;
width: 44px;
margin: 8px;
@ -136,6 +147,7 @@
line-height: 1.1rem;
font-size: 0.9rem;
padding-top: 1.05rem;
min-width: 0;
.title {
@include one_line_text;
@ -186,14 +198,9 @@
}
section {
position: absolute;
bottom: 10px;
&.playback {
bottom: 7px;
left: 0;
width: 10rem;
display: flex;
align-items: center;
.control {
padding-left: 4px;
padding-right: 4px;
@ -203,8 +210,6 @@
}
&.play {
margin-bottom: -0.8rem;
.light-theme & {
color: colour(turquoise);
}
@ -217,18 +222,12 @@
}
&.progress {
bottom: 13px;
left: 10rem;
right: 25rem;
padding-left: 20px;
padding-right: 20px;
flex-grow: 1;
display: flex;
align-items: center;
.slider {
position: absolute;
bottom: 2px;
left: 60px;
right: 60px;
flex-grow: 1;
&__track {
&__progress {
@include animate(0.2s, linear);
@ -236,40 +235,35 @@
}
}
.current {
.time {
font-size: 11px;
position: absolute;
bottom: 6px;
left: 0;
width: 50px;
text-align: right;
}
width: 40px;
.total {
font-size: 11px;
position: absolute;
bottom: 6px;
right: 0;
width: 50px;
&--current {
text-align: right;
padding-right: 10px;
}
&--total {
padding-left: 10px;
}
}
}
&.settings {
right: 14rem;
width: 10rem;
text-align: center;
padding: 0 30px;
}
&.volume {
right: 2rem;
width: 10rem;
font-size: 18px;
width: 10rem;
padding-right: 30px;
display: flex;
align-items: center;
.slider__wrapper {
position: absolute;
bottom: 6px;
right: 0;
left: 30px;
flex-grow: 1;
}
}
@ -279,67 +273,63 @@
}
@include responsive($bp_medium) {
border-left: none;
&--touch-enabled .control.next {
display: none;
}
.current-track {
width: auto;
bottom: 0.65rem;
left: 80px;
right: 80px;
order: 2;
flex-grow: 1;
text-align: center;
font-size: 0.9rem;
line-height: 1.2em;
margin: auto;
margin: 0;
padding: 0;
display: flex;
.title,
.artist {
padding-top: 0;
.text {
padding: 0;
flex-grow: 1;
.title,
.artist {
padding-top: 0;
}
}
.thumbnail {
.thumbnail-wrapper {
display: none;
}
}
section {
&.playback {
left: 0;
order: 1;
width: 6rem;
.control {
&.play {
margin-bottom: -1rem;
}
&.previous {
display: none;
padding: 4px;
}
&.previous,
&.stop {
display: none;
}
}
}
&.settings {
display: none;
}
&.volume {
display: none;
}
&.settings,
&.volume,
&.progress {
display: none;
}
&.triggers {
display: block;
right: 10px;
width: 6rem;
order: 3;
text-align: center;
.icon {
font-size: 1.2rem;
@ -372,12 +362,16 @@
}
&--expanded {
height: 140px;
max-height: 100%;
.playback-controls__background {
height: 230px;
}
section {
&.settings {
display: block;
position: absolute;
display: flex;
right: 0;
bottom: 90px;
padding-right: 10px;
@ -386,8 +380,9 @@
}
&.volume {
position: absolute;
width: auto;
display: block;
display: flex;
right: 100px;
left: 10px;
bottom: 88px;
@ -402,10 +397,11 @@
}
&.progress {
display: block;
bottom: 55px;
left: -15px;
right: -15px;
position: absolute;
display: flex;
bottom: 60px;
left: 0;
right: 0;
}
}
}

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

@ -45,7 +45,7 @@
background: rgba(0,0,0,0.2);
border-radius: 2px;
height: 4px;
top: 42%;
top: 50%;
right: 0;
left: 0;
margin-top: -3px;

2
src/scss/global/_core.scss
View File

@ -93,7 +93,7 @@ main {
position: absolute;
top: 0;
left: 0;
bottom: 60px;
bottom: 50px;
right: 0;
padding-left: 220px;
perspective: 1000px;