Merge pull request #117 from jaoo/1066532

Bug 1066532 - Update OpenTok library to 2.2.9 in Loop Mobile client. r=borjasalguero

call_screen/js/call_manager.js

@@ -220,7 +220,7 @@
         audio: true
       };
       Opentok.setConstraints(constraints);
-
+      OT.setLogLevel(OT.DEBUG);
       _session = TB.initSession(_call.apiKey, _call.sessionId);
 
       var that = this;

call_screen/js/controller_communications.js

@@ -37,7 +37,7 @@
               case 'call':
                 LazyLoader.load(
                   [
-                    '../libs/tokbox/v2.2.6/js/TB.js',
+                    '../libs/tokbox/v2.2.9.1/js/TB.js',
                     '../libs/opentok.js',
                     '../js/helpers/audio_competing_helper.js',
                     '../js/helpers/call_progress_helper.js',

js/version.js

@@ -1 +1 @@
-Version = { id: '1a3eaf8' };
+Version = { id: '3cd2086' };

libs/tokbox/v2.2.6/css/ot.min.css → libs/tokbox/v2.2.9.1/css/ot.css

@@ -153,16 +153,16 @@
 
 .OT_dialog-plugin-prompt {
   margin-left: -350px;
-  margin-top: -141px;
+  margin-top: -127px;
   width: 650px;
-  height: 282px;
+  height: 254px;
 }
 
 .OT_dialog-plugin-reinstall {
   margin-left: -271px;
-  margin-top: -117px;
+  margin-top: -107px;
   width: 542px;
-  height: 234px;
+  height: 214px;
 }
 
 .OT_dialog-plugin-upgrading {
@@ -172,6 +172,13 @@
   height: 188px;
 }
 
+.OT_dialog-plugin-upgraded {
+  margin-left: -300px;
+  margin-top: -100px;
+  width: 600px;
+  height: 200px;
+}
+
 .OT_dialog-allow-deny-chrome-first {
   margin-left: -227px;
   margin-top: -122px;
@@ -216,11 +223,13 @@
 }
 
 .OT_closeButton {
-  top: 15px;
-right: 15px;
-position: absolute;
-  font-size: 18px;
+  color: #999999;
   cursor: pointer;
+  font-size: 32px;
+  line-height: 30px;
+  position: absolute;
+  right: 15px;
+  top: 0;
 }
 
 .OT_dialog-messages {
@@ -235,6 +244,7 @@ position: absolute;
   top: 45px;
 }
 
+
 .OT_dialog-messages-main {
   font-weight: 300;
   font-size: 18pt;
@@ -258,6 +268,10 @@ position: absolute;
   color: #ffffff;
 }
 
+.OT_dialog-hidden {
+  display: none;
+}
+
 .OT_dialog-single-button {
   position: absolute;
   bottom: 41px;
@@ -267,6 +281,22 @@ position: absolute;
   width: 193px;
 }
 
+
+.OT_dialog-single-button-wide {
+    bottom: 35px;
+    height: 140px;
+    left: 5px;
+    position: absolute;
+    right: 0;
+}
+  .OT_dialog-single-button-with-title {
+      margin: 0 auto;
+      padding-left: 30px;
+      padding-right: 30px;
+      width: 270px;
+  }
+
+
 .OT_dialog-button-pair {
   position: absolute;
   bottom: 45px;
@@ -293,11 +323,20 @@ position: absolute;
   font-weight: 300;
   text-align: center;
   margin-bottom: 15px;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 150%;
-  color: #A4A4A4;
+  color: #999999;
 }
 
+.OT_dialog-button-title label {
+  color: #999999;
+}
+
+.OT_dialog-button-title a,
+.OT_dialog-button-title a:link,
+.OT_dialog-button-title a:active {
+  color: #02A1DE;
+}
 
 .OT_dialog-button-title strong {
   color: #ffffff;
@@ -310,17 +349,36 @@ position: absolute;
   display: block;
   line-height: 50px;
   height: 47px;
-  background-color: #29A4DA;
+  background-color: #1CA3DC;
   text-align: center;
   font-size: 16pt;
   cursor: pointer;
 }
 
+.OT_dialog-button.OT_dialog-button-disabled {
+  cursor: not-allowed;
+
+  /* IE 8 */
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+
+  opacity: 0.5;
+}
+
 .OT_dialog-button.OT_dialog-button-large {
   line-height: 60px;
   height: 58px;
 }
 
+.OT_dialog-button.OT_dialog-button-small {
+  background-color: #444444;
+  color: #999999;
+  font-size: 12pt;
+  height: 40px;
+  line-height: 40px;
+  margin: 20px auto 0 auto;
+  width: 86px;
+}
+
 .OT_dialog-progress-bar {
   border: 1px solid #4E4E4E;
   height: 8px;
@@ -449,11 +507,17 @@ position: absolute;
 }
 
 .OT_publisher video,
-.OT_subscriber video {
+.OT_subscriber video,
+.OT_publisher object,
+.OT_subscriber object {
     width: 100%;
     height: 100%;
 }
 
+.OT_publisher object,
+.OT_subscriber object {
+}
+
 /* Styles that are applied when the video element should be mirrored */
 .OT_publisher.OT_mirrored video{
     -webkit-transform: scale(-1, 1);
@@ -498,6 +562,11 @@ position: absolute;
     background: rgba(0, 0, 0, 0.4);
 }
 
+.OT_publisher .OT_edge-bar-item,
+.OT_subscriber .OT_edge-bar-item {
+    z-index: 1; /* required to get audio level meter underneath */
+}
+
 /* The publisher/subscriber name panel/archiving status bar */
 .OT_publisher .OT_name,
 .OT_subscriber .OT_name {
@@ -536,7 +605,7 @@ position: absolute;
     bottom: 0;
     right: auto;
     width: 34px;
-    height: 34px;    
+    height: 34px;
 }
 
 .OT_archiving-light {
@@ -722,7 +791,7 @@ position: absolute;
 .OT_bar.OT_mode-mini,
 .OT_bar.OT_mode-mini-auto {
     bottom: 0;
-    height: auto;    
+    height: auto;
 }
 
 .OT_mini .OT_name.OT_mode-off,
@@ -761,7 +830,7 @@ position: absolute;
 
 .OT_publisher .OT_opentok,
 .OT_subscriber .OT_opentok {
-    background: url(../images/rtc/buttons.png) 0 -32px no-repeat;    
+    background: url(../images/rtc/buttons.png) 0 -32px no-repeat;
     cursor: default;
     height: 18px;
     left: 8px;
@@ -880,6 +949,8 @@ position: absolute;
 
 .OT_publisher .OT_edge-bar-item.OT_mode-on,
 .OT_subscriber .OT_edge-bar-item.OT_mode-on,
+.OT_publisher .OT_edge-bar-item.OT_mode-auto.OT_mode-on-hold,
+.OT_subscriber .OT_edge-bar-item.OT_mode-auto.OT_mode-on-hold,
 .OT_publisher:hover .OT_edge-bar-item.OT_mode-auto,
 .OT_subscriber:hover .OT_edge-bar-item.OT_mode-auto,
 .OT_publisher:hover .OT_edge-bar-item.OT_mode-mini-auto,
@@ -912,8 +983,10 @@ position: absolute;
 }
 
 .OT_publisher .OT_opentok.OT_mode-on,
+.OT_publisher .OT_opentok.OT_mode-auto.OT_mode-on-hold,
 .OT_publisher:hover .OT_opentok.OT_mode-auto,
 .OT_subscriber .OT_opentok.OT_mode-on,
+.OT_subscriber .OT_opentok.OT_mode-auto.OT_mode-on-hold,
 .OT_subscriber:hover .OT_opentok.OT_mode-auto {
     top: 8px;
 }
@@ -951,23 +1024,108 @@ position: absolute;
 }
 
 .OT_publisher.OT_loading video,
-.OT_subscriber.OT_loading video {
+.OT_subscriber.OT_loading video,
+.OT_publisher.OT_loading object,
+.OT_subscriber.OT_loading object {
     display: none;
 }
 
 
 .OT_video-poster {
     width: 100%;
     height: 100%;
-    background-position: 50% 50%;
+    display: none;
+
+    opacity: .25;
+    background-size: auto 76%;
     background-repeat: no-repeat;
+    background-position: center bottom;
+    background-image: url(../images/rtc/audioonly-silhouette.svg);
+}
+
+.OT_audio-level-meter {
+    position: absolute;
+    width:  25%;
+    max-width: 224px;
+    min-width: 21px;
+    top: 0;
+    right: 0;
+    overflow: hidden;
+}
+
+.OT_audio-level-meter:before {
+    /* makes the height of the container equals its width */
+    content: '';
+    display: block;
+    padding-top: 100%;
+}
+
+.OT_audio-level-meter__bar {
+    position: absolute;
+    width: 192%; /* meter value can overflow of 8% */
+    height: 192%;
+    top: -96% /* half of the size */;
+    right: -96%;
+    border-radius: 50%;
+
+    background-color: rgba(0, 0, 0, .8);
+}
+
+.OT_audio-level-meter__audio-only-img {
+    position: absolute;
+    top: 22%;
+    right: 15%;
+    width: 40%;
+
+    opacity: .7;
+
+    background: url(../images/rtc/audioonly-headset.svg) no-repeat center;
+}
+
+.OT_audio-level-meter__audio-only-img:before {
+    /* makes the height of the container equals its width */
+    content: '';
+    display: block;
+    padding-top: 100%;
+}
+
+.OT_audio-level-meter__value {
+    position: absolute;
+    border-radius: 50%;
+    background-image: radial-gradient(circle, rgba(151,206,0,1) 0%, rgba(151,206,0,0) 100%);
+}
+
+.OT_audio-level-meter {
     display: none;
 }
 
-.OT_publisher .OT_video-poster {
-    background-image: url(../images/rtc/audioonly-publisher.png);    
+.OT_audio-level-meter.OT_mode-on,
+.OT_audio-only .OT_audio-level-meter.OT_mode-auto {
+    display: block;
 }
 
-.OT_subscriber .OT_video-poster  {
-    background-image: url(../images/rtc/audioonly-subscriber.png);
+.OT_video-disabled-indicator {
+    opacity: 1;
+    border: none;
+    display: none;
+    position: absolute;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position:bottom right;
+    top: 0;
+    left: 0;
+    bottom: 3px;
+    right: 3px;
+}
+
+.OT_video-disabled {
+    background-image: url(../images/rtc/video-disabled.png);
+}
+
+.OT_video-disabled-warning {
+    background-image: url(../images/rtc/video-disabled-warning.png);
+}
+
+.OT_video-disabled-indicator.OT_active {
+    display: block;
 }