14 | {this.props.children}
15 |
16 | );
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/renderer/components/elements/Checkbox.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as classNames from 'classnames';
3 | import { Icon } from './Icon';
4 |
5 | export interface CheckboxProps extends React.HTMLProps
35 |
41 |
42 |
43 | );
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/renderer/components/elements/ContextMenu.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as classNames from 'classnames';
3 |
4 | export interface ContextMenuProps {
5 | x: number;
6 | y: number;
7 | }
8 |
9 | interface ContextMenuState {
10 | isActive: boolean;
11 | x: number;
12 | y: number;
13 | prevProps: ContextMenuProps;
14 | }
15 |
16 | interface Position {
17 | top?: number;
18 | left?: number;
19 | }
20 |
21 | export class ContextMenu extends React.Component<
22 | ContextMenuProps,
23 | ContextMenuState
24 | > {
25 | contextMenu: HTMLDivElement | null;
26 |
27 | constructor(props: ContextMenuProps) {
28 | super(props);
29 |
30 | this.state = {
31 | isActive: false,
32 | x: 0,
33 | y: 0,
34 | prevProps: props,
35 | };
36 | }
37 |
38 | hideMenu = () => {
39 | this.setState({ isActive: false, x: 0, y: 0 });
40 | document.removeEventListener('click', this.handleClick);
41 | };
42 |
43 | showMenu = (style: Position) => {
44 | this.contextMenu.style.top = `${style.top}px`;
45 | this.contextMenu.style.left = `${style.left}px`;
46 |
47 | document.addEventListener('click', this.handleClick);
48 | };
49 |
50 | handleClick = (e: MouseEvent) => {
51 | if (this.contextMenu != null) {
52 | this.hideMenu();
53 | }
54 | };
55 |
56 | /*
57 | The Below Lifecycle methods contain the magic to make the context
58 | menu work.
59 | This is very dark and obscure magic. Even I do not what it is
60 | or what it does.
61 | Please do not interfere wtih this. Or you will loose you soul.
62 | */
63 | static getDerivedStateFromProps(
64 | nextProps: ContextMenuProps,
65 | prevState: ContextMenuState
66 | ): any {
67 | if (
68 | nextProps.x === prevState.prevProps.x &&
69 | nextProps.y === prevState.prevProps.y &&
70 | !prevState.isActive
71 | ) {
72 | return null;
73 | }
74 |
75 | return {
76 | x: nextProps.x,
77 | y: nextProps.y,
78 | isActive: true,
79 | prevProps: nextProps,
80 | };
81 | }
82 |
83 | shouldComponentUpdate(
84 | nextProps: ContextMenuProps,
85 | nextState: ContextMenuState
86 | ) {
87 | if (
88 | this.props.x === nextProps.x &&
89 | this.props.y === nextProps.y &&
90 | nextState.isActive
91 | ) {
92 | return false;
93 | }
94 |
95 | if (
96 | nextState.x === this.state.x &&
97 | nextState.y === this.state.y &&
98 | !this.state.isActive
99 | ) {
100 | return false;
101 | }
102 | return true;
103 | }
104 |
105 | componentDidUpdate() {
106 | if (this.state.isActive) {
107 | let w = window.innerWidth;
108 | let h = window.innerHeight;
109 |
110 | let position: Position = { top: undefined, left: undefined };
111 |
112 | if (this.props.x > w - this.contextMenu.offsetWidth) {
113 | position.left = this.props.x - this.contextMenu.offsetWidth;
114 | } else {
115 | position.left = this.props.x;
116 | }
117 |
118 | if (this.props.y > h - this.contextMenu.offsetHeight) {
119 | position.top = this.props.y - this.contextMenu.offsetHeight;
120 | } else {
121 | position.top = this.props.y;
122 | }
123 | this.showMenu(position);
124 | }
125 | }
126 |
127 | render() {
128 | let buildClassNames: string = classNames('context-menu', {
129 | active: this.state.isActive,
130 | });
131 |
132 | return (
133 | {
136 | this.contextMenu = elem;
137 | }}
138 | tabIndex={0}>
139 | {React.Children.map(this.props.children, child => {
140 | return React.cloneElement(
141 | child as React.ReactElement,
142 | { hideContextMenu: this.handleClick }
143 | );
144 | })}
145 |
146 | );
147 | }
148 | }
149 |
150 | export interface ContextMenuItemProps {
151 | readonly data: string;
152 | readonly onClick: (data: string) => void;
153 | readonly hideContextMenu?: () => void;
154 | }
155 |
156 | export class ContextMenuItem extends React.Component<
157 | ContextMenuItemProps,
158 | any
159 | > {
160 | handleClick = (event: React.MouseEvent
178 | {this.props.children}
179 |
180 | );
181 | }
182 | }
183 |
--------------------------------------------------------------------------------
/src/renderer/components/elements/EditableTextbox.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import classnames from 'classnames';
3 |
4 | interface EditableTextboxProps {
5 | className?: string;
6 | text: string;
7 | onChange: (value: string) => void;
8 | editable?: boolean;
9 | }
10 |
11 | interface EditableTextboxState {
12 | value: string;
13 | editable: boolean;
14 | }
15 |
16 | export class EditableTextbox extends React.PureComponent<
17 | EditableTextboxProps,
18 | EditableTextboxState
19 | > {
20 | constructor(props: EditableTextboxProps) {
21 | super(props);
22 |
23 | this.state = {
24 | value: this.props.text,
25 | editable: false,
26 | };
27 | }
28 |
29 | handleEditableDoubleClick = () => {
30 | this.setState({ editable: true });
31 | };
32 |
33 | onChange = (e: any) => {
34 | this.setState({ value: e.target.value });
35 | };
36 |
37 | handleSubmit = () => {
38 | this.props.onChange(this.state.value);
39 | this.setState({ editable: false });
40 | };
41 |
42 | handleKeyDown = (event: any) => {
43 | if (event.which === 27) {
44 | this.setState({ value: this.props.text, editable: false });
45 | } else if (event.which === 13) {
46 | this.handleSubmit();
47 | }
48 | };
49 |
50 | render() {
51 | if (this.state.editable && this.props.editable) {
52 | const buildClassNames: string = classnames(
53 | 'editable-textbox',
54 | this.props.className
55 | );
56 | return (
57 |
65 | );
66 | }
67 |
68 | return (
69 | 72 | {this.state.value} 73 |
74 | ); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/renderer/components/elements/Icon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as classNames from 'classnames'; 3 | 4 | export interface IconProps { 5 | size?: string; 6 | className?: string; 7 | icon: string; 8 | } 9 | 10 | export class Icon extends React.PureComponent
50 |
58 | {this.props.heading}
51 | 57 |
59 |
61 | {this.props.message}
60 |
62 |
63 |
64 |
69 |
72 |
73 |
74 |
30 |
38 | {this.props.heading}
31 | 37 |{this.props.body}
39 | {this.props.footer}
40 |
74 |
89 | );
90 | }
91 | }
92 |
93 | export default Slider;
94 |
--------------------------------------------------------------------------------
/src/renderer/components/elements/TabBar.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as classNames from 'classnames';
3 |
4 | export interface TabBarProps {
5 | className?: string;
6 | onTabClicked: (index: number) => void;
7 | }
8 |
9 | interface TabBarState {
10 | selectedIndex: number;
11 | }
12 |
13 | export class TabBar extends React.PureComponent
81 |
87 |
88 | {this.renderTabItems()}
;
60 | }
61 | }
62 |
63 | export interface TabItemProps {
64 | className?: string;
65 | onTabClicked: (index: number) => void;
66 | index: number;
67 | selected: boolean;
68 | }
69 |
70 | export class TabItem extends React.PureComponent
83 | {this.props.children}
84 |
85 | );
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/src/renderer/components/elements/Textbox.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as classNames from 'classnames';
3 |
4 | export interface TextboxProps extends React.HTMLProps
32 | {children}
33 |
34 | );
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/renderer/components/header/DragRegion.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface DragRegionProps {
4 | drag: boolean;
5 | }
6 |
7 | export interface DragRegionState {
8 | drag: boolean | undefined;
9 | }
10 |
11 | export default class DragRegion extends React.Component<
12 | DragRegionProps,
13 | DragRegionState
14 | > {
15 | constructor(props: DragRegionProps) {
16 | super(props);
17 |
18 | this.state = {
19 | drag: undefined,
20 | };
21 | }
22 |
23 | static getDerivedStateFromProps(
24 | nextProps: DragRegionProps,
25 | prevState: DragRegionState
26 | ) {
27 | if (prevState.drag === undefined) {
28 | return { drag: nextProps.drag };
29 | }
30 | return null;
31 | }
32 |
33 | shouldComponentUpdate(
34 | nextProps: DragRegionProps,
35 | nextState: DragRegionState
36 | ) {
37 | if (this.state.drag === undefined) {
38 | return true;
39 | }
40 | return false;
41 | }
42 |
43 | render() {
44 | return (
45 | <>
46 |
47 |
48 | );
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/renderer/components/header/HeaderActions.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Button } from '../elements/Button';
3 | import { Icon } from '../elements/Icon';
4 | import { Modal } from '../elements/Modal';
5 | import SettingsContainer from '../../containers/SettingsContainer';
6 |
7 | export interface HeaderActionsProps {}
8 |
9 | export interface HeaderActionsState {
10 | isSettingsOpen: boolean;
11 | }
12 |
13 | export default class Shell extends React.PureComponent<
14 | HeaderActionsProps,
15 | HeaderActionsState
16 | > {
17 | constructor(props: HeaderActionsProps) {
18 | super(props);
19 |
20 | this.state = {
21 | isSettingsOpen: false,
22 | };
23 | }
24 |
25 | handleOpenModal = () => {
26 | this.setState({ isSettingsOpen: true });
27 | };
28 |
29 | handleCloseModal = () => {
30 | this.setState({ isSettingsOpen: false });
31 | };
32 |
33 | render() {
34 | return (
35 | <>
36 |
62 |
63 | {this.state.unobtrusive && (
64 |
72 | )}
73 | {this.state.unobtrusive && (
74 |
89 | )}
90 |
99 |
100 |
101 | );
102 | };
103 |
104 | render() {
105 | return this.renderControls();
106 | }
107 | }
108 |
--------------------------------------------------------------------------------
/src/renderer/components/library/EmptyState.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as emptyState from '../../../../static/vectors/emptyState.svg';
3 |
4 | export default class EmptyState extends React.Component
12 |
23 | );
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/renderer/components/player/Controls.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Queue from './Queue';
3 | import { ButtonGroup } from '../elements/ButtonGroup';
4 | import { Button } from '../elements/Button';
5 | import { Icon } from '../elements/Icon';
6 | import Slider from '../elements/Slider';
7 | import AppStore from '../../stores/AppStore';
8 | import Player from '../../libraries/Player';
9 | import { parseToMinutes } from '../../utilities/TimeUtils';
10 | import { ipcRenderer } from 'electron';
11 |
12 | export interface ControlsProps {
13 | store: AppStore;
14 | }
15 |
16 | interface ControlsState {
17 | duration: number;
18 | isQueueEmpty: boolean;
19 | }
20 |
21 | export default class Controls extends React.Component<
22 | ControlsProps,
23 | ControlsState
24 | > {
25 | constructor(props: ControlsProps) {
26 | super(props);
27 |
28 | this.state = {
29 | duration: 0,
30 | isQueueEmpty: true,
31 | };
32 | }
33 |
34 | onPlayerTimeUpdate = () => {
35 | this.setState({
36 | duration: Math.floor(Player.getCurrentTime()),
37 | });
38 | };
39 |
40 | onPlayerEnded = () => {
41 | this.props.store.player.nextSong();
42 | };
43 |
44 | handleDurationChange = (value: number) => {
45 | if (this.state.isQueueEmpty) return;
46 |
47 | Player.setCurrentTime(value);
48 | };
49 |
50 | handleVolumeChange = (value: number) => {
51 | Player.setVolume(value / 10);
52 | this.props.store.settings.setVolume(value / 10);
53 | };
54 |
55 | handleMuteChange = () => {
56 | Player.isMuted() ? Player.unmute() : Player.mute();
57 | this.props.store.settings.setMute(Player.isMuted());
58 | };
59 |
60 | handleNextTrack = () => {
61 | if (this.state.isQueueEmpty) return;
62 |
63 | this.props.store.player.nextSong();
64 | };
65 |
66 | handlePrevTrack = () => {
67 | if (this.state.isQueueEmpty) return;
68 |
69 | if (this.state.duration > 15) {
70 | Player.replay();
71 | } else {
72 | this.props.store.player.prevSong();
73 | }
74 | };
75 |
76 | handlePlayPause = () => {
77 | if (this.state.isQueueEmpty) return;
78 |
79 | this.props.store.player.togglePlayPause();
80 | };
81 |
82 | handleShuffle = () => {
83 | this.props.store.settings.setShuffleMode().then(() => {
84 | if (!this.state.isQueueEmpty) {
85 | this.props.store.player.shuffleToggle();
86 | }
87 | });
88 | };
89 |
90 | handleRepeat = () => {
91 | this.props.store.settings.setRepeatMode();
92 | };
93 |
94 | componentDidMount() {
95 | Player.getInstance().addEventListener(
96 | 'timeupdate',
97 | this.onPlayerTimeUpdate
98 | );
99 | Player.getInstance().addEventListener('ended', this.onPlayerEnded);
100 |
101 | ipcRenderer.addListener(
102 | 'PLAYER_CONTROLS_TOGGLE_PLAY',
103 | this.handlePlayPause
104 | );
105 | ipcRenderer.addListener(
106 | 'PLAYER_CONTROLS_PREV_TRACK',
107 | this.handlePrevTrack
108 | );
109 | ipcRenderer.addListener(
110 | 'PLAYER_CONTROLS_NEXT_TRACK',
111 | this.handleNextTrack
112 | );
113 | }
114 |
115 | componentWillUnmount() {
116 | Player.getInstance().removeEventListener(
117 | 'timeupdate',
118 | this.onPlayerTimeUpdate
119 | );
120 | Player.getInstance().removeEventListener('ended', this.onPlayerEnded);
121 | ipcRenderer.removeListener(
122 | 'PLAYER_CONTROLS_TOGGLE_PLAY',
123 | this.handlePlayPause
124 | );
125 | ipcRenderer.removeListener(
126 | 'PLAYER_CONTROLS_PREV_TRACK',
127 | this.handlePrevTrack
128 | );
129 | ipcRenderer.removeListener(
130 | 'PLAYER_CONTROLS_NEXT_TRACK',
131 | this.handleNextTrack
132 | );
133 | }
134 |
135 | static getDerivedStateFromProps(
136 | nextProps: ControlsProps
137 | ): Partial
13 | 
14 |
15 | 16 | Your Music Library is Empty. 17 |
18 |19 | Please Goto Settings > Library on Top-Right Corner and 20 | Select the Folder which contains your music files. 21 |
22 |
149 |
150 |
158 |
173 |
181 |
182 |
195 |
215 |
231 |
232 |
257 |
258 | );
259 | }
260 | }
261 |
--------------------------------------------------------------------------------
/src/renderer/components/player/Details.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import * as defaultAlbumArt from '../../../../static/vectors/defaultAlbumArt.svg';
4 | import AppStore from '../../stores/AppStore';
5 | import { parseFile } from 'music-metadata/lib';
6 | import { IAudioMetadata, IPicture } from 'music-metadata/lib/type';
7 |
8 | export interface DetailsProps {
9 | store: AppStore;
10 | }
11 |
12 | interface DetailsState {
13 | albumart: string;
14 | }
15 |
16 | export default class Details extends React.Component<
17 | DetailsProps,
18 | DetailsState
19 | > {
20 | constructor(props: DetailsProps) {
21 | super(props);
22 |
23 | this.state = {
24 | albumart: defaultAlbumArt,
25 | };
26 | }
27 |
28 | fetchAlbumArt = async (path: string) => {
29 | let model: IAudioMetadata = await parseFile(path);
30 | let img: IPicture[] | undefined = model.common.picture;
31 | if (img !== undefined) {
32 | let imgURL = window.URL.createObjectURL(
33 | new Blob([img[0].data], { type: `image/${img[0].format}` })
34 | );
35 | this.setState({ albumart: imgURL });
36 | } else {
37 | this.setState({ albumart: defaultAlbumArt });
38 | }
39 | };
40 |
41 | componentDidUpdate(prevProps: DetailsProps, prevState: DetailsState) {
42 | const { cursor, queue } = this.props.store.state.player;
43 | if (cursor !== prevProps.store.state.player.cursor) {
44 | if (cursor === -2) {
45 | this.setState({ albumart: defaultAlbumArt });
46 | return;
47 | }
48 | this.fetchAlbumArt(queue[cursor].source);
49 | }
50 | }
51 |
52 | render() {
53 | const { cursor, queue } = this.props.store.state.player;
54 | const track = queue[cursor];
55 | return (
56 | <>
57 |
183 | {parseToMinutes(this.state.duration)}
184 |
194 |
234 |
249 |
256 |
59 |
65 |
66 | );
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/src/renderer/components/player/Queue.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | // tslint:disable-next-line:import-name
3 | import Popover from 'react-tiny-popover';
4 | import AppStore from '../../stores/AppStore';
5 | import { ButtonGroup } from '../elements/ButtonGroup';
6 | import { Button } from '../elements/Button';
7 | import { Icon } from '../elements/Icon';
8 | import { TrackModel } from '../../database/TracksDatabase';
9 | import { AutoSizer, List, ListRowProps } from 'react-virtualized';
10 |
11 | export interface QueueProps {
12 | store: AppStore;
13 | }
14 |
15 | interface QueueState {
16 | isPopoverOpen: boolean;
17 | }
18 |
19 | export default class Queue extends React.Component{track ? track.common.title : 'Untitled'}
60 |on
61 |{track ? track.common.album : 'Untitled'}
62 |by
63 |{track ? track.common.artist : 'Untitled'}
64 |
46 |
65 | );
66 | };
67 |
68 | render() {
69 | return (
70 | {
49 | this.handleDoubleRowClick(e, index);
50 | }}>
51 |
56 |
64 | {track.common.title}
52 |53 | {track.common.artist} - {track.common.album} 54 |
55 |
77 |
114 | }>
115 |
78 |
88 | Currently Playing
79 | 87 |
89 |
90 | {({ height, width }) => (
91 |
112 |
113 |
19 | {store.state.playlist.playlists.map((obj, index) => {
20 | if (obj.type === 'normal') {
21 | return (
22 |
37 | )}
38 |
26 | store.playlist.addTrackPlaylist(
27 | index,
28 | this.props.trackId
29 | )
30 | }>
31 |
33 | );
34 | }
35 | })}
36 | {obj.name}
32 |
12 |
21 | );
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/renderer/components/playlist/SidePanel.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { AppStoreConsumer } from '../../stores/AppContext';
3 | import { ButtonGroup } from '../elements/ButtonGroup';
4 | import { Button } from '../elements/Button';
5 | import { Icon } from '../elements/Icon';
6 | import { EditableTextbox } from '../elements/EditableTextbox';
7 | import AppStore from '../../stores/AppStore';
8 | import { MessageBox } from '../elements/MessageBox';
9 |
10 | interface SidePanelProps {
11 | store: AppStore;
12 | }
13 |
14 | interface SidePanelState {}
15 |
16 | export default class SidePanel extends React.Component<
17 | SidePanelProps,
18 | SidePanelState
19 | > {
20 | messageBoxRef: React.RefObject
13 |
14 |
15 | Your Playlist is Empty.
16 |17 | Please Goto To Your Libary, Right Click on the Track and 18 | Select 'Add to Playlist'. 19 |
20 |
43 |
103 | );
104 | }
105 | }
106 |
--------------------------------------------------------------------------------
/src/renderer/components/settings/Columns.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import AppStore from '../../stores/AppStore';
3 | import { Checkbox } from '../elements/Checkbox';
4 |
5 | export interface ColumnsSettingsProps {
6 | store: AppStore;
7 | }
8 | export interface ColumnsSettingsState {}
9 |
10 | export default class ColumnsSettings extends React.Component<
11 | ColumnsSettingsProps,
12 | ColumnsSettingsState
13 | > {
14 | constructor(props: ColumnsSettingsProps) {
15 | super(props);
16 | }
17 |
18 | handleColumnCheckedChange = (value: string, checked: boolean) => {
19 | let map: Map
50 |
52 |
62 |
70 |
71 |
72 | Playlists
51 |
73 | {this.props.store.state.playlist.playlists.map(
74 | (obj, index) => (
75 |
102 |
77 | this.props.store.playlist.changeActivePlaylist(
78 | index
79 | )
80 | }
81 | key={index}
82 | className={
83 | index ===
84 | this.props.store.state.playlist.currentIndex
85 | ? 'list-row current'
86 | : 'list-row'
87 | }>
88 |
91 | this.props.store.playlist.renamePlaylist(
92 | index,
93 | value
94 | )
95 | }
96 | editable={obj.type === 'normal'}
97 | />
98 |
99 | )
100 | )}
101 |
32 | {store.state.settings.columns.columns.map((column, index) => {
33 | return (
34 |
37 | this.handleColumnCheckedChange(
38 | column[0],
39 | checked
40 | )
41 | }
42 | checked={column[1]}
43 | value={column[0]}
44 | />
45 | );
46 | })}
47 |
48 | );
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/renderer/components/settings/Library.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Textbox } from '../elements/Textbox';
3 | import { ButtonGroup } from '../elements/ButtonGroup';
4 | import { Button } from '../elements/Button';
5 | import AppStore from '../../stores/AppStore';
6 |
7 | export interface LibrarySettingsProps {
8 | store: AppStore;
9 | }
10 |
11 | export interface LibrarySettingsState {}
12 |
13 | export default class LibrarySettings extends React.Component<
14 | LibrarySettingsProps,
15 | LibrarySettingsState
16 | > {
17 | constructor(props: LibrarySettingsProps) {
18 | super(props);
19 | }
20 |
21 | handlePathChange = () => {
22 | this.props.store.settings.setLibraryPath();
23 | };
24 |
25 | handleRefreshLibrary = () => {
26 | this.props.store.library
27 | .refreshLibrary()
28 | .then(() => this.props.store.playlist.createFolderPlaylists());
29 | };
30 |
31 | shouldComponentUpdate(
32 | nextProps: LibrarySettingsProps,
33 | nextState: LibrarySettingsState
34 | ) {
35 | return (
36 | this.props.store.state.settings.library !==
37 | nextProps.store.state.settings.library
38 | );
39 | }
40 |
41 | render() {
42 | const { store } = this.props;
43 | return (
44 |
45 |
46 |
52 |
55 |
56 |
57 | );
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/renderer/components/settings/Playlist.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import AppStore from '../../stores/AppStore';
3 | import { Checkbox } from '../elements/Checkbox';
4 |
5 | export interface PlaylistSettingsProps {
6 | store: AppStore;
7 | }
8 |
9 | export interface PlaylistSettingsState {}
10 |
11 | export default class PlaylistSettings extends React.Component<
12 | PlaylistSettingsProps,
13 | PlaylistSettingsState
14 | > {
15 | constructor(props: PlaylistSettingsProps) {
16 | super(props);
17 | }
18 |
19 | handleFolderPlaylists = (checked: boolean) => {
20 | this.props.store.settings.setFolderPlaylistMode(checked);
21 | };
22 |
23 | render() {
24 | const { store } = this.props;
25 | return (
26 |
27 |
33 | );
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/renderer/components/settings/System.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Textbox } from '../elements/Textbox';
3 | import { ButtonGroup } from '../elements/ButtonGroup';
4 | import { Button } from '../elements/Button';
5 | import AppStore from '../../stores/AppStore';
6 | import Notifications from '../../libraries/Notifications';
7 | import { Checkbox } from '../elements/Checkbox';
8 | import { Icon } from '../elements/Icon';
9 | import { webFrame } from 'electron';
10 |
11 | export interface SystemSettingsProps {
12 | store: AppStore;
13 | }
14 |
15 | export interface SystemSettingsState {}
16 |
17 | export default class SystemSettings extends React.Component<
18 | SystemSettingsProps,
19 | SystemSettingsState
20 | > {
21 | constructor(props: SystemSettingsProps) {
22 | super(props);
23 | }
24 |
25 | handleObtrusiveCheckbox = (checked: boolean) => {
26 | this.props.store.settings.setUnobtrusiveMode(checked);
27 | };
28 |
29 | handleZoomPlus = () => {
30 | if (webFrame.getZoomFactor() < 4) {
31 | let value = parseFloat((webFrame.getZoomFactor() + 0.1).toFixed(1));
32 | webFrame.setZoomFactor(value);
33 | this.props.store.settings.setZoomFactor(value);
34 | }
35 | };
36 |
37 | handleZoomMinus = () => {
38 | if (webFrame.getZoomFactor() > 0) {
39 | let value = parseFloat((webFrame.getZoomFactor() - 0.1).toFixed(1));
40 | webFrame.setZoomFactor(value);
41 | this.props.store.settings.setZoomFactor(value);
42 | }
43 | };
44 |
45 | handleResetZoom = () => {
46 | webFrame.setZoomFactor(1);
47 | };
48 |
49 | render() {
50 | const { store } = this.props;
51 | return (
52 |
53 |
54 |
88 | );
89 | }
90 | }
91 |
--------------------------------------------------------------------------------
/src/renderer/containers/HeaderContainer.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import WindowControls from '../components/header/WindowControls';
3 | import HeaderActions from '../components/header/HeaderActions';
4 | import Search from '../components/header/Search';
5 | import { AppStoreConsumer } from '../stores/AppContext';
6 | import DragRegion from '../components/header/DragRegion';
7 | import ModeTabs from '../components/header/ModeTabs';
8 | import { LayoutContextConsumer } from '../stores/LayoutContext';
9 |
10 | export interface HeaderContainerProps {}
11 |
12 | export interface HeaderContainerState {}
13 |
14 | export default class HeaderContainer extends React.Component<
15 | HeaderContainerProps,
16 | HeaderContainerState
17 | > {
18 | constructor(props: HeaderContainerProps) {
19 | super(props);
20 | }
21 |
22 | componentDidMount() {
23 | // All the states that require database or IO are initialized here
24 | }
25 |
26 | render() {
27 | return (
28 |
55 |
61 |
77 |
78 |
82 | 79 | These settings will work only after restarting the app 80 |
81 |
31 |
32 | {store =>
34 |
49 | )}
50 |
38 |
40 |
41 |
43 |
57 |
59 | {value}
58 |
22 |
25 | )}
26 |
23 |
21 |
24 | )}
25 |