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

Merge branch 'feature/volume'

Browse Source
This commit is contained in:
James Barnsley
2017-05-23 08:51:10 +12:00
parent 87953b1a25 c802bf48b2
commit 29d777763a
5 changed files with 132 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/js/components/Modal/Modal.js
View File

@ -13,6 +13,7 @@ import EditRadioModal from './EditRadioModal'
import ImageZoomModal from './ImageZoomModal'
import KioskModeModal from './KioskModeModal'
import SearchSettingsModal from './SearchSettingsModal'
import VolumeModal from './VolumeModal'
import AuthorizationModal_Send from './AuthorizationModal_Send'
import AuthorizationModal_Receive from './AuthorizationModal_Receive'
@ -55,6 +56,7 @@ class Modal extends React.Component{
{ this.props.modal.name == 'image_zoom' ? <ImageZoomModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
{ this.props.modal.name == 'kiosk_mode' ? <KioskModeModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
{ this.props.modal.name == 'search_settings' ? <SearchSettingsModal uiActions={this.props.uiActions} search_settings={this.props.search_settings} uri_schemes={this.props.uri_schemes} data={this.props.modal.data} /> : null }
{ this.props.modal.name == 'volume' ? <VolumeModal uiActions={this.props.uiActions} mopidyActions={this.props.mopidyActions} volume={this.props.volume} mute={this.props.mute} /> : null }
</div>
</div>
@ -66,6 +68,8 @@ const mapStateToProps = (state, ownProps) => {
return {
uri_schemes: (state.mopidy.uri_schemes ? state.mopidy.uri_schemes : null),
search_settings: (state.ui.search_settings ? state.ui.search_settings : null),
volume: state.mopidy.volume,
mute: state.mopidy.mute,
modal: state.ui.modal,
radio: state.ui.radio,
tracks: state.ui.tracks,

36
src/js/components/Modal/VolumeModal.js Executable file
View File

@ -0,0 +1,36 @@
import React, { PropTypes } from 'react'
import FontAwesome from 'react-fontawesome'
import Icon from '../Icon'
import * as helpers from '../../helpers'
export default class VolumeModal extends React.Component{
constructor(props){
super(props)
}
handleClick(e){
var slider = e.target;
var sliderY = e.clientY - slider.getBoundingClientRect().top;
var sliderHeight = slider.getBoundingClientRect().height;
var percent = 100 - parseInt( sliderY / sliderHeight * 100 );
this.props.mopidyActions.setVolume( percent )
}
render(){
return (
<div>
<div className="slider-wrapper">
<div className="slider vertical" onClick={ (e) => this.handleClick(e) } >
<div className="track">
<div className="progress" style={{ height: this.props.volume+'%' }}></div>
</div>
</div>
</div>
</div>
)
}
}

32
src/js/components/VolumeControl.js
View File

@ -6,11 +6,12 @@ import { Link } from 'react-router'
import FontAwesome from 'react-fontawesome'
import * as mopidyActions from '../services/mopidy/actions'
import * as uiActions from '../services/ui/actions'
class VolumeControl extends React.Component{
constructor(props) {
super(props);
super(props)
}
handleClick(e){
@ -21,21 +22,33 @@ class VolumeControl extends React.Component{
var percent = 100 - parseInt( sliderY / sliderHeight * 100 );
this.props.mopidyActions.setVolume( percent )
}
}
render(){
var className = "volume-control"
if (this.props.mute){
className += " muted"
}
return (
<span className={this.props.mute ? "volume-control muted" : "volume-control"}>
<a onClick={() => this.props.mopidyActions.setMute(!this.props.mute)}>
<span className={className}>
<a className="modal-trigger" onClick={() => this.props.uiActions.openModal('volume')}>
{this.props.mute ? <FontAwesome name="volume-off" /> : <FontAwesome name="volume-down" />}
</a>
<div className="slider-wrapper">
<div className="slider vertical" onClick={ (e) => this.handleClick(e) } >
<div className="track">
<div className="progress" style={{ height: this.props.volume+'%' }}></div>
<span className="hover-trigger">
<a onClick={() => this.props.mopidyActions.setMute(!this.props.mute)}>
{this.props.mute ? <FontAwesome name="volume-off" /> : <FontAwesome name="volume-down" />}
</a>
<div className="slider-wrapper">
<div className="slider vertical" onClick={ (e) => this.handleClick(e) } >
<div className="track">
<div className="progress" style={{ height: this.props.volume+'%' }}></div>
</div>
</div>
</div>
</div>
</span>
</span>
);
}
@ -50,6 +63,7 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch)
}
}

13
src/scss/components/_modal.scss
View File

@ -202,6 +202,19 @@
}
}
&.volume {
.slider-wrapper {
position: absolute;
top: 10vh;
left: 45vw;
height: 80vh;
.track {
width: 10vw;
}
}
}
.actions {
padding-top: 50px;
text-align: center;

100
src/scss/components/_player.scss
View File

@ -1,4 +1,52 @@
.volume-control {
position: relative;
a {
position: relative;
z-index: 99;
padding: 0 !important;
}
.fa {
width: 6px;
padding: 12px;
}
.slider-wrapper {
display: none;
position: absolute;
bottom: -8px;
left: 1px;
height: 80px;
padding: 10px 5px 35px 5px;
background: rgba(0,0,0,0.8);
z-index: 98;
}
&.muted {
.fa {
color: $red;
}
.slider {
.progress {
background: rgba(255,255,255,0.25);
}
}
}
.modal-trigger {
display: none !important;
}
.hover-trigger:hover {
.slider-wrapper {
display: block;
}
}
}
.player {
.current-track {
@ -115,6 +163,14 @@
padding: 12px;
}
.hover-trigger {
display: none;
}
.modal-trigger {
display: block !important;
}
.slider-wrapper {
bottom: 2px;
left: 0;
@ -144,47 +200,3 @@
}
}
}
.volume-control {
position: relative;
a {
position: relative;
z-index: 99;
padding: 0 !important;
}
.fa {
width: 6px;
padding: 12px;
}
.slider-wrapper {
display: none;
position: absolute;
bottom: -8px;
left: 1px;
height: 80px;
padding: 10px 5px 35px 5px;
background: rgba(0,0,0,0.8);
z-index: 98;
}
&.muted {
.fa {
color: $red;
}
.slider {
.progress {
background: rgba(255,255,255,0.25);
}
}
}
&:hover {
.slider-wrapper {
display: block;
}
}
}