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

Disabling touch_events in playbar, fixes #353

Browse Source
This commit is contained in:
James Barnsley
2019-08-18 16:51:22 +12:00
parent 42eb8b6f24
commit 491ef1fccd
10 changed files with 92 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
mopidy_iris/static/app.css
View File

@ -4788,6 +4788,8 @@ select {
@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;
@ -4804,10 +4806,10 @@ select {
display: none; }
.playback-controls section.playback {
left: 0;
width: 40px; }
width: 6rem; }
.playback-controls section.playback .control.play {
margin-bottom: -1rem; }
.playback-controls section.playback .control.previous, .playback-controls section.playback .control.next {
.playback-controls section.playback .control.previous {
display: none; }
.playback-controls section.playback .control.stop {
display: none; }
@ -5188,7 +5190,7 @@ select {
-webkit-filter: blur(20px);
filter: blur(20px);
transform: rotateX(6deg); }
.grid__item:active, .grid__item:focus {
.grid__item:active .thumbnail__image, .grid__item:focus .thumbnail__image {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;

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

File diff suppressed because one or more lines are too long

54
mopidy_iris/static/app.js
View File

@ -60377,15 +60377,24 @@ var PlaybackControls = function (_React$Component) {
value: function render() {
var _this7 = this;
var _props = this.props,
next_track = _props.next_track,
touch_enabled = _props.touch_enabled,
time_position = _props.time_position;
var _state = this.state,
current_track = _state.current_track,
expanded = _state.expanded;
var images = false;
if (this.state.current_track && this.state.current_track.images) {
images = this.state.current_track.images;
if (current_track && current_track.images) {
images = current_track.images;
}
return _react2.default.createElement(
'div',
{ className: this.state.expanded ? "playback-controls--expanded playback-controls" : "playback-controls" },
this.props.next_track && this.props.next_track.images ? _react2.default.createElement(_Thumbnail2.default, { className: 'hide', size: 'large', images: this.props.next_track.images }) : null,
{ className: 'playback-controls' + (expanded ? ' playback-controls--expanded' : '') + (touch_enabled ? ' playback-controls--touch-enabled' : '') },
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(
'div',
{
@ -60410,10 +60419,10 @@ var PlaybackControls = function (_React$Component) {
{
className: this.state.transition_track && this.state.transition_direction ? "current-track current-track--transitioning" : "current-track",
onTouchStart: function onTouchStart(e) {
return _this7.handleTouchStart(e);
return touch_enabled && _this7.handleTouchStart(e);
},
onTouchEnd: function onTouchEnd(e) {
return _this7.handleTouchEnd(e);
return touch_enabled && _this7.handleTouchEnd(e);
},
tabIndex: '-1' },
_react2.default.createElement(
@ -60427,7 +60436,7 @@ var PlaybackControls = function (_React$Component) {
_react2.default.createElement(
'div',
{ className: 'title' },
this.state.current_track ? this.state.current_track.name : _react2.default.createElement(
current_track ? current_track.name : _react2.default.createElement(
'span',
null,
'-'
@ -60436,7 +60445,7 @@ var PlaybackControls = function (_React$Component) {
_react2.default.createElement(
'div',
{ className: 'artist' },
this.state.current_track ? _react2.default.createElement(_ArtistSentence2.default, { artists: this.state.current_track.artists }) : _react2.default.createElement(_ArtistSentence2.default, null)
current_track ? _react2.default.createElement(_ArtistSentence2.default, { artists: current_track.artists }) : _react2.default.createElement(_ArtistSentence2.default, null)
)
)
),
@ -60466,12 +60475,12 @@ var PlaybackControls = function (_React$Component) {
_react2.default.createElement(
'span',
{ className: 'current' },
this.props.time_position ? _react2.default.createElement(_Dater2.default, { type: 'length', data: this.props.time_position }) : '-'
time_position ? _react2.default.createElement(_Dater2.default, { type: 'length', data: time_position }) : '-'
),
_react2.default.createElement(
'span',
{ className: 'total' },
this.state.current_track ? _react2.default.createElement(_Dater2.default, { type: 'length', data: this.state.current_track.duration }) : '-'
current_track ? _react2.default.createElement(_Dater2.default, { type: 'length', data: current_track.duration }) : '-'
)
),
_react2.default.createElement(
@ -60544,7 +60553,8 @@ var mapStateToProps = function mapStateToProps(state, ownProps) {
volume: state.mopidy.volume,
mute: state.mopidy.mute,
sidebar_open: state.ui.sidebar_open,
slim_mode: state.ui.slim_mode
slim_mode: state.ui.slim_mode,
touch_enabled: state.ui.playback_controls_touch_enabled
};
};
@ -77722,6 +77732,7 @@ var state = {
theme: 'dark',
smooth_scrolling_enabled: true,
hotkeys_enabled: true,
playback_controls_touch_enabled: true,
allow_reporting: true,
wide_scrollbar_enabled: false,
window_focus: true,
@ -81847,6 +81858,27 @@ var Settings = function (_React$Component) {
'Enable smooth scrolling'
)
),
_react2.default.createElement(
'label',
null,
_react2.default.createElement('input', {
type: 'checkbox',
name: 'playback_controls_touch_enabled',
checked: this.props.ui.playback_controls_touch_enabled,
onChange: function onChange(e) {
return _this2.props.uiActions.set({ playback_controls_touch_enabled: !_this2.props.ui.playback_controls_touch_enabled });
} }),
_react2.default.createElement(
'span',
{ className: 'label tooltip' },
'Enable touch events on play controls',
_react2.default.createElement(
'span',
{ className: 'tooltip__content' },
'Allows left- and right-swipe to change tracks'
)
)
),
_react2.default.createElement(
'label',
null,

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

File diff suppressed because one or more lines are too long

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

@ -220,15 +220,18 @@ class PlaybackControls extends React.Component{
}
render(){
const { next_track, touch_enabled, time_position } = this.props;
const { current_track, expanded } = this.state;
var images = false
if (this.state.current_track && this.state.current_track.images){
images = this.state.current_track.images
if (current_track && current_track.images){
images = current_track.images
}
return (
<div className={(this.state.expanded ? "playback-controls--expanded playback-controls" : "playback-controls")}>
<div className={`playback-controls${expanded ? ' playback-controls--expanded' : ''}${touch_enabled ? ' playback-controls--touch-enabled' : ''}`}>
{this.props.next_track && this.props.next_track.images ? <Thumbnail className="hide" size="large" images={this.props.next_track.images} /> : null}
{next_track && next_track.images ? <Thumbnail className="hide" size="large" images={next_track.images} /> : null}
{this.state.transition_track && this.state.transition_direction ? <div
className={"current-track current-track__transition current-track__transition--"+this.state.transition_direction}>
@ -244,18 +247,18 @@ class PlaybackControls extends React.Component{
<div
className={this.state.transition_track && this.state.transition_direction ? "current-track current-track--transitioning" : "current-track"}
onTouchStart={e => this.handleTouchStart(e)}
onTouchEnd={e => this.handleTouchEnd(e)}
onTouchStart={e => touch_enabled && this.handleTouchStart(e)}
onTouchEnd={e => touch_enabled && this.handleTouchEnd(e)}
tabIndex="-1">
<Link className="thumbnail-wrapper" to={'/kiosk-mode'} tabIndex="-1">
<Thumbnail size="small" images={images} />
</Link>
<div className="text">
<div className="title">
{this.state.current_track ? this.state.current_track.name : <span>-</span>}
{current_track ? current_track.name : <span>-</span>}
</div>
<div className="artist">
{this.state.current_track ? <ArtistSentence artists={this.state.current_track.artists} /> : <ArtistSentence />}
{current_track ? <ArtistSentence artists={current_track.artists} /> : <ArtistSentence />}
</div>
</div>
</div>
@ -272,8 +275,8 @@ class PlaybackControls extends React.Component{
<section className="progress">
<ProgressSlider />
<span className="current">{ this.props.time_position ? <Dater type="length" data={this.props.time_position} /> : '-' }</span>
<span className="total">{ this.state.current_track ? <Dater type="length" data={this.state.current_track.duration} /> : '-' }</span>
<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>
</section>
<section className="settings">
@ -329,7 +332,8 @@ const mapStateToProps = (state, ownProps) => {
volume: state.mopidy.volume,
mute: state.mopidy.mute,
sidebar_open: state.ui.sidebar_open,
slim_mode: state.ui.slim_mode
slim_mode: state.ui.slim_mode,
touch_enabled: state.ui.playback_controls_touch_enabled
}
}

1
src/js/store/index.js
View File

@ -46,6 +46,7 @@ let state = {
theme: 'dark',
smooth_scrolling_enabled: true,
hotkeys_enabled: true,
playback_controls_touch_enabled: true,
allow_reporting: true,
wide_scrollbar_enabled: false,
window_focus: true,

0
src/js/store/migration.js Normal file → Executable file
View File

11
src/js/views/Settings.js
View File

@ -271,6 +271,17 @@ class Settings extends React.Component {
Enable smooth scrolling
</span>
</label>
<label>
<input
type="checkbox"
name="playback_controls_touch_enabled"
checked={ this.props.ui.playback_controls_touch_enabled }
onChange={ e => this.props.uiActions.set({ playback_controls_touch_enabled: !this.props.ui.playback_controls_touch_enabled })} />
<span className="label tooltip">
Enable touch events on play controls
<span className="tooltip__content">Allows left- and right-swipe to change tracks</span>
</span>
</label>
<label>
<input
type="checkbox"

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

@ -37,7 +37,7 @@
}
}
&:hover {
&:hover {
.thumbnail {
&__image {
transform: scale(1.01);
@ -52,10 +52,14 @@
&:active,
&:focus {
@include noanimate();
-moz-transform: scale(0.98);
-webkit-transform: scale(0.98);
transform: scale(0.98);
.thumbnail {
&__image {
@include noanimate();
-moz-transform: scale(0.98);
-webkit-transform: scale(0.98);
transform: scale(0.98);
}
}
}
}

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

@ -265,6 +265,10 @@
@include responsive($bp_medium){
border-left: none;
&--touch-enabled .control.next {
display: none;
}
.current-track {
width: auto;
bottom: 0.65rem;
@ -289,15 +293,14 @@
&.playback {
left: 0;
width: 40px;
width: 6rem;
.control {
&.play {
margin-bottom: -1rem;
}
&.previous,
&.next {
&.previous {
display: none;
}