Merge pull request #67 from nus-mtp/admin-stream-comments

yj-soh · yj-soh · commit 5d2edb450dfe · 2016-03-15T18:29:03.000+08:00
Admin - Stream Comments
diff --git a/app_server/Gruntfile.js b/app_server/Gruntfile.js
@@ -73,10 +73,6 @@ module.exports = function(grunt) {
           {
             src: './node_modules/materialize-css/dist/js/materialize.min.js',
             dest: './public/js/materialize.js'
-          },
-          {
-            src: './node_modules/shaka-player/shaka-player.compiled.js',
-            dest: './public/js/shaka.js'
           }
         ]
       }
diff --git a/app_server/app/adapters/socket/SocketAdapter.js b/app_server/app/adapters/socket/SocketAdapter.js
@@ -45,12 +45,19 @@ Class.__handleIdentifyEvent = function(socket) {
     Iron.unsealAsync(cookieData, ServerConfig.cookiePassword, Iron.defaults)
     .then((credentials) => {
       if (!credentials || credentials instanceof Error) {
-        logger.error('Error decryping cookie from <identify> message');
+        logger.error('Error decrypting cookie from <identify> message');
         return socket.emit('identify', 'ERR');
       }
 
       let Authenticator = this.server.app.authenticator;
-      return Authenticator.validateAccount(this.server, credentials)
+
+      let request = socket.request;
+      if (credentials.scope &&
+          credentials.scope.indexOf(Authenticator.SCOPE.ADMIN.STREAMS) > -1) {
+        request.headers['x-csrf-token'] = request.headers['cookie'];
+      }
+
+      return Authenticator.validateAccount(this.server, credentials, request)
       .then((result) => {
         if (!result || result instanceof Error) {
           logger.error(result);
diff --git a/app_server/public/index.htm b/app_server/public/index.htm
@@ -9,7 +9,6 @@
 <body>
     <script src="js/jquery.js"></script>
     <script src="js/materialize.js"></script>
-    <script src="js/shaka.js"></script>
     <script src="js/app.js"></script>
 </body>
 </html>
diff --git a/app_server/public/src/css/partials/_comments.scss b/app_server/public/src/css/partials/_comments.scss
@@ -0,0 +1,17 @@
+$comment-line-height: 1.2rem;
+
+#comments {
+  line-height: $comment-line-height;
+  height: $comment-line-height * 15;
+  overflow: auto;
+  margin-top: $comment-line-height;
+
+  .comment-row {
+    margin-bottom: $comment-line-height / 2;
+
+    a {
+      color: #000000;
+      font-weight: bold;
+    }
+  }
+}
diff --git a/app_server/public/src/css/style.scss b/app_server/public/src/css/style.scss
@@ -33,3 +33,4 @@
 @import "partials/pagination";
 @import "partials/tables";
 @import "partials/message";
+@import "partials/comments";
diff --git a/app_server/public/src/js/modules/models/comment.js b/app_server/public/src/js/modules/models/comment.js
@@ -0,0 +1,17 @@
+const m = require('mithril');
+const App = require('../app');
+
+const Comment = module.exports = function (data) {
+  this.id = m.prop(data.commentId);
+  this.msg = m.prop(data.content);
+  this.time = m.prop(new Date(data.createdAt));
+  this.user = m.prop(data.alias || data.userId);
+  this.userId = m.prop(data.userId);
+};
+
+Comment.list = (streamId) =>
+    App.request({
+      method: 'GET',
+      url: '../api/comments/streams/' + streamId,
+      type: Comment
+    });
diff --git a/app_server/public/src/js/modules/models/stream.js b/app_server/public/src/js/modules/models/stream.js
@@ -7,10 +7,10 @@ const Stream = module.exports = function (data) {
   this.appInstance = m.prop(data.appInstance);
   this.link = m.prop(data.viewLink);
   this.thumbnail = m.prop(data.thumbnailLink);
-  this.room = m.prop(data.roomId);
+  this.room = m.prop(data.appInstance);
   this.title = m.prop(data.title);
   this.startDateTime = m.prop(new Date(data.createdAt));
-  this.endDateTime = m.prop(new Date(data.endedAt));
+  this.endDateTime = m.prop(data.endedAt ? new Date(data.endedAt) : null);
   this.viewers = m.prop(data.totalViewers);
   this.stickers = m.prop(data.totalStickers);
   this.live = m.prop(data.live);
diff --git a/app_server/public/src/js/modules/pages/stream.js b/app_server/public/src/js/modules/pages/stream.js
@@ -1,14 +1,19 @@
-/*global shaka*/
-
 const m = require('mithril');
+const shaka = require('shaka-player');
+const io = require('socket.io-client');
 
+const CommentModel = require('../models/comment');
 const StreamModel = require('../models/stream');
 
 const datetime = require('../utils/dateFormat');
 
-const Stream = module.exports = {};
+const Stream = module.exports = {
+  stream: m.prop(),
+  comments: m.prop([]),
+  socket: m.prop()
+};
 
-Stream.stream = m.prop();
+const MAX_COMMENTS = 1000;
 
 const initPlayer = function () {
   shaka.polyfill.installAll();
@@ -34,10 +39,41 @@ const stopStream = function () {
   );
 };
 
+const initComments = function () {
+  Stream.socket(io());
+
+  Stream.socket().emit('identify', document.cookie);
+  Stream.socket().emit('join', Stream.stream().room());
+  Stream.socket().on('comment', function (res) {
+    m.startComputation();
+    Stream.comments().unshift(new CommentModel({
+      userId: res.userId,
+      alias: res.alias,
+      content: res.message,
+      createdAt: res.time
+    }));
+    while (Stream.comments().length > MAX_COMMENTS) {
+      Stream.comments().pop();
+    }
+    m.endComputation();
+  });
+};
+
+const destroyComments = function () {
+  Stream.socket().emit('leave', Stream.stream().room());
+};
+
 Stream.controller = function () {
   let id = m.route.param('id') || -1;
 
-  StreamModel.get(id).then(Stream.stream);
+  m.sync([
+    StreamModel.get(id).then(Stream.stream),
+    CommentModel.list(id).then(Stream.comments)
+  ]).then(initComments);
+
+  return {
+    onunload: destroyComments
+  };
 };
 
 Stream.view = function () {
@@ -63,13 +99,20 @@ Stream.view = function () {
           m('div.row col s9', [
             m('div.col s12', stream.user().alias()),
             m('div.col s12', 'Start: ' + datetime.toShortDateTime(stream.startDateTime())),
-            m('div.col s12', 'End: ' + datetime.toShortDateTime(stream.endDateTime()))
+            stream.endDateTime() ?
+                m('div.col s12', 'End: ' + datetime.toShortDateTime(stream.endDateTime())) :
+                null
           ])
         ]),
         m('div.row', [
           m('div.col s12', stream.description()),
           m('button.btn col s12', {onclick: stopStream}, 'Stop Stream'),
-          m('div.col s12', 'comment stream here')
+          m('div#comments.col s12',
+              Stream.comments().map((c) => m('div.comment-row', [
+                '[' + datetime.toShortTime(c.time()) + '] ',
+                m('a[href="/users/view/' + c.userId() + '"]', {config: m.route}, c.user() + ':'),
+                ' ' + c.msg()
+              ])))
         ])
       ])
     ])
diff --git a/app_server/public/src/js/modules/utils/dateFormat.js b/app_server/public/src/js/modules/utils/dateFormat.js
@@ -2,9 +2,9 @@
  * 'timeFormat' formats time into more readable formats.
  */
 const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const to2Digits = (i) => i < 10 ? '0' + i : i;
 const timeFormat = module.exports = {
-  toShortDateTime: function (d) {
-    return d.getDay() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear() + ', ' +
-        d.getHours() + ':' + d.getMinutes();
-  }
+  toShortDate: (d) => to2Digits(d.getDay()) + ' ' + months[d.getMonth()] + ' ' + d.getFullYear(),
+  toShortTime: (d) => to2Digits(d.getHours()) + ':' + to2Digits(d.getMinutes()),
+  toShortDateTime: (d) => timeFormat.toShortDate(d) + ', ' + timeFormat.toShortTime(d)
 };

Original file line number	Diff line number	Diff line change
`@@ -73,10 +73,6 @@ module.exports = function(grunt) {`
`73`	`73`	`{`
`74`	`74`	`src: './node_modules/materialize-css/dist/js/materialize.min.js',`
`75`	`75`	`dest: './public/js/materialize.js'`
`76`		`- },`
`77`		`- {`
`78`		`- src: './node_modules/shaka-player/shaka-player.compiled.js',`
`79`		`- dest: './public/js/shaka.js'`
`80`	`76`	`}`
`81`	`77`	`]`
`82`	`78`	`}`