Skip to content
This repository has been archived by the owner on Aug 6, 2022. It is now read-only.

Commit

Permalink
Format using prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
knoopx committed Mar 7, 2018
1 parent b6ce20a commit d08de0b
Show file tree
Hide file tree
Showing 46 changed files with 648 additions and 248 deletions.
10 changes: 8 additions & 2 deletions src/app/components/list-item/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,17 @@ import { ThemeProvider, theme } from 'ui/theming'
export default class ListItem extends React.PureComponent {
render() {
const {
active, style, activeStyle, containerStyle, activeTextMutedStyle, theme, ...props
active,
style,
activeStyle,
containerStyle,
activeTextMutedStyle,
theme,
...props
} = this.props

return (
<TouchableOpacity style={containerStyle} >
<TouchableOpacity style={containerStyle}>
<ThemeProvider
theme={{
...theme,
Expand Down
7 changes: 6 additions & 1 deletion src/app/components/toolbar/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,12 @@ export default class Toolbar extends React.PureComponent {
return (
<View
flow="row"
style={{ padding: 8, alignItems: 'center', justifyContent: 'space-between', ...style }}
style={{
padding: 8,
alignItems: 'center',
justifyContent: 'space-between',
...style,
}}
{...props}
/>
)
Expand Down
33 changes: 25 additions & 8 deletions src/app/themes/base.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,15 @@ export default {
}

function lighten(value, amount) {
return Color(value).lightenByAmount(amount).toString()
return Color(value)
.lightenByAmount(amount)
.toString()
}

function darken(value, amount) {
return Color(value).darkenByAmount(amount).toString()
return Color(value)
.darkenByAmount(amount)
.toString()
}

function contrast(baseColor, amount) {
Expand All @@ -20,7 +24,7 @@ function contrast(baseColor, amount) {
if (luminance >= 0.5) {
return darken(baseColor, amount)
}
return lighten(baseColor, (amount * (luminance + 0.3)))
return lighten(baseColor, amount * (luminance + 0.3))
}

function raisedStyle(borderColor) {
Expand All @@ -32,20 +36,33 @@ function raisedStyle(borderColor) {
export function build(accentColor, baseColor) {
const backgroundColor = baseColor
const textColor = contrast(baseColor, 0.75)
const textMutedColor = Color(textColor).setAlpha(0.6).toString()
const textMutedColor = Color(textColor)
.setAlpha(0.6)
.toString()
const borderColor = contrast(backgroundColor, 0.1)
const accentBackground = `linear-gradient(to bottom, ${lighten(accentColor, 0.1)}, ${accentColor})`
const accentBackground = `linear-gradient(to bottom, ${lighten(
accentColor,
0.1,
)}, ${accentColor})`
const accentTextColor = contrast(accentColor, 0.75)
const accentTextMutedColor = Color(accentTextColor).setAlpha(0.6).toString()
const accentTextMutedColor = Color(accentTextColor)
.setAlpha(0.6)
.toString()

const spinnerColor = contrast(baseColor, 0.5)

const frameBackgroundColor = lighten(backgroundColor, 0.02)
const frameBackgroundGradient = `linear-gradient(${frameBackgroundColor}, ${contrast(frameBackgroundColor, -0.02)})`
const frameBackgroundGradient = `linear-gradient(${frameBackgroundColor}, ${contrast(
frameBackgroundColor,
-0.02,
)})`
const frameBorderColor = contrast(frameBackgroundColor, 0.3)

const toolbarBackgroundColor = contrast(backgroundColor, 0.2)
const toolbarBackgroundGradient = `linear-gradient(${lighten(toolbarBackgroundColor, 0.05)}, ${toolbarBackgroundColor})`
const toolbarBackgroundGradient = `linear-gradient(${lighten(
toolbarBackgroundColor,
0.05,
)}, ${toolbarBackgroundColor})`

return {
app: {
Expand Down
28 changes: 21 additions & 7 deletions src/app/views/device-list-view/device-list-item.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { View, Text, Gutter } from 'ui'
import { ListItem } from 'app/components'

@inject('appState')

@observer
export default class DeviceListItem extends React.Component {
static propTypes = {
Expand All @@ -25,15 +24,30 @@ export default class DeviceListItem extends React.Component {
render() {
const { device } = this.props
return (
<ListItem key={device.clientIdentifier} onClick={this.onClick} style={{ cursor: 'pointer' }}>
<ListItem
key={device.clientIdentifier}
onClick={this.onClick}
style={{ cursor: 'pointer' }}
>
<View flow="column" style={{ marginRight: 20 }}>
<Text style={{ fontWeight: 'bold', fontSize: 18 }}>{device.name}</Text>
<Text style={{ fontSize: 12 }}>{relativeDate(device.lastSeenAt)}</Text>
<Text style={{ fontWeight: 'bold', fontSize: 18 }}>
{device.name}
</Text>
<Text style={{ fontSize: 12 }}>
{relativeDate(device.lastSeenAt)}
</Text>
</View>
<View flow="column" style={{ flex: 1, justifyContent: 'space-between' }}>
<Text style={{ fontSize: 14 }}>{device.product} ({device.productVersion})</Text>
<View
flow="column"
style={{ flex: 1, justifyContent: 'space-between' }}
>
<Text style={{ fontSize: 14 }}>
{device.product} ({device.productVersion})
</Text>
<Gutter size={4} />
<Text style={{ fontSize: 12 }}>{device.platform} ({device.platformVersion})</Text>
<Text style={{ fontSize: 12 }}>
{device.platform} ({device.platformVersion})
</Text>
</View>
</ListItem>
)
Expand Down
19 changes: 13 additions & 6 deletions src/app/views/device-list-view/index.jsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import React from 'react'
import { inject, observer } from 'mobx-react'


import { Text, View, Gutter, List, Button, Frame } from 'ui'

import Device from 'stores/account/device'
import DeviceListItem from './device-list-item'

@inject('account')

@observer
export default class DeviceList extends React.Component {
render() {
Expand All @@ -18,14 +16,23 @@ export default class DeviceList extends React.Component {
<View
flow="column"
style={{
flex: 1, paddingTop: 37, alignItems: 'center', justifyContent: 'center',
}}
flex: 1,
paddingTop: 37,
alignItems: 'center',
justifyContent: 'center',
}}
>
<View flow="column" style={{ flex: 1 }}>
<Text bold size={24}>Choose server</Text>
<Text bold size={24}>
Choose server
</Text>
<Gutter />
<Frame>
<List style={{ flex: 1, overflowY: 'auto' }} items={account.devices} renderItem={this.renderItem} />
<List
style={{ flex: 1, overflowY: 'auto' }}
items={account.devices}
renderItem={this.renderItem}
/>
</Frame>
</View>
<View flow="row" style={{ padding: 32, alignItems: 'center' }}>
Expand Down
34 changes: 24 additions & 10 deletions src/app/views/login-view/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,17 @@ import Account from 'stores/account'

import { Text, View, Button, Input, Gutter } from 'ui'


@inject('account')
@observer
export default class LoginView extends React.Component {
@observable loginParams = {
@observable
loginParams = {
login: '',
password: '',
}

@action setLoginParam(key, value) {
@action
setLoginParam(key, value) {
this.loginParams[key] = value
}

Expand All @@ -28,28 +29,41 @@ export default class LoginView extends React.Component {
<form
onSubmit={this.performLogin}
style={{
display: 'flex', flex: 1, paddingTop: 37, flowDirection: 'column', alignItems: 'center', justifyContent: 'center',
}}
display: 'flex',
flex: 1,
paddingTop: 37,
flowDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}}
>
<View flow="column" style={{ width: 300 }} >
<Text bold size={24}>Login to plex.tv</Text>
<View flow="column" style={{ width: 300 }}>
<Text bold size={24}>
Login to plex.tv
</Text>
<Gutter />
<Input
style={{ flex: 1, fontSize: 18, height: 32 }}
value={this.loginParams.login}
placeholder="Username"
onChange={(e) => { this.setLoginParam('login', e.target.value) }}
onChange={(e) => {
this.setLoginParam('login', e.target.value)
}}
/>
<Gutter size={8} />
<Input
style={{ flex: 1, fontSize: 18, height: 32 }}
value={this.loginParams.password}
type="password"
placeholder="Password"
onChange={(e) => { this.setLoginParam('password', e.target.value) }}
onChange={(e) => {
this.setLoginParam('password', e.target.value)
}}
/>
<Gutter />
<Button style={{ flex: 1, height: 40 }} onClick={this.performLogin}>Connect</Button>
<Button style={{ flex: 1, height: 40 }} onClick={this.performLogin}>
Connect
</Button>
</View>
</form>
)
Expand Down
61 changes: 49 additions & 12 deletions src/app/views/player-view/album-list-view/album-list-item.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { ListItem, Artwork } from 'app/components'
@inject('appState')
@inject('albumStore')
@inject('playQueue')

@observer
export default class AlbumListItem extends React.Component {
onPressArtistName(artistName) {
Expand Down Expand Up @@ -58,44 +57,82 @@ export default class AlbumListItem extends React.Component {
}
}

@action async performRate(album, userRating) {
@action
async performRate(album, userRating) {
await album.rate(userRating)
album.update({ userRating })
}

render() {
const { album, playQueue } = this.props
const isActive = album.id === (playQueue.activeItem && playQueue.activeItem.album.id)
const isActive =
album.id === (playQueue.activeItem && playQueue.activeItem.album.id)

return (
<ListItem active={isActive} onClick={this.onClick}>
<Artwork key={album.id} size={48} src={album.artwork} />
<Gutter />
<View flow="column" style={{ flex: 1 }}>
<Text bold size={14} style={{ marginBottom: 4 }}>{album.title}</Text>
<Text bold size={14} style={{ marginBottom: 4 }}>
{album.title}
</Text>
<View flow="row">
<TouchableOpacity style={{ cursor: 'pointer' }} onClick={(e) => { e.stopPropagation(); this.onPressArtistName(album.artistName) }}>
<Text muted size={12}>{album.artistName}</Text>
<TouchableOpacity
style={{ cursor: 'pointer' }}
onClick={(e) => {
e.stopPropagation()
this.onPressArtistName(album.artistName)
}}
>
<Text muted size={12}>
{album.artistName}
</Text>
</TouchableOpacity>
</View>
</View>
<Gutter />
<View flow="column" style={{ alignItems: 'flex-end' }}>
<View flow="row">
<TouchableOpacity style={{ cursor: 'pointer' }} onClick={(e) => { e.stopPropagation(); this.onPressYear(album.year) }}>
<Text muted size={12}>{album.year}</Text>
<TouchableOpacity
style={{ cursor: 'pointer' }}
onClick={(e) => {
e.stopPropagation()
this.onPressYear(album.year)
}}
>
<Text muted size={12}>
{album.year}
</Text>
</TouchableOpacity>
{album.studio && (
<TouchableOpacity style={{ marginLeft: 4, cursor: 'pointer' }} onClick={(e) => { e.stopPropagation(); this.onPressStudio(album.studio) }}>
<Text muted size={12}>{album.studio}</Text>
<TouchableOpacity
style={{ marginLeft: 4, cursor: 'pointer' }}
onClick={(e) => {
e.stopPropagation()
this.onPressStudio(album.studio)
}}
>
<Text muted size={12}>
{album.studio}
</Text>
</TouchableOpacity>
)}
</View>
{album.genres.length > 0 && (
<View flow="row">
{_.map(album.genres, (genre, index) => (
<TouchableOpacity key={genre} style={{ cursor: 'pointer' }} onClick={(e) => { e.stopPropagation(); this.onPressGenre(genre) }}>
<Text muted size={12} >{genre}{index !== album.genres.length - 1 && '/'}</Text>
<TouchableOpacity
key={genre}
style={{ cursor: 'pointer' }}
onClick={(e) => {
e.stopPropagation()
this.onPressGenre(genre)
}}
>
<Text muted size={12}>
{genre}
{index !== album.genres.length - 1 && '/'}
</Text>
</TouchableOpacity>
))}
</View>
Expand Down
5 changes: 1 addition & 4 deletions src/app/views/player-view/album-list-view/album-list.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { VirtualList } from 'ui'

import AlbumListItem from './album-list-item'


export default class AlbumList extends React.PureComponent {
static propTypes = {
albums: PropTypes.arrayOf(Album),
Expand All @@ -17,9 +16,7 @@ export default class AlbumList extends React.PureComponent {
}

renderRow(row) {
return (
<AlbumListItem key={row.id} album={row} />
)
return <AlbumListItem key={row.id} album={row} />
}

render() {
Expand Down
Loading

0 comments on commit d08de0b

Please sign in to comment.