Fix few frontend bugs slipped in after code restructuring (#184)

* Fix Editor tabs switch by passing event to toggleEditorTab() in studio-edit.js.
* Fix playback state save by correctly reading prev state from localStorage.
* Add `token` field to UI for Brightcove and Wistia.

CHANGELOG.md

@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
-## [0.6.3] - 2017-03-29
+## [0.6.3] - 2017-03-30
 
 ### Changed
 

video_xblock/backends/base.py

@@ -121,7 +121,7 @@ def basic_fields(self):
 
         Subclasses can extend or redefine list if needed. Defaults to a tuple defined by VideoXBlock.
         """
-        return ('display_name', 'href')
+        return ['display_name', 'href']
 
     @property
     def advanced_fields(self):
@@ -130,11 +130,11 @@ def advanced_fields(self):
 
         Subclasses can extend or redefine list if needed. Defaults to a tuple defined by VideoXBlock.
         """
-        return (
+        return [
             'start_time', 'end_time', 'handout', 'transcripts',
             'threeplaymedia_file_id', 'threeplaymedia_apikey', 'download_transcript_allowed',
             'default_transcripts', 'download_video_allowed', 'download_video_url'
-        )
+        ]
 
     @property
     def fields_help(self):

video_xblock/backends/brightcove.py

@@ -334,7 +334,7 @@ def basic_fields(self):
 
         Brightcove videos require Brightcove Account id.
         """
-        return super(BrightcovePlayer, self).basic_fields + ('account_id',)
+        return super(BrightcovePlayer, self).basic_fields + ['account_id']
 
     @property
     def advanced_fields(self):
@@ -343,7 +343,10 @@ def advanced_fields(self):
 
         Brightcove videos require Brightcove Account id.
         """
-        return ('player_id',) + super(BrightcovePlayer, self).advanced_fields
+        fields_list = ['player_id'] + super(BrightcovePlayer, self).advanced_fields
+        # Add `token` field before `threeplaymedia_file_id`
+        fields_list.insert(fields_list.index('threeplaymedia_file_id'), 'token')
+        return fields_list
 
     fields_help = {
         'token': 'You can generate a BC token following the guide of '

video_xblock/backends/html5.py

@@ -21,10 +21,10 @@ def advanced_fields(self):
 
         Hide `download_video_url` field for Html5Player.
         """
-        return tuple(
+        return [
             field for field in super(Html5Player, self).advanced_fields
             if field not in self.exclude_advanced_fields
-        )
+        ]
 
     exclude_advanced_fields = ('default_transcripts', 'download_video_url')
 

video_xblock/backends/wistia.py

@@ -57,6 +57,18 @@ class WistiaPlayer(BaseVideoPlayer):
                  'Please ensure appropriate operations scope has been set on the video platform.'
     }
 
+    @property
+    def advanced_fields(self):
+        """
+        Tuple of VideoXBlock fields to display in Basic tab of edit modal window.
+
+        Brightcove videos require Brightcove Account id.
+        """
+        fields_list = super(WistiaPlayer, self).advanced_fields
+        # Add `token` field before `threeplaymedia_file_id`
+        fields_list.insert(fields_list.index('threeplaymedia_file_id'), 'token')
+        return fields_list
+
     def media_id(self, href):
         """
         Extract Platform's media id from the video url.
@@ -78,10 +90,6 @@ def get_frag(self, **context):
             self.render_resource('static/html/wistiavideo.html', **context)
         )
 
-        frag.add_javascript(
-            self.render_resource('static/js/context.js', **context)
-        )
-
         js_files = [
             'static/vendor/js/vjs.wistia.js',
             'static/vendor/js/videojs-offset.min.js',

video_xblock/static/js/student-view/player-state.js

@@ -94,11 +94,7 @@ var PlayerState = function(player, playerState) {
     var saveProgressToLocalStore = function() {
         var playerObj = this;
         var playbackProgress;
-        try {
-            playbackProgress = JSON.parse(localStorage.getItem('playbackProgress'));
-        } catch (err) {
-            playbackProgress = {};
-        }
+        playbackProgress = JSON.parse(localStorage.getItem('playbackProgress') || '{}');
         playbackProgress[window.videoPlayerId] = playerObj.ended() ? 0 : playerObj.currentTime();
         localStorage.setItem('playbackProgress', JSON.stringify(playbackProgress));
     };

video_xblock/static/js/studio-edit/studio-edit.js

@@ -44,7 +44,7 @@ function StudioEditableXBlock(runtime, element) {
 
     /** Toggle studio editor's current tab.
      */
-    function toggleEditorTab(tabName) {
+    function toggleEditorTab(event, tabName) {
         var $tabDisable;
         var $tabEnable;
         var $otherTabName;
@@ -77,7 +77,7 @@ function StudioEditableXBlock(runtime, element) {
             // Bind listeners to the toggle buttons
             $('.edit-menu-tab').click(function(event) {
                 currentTabName = $(event.currentTarget).attr('data-tab-name');
-                toggleEditorTab(currentTabName);
+                toggleEditorTab(event, currentTabName);
             });
         }
     }());

video_xblock/tests/test_backends.py

@@ -89,39 +89,39 @@ def test_get_player_html(self):
             self.assertIn('window.videojs', res.body)
 
     expected_basic_fields = [
-        ('display_name', 'href'),
-        ('display_name', 'href', 'account_id'),
-        ('display_name', 'href'),
-        ('display_name', 'href'),
-        ('display_name', 'href'),
+        ['display_name', 'href'],
+        ['display_name', 'href', 'account_id'],
+        ['display_name', 'href'],
+        ['display_name', 'href'],
+        ['display_name', 'href'],
     ]
 
     expected_advanced_fields = [
-        (
+        [  # Youtube
             'start_time', 'end_time', 'handout', 'transcripts',
             'threeplaymedia_file_id', 'threeplaymedia_apikey', 'download_transcript_allowed',
             'default_transcripts', 'download_video_allowed', 'download_video_url'
-        ),
-        (
-            'player_id', 'start_time', 'end_time', 'handout', 'transcripts',
+        ],
+        [  # Brightcove
+            'player_id', 'start_time', 'end_time', 'handout', 'transcripts', 'token',
             'threeplaymedia_file_id', 'threeplaymedia_apikey', 'download_transcript_allowed',
             'default_transcripts', 'download_video_allowed', 'download_video_url'
-        ),
-        (
-            'start_time', 'end_time', 'handout', 'transcripts',
+        ],
+        [  # Wistia
+            'start_time', 'end_time', 'handout', 'transcripts', 'token',
             'threeplaymedia_file_id', 'threeplaymedia_apikey', 'download_transcript_allowed',
             'default_transcripts', 'download_video_allowed', 'download_video_url'
-        ),
-        (
+        ],
+        [  # Vimeo
             'start_time', 'end_time', 'handout', 'transcripts',
             'threeplaymedia_file_id', 'threeplaymedia_apikey', 'download_transcript_allowed',
             'default_transcripts', 'download_video_allowed', 'download_video_url'
-        ),
-        (
+        ],
+        [  # Html5
             'start_time', 'end_time', 'handout', 'transcripts',
             'threeplaymedia_file_id', 'threeplaymedia_apikey', 'download_transcript_allowed',
             'download_video_allowed',
-        ),
+        ],
     ]
 
     @data(*zip(backends, expected_basic_fields, expected_advanced_fields))
@@ -131,8 +131,8 @@ def test_basic_advanced_fields(self, backend, expected_basic_fields, expected_ad
         Test basic_fields & advanced_fields for {0} backend
         """
         player = self.player[backend](self.xblock)
-        self.assertTupleEqual(player.basic_fields, expected_basic_fields)
-        self.assertTupleEqual(player.advanced_fields, expected_advanced_fields)
+        self.assertListEqual(player.basic_fields, expected_basic_fields)
+        self.assertListEqual(player.advanced_fields, expected_advanced_fields)
 
     @data(
         ([{'lang': 'ru'}], [{'lang': 'en'}, {'lang': 'uk'}]),