Move django vars from js

-add valid json into player context on backend
-parse json on frontend and use js object as global var

video_xblock/backends/base.py

@@ -5,6 +5,7 @@
 Base Video player plugin
 """
 
+import json
 import abc
 import re
 
@@ -105,10 +106,24 @@ def metadata_fields(self):
         """
         return []
 
+    def _extra_context(self, context):
+        """
+        Returns a context's dict with extra items.
+        """
+        context['player_state_json'] = context['player_state'].copy()
+        context['player_state_json']['transcripts_object'] = json.loads(
+            context['player_state']['transcripts_object']
+        )
+        context['player_state_json'] = json.dumps(context['player_state_json'])
+        return context
+
     def get_frag(self, **context):
         """
         Returns a Fragment required to render video player on the client side.
         """
+
+        context = self._extra_context(context)
+
         frag = Fragment()
         frag.add_css(self.resource_string(
             'static/bower_components/video.js/dist/video-js.min.css'

video_xblock/backends/brightcove.py

@@ -321,6 +321,8 @@ def get_frag(self, **context):
         Because of this it doesn't use `super.get_frag()`
         """
 
+        context = self._extra_context(context)
+
         frag = Fragment(
             self.render_resource('static/html/brightcove.html', **context)
         )

video_xblock/static/js/player_state.js

@@ -18,25 +18,25 @@ var domReady = function(callback) {
         document.addEventListener("DOMContentLoaded", callback);
     }
 };
+
+var player_state_obj = JSON.parse('{{ player_state_json }}');
 var player_state = {
-    volume: {{ player_state.volume }},
-    currentTime: {{ player_state.current_time }},
-    playbackRate: {{ player_state.playback_rate }},
-    muted: {{ player_state.muted | yesno:'true,false' }},
-    transcriptsEnabled: {{ player_state.transcripts_enabled | yesno:'true,false' }},
-    captionsEnabled: {{ player_state.captions_enabled | yesno:'true,false' }},
-    captionsLanguage: '{{ player_state.captions_language }}'
+    volume: player_state_obj.volume,
+    currentTime: player_state_obj.current_time,
+    playbackRate: player_state_obj.playback_rate,
+    muted: player_state_obj.muted,
+    transcriptsEnabled: player_state_obj.transcripts_enabled,
+    captionsEnabled: player_state_obj.captions_enabled,
+    captionsLanguage: player_state_obj.captions_language
 };
 var xblockUsageId = window.location.hash.slice(1);
-var transcripts = { // eslint-disable-line
-    {% for transcript in player_state.transcripts %} // eslint-disable-line
-        '{{transcript.lang}}': { // eslint-disable-line
-            'label': '{{transcript.label}}', // eslint-disable-line
-            'url': '{{transcript.url}}', // eslint-disable-line
-        }, // eslint-disable-line
-    {% endfor %} // eslint-disable-line
-}; // eslint-disable-line
-
+var transcripts = {};
+player_state_obj.transcripts.forEach(function loop_transcript(transcript) {
+    transcripts[transcript.lang] = {
+        'label': transcript.label,
+        'url': transcript.url
+    }
+})
 /** Get transcript url for current caption language */
 var getDownloadTranscriptUrl = function(player) {
     var downloadTranscriptUrl;