Bug 1093780 Part 1 - Update OpenTok library to v2.4.0 for Loop. r=dmose

browser/components/loop/content/shared/css/conversation.css

@@ -510,7 +510,7 @@
  */
 .local-stream.local-stream-audio,
 .standalone .OT_subscriber .OT_video-poster,
-.fx-embedded .OT_video-container .OT_video-poster,
+.fx-embedded .OT_subscriber .OT_video-poster,
 .local-stream-audio .OT_publisher .OT_video-poster {
   background-image: url("../img/audio-call-avatar.svg");
   background-repeat: no-repeat;
@@ -537,7 +537,7 @@
  * Another less ugly possibility would be to work with Ted Mielczarek to use
  * the fake camera drivers he has for Linux.
  */
-.room-conversation .OT_publisher .OT_video-container {
+.room-conversation .OT_publisher .OT_widget-container {
   height: 100% !important;
   width: 100% !important;
   top: 0 !important;
@@ -545,12 +545,12 @@
   background-color: transparent; /* avoid visually obvious letterboxing */
 }
 
-.room-conversation .OT_publisher .OT_video-container video {
+.room-conversation .OT_publisher .OT_widget-container video {
   background-color: transparent; /* avoid visually obvious letterboxing */
 }
 
-.fx-embedded .room-conversation .room-preview .OT_publisher .OT_video-container,
+.fx-embedded .room-conversation .room-preview .OT_publisher .OT_widget-container,
-.fx-embedded .room-conversation .room-preview .OT_publisher .OT_video-container video {
+.fx-embedded .room-conversation .room-preview .OT_publisher .OT_widget-container video {
   /* Desktop conversation window room preview local stream actually wants
      a black background */
   background-color: #000;

browser/components/loop/content/shared/js/mixins.js

@@ -198,15 +198,11 @@ loop.shared.mixins = (function() {
       // @see https://bugzilla.mozilla.org/show_bug.cgi?id=1020445
       return {
         insertMode: "append",
+        fitMode: "contain",
         width: "100%",
         height: "100%",
         publishVideo: options.publishVideo,
-        style: {
+        showControls: false,
-          audioLevelDisplayMode: "off",
-          buttonDisplayMode: "off",
-          nameDisplayMode: "off",
-          videoDisabledDisplayMode: "off"
-        }
       };
     },
 

browser/components/loop/content/shared/libs/sdk-content/css/ot.css

@@ -11,16 +11,15 @@
 /* Root OT object, this is where our CSS reset happens */
 .OT_root,
 .OT_root * {
-    color: #ffffff;
+  color: #ffffff;
-    margin: 0;
+  margin: 0;
-    padding: 0;
+  padding: 0;
-    border: 0;
+  border: 0;
-    font-size: 100%;
+  font-size: 100%;
-    font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, sans-serif;
-    vertical-align: baseline;
+  vertical-align: baseline;
 }
 
-
 /**
  * Specific Element Reset
  */
@@ -31,10 +30,10 @@
 .OT_root h4,
 .OT_root h5,
 .OT_root h6 {
-    color: #ffffff;
+  color: #ffffff;
-    font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, sans-serif;
-    font-size: 100%;
+  font-size: 100%;
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .OT_root header {
@@ -62,11 +61,11 @@
 }
 
 .OT_root strong {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .OT_root em {
-    font-style: italic;
+  font-style: italic;
 }
 
 .OT_root a,
@@ -74,46 +73,46 @@
 .OT_root a:visited,
 .OT_root a:hover,
 .OT_root a:active {
-    font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, sans-serif;
 }
 
-
 .OT_root ul, .OT_root ol {
-    margin: 1em 1em 1em 2em;
+  margin: 1em 1em 1em 2em;
 }
 
 .OT_root ol {
-    list-style: decimal outside;
+  list-style: decimal outside;
 }
 
 .OT_root ul {
-    list-style: disc outside;
+  list-style: disc outside;
 }
 
 .OT_root dl {
-    margin: 4px;
+  margin: 4px;
 }
-    .OT_root dl dt,
-    .OT_root dl dd {
-        float: left;
-        margin: 0;
-        padding: 0;
-    }
 
-    .OT_root dl dt {
+.OT_root dl dt,
-        clear: left;
+.OT_root dl dd {
-        text-align: right;
+  float: left;
-        width: 50px;
+  margin: 0;
-    }
+  padding: 0;
-    .OT_root dl dd {
+}
-        margin-left: 10px;
+
-    }
+.OT_root dl dt {
+  clear: left;
+  text-align: right;
+  width: 50px;
+}
+
+.OT_root dl dd {
+  margin-left: 10px;
+}
 
 .OT_root img {
-    border: 0 none;
+  border: 0 none;
 }
 
-
 /* Modal dialog styles */
 
 /* Modal dialog styles */
@@ -166,7 +165,6 @@
   text-align: center;
 }
 
-
 .OT_dialog-messages-main {
   margin-bottom: 36px;
   line-height: 36px;
@@ -302,37 +300,34 @@
 /* Publisher and Subscriber styles */
 
 .OT_publisher, .OT_subscriber {
-    position: relative;
+  position: relative;
-    min-width: 48px;
+  min-width: 48px;
-    min-height: 48px;
+  min-height: 48px;
 }
 
-.OT_publisher video,
+.OT_publisher .OT_video-element,
-.OT_subscriber video,
+.OT_subscriber .OT_video-element {
-.OT_publisher object,
+  display: block;
-.OT_subscriber object {
+  position: absolute;
-    width: 100%;
+  width: 100%;
-    height: 100%;
-}
 
-.OT_publisher object,
+  transform-origin: 0 0;
-.OT_subscriber object {
 }
 
 /* Styles that are applied when the video element should be mirrored */
-.OT_publisher.OT_mirrored video{
+.OT_publisher.OT_mirrored .OT_video-element {
-    -webkit-transform: scale(-1, 1);
+  transform: scale(-1, 1);
-    -moz-transform:scale(-1,1);
+  transform-origin: 50% 50%;
 }
 
 .OT_subscriber_error {
-		background-color: #000;
+  background-color: #000;
-		color: #fff;
+  color: #fff;
-		text-align: center;
+  text-align: center;
 }
 
 .OT_subscriber_error > p {
-		padding: 20px;
+  padding: 20px;
 }
 
 /* The publisher/subscriber name/mute background */
@@ -346,67 +341,67 @@
 .OT_subscriber .OT_archiving-status,
 .OT_publihser .OT_archiving-light-box,
 .OT_subscriber .OT_archiving-light-box {
-   -moz-box-sizing: border-box;
+  -moz-box-sizing: border-box;
-   -webkit-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
-   -ms-box-sizing: border-box;
+  -ms-box-sizing: border-box;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    top: 0;
+  top: 0;
-    left: 0;
+  left: 0;
-    right: 0;
+  right: 0;
-    display: block;
+  display: block;
-    height: 34px;
+  height: 34px;
-    position: absolute;
+  position: absolute;
 }
 
 .OT_publisher .OT_bar,
 .OT_subscriber .OT_bar {
-    background: rgba(0, 0, 0, 0.4);
+  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 */
+  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 {
-    background-color: transparent;
+  background-color: transparent;
-    color: #ffffff;
+  color: #ffffff;
-    font-size: 15px;
+  font-size: 15px;
-    line-height: 34px;
+  line-height: 34px;
-    font-weight: normal;
+  font-weight: normal;
-    padding: 0 4px 0 36px;
+  padding: 0 4px 0 36px;
 }
 
 .OT_publisher .OT_archiving-status,
 .OT_subscriber .OT_archiving-status {
-    background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.4);
-    top: auto;
+  top: auto;
-    bottom: 0;
+  bottom: 0;
-    left: 34px;
+  left: 34px;
-    padding: 0 4px;
+  padding: 0 4px;
-    color: rgba(255,255,255,0.8);
+  color: rgba(255, 255, 255, 0.8);
-    font-size: 15px;
+  font-size: 15px;
-    line-height: 34px;
+  line-height: 34px;
-    font-weight: normal;
+  font-weight: normal;
 }
 
 .OT_micro .OT_archiving-status,
 .OT_micro:hover .OT_archiving-status,
 .OT_mini .OT_archiving-status,
 .OT_mini:hover .OT_archiving-status {
-    display: none;
+  display: none;
 }
 
 .OT_publisher .OT_archiving-light-box,
 .OT_subscriber .OT_archiving-light-box {
-    background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.4);
-    top: auto;
+  top: auto;
-    bottom: 0;
+  bottom: 0;
-    right: auto;
+  right: auto;
-    width: 34px;
+  width: 34px;
-    height: 34px;
+  height: 34px;
 }
 
 .OT_archiving-light {
@@ -423,6 +418,7 @@
   -moz-box-shadow: 0 0 5px 1px #575757;
   box-shadow: 0 0 5px 1px #575757;
 }
+
 .OT_archiving-light.OT_active {
   background-color: #970d13;
   -webkit-animation: OT_pulse 1.3s ease-in;
@@ -432,6 +428,7 @@
   -moz-animation-iteration-count: infinite;
   -webkit-animation-iteration-count: infinite;
 }
+
 @-moz-keyframes OT_pulse {
   0% {
     -webkit-box-shadow: 0 0 0px 0px #c70019;
@@ -463,6 +460,7 @@
     box-shadow: 0 0 0px 0px #c70019;
   }
 }
+
 @-webkit-keyframes OT_pulse {
   0% {
     -webkit-box-shadow: 0 0 0px 0px #c70019;
@@ -494,6 +492,7 @@
     box-shadow: 0 0 0px 0px #c70019;
   }
 }
+
 @-o-keyframes OT_pulse {
   0% {
     -webkit-box-shadow: 0 0 0px 0px #c70019;
@@ -525,6 +524,7 @@
     box-shadow: 0 0 0px 0px #c70019;
   }
 }
+
 @-ms-keyframes OT_pulse {
   0% {
     -webkit-box-shadow: 0 0 0px 0px #c70019;
@@ -556,6 +556,7 @@
     box-shadow: 0 0 0px 0px #c70019;
   }
 }
+
 @-webkit-keyframes OT_pulse {
   0% {
     -webkit-box-shadow: 0 0 0px 0px #c70019;
@@ -591,15 +592,15 @@
 .OT_mini .OT_bar,
 .OT_bar.OT_mode-mini,
 .OT_bar.OT_mode-mini-auto {
-    bottom: 0;
+  bottom: 0;
-    height: auto;
+  height: auto;
 }
 
 .OT_mini .OT_name.OT_mode-off,
 .OT_mini .OT_name.OT_mode-on,
 .OT_mini .OT_name.OT_mode-auto,
 .OT_mini:hover .OT_name.OT_mode-auto {
-    display: none;
+  display: none;
 }
 
 .OT_publisher .OT_name,
@@ -624,42 +625,42 @@
 
 .OT_publisher .OT_mute,
 .OT_subscriber .OT_mute {
-    right: 0;
+  right: 0;
-    top: 0;
+  top: 0;
-    border-left: 1px solid rgba(255, 255, 255, 0.2);
+  border-left: 1px solid rgba(255, 255, 255, 0.2);
-    height: 36px;
+  height: 36px;
-    width: 37px;
+  width: 37px;
 }
 
 .OT_mini .OT_mute,
-.OT_mute.OT_mode-mini,
+.OT_publisher.OT_mini .OT_mute.OT_mode-auto.OT_mode-on-hold,
-.OT_mute.OT_mode-mini-auto {
+.OT_subscriber.OT_mini .OT_mute.OT_mode-auto.OT_mode-on-hold {
-    top: 50%;
+  top: 50%;
-    left: 50%;
+  left: 50%;
-    right: auto;
+  right: auto;
-    margin-top: -18px;
+  margin-top: -18px;
-    margin-left: -18.5px;
+  margin-left: -18.5px;
-    border-left: none;
+  border-left: none;
 }
 
 .OT_publisher .OT_mute {
-    background-image: url(../images/rtc/mic-on.png);
+  background-image: url(../images/rtc/mic-on.png);
-    background-position: 9px 5px;
+  background-position: 9px 5px;
 }
 
 .OT_publisher .OT_mute.OT_active {
-    background-image: url(../images/rtc/mic-off.png);
+  background-image: url(../images/rtc/mic-off.png);
-    background-position: 9px 4px;
+  background-position: 9px 4px;
 }
 
 .OT_subscriber .OT_mute {
-    background-image: url(../images/rtc/speaker-on.png);
+  background-image: url(../images/rtc/speaker-on.png);
-    background-position: 8px 7px;
+  background-position: 8px 7px;
 }
 
 .OT_subscriber .OT_mute.OT_active {
-    background-image: url(../images/rtc/speaker-off.png);
+  background-image: url(../images/rtc/speaker-off.png);
-    background-position: 7px 7px;
+  background-position: 7px 7px;
 }
 
 /**
@@ -672,17 +673,9 @@
 /* Default display mode transitions for various chrome elements */
 .OT_publisher .OT_edge-bar-item,
 .OT_subscriber .OT_edge-bar-item {
-    -ms-transition-property: top, bottom, opacity;
+  transition-property: top, bottom, opacity;
-    -ms-transition-duration: 0.5s;
+  transition-duration: 0.5s;
-    -moz-transition-property: top, bottom, opacity;
+  transition-timing-function: ease-in;
-    -moz-transition-duration: 0.5s;
-    -webkit-transition-property: top, bottom, opacity;
-    -webkit-transition-duration: 0.5s;
-    -o-transition-property: top, bottom, opacity;
-    -o-transition-duration: 0.5s;
-    transition-property: top, bottom, opacity;
-    transition-duration: 0.5s;
-    transition-timing-function: ease-in;
 }
 
 .OT_publisher .OT_edge-bar-item.OT_mode-off,
@@ -691,14 +684,14 @@
 .OT_subscriber .OT_edge-bar-item.OT_mode-auto,
 .OT_publisher .OT_edge-bar-item.OT_mode-mini-auto,
 .OT_subscriber .OT_edge-bar-item.OT_mode-mini-auto {
-    top: -25px;
+  top: -25px;
-    opacity: 0;
+  opacity: 0;
 }
 
 .OT_mini .OT_mute.OT_mode-auto,
 .OT_publisher .OT_mute.OT_mode-mini-auto,
 .OT_subscriber .OT_mute.OT_mode-mini-auto {
-    top: 50%;
+  top: 50%;
 }
 
 .OT_publisher .OT_edge-bar-item.OT_edge-bottom.OT_mode-off,
@@ -707,8 +700,8 @@
 .OT_subscriber .OT_edge-bar-item.OT_edge-bottom.OT_mode-auto,
 .OT_publisher .OT_edge-bar-item.OT_edge-bottom.OT_mode-mini-auto,
 .OT_subscriber .OT_edge-bar-item.OT_edge-bottom.OT_mode-mini-auto {
-    top: auto;
+  top: auto;
-    bottom: -25px;
+  bottom: -25px;
 }
 
 .OT_publisher .OT_edge-bar-item.OT_mode-on,
@@ -719,127 +712,148 @@
 .OT_subscriber:hover .OT_edge-bar-item.OT_mode-auto,
 .OT_publisher:hover .OT_edge-bar-item.OT_mode-mini-auto,
 .OT_subscriber:hover .OT_edge-bar-item.OT_mode-mini-auto {
-    top: 0;
+  top: 0;
-    opacity: 1;
+  opacity: 1;
 }
 
 .OT_mini .OT_mute.OT_mode-on,
 .OT_mini:hover .OT_mute.OT_mode-auto,
 .OT_mute.OT_mode-mini,
-.OT_root:hover .OT_mute.OT_mode-mini-auto  {
+.OT_root:hover .OT_mute.OT_mode-mini-auto {
-    top: 50%;
+  top: 50%;
 }
 
 .OT_publisher .OT_edge-bar-item.OT_edge-bottom.OT_mode-on,
 .OT_subscriber .OT_edge-bar-item.OT_edge-bottom.OT_mode-on,
 .OT_publisher:hover .OT_edge-bar-item.OT_edge-bottom.OT_mode-auto,
 .OT_subscriber:hover .OT_edge-bar-item.OT_edge-bottom.OT_mode-auto {
-    top: auto;
+  top: auto;
-    bottom: 0;
+  bottom: 0;
-    opacity: 1;
+  opacity: 1;
 }
 
+
 /* Contains the video element, used to fix video letter-boxing */
-.OT_video-container {
+.OT_widget-container {
-    position: absolute;
+  position: absolute;
-    background-color: #000000;
+  background-color: #000000;
-    overflow: hidden;
+  overflow: hidden;
 }
 
 .OT_hidden-audio {
-    position: absolute !important;
+  position: absolute !important;
-    height: 1px !important;
+  height: 1px !important;
-    width: 1px !important;
+  width: 1px !important;
 }
 
 /* Load animation */
 .OT_root .OT_video-loading {
-    background: url('../images/rtc/loader.gif') no-repeat;
+  background: url('../images/rtc/loader.gif') no-repeat;
-    display:none;
+  display: none;
-    position: absolute;
+  position: absolute;
-    width: 32px;
+  width: 32px;
-    height: 32px;
+  height: 32px;
-    left: 50%;
+  left: 50%;
-    top: 50%;
+  top: 50%;
-    margin-left: -16px;
+  margin-left: -16px;
-    margin-top: -16px;
+  margin-top: -16px;
 }
 
 .OT_publisher.OT_loading .OT_video-loading,
 .OT_subscriber.OT_loading .OT_video-loading {
-    display: block;
+  display: block;
 }
 
-.OT_publisher.OT_loading video,
+.OT_publisher.OT_loading .OT_video-element,
-.OT_subscriber.OT_loading video,
+.OT_subscriber.OT_loading .OT_video-element {
-.OT_publisher.OT_loading object,
+  /*display: none;*/
-.OT_subscriber.OT_loading object {
-    display: none;
 }
 
+.OT_video-centering {
+  display: table;
+  width: 100%;
+  height: 100%;
+}
+
+.OT_video-container {
+  display: table-cell;
+  vertical-align: middle;
+}
 
 .OT_video-poster {
-    width: 100%;
+  position: absolute;
-    height: 100%;
+  z-index: 1;
-    display: none;
+  width: 100%;
+  height: 100%;
+  display: none;
 
-    opacity: .25;
+  opacity: .25;
-    background-size: auto 76%;
+
-    background-repeat: no-repeat;
+  background-repeat: no-repeat;
-    background-position: center bottom;
+  background-image: url(../images/rtc/audioonly-silhouette.svg);
-    background-image: url(../images/rtc/audioonly-silhouette.svg);
+}
+
+
+.OT_fit-mode-cover .OT_video-poster {
+  background-size: auto 76%;
+  background-position: center bottom;
+}
+
+.OT_fit-mode-contain .OT_video-poster {
+  background-size: contain;
+  background-position: center;
 }
 
 .OT_audio-level-meter {
-    position: absolute;
+  position: absolute;
-    width:  25%;
+  width: 25%;
-    max-width: 224px;
+  max-width: 224px;
-    min-width: 21px;
+  min-width: 21px;
-    top: 0;
+  top: 0;
-    right: 0;
+  right: 0;
-    overflow: hidden;
+  overflow: hidden;
 }
 
 .OT_audio-level-meter:before {
-    /* makes the height of the container equals its width */
+  /* makes the height of the container equals its width */
-    content: '';
+  content: '';
-    display: block;
+  display: block;
-    padding-top: 100%;
+  padding-top: 100%;
 }
 
 .OT_audio-level-meter__bar {
-    position: absolute;
+  position: absolute;
-    width: 192%; /* meter value can overflow of 8% */
+  width: 192%; /* meter value can overflow of 8% */
-    height: 192%;
+  height: 192%;
-    top: -96% /* half of the size */;
+  top: -96% /* half of the size */;
-    right: -96%;
+  right: -96%;
-    border-radius: 50%;
+  border-radius: 50%;
 
-    background-color: rgba(0, 0, 0, .8);
+  background-color: rgba(0, 0, 0, .8);
 }
 
 .OT_audio-level-meter__audio-only-img {
-    position: absolute;
+  position: absolute;
-    top: 22%;
+  top: 22%;
-    right: 15%;
+  right: 15%;
-    width: 40%;
+  width: 40%;
 
-    opacity: .7;
+  opacity: .7;
 
-    background: url(../images/rtc/audioonly-headset.svg) no-repeat center;
+  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 */
+  /* makes the height of the container equals its width */
-    content: '';
+  content: '';
-    display: block;
+  display: block;
-    padding-top: 100%;
+  padding-top: 100%;
 }
 
 .OT_audio-level-meter__value {
-    position: absolute;
+  position: absolute;
-    border-radius: 50%;
+  border-radius: 50%;
-    background-image: radial-gradient(circle, rgba(151,206,0,1) 0%, rgba(151,206,0,0) 100%);
+  background-image: radial-gradient(circle, rgba(151, 206, 0, 1) 0%, rgba(151, 206, 0, 0) 100%);
 }
 
 .OT_audio-level-meter.OT_mode-off {
@@ -848,31 +862,31 @@
 
 .OT_audio-level-meter.OT_mode-on,
 .OT_audio-only .OT_audio-level-meter.OT_mode-auto {
-    display: block;
+  display: block;
 }
 
 .OT_video-disabled-indicator {
-    opacity: 1;
+  opacity: 1;
-    border: none;
+  border: none;
-    display: none;
+  display: none;
-    position: absolute;
+  position: absolute;
-    background-color: transparent;
+  background-color: transparent;
-    background-repeat: no-repeat;
+  background-repeat: no-repeat;
-    background-position:bottom right;
+  background-position: bottom right;
-    top: 0;
+  top: 0;
-    left: 0;
+  left: 0;
-    bottom: 3px;
+  bottom: 3px;
-    right: 3px;
+  right: 3px;
 }
 
 .OT_video-disabled {
-    background-image: url(../images/rtc/video-disabled.png);
+  background-image: url(../images/rtc/video-disabled.png);
 }
 
 .OT_video-disabled-warning {
-    background-image: url(../images/rtc/video-disabled-warning.png);
+  background-image: url(../images/rtc/video-disabled-warning.png);
 }
 
 .OT_video-disabled-indicator.OT_active {
-    display: block;
+  display: block;
 }

browser/components/loop/content/shared/libs/sdk-content/js/dynamic_config.min.js

@@ -1,7 +1,7 @@
-/*
+/**
-
+ * @license
- Copyright (c) 2014 TokBox, Inc.
+ * Copyright (c) 2014 TokBox, Inc.
- Released under the MIT license
+ * Released under the MIT license
- http://opensource.org/licenses/MIT
+ * http://opensource.org/licenses/MIT
-*/
+ */
 !function(){TB.Config.replaceWith({global:{exceptionLogging:{enabled:!0,messageLimitPerPartner:100},iceServers:{enabled:!1},instrumentation:{enabled:!1,debugging:!1},tokshow:{textchat:!0}},partners:{change878:{instrumentation:{enabled:!0,debugging:!0}}}})}(TB);

browser/components/loop/test/functional/test_1_browser_call.py

@@ -129,7 +129,7 @@ class Test1BrowserCall(MarionetteTestCase):
     def check_remote_video(self):
         video_wrapper = self.wait_for_element_displayed(
             By.CSS_SELECTOR,
-            ".media .OT_subscriber .OT_video-container", 20)
+            ".media .OT_subscriber .OT_widget-container", 20)
         video = self.wait_for_subelement_displayed(
             video_wrapper, By.TAG_NAME, "video")