Fixes InvalidStateError failures in FF and more.

Fixes HD button
Disables Fullscreen mode in the Studio
Fixes ui controls bug

cms/envs/common.py

@@ -31,6 +31,8 @@ from path import path
 ############################ FEATURE CONFIGURATION #############################
 
 MITX_FEATURES = {
+    'IS_CMS': True,
+
     'USE_DJANGO_PIPELINE': True,
 
     'GITHUB_PUSH': False,

common/lib/xmodule/xmodule/css/videoalpha/display.scss

@@ -70,10 +70,19 @@ div.videoalpha {
         border-radius: 0;
         border-top: 1px solid #000;
         box-shadow: inset 0 1px 0 #eee, 0 1px 0 #555;
-        height: 7px;
+        position: absolute;
+        z-index: 1;
+        bottom: 100%;
+        left: 0;
+        right: 0;
+        height: 14px;
         margin-left: -1px;
         margin-right: -1px;
-        @include transition(height 2.0s ease-in-out 0s);
+        -webkit-transition: -webkit-transform 0.7s ease-in-out;
+        -moz-transition: -moz-transform 0.7s ease-in-out;
+        -ms-transition: -ms-transform 0.7s ease-in-out;
+        transition: transform 0.7s ease-in-out;
+        @include transform(scaleY(0.5) translateY(50%));
 
         div.ui-widget-header {
           background: #777;
@@ -84,14 +93,18 @@ div.videoalpha {
           background: $pink url(../images/slider-handle.png) center center no-repeat;
           background-size: 50%;
           border: 1px solid darken($pink, 20%);
-          border-radius: 15px;
+          border-radius: 50%;
           box-shadow: inset 0 1px 0 lighten($pink, 10%);
           cursor: pointer;
-          height: 15px;
-          margin-left: -7px;
-          top: -4px;
-          @include transition(height 2.0s ease-in-out 0s, width 2.0s ease-in-out 0s);
-          width: 15px;
+          height: 20px;
+          margin-left: 0;
+          top: 0;
+          -webkit-transition: -webkit-transform 0.7s ease-in-out;
+          -moz-transition: -moz-transform 0.7s ease-in-out;
+          -ms-transition: -ms-transform 0.7s ease-in-out;
+          transition: transform 0.7s ease-in-out;
+          @include transform(scale(.7, 1.3) translate3d(-80%, -15%, 0));
+          width: 20px;
 
           &:focus, &:hover {
             background-color: lighten($pink, 10%);
@@ -380,7 +393,7 @@ div.videoalpha {
           border-right: 1px solid #000;
           box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
           color: #797979;
-          display: block;
+          display: none;
           float: left;
           line-height: 46px; //height of play pause buttons
           margin-left: 0;
@@ -441,15 +454,10 @@ div.videoalpha {
       }
 
       div.slider {
-        height: 14px;
-        margin-top: -7px;
+        @include transform(scaleY(1) translateY(0));
 
         a.ui-slider-handle {
-          border-radius: 20px;
-          height: 20px;
-          margin-left: -10px;
-          top: -4px;
-          width: 20px;
+          @include transform(scale(1) translate3d(-50%, -15%, 0));
         }
       }
     }

common/lib/xmodule/xmodule/js/spec/helper.coffee

@@ -8,23 +8,8 @@ window.YT =
     BUFFERING: 3
     CUED: 5
 
-window.TYPES =
-  'undefined'        : 'undefined'
-  'number'           : 'number'
-  'boolean'          : 'boolean'
-  'string'           : 'string'
-  '[object Function]': 'function'
-  '[object RegExp]'  : 'regexp'
-  '[object Array]'   : 'array'
-  '[object Date]'    : 'date'
-  '[object Error]'   : 'error'
-
-window.TOSTRING = Object.prototype.toString
 window.STATUS = window.YT.PlayerState
 
-window.whatType = (o) ->
-  TYPES[typeof o] || TYPES[TOSTRING.call(o)] || (o ? 'object' : 'null');
-
 oldGetWithPrefix = window.jQuery.getWithPrefix
 
 jasmine.stubbedCaption =

common/lib/xmodule/xmodule/js/spec/videoalpha/video_player_spec.js

@@ -356,9 +356,9 @@
 
         videoPlayer.updateInterval = 100;
 
-        spyOn(videoPlayer, 'updatePlayTime').andCallThrough();
-        spyOn(videoPlayer, 'log').andCallThrough();
-        spyOn(videoPlayer.player, 'seekTo').andCallThrough();
+        spyOn(videoPlayer, 'updatePlayTime');
+        spyOn(videoPlayer, 'log');
+        spyOn(videoPlayer.player, 'seekTo');
       });
 
       it('Slider event causes log update', function () {

common/lib/xmodule/xmodule/js/src/videoalpha/02_initialize.js

@@ -99,7 +99,9 @@ function (VideoPlayer) {
                     my: 'top right',
                     at: 'top center'
                 }
-            }
+            },
+
+            inCms:              this.el.data('in-studio')
         };
 
         // Try to parse YouTube stream ID's. If

common/lib/xmodule/xmodule/js/src/videoalpha/05_video_control.js

@@ -51,6 +51,10 @@ function () {
 
         state.videoControl.fullScreenState = false;
 
+        if (state.config.inCms === 'True') {
+            state.videoControl.fullScreenEl.hide();
+        }
+
         if (!onTouchBasedDevice()) {
             state.videoControl.pause();
 

common/lib/xmodule/xmodule/js/src/videoalpha/06_video_quality_control.js

@@ -41,6 +41,7 @@ function () {
     function renderElements(state) {
         state.videoQualityControl.el = state.el.find('a.quality_control');
 
+        state.videoQualityControl.el.show();
         state.videoQualityControl.quality = null;
 
         if (!onTouchBasedDevice()) {
@@ -71,6 +72,12 @@ function () {
         }
     }
 
+    // This function change quality of video.
+    // Right now we haven't ability to choose quality of HD video,
+    // 'hd720' will be played by default as HD video(this thing is hardcoded).
+    // If suggested quality level is not available for the video,
+    // then the quality will be set to the next lowest level that is available.
+    // (large -> medium)
     function toggleQuality(event) {
         var newQuality,
             value = this.videoQualityControl.quality;

lms/envs/common.py

@@ -46,6 +46,7 @@ DISCUSSION_SETTINGS = {
 
 # Features
 MITX_FEATURES = {
+    'IS_CMS': False,
     'SAMPLE': False,
     'USE_DJANGO_PIPELINE': True,
     'DISPLAY_HISTOGRAMS_TO_STAFF': True,

lms/templates/videoalpha.html

@@ -12,6 +12,8 @@
   data-streams="${youtube_streams}"
   % endif
 
+  data-in-studio="${settings.MITX_FEATURES['IS_CMS']}"
+
   ${'data-sub="{}"'.format(sub) if sub else ''}
       ${'data-autoplay="{}"'.format(autoplay) if autoplay else ''}
   % if not settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']: