Integrate dash player library and feed with new video player

Added dash.js and implemented a HTML5 video player for reddit hosted
videos. This commit includes the integration with the feed and comments
pages and the new video player is currently only used for reddit hosted
content.

package.json

@@ -33,6 +33,7 @@
     "branch-sdk": "^2.22.1",
     "cluster": "^0.7.7",
     "crypto-js": "3.1.8",
+    "dashjs": "^2.4.1",
     "event-tracker": "git://github.com/reddit/event-tracker.git#28bc2dd9ce3b80540fdf189e1b003f8264cd0d08",
     "js-cookie": "^2.1.1",
     "json-stable-stringify": "^1.0.1",
@@ -45,8 +46,8 @@
     "raf": "^3.2.0",
     "raven": "^1.1.1",
     "raven-js": "^3.7.0",
-    "react": "15.0.2",
-    "react-dom": "15.0.2",
+    "react": "15.4.0",
+    "react-dom": "15.4.0",
     "react-motion": "0.4.4",
     "react-redux": "4.4.5",
     "redux": "3.5.2",
@@ -66,7 +67,7 @@
     "eslint-plugin-babel": "^3.2.0",
     "eslint-plugin-react": "^5.1.1",
     "mocha": "2.4.5",
-    "react-addons-test-utils": "15.0.1",
+    "react-addons-test-utils": "15.5.0",
     "sinon": "1.17.3",
     "sinon-chai": "2.8.0",
     "webpack-bundle-analyzer": "^2.2.1"

src/apiClient/models/PostModel.js

@@ -79,6 +79,7 @@ export default class PostModel extends RedditModel {
     thirdPartyTracking2: T.string,
     thirdPartyTrackers: T.string,
     userReports: T.array,
+    videoPlaytime: T.number,
 
     // derived
     expandable: T.bool,

src/app/actions/posts.js

@@ -106,6 +106,18 @@ export const toggleHidePost = postId => async (dispatch, getState) => {
   }
 };
 
+export const updatePostPlaytime = (postId, newPlaytime) => async (dispatch, getState) => {
+  const state = getState();
+  const post = state.posts[postId];
+
+  try {
+    const newPost = PostModel.fromJSON({ ...post.toJSON(), videoPlaytime: newPlaytime });
+    dispatch(updatePlaying(newPost));
+  } catch (e) {
+    console.error(e);
+  }
+};
+
 export const TOGGLE_EDIT = 'POSTS__TOGGLE_EDIT';
 export const toggleEdit = postId => ({
   type: TOGGLE_EDIT,
@@ -124,6 +136,13 @@ export const stopPlaying = postId => ({
   thingId: postId,
 });
 
+//Video time must be kept current so that reports can be generated with video time
+export const UPDATE_VIDEO_TIME = 'POSTS__UPDATE_VIDEO_TIME';
+export const updatePlaying = (post) => ({
+  type: UPDATE_VIDEO_TIME,
+  post: post,
+});
+
 export const UPDATING_SELF_TEXT = 'POSTS__UPDATING_SELF_TEXT';
 export const updatingSelfText = postId => ({
   type: UPDATING_SELF_TEXT,

src/app/actions/reporting.js

@@ -23,7 +23,7 @@ export const report = thingId => async (dispatch, getState) => {
   const thing = modelFromThingId(thingId, state); 
   const thingType = ModelTypes.thingType(thingId);
   const usesSubredditRules = SubredditRule.doRulesApplyToThingType(thingType);
-  
+
   const props = {
     thingId,
     thingType,
@@ -33,6 +33,11 @@ export const report = thingId => async (dispatch, getState) => {
     props.subredditName = thing.subreddit;
   }
 
+  //If video playtime exists (video was playing when report generated) submit it with the report
+  if (thing.videoPlaytime) {
+    props.videoPlaytime = thing.videoPlaytime;
+  }
+
   dispatch({
     type: REPORT,
     modalType: MODAL_TYPE,
@@ -68,11 +73,15 @@ export const submit = report => async (dispatch, getState) => {
   const username = state.user.name;
 
   try {
+    const model = modelFromThingId(report.thingId, state);
+    report.reportTime = model.videoPlaytime;
+
     const body = {
       // 'reason' is either the shortname of a rule, or a special keyword
       // The naming in the api is... it could be better.
       reason: report.ruleName,
       thing_id: report.thingId,
+      report_time: report.reportTime,
       api_type: 'json',
     };
 
@@ -90,7 +99,6 @@ export const submit = report => async (dispatch, getState) => {
       body,
     });
 
-    const model = modelFromThingId(report.thingId, state);
     let moderatesSub = false;
 
     if (state.moderatingSubreddits && includes(state.moderatingSubreddits.names, model.subreddit)) {