Log simple user events

The following events are logged:
- xblock.officemix.loaded
- xblock.officemix.played
- xblock.officemix.paused
- xblock.officemix.stopped

Signed-off-by: Bertrand Marron <bertrand.marron@ionisx.com>

officemix/officemix.py

@@ -18,7 +18,6 @@ from xblock.core import XBlock
 from xblock.fields import Scope, Integer, String
 from xblock.fragment import Fragment
 
-
 class OfficeMixXBlock(XBlock):
     """
     An XBlock providing Office Mix embedding capabilities
@@ -27,16 +26,16 @@ class OfficeMixXBlock(XBlock):
     # Stored values for the XBlock
     href = String(
         display_name="Office Mix Embed URL",
-        help="URL of the Office Mix you want to embed", 
+        help="URL of the Office Mix you want to embed",
         scope=Scope.content,
         default='https://mix.office.com/watch/10g8h9tvipyg8')
-        
+
     display_name = String(
         display_name="Display Name",
         help="This name appears in the horizontal navigation at the top of the page.",
         scope=Scope.settings,
         default="Office Mix")
-    
+
     def resource_string(self, path):
         """Handy helper for getting resources from our kit."""
         data = pkg_resources.resource_string(__name__, path)
@@ -46,7 +45,7 @@ class OfficeMixXBlock(XBlock):
         """
         Studio view part
         """
-        
+
         href = self.href or ''
         display_name = self.display_name or ''
 
@@ -55,7 +54,7 @@ class OfficeMixXBlock(XBlock):
 
         js_str = self.resource_string("/static/js/officemix_edit.js")
         frag.add_javascript(js_str)
-     
+
         css_str = self.resource_string("/static/css/officemix_edit.css")
         frag.add_css(css_str)
 
@@ -72,11 +71,11 @@ class OfficeMixXBlock(XBlock):
         """
         href = self.href or ''
         display_name = self.display_name or ''
-        
-        # Make the oEmbed call to get the embed code 
+
+        # Make the oEmbed call to get the embed code
         try:
             embed_code, width, height = self.get_embed_code(href)
-            html_str = self.resource_string("static/html/officemix.html") 
+            html_str = self.resource_string("static/html/officemix.html")
         except Exception as ex:
             html_str = self.resource_string("static/html/embed_error.html")
             frag = Fragment(html_str.format(self=self, exception=cgi.escape(str(ex))))
@@ -87,22 +86,40 @@ class OfficeMixXBlock(XBlock):
 
         # Construct the HTML
         frag = Fragment(html_str.format(
-            self=self, 
+            self=self,
             embed_code=embed_code,
             display_name=cgi.escape(display_name)))
 
+        # Construct the JavaScript
+        frag.add_javascript(self.resource_string("/static/js/player-0.0.11.js"))
+        frag.add_javascript(self.resource_string("/static/js/officemix_view.js"))
+
         # And construct the CSS
         css_str = self.resource_string("static/css/officemix.css")
         css_str = string.replace(unicode(css_str), "{aspect_ratio}", cgi.escape(unicode(round(ratio, 2))))
         frag.add_css(css_str)
-        
+
+        frag.initialize_js('OfficeMixBlock')
         return frag
 
     @XBlock.json_handler
     def studio_submit(self, data, suffic=''):
         self.href = data.get('href')
         self.display_name = data.get('display_name')
-        
+
+        return {'result': 'success'}
+
+    @XBlock.json_handler
+    def publish_event(self, data, suffix=''):
+        """
+        AJAX handler to allow client-side code to publish a server-side event
+        """
+        try:
+            event_type = data.pop('event_type')
+        except KeyError:
+            return {'result': 'error', 'message': 'Missing event_type in JSON data'}
+
+        self.runtime.publish(self, event_type, data)
         return {'result': 'success'}
 
     def get_embed_code(self, url):
@@ -112,7 +129,7 @@ class OfficeMixXBlock(XBlock):
         """
 
         parameters = { 'url': url }
- 
+
         oEmbedRequest = requests.get("https://mix.office.com/oembed/", params = parameters)
         oEmbedRequest.raise_for_status()
         responseJson = oEmbedRequest.json()

officemix/static/js/officemix_view.js

+function OfficeMixBlock(runtime, element) {
+    var iframe = $('iframe', element);
+    var player = new playerjs.Player(iframe.get(0));
+
+    var mixUrl = iframe.attr('src');
+    var eventUrl = runtime.handlerUrl(element, 'publish_event');
+
+    player.on('ready', function () {
+        player.getDuration(function (duration) {
+            var data = {
+                'event_type': 'xblock.officemix.loaded',
+                url: mixUrl,
+                duration: duration
+            };
+
+            $.post(eventUrl, JSON.stringify(data));
+        });
+
+        player.on('play', function () {
+            player.getCurrentTime(function (value) {
+                var data = {
+                    'event_type': 'xblock.officemix.played',
+                    url: mixUrl,
+                    time: value
+                };
+
+                $.post(eventUrl, JSON.stringify(data));
+            });
+        });
+
+        player.on('pause', function () {
+            player.getCurrentTime(function (value) {
+                var data = {
+                    'event_type': 'xblock.officemix.paused',
+                    url: mixUrl,
+                    time: value
+                };
+
+                $.post(eventUrl, JSON.stringify(data));
+            });
+        });
+
+        player.on('ended', function () {
+            var data = {
+                'event_type': 'xblock.officemix.stopped',
+                url: mixUrl
+            };
+
+            $.post(eventUrl, JSON.stringify(data));
+        });
+    });
+}