andrewngu · ekeren · Jul 30, 2018 · Jul 30, 2018 · Jul 30, 2018 · Jul 30, 2018
diff --git a/client/public/index.html b/client/public/index.html
@@ -1,6 +1,12 @@
 <!DOCTYPE html>
 <html>
 <head>
+<script>
+ !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
+ analytics.load("CeMSMICrGfnI8vi7KO4QwZme533dvXci");
+ analytics.page();
+ }}();
+</script>
  <meta name="description" content="SoundRedux is a Soundcloud music player written in React and Redux. Full source code available at github.com/andrewngu/soundredux">
  <meta name="keywords" content="React, Redux, Soundcloud, Music, Javascript">
  <meta name="author" content="Andrew Nguyen @andrewngu">

diff --git a/client/src/components/Nav.jsx b/client/src/components/Nav.jsx
@@ -5,6 +5,7 @@ import NavSearch from '../components/NavSearch';
 import NavSession from '../components/NavSession';
 import NavUser from '../components/NavUser';
 import { SONGS_PATH } from '../constants/RouterConstants';
+import Rox from 'rox-browser'
 
 const defaultProps = {
  navPlaylist: null,
@@ -47,7 +48,7 @@ const Nav = ({
  <div className="nav">
  <div className="nav__inner container">
  <div className="nav__section">
- <i className="nav__logo__icon ion-radio-waves" />
+ <a onClick={Rox.showOverrides}> <i className="nav__logo__icon ion-radio-waves" /> </a>
  <Link
  className="nav__logo__text"
  navigateTo={navigateTo}

diff --git a/client/src/components/Player.jsx b/client/src/components/Player.jsx
@@ -6,6 +6,7 @@ import Slider from '../components/Slider';
 import { SONG_PATH, USER_PATH } from '../constants/RouterConstants';
 import { formatSeconds } from '../utils/NumberUtils';
 import volumeClassName from '../utils/PlayerUtils';
+import Flags from '../constants/Flags'
 
 const propTypes = {
  changeCurrentTime: PropTypes.func.isRequired,
@@ -115,6 +116,7 @@ const Player = ({
  </div>
  <div className="player__section player__section--options">
  <div className="player__buttons player__buttons--options">
+ { Flags.repeat.isEnabled() ? 
  <div
  className={`player__button ${repeat ? 'player__button--active' : ''}`}
  onClick={toggleRepeat}
@@ -123,6 +125,8 @@ const Player = ({
  >
  <i className="player__button__icon ion-loop" />
  </div>
+ : null }
+ { Flags.shuffle.isEnabled() ? 
  <div
  className={`player__button ${shuffle ? 'player__button--active' : ''}`}
  onClick={toggleShuffle}
@@ -131,6 +135,8 @@ const Player = ({
  >
  <i className="player__button__icon ion-shuffle" />
  </div>
+ : null }
+ { Flags.history.isEnabled() ?
  <div
  className={`player__button ${showHistory ? 'player__button--active' : ''}`}
  onClick={toggleShowHistory}
@@ -139,6 +145,7 @@ const Player = ({
  >
  <i className="player__button__icon ion-android-list" />
  </div>
+ : null }
  <div
  className="player__button player__button--volume"
  onClick={toggleMuted}

diff --git a/client/src/components/User.jsx b/client/src/components/User.jsx
@@ -6,6 +6,7 @@ import Loader from '../components/Loader';
 import stickyOnScroll from '../components/stickyOnScroll';
 import UserFollowings from '../components/UserFollowings';
 import UserMain from '../components/UserMain';
+import Flags from '../constants/Flags.js'
 
 const defaultProps = {
  playingSongId: null,
@@ -38,6 +39,7 @@ const propTypes = {
 class User extends Component {
  componentWillMount() {
  const { fetchUserIfNeeded, id, playlist, shouldFetchUser } = this.props;
+ analytics.track('User page reached', {id, playlist});
  fetchUserIfNeeded(shouldFetchUser, id, playlist);
  }
 
@@ -73,6 +75,7 @@ class User extends Component {
  return <Loader className="loader--full" isLoading />;
  }
 
+
  return (
  <div className="container">
  <div className="user content">
@@ -98,12 +101,14 @@ class User extends Component {
  />
  </div>
  <div className="user__sidebar">
+ { Flags.followingView.isEnabled() ? 
  <UserFollowings
  followings={followings}
  navigateTo={navigateTo}
  sidebarHeight={sidebarHeight}
  sticky={sticky}
  />
+ : null }
  </div>
  </div>
  </div>

diff --git a/client/src/components/UserFollowButton.jsx b/client/src/components/UserFollowButton.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Flags from '../constants/Flags'
 
 const propTypes = {
  id: PropTypes.number.isRequired,
@@ -15,6 +16,11 @@ class UserFollowButton extends Component {
 
  onClick() {
  const { id, isFollowing, toggleFollow } = this.props;
+ if (isFollowing) {
+ analytics.track('Stop Follow', {id});
+ } else {
+ analytics.track('Start Follow', {id});
+ }
  toggleFollow(id, !isFollowing);
  }
 
@@ -28,7 +34,7 @@ class UserFollowButton extends Component {
  role="button"
  tabIndex="0"
  >
- {isFollowing ? 'Following' : 'Follow'}
+ {isFollowing ? 'Following' : Flags.startFollowingWord.getValue()}
  </div>
  );
  }

diff --git a/client/src/constants/ApiConstants.js b/client/src/constants/ApiConstants.js
@@ -1,5 +1,5 @@
 const API_HOSTNAME = '//api.soundcloud.com';
-export const CLIENT_ID = 'f4323c6f7c0cd73d2d786a2b1cdae80c';
+export const CLIENT_ID = '342b8a7af638944906dcdb46f9d56d98';
 
 const constructUrl = url => `${API_HOSTNAME}${url}${url.indexOf('?') === -1 ? '?' : '&'}client_id=${CLIENT_ID}`;
 

diff --git a/client/src/constants/Flags.js b/client/src/constants/Flags.js
@@ -0,0 +1,43 @@
+// import rox-browser from npm
+
+import Rox from 'rox-browser'
+import UserRepo from '../store/UserRepo'
+
+// define an exported object that contains the flags
+const Flags = {
+ followingView: new Rox.Flag(),
+ history: new Rox.Flag(),
+ shuffle: new Rox.Flag(),
+ repeat: new Rox.Flag(),
+ jsonNba: new Rox.Variant('j1', ['j1', 'j2', 'j3']),
+ startFollowingWord: new Rox.Variant('Follow', ['Follow', 'Start Following', 'Watch Him'])
+};
+
+// Register the flags object under the namespace "default"
+Rox.register('default', Flags);
+
+
+ const options = {
+
+ selfManaged: {
+ serverURL: 'http://localhost:8557',
+ analyticsURL: 'http://localhost:8558'
+ }
+ }
+
+
+ // Setup the Rollout key
+ Rox.setup('5e977711c37225cea474c367', options);
+
+//Rox.setup('5990c4a1eae09726fa0d6040', { 
+// devModeSecret: "pFymEevjDCbXWoEZPDqrGT8v" 
+//});
+
+Rox.setCustomStringProperty('plan', () => UserRepo.getUser().plan);
+Rox.setCustomStringProperty('email', () => UserRepo.getUser().email);
+Rox.setCustomNumberProperty('playlist_count', () => UserRepo.getUser().playlistCount);
+Rox.setCustomStringProperty('soundcloud_id', () => UserRepo.getUser().id);
+
+
+//;
+export default Flags;
diff --git a/client/src/store/UserRepo.js b/client/src/store/UserRepo.js
@@ -0,0 +1,9 @@
+const UserRepo = {
+ getUser: () => ({
+ plan: "basic",
+ email: "[email protected]",
+ playlistCount: 20,
+ soundcloud_id: "abcd1234"
+ })
+};
+export default UserRepo;
diff --git a/client/webpack.dev.config.js b/client/webpack.dev.config.js
@@ -51,7 +51,12 @@ module.exports = {
  ],
  devServer: {
  host: '0.0.0.0',
+ allowedHosts: [
+ '.amazonaws.com',
+ '127.0.0.1',
+ '.rollout.io'
+ ],
  hot: true,
- port: '8080',
+ port: '8083',
  },
 };
diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
  "redux": "^3.7.2",
  "redux-thunk": "^2.2.0",
  "reselect": "^3.0.1",
+ "rox-browser": "^4.9.5",
  "soundcloud": "^3.2.1"
  }
 }