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

Radio on Queue; Context menu extremities

Browse Source
This commit is contained in:
James Barnsley
2016-12-21 10:22:43 +13:00
parent 005e2b58b5
commit d743690d10
9 changed files with 59 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/js/components/ContextMenu.js
View File

@ -128,13 +128,11 @@ class ContextMenu extends React.Component{
)
}
renderItems(trigger){
var items = []
switch( this.props.context_menu.context ){
getItems(trigger){
switch (this.props.context_menu.context) {
case 'queue':
items = [
var items = [
{ handleClick: 'playQueueItem', label: 'Play', icon: 'play' },
{ handleClick: 'addToPlaylist', label: 'Add to playlist', icon: 'plus', playlists: true },
{ handleClick: 'copyURIs', label: 'Copy URIs', icon: 'copy' },
@ -143,7 +141,7 @@ class ContextMenu extends React.Component{
break
case 'editable-playlist':
items = [
var items = [
{ handleClick: 'playItems', label: 'Play', icon: 'play' },
{ handleClick: 'playItemsNext', label: 'Play next', icon: 'play' },
{ handleClick: 'addToQueue', label: 'Add to queue', icon: 'plus' },
@ -154,7 +152,7 @@ class ContextMenu extends React.Component{
break
default:
items = [
var items = [
{ handleClick: 'playItems', label: 'Play', icon: 'play' },
{ handleClick: 'playItemsNext', label: 'Play next', icon: 'play' },
{ handleClick: 'addToQueue', label: 'Add to queue', icon: 'plus' },
@ -164,6 +162,12 @@ class ContextMenu extends React.Component{
break
}
return items
}
renderItems(trigger){
var items = this.getItems(trigger)
var closeItem = (
<span className="menu-item-wrapper cancel">
<a className="menu-item" onClick={ (e) => this.closeAndDeselectTracks(e) }>
@ -222,8 +226,18 @@ class ContextMenu extends React.Component{
className += ' '+this.props.context_menu.trigger
}
var items = this.getItems(trigger)
var height = 0
if (items) height = items.length * 34
console.log(style.top, height)
if (this.props.context_menu.position_x > (window.innerWidth - 154)) className += ' right-align'
if (this.props.context_menu.position_x > (window.innerWidth - 308)) className += ' right-align-submenu'
if (this.props.context_menu.position_y > (window.innerHeight - height)){
style.top = style.top - height
className += ' bottom-align-submenu'
}
return (
<div className={className} style={style}>

2
src/js/services/localstorage/middleware.js
View File

@ -12,7 +12,7 @@ const localstorageMiddleware = (function(){
// append our state to a global variable. This gives us access to debug the store at any point
window._store = store
console.log(action)
//console.log(action)
switch( action.type ){

8
src/js/services/mopidy/middleware.js
View File

@ -211,7 +211,6 @@ const MopidyMiddleware = (function(){
})
break;
// send an instruction to the websocket
case 'MOPIDY_URISCHEMES':
var uri_schemes = action.data
var remove = ['http','https','mms','rtmp','rtmps','rtsp','sc','spotify']
@ -250,12 +249,17 @@ const MopidyMiddleware = (function(){
case 'MOPIDY_PLAY_URIS':
// stop the radio
if (store.getState().ui.radio && store.getState().ui.radio.enabled){
store.dispatch( pusherActions.stopRadio() )
}
// add our first track
instruct( socket, store, 'tracklist.add', { uri: action.uris[0], at_position: 0 } )
.then( response => {
if( !response || response.length <= 0 ){
console.error('Could not add URI to tracklist', action.uris[0])
store.dispatch( uiActions.createNotification('Could not add URI(s) to tracklist', 'error') )
}else{
// play it
store.dispatch( mopidyActions.changeTrack( response[0].tlid ) );

1
src/js/services/pusher/middleware.js
View File

@ -190,6 +190,7 @@ const PusherMiddleware = (function(){
break
case 'PUSHER_STOP_RADIO':
store.dispatch( uiActions.createNotification('Stopping radio') )
var data = {
action: 'stop_radio',
seed_artists: [],

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

@ -2,8 +2,8 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
import TrackList from '../components/TrackList'
import Track from '../components/Track'
import SidebarToggleButton from '../components/SidebarToggleButton'
@ -45,10 +45,15 @@ class Queue extends React.Component{
renderRadio(){
if (!this.props.radio || !this.props.radio.enabled) return null
var seed_sentence = 'nothing'
if (this.props.radio.seed_artists.length > 0) seed_sentence = this.props.radio.seed_artists.length+' artists'
if (this.props.radio.seed_genres.length > 0) seed_sentence =this.props.radio.seed_artists.length+' genres'
if (this.props.radio.seed_tracks.length > 0) seed_sentence =this.props.radio.seed_artists.length+' tracks'
return (
<div className="radio">
Playing radio
<a onClick={ e => this.props.pusherActions.stopRadio() }>Stop radio</a>
Playing radio based on {seed_sentence}
<a className="text-button destructive pull-right" onClick={ e => this.props.pusherActions.stopRadio() }><FontAwesome name="close" />&nbsp; Stop radio</a>
</div>
)
}

5
src/scss/components/_context-menu.scss
View File

@ -16,6 +16,11 @@
right: 140px !important;
}
&.bottom-align-submenu .submenu {
top: auto !important;
bottom: 0 !important;
}
.menu-item-wrapper {
display: block;
position: relative;

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

@ -56,7 +56,7 @@
position: fixed;
bottom: 0;
left: 0;
width: 200px;
width: 220px;
box-sizing: border-box;
z-index: 97;
padding: 14px;

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

@ -22,6 +22,14 @@ input[type="date"] {
}
}
.text-button {
cursor: pointer;
&.destructive {
color: $red;
}
}
.button,
button,
input[type="button"],

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

@ -41,4 +41,12 @@
}
}
}
.radio {
margin: 20px auto 0;
padding: 10px 12px;
max-width: 400px;
background: $faint_grey;
box-sizing: border-box;
}
}