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

Modals, including sharing auth

Browse Source
This commit is contained in:
James Barnsley
2018-07-13 16:48:41 +12:00
parent 2f6e8c2a74
commit 5f8956b376
26 changed files with 720 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/js/views/modals/AddToQueue.js
View File

@ -23,6 +23,10 @@ class AddToQueue extends React.Component{
}
}
componentDidMount(){
this.props.uiActions.setWindowTitle("Add to queue");
}
handleSubmit(e){
e.preventDefault();
var uris = this.state.uris.split(',');
@ -32,7 +36,7 @@ class AddToQueue extends React.Component{
render(){
return (
<Modal className="add-to-queue-modal">
<Modal className="modal--add-to-queue">
<h1>Add to queue</h1>
<h2 className="grey-text">Add a comma-separated list of URIs to the play queue. You must have the appropriate Mopidy backend enabled for each URI schema (eg spotify:, yt:).</h2>

6
src/js/views/modals/CreatePlaylist.js
View File

@ -24,6 +24,10 @@ class CreatePlaylist extends React.Component{
}
}
componentDidMount(){
this.props.uiActions.setWindowTitle("Create playlist");
}
createPlaylist(e){
e.preventDefault();
@ -116,7 +120,7 @@ class CreatePlaylist extends React.Component{
render(){
return (
<Modal className="create-playlist-modal">
<Modal className="modal--create-playlist">
<h1>Create playlist</h1>
<form onSubmit={(e) => this.createPlaylist(e)}>

5
src/js/views/modals/EditPlaylist.js
View File

@ -28,6 +28,9 @@ class EditPlaylist extends React.Component{
}
componentDidMount(){
this.props.uiActions.setWindowTitle("Edit playlist");
if (this.props.playlist){
this.setState({
name: this.props.playlist.name,
@ -177,7 +180,7 @@ class EditPlaylist extends React.Component{
render(){
return (
<Modal className="edit-playlist-modal">
<Modal className="modal--edit-playlist">
<h1>Edit playlist</h1>
{this.state.error ? <h3 className="red-text">{this.state.error}</h3> : null}
<form onSubmit={(e) => this.savePlaylist(e)}>

6
src/js/views/modals/EditRadio.js
View File

@ -30,7 +30,9 @@ class EditRadio extends React.Component{
var seeds = [...this.props.radio.seed_tracks, ...this.props.radio.seed_artists, ...this.props.radio.seed_genres]
this.setState({seeds: seeds, enabled: this.props.radio.enabled})
this.props.spotifyActions.resolveRadioSeeds(this.props.radio)
this.props.spotifyActions.resolveRadioSeeds(this.props.radio);
this.props.uiActions.setWindowTitle("Edit radio");
}
handleStart(e){
@ -200,7 +202,7 @@ class EditRadio extends React.Component{
render(){
return (
<Modal className="edit-radio-modal">
<Modal className="modal--edit-radio">
<h1>Radio</h1>
<h2 className="grey-text">Add and remove seeds to shape the sound of your radio. Radio uses Spotify's recommendations engine to suggest tracks similar to your seeds.</h2>

43
src/js/views/modals/ImageZoomModal.js
View File

@ -1,43 +0,0 @@
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { createStore, bindActionCreators } from 'redux';
import Icon from '../Icon';
import * as uiActions from '../../services/ui/actions';
import * as helpers from '../../helpers';
class ImageZoomModal extends React.Component{
constructor(props){
super(props)
}
handleClick(e, connectionid){
e.preventDefault()
this.props.uiActions.closeModal()
return false;
}
render(){
if (!this.props.data.url){
return null;
}
return (
<div className="image" style={{backgroundImage: "url("+this.props.data.url+")"}}></div>
)
}
}
const mapStateToProps = (state, ownProps) => {
return {}
}
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ImageZoomModal)

9
src/js/views/modals/InitialSetup.js
View File

@ -27,6 +27,10 @@ class InitialSetup extends React.Component{
}
}
componentDidMount(){
this.props.uiActions.setWindowTitle("Welcome to Iris");
}
handleSubmit(e){
e.preventDefault();
var self = this;
@ -65,7 +69,7 @@ class InitialSetup extends React.Component{
render(){
return (
<Modal className="initial-setup-modal">
<Modal className="modal--initial-setup">
<h1>Get started</h1>
<form onSubmit={(e) => this.handleSubmit(e)}>
@ -130,11 +134,10 @@ class InitialSetup extends React.Component{
Allow reporting of anonymous usage statistics
</span>
</label>
<p className="description">This anonymous usage data is important in identifying errors and potential features that make Iris better for everyone. Want to know more? Read the <a href="https://github.com/jaedb/Iris/wiki/Terms-of-use#privacy-policy" target="_blank">privacy policy</a>{!this.state.allow_reporting ? <span className="red-text"> Are you sure you don't want to support this?</span> : null}. </p>
</div>
</div>}
{!this.state.allow_reporting ? <p className="description">This anonymous usage data is important in identifying errors and potential features that make Iris better for everyone. Want to know more? Read the <a href="https://github.com/jaedb/Iris/wiki/Terms-of-use#privacy-policy" target="_blank">privacy policy</a>.</p> : null}
<div className="actions centered-text">
<button className={"primary large"+(this.state.saving ? " working" : "")} onClick={e => this.handleSubmit(e)}>
{this.state.saving ? "Saving" : "Save"}

81
src/js/views/modals/KioskMode.js Executable file
View File

@ -0,0 +1,81 @@
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { createStore, bindActionCreators } from 'redux';
import Modal from './Modal';
import Thumbnail from '../../components/Thumbnail';
import ArtistSentence from '../../components/ArtistSentence';
import * as helpers from '../../helpers';
import * as uiActions from '../../services/ui/actions';
class KioskMode extends React.Component{
constructor(props){
super(props)
}
componentDidMount(){
this.setWindowTitle();
}
componentWillReceiveProps(nextProps){
if (!this.props.current_track && nextProps.current_track){
this.setWindowTitle(nextProps.current_track);
}
}
setWindowTitle(current_track = this.props.current_track){
if (current_track){
var artists = "";
for (var i = 0; i < current_track.artists.length; i++){
if (artists != ""){
artists += ", ";
}
artists += current_track.artists[i].name;
}
this.props.uiActions.setWindowTitle(current_track.name+" by "+artists+" (now playing)");
} else{
this.props.uiActions.setWindowTitle("Now playing");
}
}
render(){
if (this.props.current_track && this.props.current_track.images){
var images = this.props.current_track.images
} else {
var images = []
}
return (
<Modal className="modal--kiosk-mode">
<Thumbnail className="background" images={images} />
<Thumbnail className="foreground" images={images} />
<div className="player">
<div className="current-track">
<div className="title">{ this.props.current_track ? this.props.current_track.name : <span>-</span> }</div>
{ this.props.current_track ? <ArtistSentence nolinks artists={ this.props.current_track.artists } /> : <ArtistSentence /> }
</div>
</div>
</Modal>
)
}
}
const mapStateToProps = (state) => {
return {
current_track: (state.core.current_track && state.core.tracks[state.core.current_track.uri] !== undefined ? state.core.tracks[state.core.current_track.uri] : null),
}
}
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(KioskMode)

48
src/js/views/modals/KioskModeModal.js
View File

@ -1,48 +0,0 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { createStore, bindActionCreators } from 'redux'
import * as uiActions from '../../services/ui/actions'
import * as helpers from '../../helpers'
import Icon from '../Icon'
import Thumbnail from '../Thumbnail'
import ArtistSentence from '../ArtistSentence'
export default class KioskModeModal extends React.Component{
constructor(props){
super(props)
}
handleClick(e, connectionid){
e.preventDefault()
this.props.uiActions.closeModal()
return false;
}
render(){
if (this.props.current_track && this.props.current_track.images){
var images = this.props.current_track.images
} else {
var images = []
}
return (
<div className="kisk-mode-modal">
<Thumbnail className="background" images={images} />
<Thumbnail className="foreground" images={images} />
<div className="player">
<div className="current-track">
<div className="title">{ this.props.current_track ? this.props.current_track.name : <span>-</span> }</div>
{ this.props.current_track ? <ArtistSentence nolinks artists={ this.props.current_track.artists } /> : <ArtistSentence /> }
</div>
</div>
</div>
)
}
}

17
src/js/views/modals/AuthorizationModal_Send.js → src/js/views/modals/ShareAuthorization_Send.js
View File

@ -4,12 +4,14 @@ import { connect } from 'react-redux'
import { Link } from 'react-router'
import { createStore, bindActionCreators } from 'redux'
import * as uiActions from '../../services/ui/actions'
import * as helpers from '../../helpers'
import Modal from './Modal';
import Icon from '../../components/Icon';
import Icon from '../Icon'
import * as uiActions from '../../services/ui/actions';
import * as pusherActions from '../../services/pusher/actions';
import * as helpers from '../../helpers';
class AuthorizationModal_Send extends React.Component{
class ShareAuthorization_Send extends React.Component {
constructor(props){
super(props)
@ -60,11 +62,11 @@ class AuthorizationModal_Send extends React.Component{
render(){
return (
<div>
<Modal className="modal--share-authorization--send">
<h1>Share Spotify authentication</h1>
<h2 className="grey-text">Send your authentication tokens to another client. When the recipient client imports this, their Iris will have full access to your Spotify account ({this.props.me.id}).</h2>
{this.renderConnectionsList()}
</div>
</Modal>
)
}
}
@ -80,8 +82,9 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => {
return {
pusherActions: bindActionCreators(pusherActions, dispatch),
uiActions: bindActionCreators(uiActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(AuthorizationModal_Send)
export default connect(mapStateToProps, mapDispatchToProps)(ShareAuthorization_Send)