├── .babelrc
├── .gitignore
├── README.md
├── app
    ├── bootstrap.js
    ├── browser
    │   ├── main.js
    │   └── playlist.js
    └── client
    │   ├── components
    │       ├── application.js
    │       ├── currently_playing.js
    │       ├── playback_control_bar.js
    │       ├── playlist.js
    │       ├── youtube_player.js
    │       └── youtube_thumbnail.js
    │   ├── index.html
    │   ├── main.js
    │   ├── redux
    │       ├── actions.js
    │       └── reducers.js
    │   ├── utils.js
    │   └── youtube_api.js
├── mocks
    ├── mock.bmml
    └── mock.png
└── package.json


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   // Don't inherit from higher-level .babelrc files
 3 |   "breakConfig": true,
 4 |   "stage": 2,
 5 |   "optional": [
 6 |     "es7.decorators"
 7 |   ],
 8 |   "env": {
 9 |     "production": {
10 |       "optional": [
11 |         "optimisation.react.constantElements",
12 |         "optimisation.react.inlineElements"
13 |         // "minification.removeConsole" // removes `console.log` lines
14 |       ]
15 |     }
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Electron YouTube Player
 2 | =======================
 3 | 
 4 | This is a desktop app created using [Electron](http://electron.atom.io/), written using React and Redux. It manages playlists of YouTube videos, and plays them in various ways.
 5 | 
 6 | Installing/Running
 7 | ------------------
 8 | 
 9 | Requires Node.js. Tested on Node.js 4.0.
10 | 
11 | ```
12 | npm install
13 | npm start
14 | ```
15 | 
16 | Mock
17 | ----
18 | 
19 | ![Mockup](mocks/mock.png)
20 | 


--------------------------------------------------------------------------------
/app/bootstrap.js:
--------------------------------------------------------------------------------
1 | require("babel/register");
2 | require("./browser/main");
3 | 


--------------------------------------------------------------------------------
/app/browser/main.js:
--------------------------------------------------------------------------------
 1 | import app from "app";
 2 | import BrowserWindow from "browser-window";
 3 | 
 4 | let mainWindow = null;
 5 | 
 6 | const launchMainWindow = () => {
 7 |   mainWindow = new BrowserWindow({width: 800, height: 600});
 8 |   mainWindow.maximize();
 9 |   mainWindow.loadUrl(`file://${__dirname}/../client/index.html`);
10 |   // mainWindow.openDevTools();
11 |   mainWindow.on('closed', () => mainWindow = null);
12 | };
13 | 
14 | app.on('window-all-closed', () => app.quit());
15 | app.on('ready', launchMainWindow);
16 | 


--------------------------------------------------------------------------------
/app/browser/playlist.js:
--------------------------------------------------------------------------------
 1 | import fs from "fs";
 2 | import path from "path";
 3 | 
 4 | import app from "app";
 5 | 
 6 | const appDataFolder = path.join(app.getPath("userData"));
 7 | const appDataFile = path.join(appDataFolder, "playlist.json");
 8 | 
 9 | export const savePlaylist = (videoIds) => {
10 |   console.log("saving to", appDataFolder);
11 |   try {
12 |     fs.mkdirSync(appDataFolder);
13 |   } catch(e) {}
14 | 
15 |   const data = JSON.stringify(videoIds);
16 |   fs.writeFileSync(appDataFile, data);
17 | };
18 | 
19 | export const loadPlaylist = (callback) => {
20 |   try {
21 |     const buffer = fs.readFileSync(appDataFile);
22 |     const data = buffer.toString("utf8");
23 |     const json = JSON.parse(data);
24 |     callback(json);
25 |   } catch (e) {
26 |     console.log("No playlist to load!");
27 |     callback([]);
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/app/client/components/application.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { autobind } from "core-decorators";
 3 | import { connect } from "react-redux";
 4 | 
 5 | import * as actions from "../redux/actions";
 6 | 
 7 | import CurrentlyPlaying from "./currently_playing";
 8 | import PlaybackControlBar from "./playback_control_bar";
 9 | import Playlist from "./playlist";
10 | import YoutubePlayer from "./youtube_player";
11 | import YoutubeThumbnail from "./youtube_thumbnail";
12 | 
13 | 
14 | @connect(state => ({
15 |   ...state,
16 |   isPlaying: state.playbackStatus === "PLAYING",
17 |   currentVideoDuration: state.videoDurations[state.currentVideoId] || 0
18 | }), actions)
19 | export default class Application extends React.Component {
20 |   constructor(props) {
21 |     super(props);
22 |     window.props = props;
23 |     this.state = {
24 |       currentTime: 0
25 |     };
26 |   }
27 | 
28 |   render() {
29 |     return (
30 |       <div style={{height: "100%", display: "flex", flexDirection: "row"}}>
31 |         <div style={{flex: "1 0 200px", display: "flex", flexDirection: "column"}}>
32 |           <Playlist videoIds={this.props.playlist}
33 |                     onAddVideo={this.props.addVideoToPlaylist}
34 |                     onRemoveVideo={this.props.removeVideoFromPlaylist}
35 |                     onSelectVideo={this.props.selectVideo}
36 |                     setPlaylistVideos={this.props.setPlaylistVideos} />
37 |           <CurrentlyPlaying videoId={this.props.currentVideoId} />
38 |         </div>
39 |         <div style={{flexBasis: "100%", display: "flex", flexDirection: "column"}}>
40 |           <YoutubePlayer ref="player"
41 |                          videoId={this.props.currentVideoId} autoplay={true}
42 |                          initialVolume={this.props.volume} onSetVolume={this.props.setVolume}
43 |                          onUpdatePlaybackStatus={this.props.updatePlaybackStatus}
44 |                          onUpdateVideoDuration={this.props.updateVideoDuration}
45 |                          onUpdateCurrentTime={this.updateCurrentTime}
46 |                          onVideoEnded={this.props.selectNextVideo} />
47 |           <PlaybackControlBar videoDuration={this.props.currentVideoDuration}
48 |                               volume={this.props.volume} onSetVolume={this.setVolume}
49 |                               currentTime={this.state.currentTime}
50 |                               playing={this.props.isPlaying} onSeek={this.seekVideo}
51 |                               onPlay={this.playVideo} onPause={this.pauseVideo} />
52 |         </div>
53 |       </div>
54 |     );
55 |   }
56 | 
57 |   @autobind
58 |   playVideo() {
59 |     this.refs.player.play();
60 |   }
61 | 
62 |   @autobind
63 |   pauseVideo() {
64 |     this.refs.player.pause();
65 |   }
66 | 
67 |   @autobind
68 |   seekVideo(time, allowSeekAhead = false) {
69 |     this.refs.player.seek(time, allowSeekAhead);
70 |     this.updateCurrentTime(time);
71 |   }
72 | 
73 |   @autobind
74 |   setVolume(volume) {
75 |     this.refs.player.setVolume(volume);
76 |   }
77 | 
78 |   @autobind
79 |   updateCurrentTime(time) {
80 |     this.setState({ currentTime: time });
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/app/client/components/currently_playing.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import YoutubeThumbnail from "./youtube_thumbnail";
 4 | 
 5 | export default class CurrentlyPlaying extends React.Component {
 6 |   render() {
 7 |     return (
 8 |       <div style={{flex: "1 0 150px", paddingTop: 15, maxHeight: 150}}>
 9 |         {this.props.videoId && this.renderThumbnail(this.props.videoId)}
10 |       </div>
11 |     );
12 |   }
13 | 
14 |   renderThumbnail(videoId) {
15 |     return <YoutubeThumbnail videoId={videoId}
16 |             style={{maxWidth: 200, maxHeight: 150}} />;
17 |   }
18 | }
19 | 
20 | CurrentlyPlaying.propTypes = {
21 |   videoId: React.PropTypes.string,
22 | };
23 | 


--------------------------------------------------------------------------------
/app/client/components/playback_control_bar.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { autobind } from "core-decorators";
 3 | 
 4 | import { secondsDisplay } from "../utils";
 5 | 
 6 | 
 7 | export default class PlaybackControlBar extends React.Component {
 8 |   constructor() {
 9 |     super();
10 |     this.state = {
11 |       draggingSeekSlider: false,
12 |       localCurrentTime: 0,
13 |     };
14 |   }
15 | 
16 |   render() {
17 |     const seekSliderValue = this.state.draggingSeekSlider ? this.state.localCurrentTime : this.props.currentTime;
18 | 
19 |     return (
20 |       <div style={{flex: "0 0 50px", display: "flex", alignItems: "center"}}>
21 |         <div style={{flex: "1 0 50px"}}>
22 |           <button onClick={this.props.onPlay}>Play</button>
23 |         </div>
24 |         <div style={{flex: "1 0 50px"}}>
25 |           <button onClick={this.props.onPause}>Pause</button>
26 |         </div>
27 |         <div style={{flexBasis: "100%", padding: "0px 10px"}}>
28 |           <input type="range" className="slider" style={{width: "100%"}}
29 |                  min={0} max={this.props.videoDuration * 1000}
30 |                  step={0.1}
31 |                  value={seekSliderValue}
32 |                  onMouseDown={this.handleMouseDown}
33 |                  onMouseUp={this.handleMouseUp}
34 |                  onChange={this.handleSeekVideo} />
35 |         </div>
36 |         <div style={{flex: "1 0 100px"}}>
37 |           <input type="range" className="slider" style={{width: 90}}
38 |                  min={0} max={100} value={this.props.volume}
39 |                  onChange={this.handleSetVolume} />
40 |         </div>
41 |       </div>
42 |     );
43 |   }
44 | 
45 |   @autobind
46 |   handleMouseDown() {
47 |     this.setState({ draggingSeekSlider: true });
48 |   }
49 | 
50 |   @autobind
51 |   handleMouseUp(evt) {
52 |     this.setState({ draggingSeekSlider: false });
53 |     const time = parseInt(evt.target.value, 10);
54 |     this.setState({ localCurrentTime: time });
55 |     this.props.onSeek(time, true);
56 |   }
57 | 
58 |   @autobind
59 |   handleSeekVideo(evt) {
60 |     const time = parseInt(evt.target.value, 10);
61 |     this.setState({ localCurrentTime: time });
62 |     this.props.onSeek(time, this.state.draggingSeekSlider ? false : true);
63 |   }
64 | 
65 |   @autobind
66 |   handleSetVolume(evt) {
67 |     const volume = parseInt(evt.target.value, 10);
68 |     this.props.onSetVolume(volume);
69 |   }
70 | }
71 | 
72 | PlaybackControlBar.propTypes = {
73 |   videoDuration: React.PropTypes.number,
74 |   currentTime: React.PropTypes.number,
75 |   playing: React.PropTypes.bool.isRequired,
76 |   onSeek: React.PropTypes.func,
77 |   onPlay: React.PropTypes.func,
78 |   onPause: React.PropTypes.func,
79 | };
80 | 
81 | PlaybackControlBar.defaultProps = {
82 |   videoDuration: 0,
83 |   currentTime: 0,
84 |   playing: false,
85 |   onSeek: () => null,
86 |   onPlay: () => null,
87 |   onPause: () => null,
88 | };
89 | 


--------------------------------------------------------------------------------
/app/client/components/playlist.js:
--------------------------------------------------------------------------------
  1 | import url from "url";
  2 | import qs from "querystring";
  3 | 
  4 | import React from "react";
  5 | import { autobind } from "core-decorators";
  6 | 
  7 | import YoutubeThumbnail from "./youtube_thumbnail";
  8 | 
  9 | const closeButtonStyle = {
 10 |   position: "absolute",
 11 |   top: 5,
 12 |   right: 5,
 13 |   color: "white",
 14 |   backgroundColor: "black",
 15 |   fontSize: 25,
 16 |   padding: "5px 10px",
 17 |   cursor: "pointer",
 18 | };
 19 | 
 20 | const ClickableThumbnail = ({videoId, onClick, onClose}) =>
 21 |   <div style={{position: "relative"}}>
 22 |     <YoutubeThumbnail videoId={videoId}
 23 |       style={{maxWidth: 200, maxHeight: 150, cursor: "pointer"}}
 24 |       onClick={() => onClick(videoId)} />
 25 |     <span style={closeButtonStyle} onClick={(evt) => onClose(evt, videoId)}>×</span>
 26 |   </div>
 27 | 
 28 | 
 29 | 
 30 | class Modal extends React.Component {
 31 |   render() {
 32 |     const style = {
 33 |       color: "black",
 34 |       width: 400,
 35 |       backgroundColor: "white",
 36 |       position: "absolute",
 37 |       top: "30%",
 38 |       left: "50%",
 39 |       marginLeft: -200,
 40 |       border: "1px solid black",
 41 |       borderRadius: 10,
 42 |       padding: 15,
 43 |     };
 44 | 
 45 |     const backdropStyle = {
 46 |       display: this.props.isOpen ? "block" : "none",
 47 |       position: "absolute",
 48 |       top: 0,
 49 |       left: 0,
 50 |       right: 0,
 51 |       bottom: 0,
 52 |       backgroundColor: "rgba(50,50,50,0.8)",
 53 |     };
 54 | 
 55 |     let title;
 56 |     if (this.props.title) {
 57 |       const style = {
 58 |         marginTop: 0,
 59 |         borderBottom: "1px solid #ccc",
 60 |         marginBottom: 10,
 61 |         paddingBottom: 5,
 62 |       };
 63 |       title = <h2 style={style}>{this.props.title}</h2>;
 64 |     }
 65 | 
 66 |     const closeButton = (
 67 |       <div style={{
 68 |         position: "absolute",
 69 |         right: 5,
 70 |         top: 5,
 71 |         fontSize: 20,
 72 |         padding: "3px 5px",
 73 |         cursor: "pointer",
 74 |       }} onClick={this.props.onRequestClose}>
 75 |         ×
 76 |       </div>
 77 |     );
 78 | 
 79 |     return (
 80 |       <div style={backdropStyle} onClick={this.props.onRequestClose}>
 81 |         <div style={style} onClick={this.eatClick}>
 82 |           {title}
 83 |           {closeButton}
 84 |           {this.props.children}
 85 |         </div>
 86 |       </div>
 87 |     );
 88 |   }
 89 | 
 90 |   eatClick(e) {
 91 |     e.stopPropagation();
 92 |   }
 93 | }
 94 | 
 95 | 
 96 | export default class Playlist extends React.Component {
 97 |   constructor() {
 98 |     super();
 99 |     this.state = {
100 |       showingAddModal: false,
101 |     };
102 |   }
103 | 
104 |   render() {
105 |     return (
106 |       <div style={{flex: "1", overflowY: "scroll"}}>
107 |         {this.props.videoIds.map(this.renderVideoId)}
108 |         <button onClick={this.handleShowAddVideoModalClicked}>Add Video</button>
109 |         <div>
110 |           <button onClick={this.handleSavePlaylist}>Save</button>
111 |           <button onClick={this.handleLoadPlaylist}>Load</button>
112 |         </div>
113 |         <Modal isOpen={this.state.showingAddModal}
114 |                onRequestClose={this.handleCloseModal}
115 |                title="Add Video to Playlist">
116 |           <button onClick={this.handleAddVideoClicked}>Add Video</button>
117 |           {/*cheating*/}
118 |           <input type="text" ref="videoId" />
119 |         </Modal>
120 |       </div>
121 |     );
122 |   }
123 | 
124 |   @autobind
125 |   renderVideoId(videoId) {
126 |     return <ClickableThumbnail key={videoId} videoId={videoId}
127 |             onClick={this.handleVideoClicked}
128 |             onClose={this.handleVideoCloseClicked} />
129 |   }
130 | 
131 |   @autobind
132 |   handleShowAddVideoModalClicked() {
133 |     this.setState({ showingAddModal: true });
134 |   }
135 | 
136 |   @autobind
137 |   handleCloseModal() {
138 |     this.setState({ showingAddModal: false });
139 |   }
140 | 
141 |   @autobind
142 |   handleVideoClicked(videoId) {
143 |     this.props.onSelectVideo(videoId);
144 |   }
145 | 
146 |   @autobind
147 |   handleVideoCloseClicked(evt, videoId) {
148 |     evt.stopPropagation();
149 |     this.props.onRemoveVideo(videoId);
150 |   }
151 | 
152 |   @autobind
153 |   handleAddVideoClicked() {
154 |     // TODO: get this into a managed input,
155 |     // or a modal, etc.
156 |     const videoUrl = this.refs.videoId.value;
157 |     const parsed = url.parse(videoUrl);
158 |     const queryParsed = qs.parse(parsed.query);
159 |     if (queryParsed.v) {
160 |       this.props.onAddVideo(queryParsed.v);
161 |       this.refs.videoId.value = "";
162 |     }
163 |   }
164 | 
165 |   @autobind
166 |   handleRemoveVideo(videoId) {
167 |     this.props.onRemoveVideo(videoId);
168 |   }
169 | 
170 |   @autobind
171 |   handleSavePlaylist() {
172 |     require("remote").require("./browser/playlist").savePlaylist(
173 |       this.props.videoIds
174 |     );
175 |   }
176 | 
177 |   @autobind
178 |   handleLoadPlaylist() {
179 |     require("remote").require("./browser/playlist").loadPlaylist(videoIds => {
180 |       console.log("got video IDs", videoIds);
181 |       this.props.setPlaylistVideos(videoIds);
182 |     });
183 |   }
184 | }
185 | 
186 | Playlist.propTypes = {
187 |   videoIds: React.PropTypes.arrayOf(
188 |     React.PropTypes.string
189 |   ).isRequired,
190 |   onSelectVideo: React.PropTypes.func.isRequired, // fn(videoId)
191 |   onAddVideo: React.PropTypes.func.isRequired, // fn(videoId)
192 |   onRemoveVideo: React.PropTypes.func.isRequired, // fn(videoId)
193 |   setPlaylistVideos: React.PropTypes.func.isRequired, // fn([videoId])
194 | };
195 | 


--------------------------------------------------------------------------------
/app/client/components/youtube_player.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { findDOMNode } from "react-dom";
  3 | import { autobind } from "core-decorators";
  4 | 
  5 | import loadApi from "../youtube_api";
  6 | 
  7 | export default class YoutubePlayer extends React.Component {
  8 |   // not as gross! yay
  9 |   componentDidMount() {
 10 |     this.setupPlayer();
 11 |     this.updateTimeInterval = setInterval(this.updateCurrentPlayerTime, 100);
 12 |   }
 13 | 
 14 |   componentDidUpdate(prevProps) {
 15 |     if (this.props.videoId !== prevProps.videoId) {
 16 |       this.changeVideoId(this.props.videoId);
 17 |     }
 18 |   }
 19 | 
 20 |   componentWillUnmount() {
 21 |     this.updateTimeInterval && clearInterval(this.updateTimeInterval);
 22 |     this.player && this.player.destroy();
 23 |   }
 24 | 
 25 |   async setupPlayer() {
 26 |     await loadApi();
 27 | 
 28 |     if (this.player) {
 29 |       this.player.destroy();
 30 |     }
 31 | 
 32 |     this.player = await this.createPlayer(this.props.videoId);
 33 |   }
 34 | 
 35 |   async changeVideoId(videoId) {
 36 |     await loadApi();
 37 | 
 38 |     if (this.player) {
 39 |       this.player.loadVideoById(videoId);
 40 |     }
 41 |   }
 42 | 
 43 |   createPlayer(videoId) {
 44 |     const node = findDOMNode(this);
 45 |     const player = new YT.Player(node, {
 46 |       height: '100%',
 47 |       width: '100%',
 48 |       videoId: videoId,
 49 |       playerVars: { 'autoplay': this.props.autoplay, 'controls': 0 },
 50 |       events: {
 51 |         onReady: (event) => {
 52 |           player.setVolume(this.props.initialVolume);
 53 |           this.props.onUpdateVideoDuration(this.props.videoId, player.getDuration());
 54 |         },
 55 |         onStateChange: (event) => {
 56 |           const state = player.getPlayerState();
 57 |           const stateName = state === 1 ? "PLAYING" : "PAUSED";
 58 |           this.props.onUpdatePlaybackStatus(stateName);
 59 | 
 60 |           if (state === 0) {
 61 |             // Video ended, go to the next one
 62 |             this.props.onVideoEnded();
 63 |           }
 64 | 
 65 |           if (state === 1) {
 66 |             // video just started playing, we should have metadata
 67 |             this.props.onUpdateVideoDuration(this.props.videoId, player.getDuration());
 68 |           }
 69 |         }
 70 |       }
 71 |     });
 72 |     return player;
 73 |   }
 74 | 
 75 |   @autobind
 76 |   updateCurrentPlayerTime() {
 77 |     if (this.player && this.player.getCurrentTime) {
 78 |       const time = Math.floor(this.player.getCurrentTime() * 1000);
 79 |       this.props.onUpdateCurrentTime(time);
 80 |     }
 81 |   }
 82 | 
 83 |   render() {
 84 |     return (
 85 |       <div style={{flex: "1 0 100%"}}>video</div>
 86 |     );
 87 |   }
 88 | 
 89 |   // imperative public API
 90 |   play() {
 91 |     this.player && this.player.playVideo();
 92 |   }
 93 | 
 94 |   pause() {
 95 |     this.player && this.player.pauseVideo();
 96 |     this.updateCurrentPlayerTime(); // make sure time display is correct right away
 97 |   }
 98 | 
 99 |   seek(time, allowSeekAhead = false) {
100 |     this.player && this.player.seekTo(time / 1000, allowSeekAhead);
101 |   }
102 | 
103 |   setVolume(volume) {
104 |     this.player && this.player.setVolume(volume);
105 |     this.props.onSetVolume(volume);
106 |   }
107 | }
108 | 
109 | YoutubePlayer.propTypes = {
110 |   autoplay: React.PropTypes.bool,
111 |   videoId: React.PropTypes.string.isRequired,
112 |   onUpdateCurrentTime: React.PropTypes.func, // fn(time)
113 |   onUpdatePlaybackStatus: React.PropTypes.func, // fn(status)
114 |   onUpdateVideoDuration: React.PropTypes.func, // fn(videoId, duration)
115 |   onVideoEnded: React.PropTypes.func, // fn()
116 | };
117 | 
118 | YoutubePlayer.defaultProps = {
119 |   autoplay: false,
120 |   onUpdateCurrentTime: () => null,
121 |   onUpdatePlaybackStatus: () => null,
122 |   onUpdateVideoDuration: () => null,
123 |   onVideoEnded: () => null,
124 | };
125 | 


--------------------------------------------------------------------------------
/app/client/components/youtube_thumbnail.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import { youtubeIdToThumbnailUrl } from "../utils";
 4 | 
 5 | export default class YoutubeThumbnail extends React.Component {
 6 |   render() {
 7 |     const { videoId, ...props } = this.props;
 8 | 
 9 |     return <img src={youtubeIdToThumbnailUrl(videoId)} {...props} />;
10 |   }
11 | }
12 | 
13 | YoutubeThumbnail.propTypes = {
14 |   videoId: React.PropTypes.string.isRequired,
15 | };
16 | 


--------------------------------------------------------------------------------
/app/client/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title></title>
 5 |     <style>
 6 |     html, body, #app, #app > div {
 7 |       color: white;
 8 |       background-color: #222;
 9 |       margin: 0;
10 |       padding: 0;
11 |       width: 100%;
12 |       height: 100%;
13 |     }
14 | 
15 | 
16 |     /* Custom slider CSS */
17 |     input[type=range].slider {
18 |       -webkit-appearance: none;
19 |       background-color: transparent;
20 |     }
21 | 
22 |     input[type=range].slider:focus {
23 |       outline: none;
24 |     }
25 | 
26 |     input[type=range].slider::-webkit-slider-runnable-track {
27 |       -webkit-appearance: none;
28 |       position: relative;
29 |       height: 6px;
30 |       background-color: #777;
31 |       border-radius: 5px;
32 |     }
33 | 
34 |     input[type=range].slider::-webkit-slider-thumb {
35 |       -webkit-appearance: none;
36 |       position: absolute;
37 |       top: -4px;
38 |       width: 8px;
39 |       height: 15px;
40 |       background-color: #777;
41 |       border: 1px solid #fff;
42 |       border-radius: 10px;
43 |     }
44 |     </style>
45 |   </head>
46 |   <body>
47 |     <div id="app"></div>
48 |     <script>
49 |       require("babel/register");
50 |       require("./main.js");
51 |     </script>
52 |   </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/app/client/main.js:
--------------------------------------------------------------------------------
 1 | process.on("unhandledRejection", (rej) => {
 2 |   console.error("Detected unhandled rejected promise:");
 3 |   console.error(rej);
 4 | });
 5 | 
 6 | import React from "react";
 7 | import ReactDOM from "react-dom";
 8 | 
 9 | import { compose, createStore, applyMiddleware } from "redux";
10 | import { devTools, persistState } from 'redux-devtools';
11 | import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
12 | import { Provider } from "react-redux";
13 | import reduceReducers from "reduce-reducers";
14 | 
15 | import { playlistReducer, playbackStateReducer } from "./redux/reducers";
16 | 
17 | import Application from "./components/application";
18 | 
19 | 
20 | const rootReducer = reduceReducers(
21 |   playlistReducer,
22 |   playbackStateReducer
23 | );
24 | 
25 | const finalCreateStore = compose(
26 |   devTools()
27 | )(createStore);
28 | 
29 | const store = finalCreateStore(rootReducer);
30 | 
31 | const app = (
32 |   <div>
33 |     <Provider store={store}>
34 |       <Application />
35 |     </Provider>
36 |     <DebugPanel top right bottom>
37 |       <DevTools store={store} monitor={LogMonitor} visibleOnLoad={false} />
38 |     </DebugPanel>
39 |   </div>
40 | );
41 | 
42 | ReactDOM.render(app, document.getElementById("app"));
43 | 


--------------------------------------------------------------------------------
/app/client/redux/actions.js:
--------------------------------------------------------------------------------
 1 | function actionCreator(type, ...argNames) {
 2 |   return (...args) => {
 3 |     const action = argNames.reduce((acc, argName, idx) => {
 4 |       acc[argName] = args[idx];
 5 |       return acc;
 6 |     }, { type: type });
 7 |     return action;
 8 |   };
 9 | }
10 | 
11 | export const selectVideo = actionCreator("SELECT_VIDEO", "videoId");
12 | export const selectNextVideo = actionCreator("SELECT_NEXT_VIDEO");
13 | export const setVolume = actionCreator("SET_VOLUME", "volume");
14 | export const updateCurrentTime = actionCreator("UPDATE_CURRENT_TIME", "newTime");
15 | export const updatePlaybackStatus = actionCreator("UPDATE_PLAYBACK_STATUS", "status");
16 | export const updateVideoDuration = actionCreator("UPDATE_VIDEO_DURATION", "videoId", "duration");
17 | export const addVideoToPlaylist = actionCreator("ADD_VIDEO", "videoId");
18 | export const removeVideoFromPlaylist = actionCreator("REMOVE_VIDEO", "videoId");
19 | export const setPlaylistVideos = actionCreator("SET_PLAYLIST_VIDEOS", "videoIds");
20 | 


--------------------------------------------------------------------------------
/app/client/redux/reducers.js:
--------------------------------------------------------------------------------
 1 | const savedVolume = parseInt(window.localStorage.getItem('initialVolume'), 10);
 2 | 
 3 | const initialState = {
 4 |   playlist: [
 5 |     // "VJdi9SDlVhU",
 6 |     // "h_aKALHPRmU",
 7 |     "trvnP7EsAHA"
 8 |   ],
 9 |   currentVideoId: "trvnP7EsAHA",
10 |   playbackStatus: "PAUSED",
11 |   videoDurations: {}, // id => duration
12 |   volume: Number.isNaN(savedVolume) ? 100 : savedVolume,
13 | };
14 | 
15 | export function playlistReducer(state = initialState, action) {
16 |   switch (action.type) {
17 |     case "SELECT_VIDEO":
18 |       return {
19 |         ...state,
20 |         currentVideoId: action.videoId
21 |       };
22 |     case "SELECT_NEXT_VIDEO":
23 |       const thisVideoId = state.currentVideoId;
24 |       const index = state.playlist.indexOf(thisVideoId);
25 |       let nextVideoIndex = index + 1;
26 |       const numVideos = state.playlist.length;
27 |       if (nextVideoIndex > numVideos - 1) {
28 |         nextVideoIndex = 0;
29 |       }
30 |       const nextVideoId = state.playlist[nextVideoIndex];
31 | 
32 |       return {
33 |         ...state,
34 |         currentVideoId: nextVideoId
35 |       };
36 |     case "SET_VOLUME":
37 |       window.localStorage.setItem('initialVolume', action.volume);
38 |       return {
39 |         ...state,
40 |         volume: action.volume
41 |       };
42 |     case "ADD_VIDEO":
43 |       {
44 |         if (state.playlist.includes(action.videoId)) {
45 |           return state;
46 |         }
47 | 
48 |         const newVideoId = state.currentVideoId || action.videoId;
49 | 
50 |         return {
51 |           ...state,
52 |           playlist: state.playlist.concat([action.videoId]),
53 |           currentVideoId: newVideoId
54 |         };
55 |       }
56 |     case "REMOVE_VIDEO":
57 |       const newPlaylist = state.playlist.filter(id => id !== action.videoId)
58 |       let newVideoId = state.currentVideoId;
59 |       if (state.currentVideoId === action.videoId) {
60 |         // Current video is being removed.
61 |         newVideoId = newPlaylist[0];
62 |       }
63 |       return {
64 |         ...state,
65 |         playlist: newPlaylist,
66 |         currentVideoId: newVideoId
67 |       };
68 |     case "SET_PLAYLIST_VIDEOS":
69 |       return {
70 |         ...state,
71 |         playlist: action.videoIds,
72 |         currentVideoId: action.videoIds[0]
73 |       };
74 |     default:
75 |       return state;
76 |   }
77 | }
78 | 
79 | export function playbackStateReducer(state = initialState, action) {
80 |   switch (action.type) {
81 |     case "UPDATE_PLAYBACK_STATUS":
82 |       return {
83 |         ...state,
84 |         playbackStatus: action.status
85 |       };
86 |     case "UPDATE_VIDEO_DURATION":
87 |       return {
88 |         ...state,
89 |         videoDurations: {
90 |           ...state.videoDurations,
91 |           [action.videoId]: action.duration
92 |         }
93 |       };
94 |     default:
95 |       return state;
96 |   }
97 | }
98 | 


--------------------------------------------------------------------------------
/app/client/utils.js:
--------------------------------------------------------------------------------
 1 | export function youtubeIdToThumbnailUrl(videoId) {
 2 |   return `http://img.youtube.com/vi/${videoId}/0.jpg`;
 3 | }
 4 | 
 5 | export function secondsDisplay(seconds) {
 6 |   const minutes = Math.floor(seconds / 60);
 7 |   const remainSeconds = seconds % 60;
 8 | 
 9 |   let secondsStr = `${remainSeconds}`;
10 |   if (secondsStr.length === 1) {
11 |     secondsStr = "0" + secondsStr;
12 |   }
13 | 
14 |   return `${minutes}:${secondsStr}`;
15 | }
16 | 


--------------------------------------------------------------------------------
/app/client/youtube_api.js:
--------------------------------------------------------------------------------
 1 | let apiPromise;
 2 | 
 3 | const api = () => {
 4 |   if (apiPromise) {
 5 |     return apiPromise;
 6 |   }
 7 | 
 8 |   apiPromise = new Promise(resolve => {
 9 |     window.onYouTubeIframeAPIReady = () => {
10 |       console.log("YouTube API loaded");
11 |       resolve();
12 |     }
13 | 
14 |     const tag = document.createElement('script');
15 |     tag.src = "https://www.youtube.com/iframe_api";
16 |     const firstScriptTag = document.getElementsByTagName('script')[0];
17 |     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
18 |   });
19 | 
20 |   return apiPromise;
21 | };
22 | 
23 | export default api;
24 | 


--------------------------------------------------------------------------------
/mocks/mock.bmml:
--------------------------------------------------------------------------------
  1 | <mockup version="1.0" skin="sketch" fontFace="Balsamiq Sans" measuredW="936" measuredH="749" mockupW="903" mockupH="713">
  2 |   <controls>
  3 |     <control controlID="1" controlTypeID="com.balsamiq.mockups::TitleWindow" x="58" y="36" w="878" h="565" measuredW="450" measuredH="400" zOrder="0" locked="false" isInGroup="-1">
  4 |       <controlProperties>
  5 |         <bottomheight>0</bottomheight>
  6 |         <close>true</close>
  7 |         <maximizeRestore>true</maximizeRestore>
  8 |         <minimize>true</minimize>
  9 |         <text>YouTube%20Player</text>
 10 |       </controlProperties>
 11 |     </control>
 12 |     <control controlID="7" controlTypeID="com.balsamiq.mockups::Image" x="62" y="493" w="158" h="103" measuredW="1920" measuredH="1080" zOrder="1" locked="false" isInGroup="-1">
 13 |       <controlProperties>
 14 |         <filter>true</filter>
 15 |         <src>http%3A//i.ytimg.com/vi/nxnx44MyxXA/maxresdefault.jpg</src>
 16 |         <text/>
 17 |       </controlProperties>
 18 |     </control>
 19 |     <control controlID="8" controlTypeID="com.balsamiq.mockups::MediaControls" x="227" y="559" w="-1" h="-1" measuredW="110" measuredH="36" zOrder="2" locked="false" isInGroup="-1"/>
 20 |     <control controlID="9" controlTypeID="com.balsamiq.mockups::ProgressBar" x="393" y="567" w="324" h="20" measuredW="100" measuredH="20" zOrder="3" locked="false" isInGroup="-1">
 21 |       <controlProperties>
 22 |         <scrollBarValue>81</scrollBarValue>
 23 |       </controlProperties>
 24 |     </control>
 25 |     <control controlID="10" controlTypeID="com.balsamiq.mockups::Label" x="123" y="129" w="-1" h="-1" measuredW="23" measuredH="21" zOrder="4" locked="false" isInGroup="-1">
 26 |       <controlProperties>
 27 |         <text>5%3A17</text>
 28 |       </controlProperties>
 29 |     </control>
 30 |     <control controlID="11" controlTypeID="com.balsamiq.mockups::Label" x="364" y="567" w="-1" h="-1" measuredW="24" measuredH="21" zOrder="5" locked="false" isInGroup="-1">
 31 |       <controlProperties>
 32 |         <text>5%3A31</text>
 33 |       </controlProperties>
 34 |     </control>
 35 |     <control controlID="12" controlTypeID="com.balsamiq.mockups::Label" x="723" y="567" w="-1" h="-1" measuredW="26" measuredH="21" zOrder="7" locked="false" isInGroup="-1">
 36 |       <controlProperties>
 37 |         <text>7%3A45</text>
 38 |       </controlProperties>
 39 |     </control>
 40 |     <control controlID="13" controlTypeID="com.balsamiq.mockups::VolumeSlider" x="849" y="569" w="-1" h="-1" measuredW="72" measuredH="16" zOrder="8" locked="false" isInGroup="-1"/>
 41 |     <control controlID="17" controlTypeID="com.balsamiq.mockups::HRule" x="58" y="487" w="164" h="-1" measuredW="100" measuredH="10" zOrder="10" locked="false" isInGroup="-1"/>
 42 |     <control controlID="18" controlTypeID="com.balsamiq.mockups::VerticalScrollBar" x="206" y="62" w="-1" h="425" measuredW="16" measuredH="100" zOrder="11" locked="false" isInGroup="-1">
 43 |       <controlProperties>
 44 |         <value>17</value>
 45 |       </controlProperties>
 46 |     </control>
 47 |     <control controlID="20" controlTypeID="com.balsamiq.mockups::Image" x="66" y="115" w="51" h="34" measuredW="1920" measuredH="1080" zOrder="12" locked="false" isInGroup="-1">
 48 |       <controlProperties>
 49 |         <filter>true</filter>
 50 |         <src>http%3A//i.ytimg.com/vi/_3GJMQa0J8g/maxresdefault.jpg</src>
 51 |         <text/>
 52 |       </controlProperties>
 53 |     </control>
 54 |     <control controlID="21" controlTypeID="com.balsamiq.mockups::Label" x="123" y="112" w="-1" h="-1" measuredW="70" measuredH="21" zOrder="13" locked="false" isInGroup="-1">
 55 |       <controlProperties>
 56 |         <text>Some%20video</text>
 57 |       </controlProperties>
 58 |     </control>
 59 |     <control controlID="23" controlTypeID="com.balsamiq.mockups::Canvas" x="61" y="165" w="145" h="46" measuredW="100" measuredH="70" zOrder="14" locked="false" isInGroup="-1">
 60 |       <controlProperties>
 61 |         <backgroundAlpha>1</backgroundAlpha>
 62 |         <borderColor>14540253</borderColor>
 63 |         <borderStyle>square</borderStyle>
 64 |         <color>14540253</color>
 65 |       </controlProperties>
 66 |     </control>
 67 |     <control controlID="24" controlTypeID="com.balsamiq.mockups::Label" x="121" y="185" w="-1" h="-1" measuredW="26" measuredH="21" zOrder="15" locked="false" isInGroup="-1">
 68 |       <controlProperties>
 69 |         <text>7%3A45</text>
 70 |       </controlProperties>
 71 |     </control>
 72 |     <control controlID="25" controlTypeID="com.balsamiq.mockups::Image" x="64" y="171" w="51" h="34" measuredW="1920" measuredH="1080" zOrder="16" locked="false" isInGroup="-1">
 73 |       <controlProperties>
 74 |         <filter>true</filter>
 75 |         <src>http%3A//i.ytimg.com/vi/nxnx44MyxXA/maxresdefault.jpg</src>
 76 |         <text/>
 77 |       </controlProperties>
 78 |     </control>
 79 |     <control controlID="26" controlTypeID="com.balsamiq.mockups::Label" x="121" y="168" w="-1" h="-1" measuredW="70" measuredH="21" zOrder="17" locked="false" isInGroup="-1">
 80 |       <controlProperties>
 81 |         <text>Some%20video</text>
 82 |       </controlProperties>
 83 |     </control>
 84 |     <control controlID="28" controlTypeID="com.balsamiq.mockups::Label" x="121" y="240" w="-1" h="-1" measuredW="27" measuredH="21" zOrder="18" locked="false" isInGroup="-1">
 85 |       <controlProperties>
 86 |         <text>9%3A54</text>
 87 |       </controlProperties>
 88 |     </control>
 89 |     <control controlID="29" controlTypeID="com.balsamiq.mockups::Image" x="64" y="226" w="51" h="34" measuredW="1920" measuredH="1080" zOrder="19" locked="false" isInGroup="-1">
 90 |       <controlProperties>
 91 |         <filter>true</filter>
 92 |         <src>http%3A//i.ytimg.com/vi/PNsF7UnKABg/maxresdefault.jpg</src>
 93 |         <text/>
 94 |       </controlProperties>
 95 |     </control>
 96 |     <control controlID="30" controlTypeID="com.balsamiq.mockups::Label" x="121" y="223" w="-1" h="-1" measuredW="70" measuredH="21" zOrder="20" locked="false" isInGroup="-1">
 97 |       <controlProperties>
 98 |         <text>Some%20video</text>
 99 |       </controlProperties>
100 |     </control>
101 |     <control controlID="31" controlTypeID="com.balsamiq.mockups::ComboBox" x="66" y="76" w="118" h="-1" measuredW="81" measuredH="24" zOrder="21" locked="false" isInGroup="-1">
102 |       <controlProperties>
103 |         <text>Playlist%201</text>
104 |       </controlProperties>
105 |     </control>
106 |     <control controlID="33" controlTypeID="com.balsamiq.mockups::Icon" x="190" y="80" w="-1" h="-1" measuredW="16" measuredH="16" zOrder="22" locked="false" isInGroup="-1">
107 |       <controlProperties>
108 |         <icon>PencilIcon%7Cxsmall</icon>
109 |       </controlProperties>
110 |     </control>
111 |     <control controlID="35" controlTypeID="com.balsamiq.mockups::Canvas" x="62" y="559" w="158" h="37" measuredW="100" measuredH="70" zOrder="23" locked="false" isInGroup="-1">
112 |       <controlProperties>
113 |         <backgroundAlpha>0.75</backgroundAlpha>
114 |         <borderColor>16777215</borderColor>
115 |         <borderStyle>none</borderStyle>
116 |       </controlProperties>
117 |     </control>
118 |     <control controlID="36" controlTypeID="com.balsamiq.mockups::Label" x="65" y="561" w="-1" h="-1" measuredW="71" measuredH="21" zOrder="24" locked="false" isInGroup="-1">
119 |       <controlProperties>
120 |         <text>Some%20Video</text>
121 |       </controlProperties>
122 |     </control>
123 |     <control controlID="37" controlTypeID="com.balsamiq.mockups::Icon" x="193" y="559" w="-1" h="-1" measuredW="24" measuredH="24" zOrder="25" locked="false" isInGroup="-1">
124 |       <controlProperties>
125 |         <icon>LinkIcon%7Csmall</icon>
126 |       </controlProperties>
127 |     </control>
128 |     <control controlID="38" controlTypeID="com.balsamiq.mockups::Label" x="65" y="577" w="-1" h="-1" measuredW="67" measuredH="21" zOrder="26" locked="false" isInGroup="-1">
129 |       <controlProperties>
130 |         <color>3355443</color>
131 |         <text>Some%20User</text>
132 |       </controlProperties>
133 |     </control>
134 |     <control controlID="39" controlTypeID="com.balsamiq.mockups::Button" x="65" y="457" w="134" h="27" measuredW="101" measuredH="27" zOrder="27" locked="false" isInGroup="-1">
135 |       <controlProperties>
136 |         <icon>PlusBigIcon%7Cxsmall</icon>
137 |         <text>Add%20Video</text>
138 |       </controlProperties>
139 |     </control>
140 |     <control controlID="40" controlTypeID="com.balsamiq.mockups::Icon" x="99" y="227" w="-1" h="-1" measuredW="16" measuredH="16" zOrder="28" locked="false" isInGroup="-1">
141 |       <controlProperties>
142 |         <borderStyle>square</borderStyle>
143 |         <color>0</color>
144 |         <icon>XIcon%7Cxsmall</icon>
145 |       </controlProperties>
146 |     </control>
147 |     <control controlID="41" controlTypeID="com.balsamiq.mockups::CallOut" x="33" y="240" w="-1" h="-1" measuredW="36" measuredH="37" zOrder="29" locked="false" isInGroup="-1">
148 |       <controlProperties>
149 |         <text>1</text>
150 |       </controlProperties>
151 |     </control>
152 |     <control controlID="45" controlTypeID="com.balsamiq.mockups::CallOut" x="58" y="644" w="-1" h="-1" measuredW="33" measuredH="39" zOrder="30" locked="false" isInGroup="-1">
153 |       <controlProperties>
154 |         <text>1</text>
155 |       </controlProperties>
156 |     </control>
157 |     <control controlID="46" controlTypeID="com.balsamiq.mockups::Paragraph" x="104" y="642" w="275" h="68" measuredW="275" measuredH="80" zOrder="31" locked="false" isInGroup="-1">
158 |       <controlProperties>
159 |         <text>Playlist%20manager%20supports%20multiple%20playlists%0A%20%0ACan%20add/remove%20videos%2C%20search%20YouTube%2C%20import%20YouTube%20playlists%2C%20etc%0A%20%0APlaylists%20persisted%20locally%20to%20disk</text>
160 |       </controlProperties>
161 |     </control>
162 |     <control controlID="47" controlTypeID="com.balsamiq.mockups::CallOut" x="164" y="588" w="-1" h="-1" measuredW="41" measuredH="39" zOrder="32" locked="false" isInGroup="-1">
163 |       <controlProperties>
164 |         <text>2</text>
165 |       </controlProperties>
166 |     </control>
167 |     <control controlID="48" controlTypeID="com.balsamiq.mockups::CallOut" x="379" y="642" w="-1" h="-1" measuredW="36" measuredH="43" zOrder="33" locked="false" isInGroup="-1">
168 |       <controlProperties>
169 |         <text>2</text>
170 |       </controlProperties>
171 |     </control>
172 |     <control controlID="49" controlTypeID="com.balsamiq.mockups::Paragraph" x="427" y="645" w="275" h="37" measuredW="275" measuredH="80" zOrder="34" locked="false" isInGroup="-1">
173 |       <controlProperties>
174 |         <text>%22Currently%20Playing%22%20allows%20links%20to%20YouTube%20URLs%20for%20video%2C%20user%2C%20etc.</text>
175 |       </controlProperties>
176 |     </control>
177 |     <control controlID="50" controlTypeID="com.balsamiq.mockups::CallOut" x="458" y="507" w="-1" h="-1" measuredW="36" measuredH="37" zOrder="35" locked="false" isInGroup="-1">
178 |       <controlProperties>
179 |         <text>3</text>
180 |       </controlProperties>
181 |     </control>
182 |     <control controlID="51" controlTypeID="com.balsamiq.mockups::CallOut" x="289" y="710" w="-1" h="-1" measuredW="39" measuredH="39" zOrder="36" locked="false" isInGroup="-1">
183 |       <controlProperties>
184 |         <text>3</text>
185 |       </controlProperties>
186 |     </control>
187 |     <control controlID="52" controlTypeID="com.balsamiq.mockups::Paragraph" x="337" y="714" w="275" h="33" measuredW="275" measuredH="80" zOrder="37" locked="false" isInGroup="-1">
188 |       <controlProperties>
189 |         <text>YouTube%20controls%20hidden.%20Custom%20controls%20displayed%20at%20bottom.</text>
190 |       </controlProperties>
191 |     </control>
192 |     <control controlID="53" controlTypeID="com.balsamiq.mockups::Icon" x="765" y="565" w="-1" h="-1" measuredW="24" measuredH="24" zOrder="38" locked="false" isInGroup="-1">
193 |       <controlProperties>
194 |         <icon>ShuffleIcon%7Csmall</icon>
195 |       </controlProperties>
196 |     </control>
197 |     <control controlID="54" controlTypeID="com.balsamiq.mockups::Icon" x="800" y="565" w="-1" h="-1" measuredW="24" measuredH="24" zOrder="39" locked="false" isInGroup="-1">
198 |       <controlProperties>
199 |         <color>10066329</color>
200 |         <icon>RepeatIcon%7Csmall</icon>
201 |       </controlProperties>
202 |     </control>
203 |     <control controlID="61" controlTypeID="com.balsamiq.mockups::ModalScreen" x="223" y="62" w="709" h="484" measuredW="320" measuredH="240" zOrder="6" locked="false" isInGroup="-1"/>
204 |     <control controlID="63" controlTypeID="com.balsamiq.mockups::Image" x="524" y="269" w="-1" h="-1" measuredW="106" measuredH="99" zOrder="9" locked="false" isInGroup="-1">
205 |       <controlProperties>
206 |         <crop>394%2C325%2C211%2C366</crop>
207 |         <filter>true</filter>
208 |         <src>http%3A//www.carlduncker.com/wp-content/themes/wp_pinfinity5-v1.4/images/video-placeholder.png</src>
209 |         <text/>
210 |       </controlProperties>
211 |     </control>
212 |     <control controlID="64" controlTypeID="com.balsamiq.mockups::VRule" x="220" y="62" w="-1" h="539" measuredW="10" measuredH="100" zOrder="40" locked="false" isInGroup="-1"/>
213 |   </controls>
214 | </mockup>


--------------------------------------------------------------------------------
/mocks/mock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BinaryMuse/electron-youtube-player/6660be2796955be39f66fc5422f04a965d34f535/mocks/mock.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "youtube-player",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "scripts": {
 6 |     "test": "echo \"Error: no test specified\" && exit 1",
 7 |     "start": "electron ."
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "MIT",
12 |   "private": true,
13 |   "dependencies": {
14 |     "babel": "^5.8.23",
15 |     "babel-core": "^5.8.25",
16 |     "babel-loader": "^5.3.2",
17 |     "babel-runtime": "^5.8.25",
18 |     "core-decorators": "^0.4.1",
19 |     "react": "^0.14.0-rc1",
20 |     "react-dom": "^0.14.0-rc1",
21 |     "react-redux": "^3.0.0",
22 |     "reduce-reducers": "^0.1.1",
23 |     "redux": "^3.0.2",
24 |     "redux-devtools": "^2.1.4",
25 |     "redux-thunk": "^1.0.0",
26 |     "webpack": "^1.12.2"
27 |   },
28 |   "devDependencies": {
29 |     "babel-plugin-react-transform": "^1.1.1",
30 |     "electron-prebuilt": "^0.33.3",
31 |     "electron-rebuild": "^1.0.0",
32 |     "react-transform-catch-errors": "^1.0.0",
33 |     "react-transform-hmr": "^1.0.1",
34 |     "redbox-react": "^1.1.1",
35 |     "webpack-dev-server": "^1.12.0"
36 |   },
37 |   "main": "app/bootstrap.js"
38 | }
39 | 


--------------------------------------------------------------------------------