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

Slider progress bar

Browse Source
This commit is contained in:
James Barnsley
2016-11-08 16:57:44 +13:00
parent 343a12804a
commit 04e8c7cdf5
13 changed files with 195 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
mopidy_iris/static/app.css
View File

@ -3285,62 +3285,6 @@ label .input .text {
padding: 10px 14px;
}
.slider {
position: relative;
cursor: pointer;
}
.slider .track {
position: absolute;
background: rgba(255, 255, 255, 0.3);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.slider .track .progress {
position: absolute;
background: #08d58f;
pointer-events: none;
left: 0;
}
.slider.horizontal {
margin: 10px 0;
height: 20px;
}
.slider.horizontal .track {
height: 2px;
top: 9px;
right: 0;
left: 0;
}
.slider.horizontal .track .progress {
top: 0;
height: 100%;
}
.slider.vertical {
margin: 10px 0;
width: 20px;
height: 100%;
}
.slider.vertical .track {
width: 2px;
top: 0;
bottom: 0;
left: 9px;
}
.slider.vertical .track .progress {
bottom: 0;
width: 100%;
}
.context-menu {
position: fixed;
left: 0;
@ -3437,6 +3381,62 @@ label .input .text {
padding: 10px 15px 0 15px;
}
.slider {
position: relative;
cursor: pointer;
}
.slider .track {
position: absolute;
background: rgba(255, 255, 255, 0.3);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.slider .track .progress {
position: absolute;
background: #08d58f;
pointer-events: none;
left: 0;
}
.slider.horizontal {
margin: 10px 0;
height: 20px;
}
.slider.horizontal .track {
height: 2px;
top: 9px;
right: 0;
left: 0;
}
.slider.horizontal .track .progress {
top: 0;
height: 100%;
}
.slider.vertical {
margin: 10px 0;
width: 20px;
height: 100%;
}
.slider.vertical .track {
width: 2px;
top: 0;
bottom: 0;
left: 9px;
}
.slider.vertical .track .progress {
bottom: 0;
width: 100%;
}
.player .current-track {
font-size: 16px;
text-transform: uppercase;
@ -4047,7 +4047,8 @@ main header h1 {
}
.queue-view .player .artwork,
.queue-view .player .controls {
.queue-view .player .controls,
.queue-view .player .slider {
display: block;
max-width: 400px;
margin: 0 auto;
@ -4066,9 +4067,14 @@ main header h1 {
}
.queue-view .player .current-track {
padding: 20px 0 0 0;
font-weight: 700;
}
.queue-view .player .slider .track {
background: rgba(0, 0, 0, 0.2);
}
.search-view .search-result-sections {
padding: 20px 20px 0;
}

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

File diff suppressed because one or more lines are too long

62
mopidy_iris/static/app.js
View File

@ -1456,6 +1456,7 @@
exports.setVolume = setVolume;
exports.seek = seek;
exports.getTimePosition = getTimePosition;
exports.setTimePosition = setTimePosition;
exports.getPlaylists = getPlaylists;
exports.getPlaylist = getPlaylist;
exports.getDirectory = getDirectory;
@ -1579,6 +1580,13 @@
};
}
function setTimePosition(time_position) {
return {
type: 'MOPIDY_TIMEPOSITION',
data: time_position
};
}
/**
* Asset-oriented actions
**/
@ -11432,7 +11440,7 @@
/* 101 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_RESULT__;var require;/* WEBPACK VAR INJECTION */(function(process) {/** @license MIT License (c) copyright 2010-2014 original author or authors */
var require;var __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(process) {/** @license MIT License (c) copyright 2010-2014 original author or authors */
/** @author Brian Cavalier */
/** @author John Hann */
@ -11890,27 +11898,28 @@
value: function componentDidMount() {
var _this2 = this;
if (this.props.mopidy.connected && this.props.mopidy.state == 'playing') {
this.setState({ animating: true });
var interval_counter = 0;
setInterval(function () {
if (_this2.props.mopidy.state == 'playing') {
// every 10 seconds get real position from Mopidy
if (interval_counter % 10 == 0) {
_this2.updateProgress();
} else {
var time_position = _this2.props.mopidy.time_position;
// only add 600ms every 1000ms as Mopidy's time tracker is a bit shit
_this2.props.mopidyActions.setTimePosition(time_position + 600);
}
setInterval(function () {
_this2.updateProgress();
}, 10000);
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (this.state.animating && nextProps.mopidy.state != 'playing') {
this.setState({ animating: false });
console.log('stop animating'); // doesn't work?
interval_counter++;
}
}, 1000);
}
}, {
key: 'updateProgress',
value: function updateProgress() {
if (this.props.mopidy.connected && this.props.mopidy.state == 'playing') {
this.setState({ animating: true });
this.props.mopidyActions.getTimePosition();
}
}
@ -11935,8 +11944,6 @@
value: function render() {
var _this3 = this;
var className = 'slider horizontal';
if (this.state.animating) className += ' animating';
var percent = 0;
if (this.props.mopidy.connected && typeof this.props.mopidy.current_tltrack !== 'undefined' && typeof this.props.mopidy.current_tltrack.track !== 'undefined') {
percent = this.props.mopidy.time_position / this.props.mopidy.current_tltrack.track.length;
@ -11946,7 +11953,7 @@
return _react2.default.createElement(
'div',
{ className: className, onClick: function onClick(e) {
{ className: 'slider horizontal', onClick: function onClick(e) {
return _this3.handleClick(e);
} },
_react2.default.createElement(
@ -18687,6 +18694,16 @@
'div',
{ className: 'player' },
artwork,
_react2.default.createElement(
'div',
{ className: 'current-track' },
_react2.default.createElement(
'div',
{ className: 'title' },
mopidy_track ? mopidy_track.track.name : null
),
mopidy_track ? _react2.default.createElement(_ArtistSentence2.default, { artists: mopidy_track.track.artists }) : null
),
_react2.default.createElement(
'div',
{ className: 'controls cf' },
@ -18727,16 +18744,7 @@
this.renderRepeatButton()
)
),
_react2.default.createElement(
'div',
{ className: 'current-track' },
_react2.default.createElement(
'div',
{ className: 'title' },
mopidy_track ? mopidy_track.track.name : null
),
mopidy_track ? _react2.default.createElement(_ArtistSentence2.default, { artists: mopidy_track.track.artists }) : null
)
_react2.default.createElement(_ProgressSlider2.default, null)
);
}
}]);

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

File diff suppressed because one or more lines are too long

11
src/js/components/FullPlayer.js
View File

@ -80,6 +80,11 @@ class FullPlayer extends React.Component{
{ artwork }
<div className="current-track">
<div className="title">{ mopidy_track ? mopidy_track.track.name : null }</div>
{ mopidy_track ? <ArtistSentence artists={ mopidy_track.track.artists } /> : null }
</div>
<div className="controls cf">
<div className="pull-left">
<a onClick={() => this.props.mopidyActions.previous()}>
@ -100,10 +105,8 @@ class FullPlayer extends React.Component{
</div>
</div>
<div className="current-track">
<div className="title">{ mopidy_track ? mopidy_track.track.name : null }</div>
{ mopidy_track ? <ArtistSentence artists={ mopidy_track.track.artists } /> : null }
</div>
<ProgressSlider />
</div>
);
}

27
src/js/components/ProgressSlider.js
View File

@ -17,26 +17,27 @@ class ProgressSlider extends React.Component{
}
componentDidMount(){
if( this.props.mopidy.connected && this.props.mopidy.state == 'playing' ){
this.setState({ animating: true })
}
var interval_counter = 0
setInterval(() => {
if( this.props.mopidy.state == 'playing' ){
// every 10 seconds get real position from Mopidy
if( interval_counter % 10 == 0 ){
this.updateProgress()
}, 10000);
}else{
var time_position = this.props.mopidy.time_position
// only add 600ms every 1000ms as Mopidy's time tracker is a bit shit
this.props.mopidyActions.setTimePosition( time_position + 600 )
}
componentWillReceiveProps( nextProps ){
if( this.state.animating && nextProps.mopidy.state != 'playing' ){
this.setState({ animating: false })
console.log('stop animating') // doesn't work?
interval_counter++
}
}, 1000);
}
updateProgress(){
if( this.props.mopidy.connected && this.props.mopidy.state == 'playing' ){
this.setState({ animating: true })
this.props.mopidyActions.getTimePosition()
}
}
@ -57,8 +58,6 @@ class ProgressSlider extends React.Component{
}
render(){
var className = 'slider horizontal'
if( this.state.animating ) className += ' animating'
var percent = 0
if( this.props.mopidy.connected && typeof(this.props.mopidy.current_tltrack) !== 'undefined' && typeof(this.props.mopidy.current_tltrack.track) !== 'undefined' ){
percent = this.props.mopidy.time_position / this.props.mopidy.current_tltrack.track.length
@ -67,7 +66,7 @@ class ProgressSlider extends React.Component{
}
return (
<div className={className} onClick={ (e) => this.handleClick(e) } >
<div className='slider horizontal' onClick={ (e) => this.handleClick(e) } >
<div className="track">
<div className="progress" style={{ width: (percent)+'%' }}></div>
</div>

19
src/js/services/keyboard/actions.js
View File

@ -1,19 +0,0 @@
/**
* Actions and Action Creators
**/
export function shiftKey( down ){
return {
type: 'SHIFT_KEY',
down: down
}
}
export function ctrlKey( down ){
return {
type: 'CTRL_KEY',
down: down
}
}

18
src/js/services/keyboard/reducer.js
View File

@ -1,18 +0,0 @@
export default function reducer(keyboard = {}, action){
console.log(action);
switch (action.type) {
case 'SHIFT_KEY':
return Object.assign({}, keyboard, { shift: action.down });
case 'CTRL_KEY':
return Object.assign({}, keyboard, { ctrl: action.down });
default:
return keyboard
}
}

7
src/js/services/mopidy/actions.js
View File

@ -112,6 +112,13 @@ export function getTimePosition(){
}
}
export function setTimePosition( time_position ){
return {
type: 'MOPIDY_TIMEPOSITION',
data: time_position
}
}
/**

1
src/scss/app.scss
View File

@ -11,6 +11,7 @@
@import 'components/images';
@import 'components/icon';
@import 'components/search-form';
@import 'components/slider';
@import 'components/player';
@import 'components/sidebar';
@import 'components/lists';

53
src/scss/components/_slider.scss Executable file
View File

@ -0,0 +1,53 @@
.slider {
position: relative;
cursor: pointer;
.track {
position: absolute;
background: rgba(255,255,255,0.3);
@include animate()
.progress {
position: absolute;
background: $turquoise;
pointer-events: none;
left: 0;
}
}
&.horizontal {
margin: 10px 0;
height: 20px;
.track {
height: 2px;
top: 9px;
right: 0;
left: 0;
.progress {
top: 0;
height: 100%;
}
}
}
&.vertical {
margin: 10px 0;
width: 20px;
height: 100%;
.track {
width: 2px;
top: 0;
bottom: 0;
left: 9px;
.progress {
bottom: 0;
width: 100%;
}
}
}
}

52
src/scss/global/_forms.scss
View File

@ -102,55 +102,3 @@ label {
}
}
.slider {
position: relative;
cursor: pointer;
.track {
position: absolute;
background: rgba(255,255,255,0.3);
@include animate()
.progress {
position: absolute;
background: $turquoise;
pointer-events: none;
left: 0;
}
}
&.horizontal {
margin: 10px 0;
height: 20px;
.track {
height: 2px;
top: 9px;
right: 0;
left: 0;
.progress {
top: 0;
height: 100%;
}
}
}
&.vertical {
margin: 10px 0;
width: 20px;
height: 100%;
.track {
width: 2px;
top: 0;
bottom: 0;
left: 9px;
.progress {
bottom: 0;
width: 100%;
}
}
}
}

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

@ -11,7 +11,8 @@
}
.artwork,
.controls {
.controls,
.slider {
display: block;
max-width: 400px;
margin: 0 auto;
@ -29,7 +30,14 @@
}
.current-track {
padding: 20px 0 0 0;
font-weight: 700;
}
.slider {
.track {
background: rgba(0,0,0,0.2);
}
}
}
}