Update audiovideo to scss.

src/styles/components/_audiovideo.scss

@@ -18,50 +18,67 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
+
 #audiovideo {
+  border-top: 1px solid $bordercolor;
+  bottom: 0;
+  left: 0;
   position: absolute;
-	left:0px;
+  right: 0;
   top: 44px;
-	bottom:0px;
-	right:0px;
-	border-top:1px solid $bordercolor;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-o-user-select: none;
   user-select: none;
 }
-#audiovideo.fullscreen {
+
-	top:0px !important;
+#audiovideo {
-	right:0px !important;
+  &.fullscreen {
-	bottom:0px !important;
+    top: 0 !important;
-	left:0px !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
     background: black !important;
+    .remoteVideo .peerActions {
+      display: none;
+    }
+  }
+  @include breakpt-only-screen($breakpoint-video-small) {
+    right: 0;
   }
-#audiovideo.fullscreen .remoteVideo .peerActions {
+}
+
+.mainScreenshare #audiovideo { 
+  @include breakpt-only-screen($breakpoint-video-medium) {
     display: none;
   }
-.withChat #audiovideo, .withBuddylist #audiovideo {
+}
+
+.withChat #audiovideo,
+.withBuddylist #audiovideo {
   right: 260px;
 }
+
 .withBuddylist.withChat #audiovideo {
   right: 520px;
 }
 
 .audiovideo {
   position: absolute;
-	top:0px;
+  top: 0;
-	left:0px;
+  left: 0;
-	bottom:0px;
+  bottom: 0;
-	right:0px;
+  right: 0;
-}
+  &.active {
-
-.audiovideo.active {
     perspective: 1000;
-	-webkit-perspective: 1000;
+    &:hover .overlayActions {
+      opacity: 0.3;
     }
-
+    .overlayActions:hover {
-.audiovideo .audiovideoBase {
+      opacity: 0.6;
+    }
+    .audiovideoBase {
+      transform: rotateY(180deg);
+    }
+  }
+  .audiovideoBase {
     position: relative;
     width: 100%;
     height: 100%;
@@ -73,37 +90,32 @@
     -webkit-transform: rotateY(0deg);
     z-index: 2;
   }
-
+  .localContainer {
-.audiovideo.active .audiovideoBase {
-	transform: rotateY(180deg);
-	-webkit-transform: rotateY(180deg);
-}
-
-.audiovideo .localContainer {
     position: absolute;
-	left:0px;
+    left: 0;
-	right:0px;
+    right: 0;
-	top:0px;
+    top: 0;
-	bottom:0px;
+    bottom: 0;
     transform: scale(-1, 1);
     -webkit-transform: scale(-1, 1);
     pointer-events: none;
     z-index: 2;
   }
+}
 
-.audiovideo .remoteContainer {
+.audiovideo {
+  .remoteContainer {
     position: absolute;
-	left:0px;
+    left: 0;
-	right:0px;
+    right: 0;
-	top:0px;
+    top: 0;
-	bottom:0px;
+    bottom: 0;
     transform: rotateY(180deg);
     -webkit-transform: rotateY(180deg);
     pointer-events: none;
     z-index: 2;
   }
-
+  .miniContainer {
-.audiovideo .miniContainer {
     position: absolute;
     max-height: 18%;
     bottom: 2px;
@@ -115,19 +127,16 @@
     -webkit-transition-property: opacity;
     transition-duration: 0.5s;
     -webkit-transition-duration: 0.5s;
-}
+    &.visible {
-
-.audiovideo .miniContainer.visible {
       opacity: 1;
     }
-
+  }
-.audiovideo .miniVideo {
+  .miniVideo {
     max-height: 100%;
     max-width: 100%;
     display: block;
   }
-
+  .localVideo {
-.audiovideo .localVideo {
     width: 100%;
     max-height: 100%;
     opacity: 0;
@@ -138,19 +147,19 @@
     background: rgba(0,0,0,0.4);
     display: block;
   }
+}
 
 .audiovideo .remoteVideos {
   position: absolute;
-	left:0px;
+  left: 0;
-	right:0px;
+  right: 0;
-	bottom:0px;
+  bottom: 0;
-	top:0px;
+  top: 0;
   opacity: 0;
   transition-property: opacity;
   -webkit-transition-property: opacity;
   transition-duration: 2s;
   -webkit-transition-duration: 2s;
-
   video {
     width: 100%;
     height: 100%;
@@ -158,9 +167,7 @@
   }
 }
 
-.audiovideo {
+.audiovideo .remoteVideo{
-
-	.remoteVideo {
   display: inline-block;
   width: 100%;
   max-width: 100%;
@@ -170,15 +177,14 @@
   visibility: hidden;
   background: rgba(0,0,0,0.4);
   overflow: hidden;
-	}
+  &.withvideo {
-	.remoteVideo.withvideo {
     visibility: visible;
   }
-	.remoteVideo.onlyaudio {
+  &.onlyaudio {
     visibility: visible;
     background: #666;
   }
-	.remoteVideo .onlyaudio {
+  .onlyaudio {
     display: none;
     position: absolute;
     left: 0px;
@@ -190,13 +196,13 @@
     margin-top: -40px;
     pointer-events: auto;
   }
-	.remoteVideo.onlyaudio video {
+  &.onlyaudio video {
     display: none;
   }
-	.remoteVideo.onlyaudio .onlyaudio {
+  &.onlyaudio .onlyaudio {
     display: block;
   }
-	.remoteVideo .peerActions {
+  .peerActions {
     position: absolute;
     z-index: 10;
     left: 0px;
@@ -209,14 +215,14 @@
     transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     pointer-events: auto;
+    &:hover {
+      opacity: .5;
     }
-	.remoteVideo .peerActions i {
+    i {
       font-size: 3vw;
     }
-	.remoteVideo .peerActions:hover {
-		opacity:.5;
   }
-	.remoteVideo .peerLabel {
+  .peerLabel {
     position: absolute;
     z-index: 8;
     left: 4%;
@@ -231,7 +237,6 @@
     text-overflow: ellipsis;
     padding: 4px;
   }
-
 }
 
 .audiovideo .overlayActions {
@@ -246,7 +251,6 @@
   background: rgba(0,0,0,0.9);
   z-index: 5;
   opacity: 0;
-
   button {
     width: 40px;
     display: block;
@@ -257,26 +261,14 @@
   }
 }
 
-.audiovideo.active:hover .overlayActions {
+.remoteVideo {
-	opacity: 0.3;
+  &.talking .peerLabel {
-}
+    color: #9dd53a;
-
-.audiovideo.active .overlayActions:hover {
-	opacity: 0.6;
   }
-
+  .peerLabel {
-.remoteVideo .peerLabel {
-	-webkit-transition: color 500ms ease-out;
-	-moz-transition: color 500ms ease-out;
-	-o-transition: color 500ms ease-out;
     transition: color 500ms ease-out;
   }
-
+  .overlayLogo {
-.remoteVideo.talking .peerLabel {
-	color: #9dd53a;
-}
-
-.remoteVideo .overlayLogo {
     position: absolute;
     right: 4%;
     top: 4%;
@@ -292,35 +284,39 @@
     z-index: 2;
     pointer-events: none;
   }
-
-.miniContainer video {
-	border:1px solid transparent;
 }
 
-.miniContainer.talking video {
+.miniContainer {
+  &.talking video {
     border: 1px solid #9dd53a;
   }
+  video {
+    border: 1px solid transparent;
+  }
+}
 
 .renderer-smally {
   width: 150px;
   .remoteVideos {
     padding-bottom: 85px;
   }
-	.miniContainer {
+  .remoteVideo {
-		bottom:0px;
+    .peerLabel {
-		left:0px;
-		right:0px;
-		max-height:none;
-		height:85px;
-	}
-	.remoteVideo .peerLabel {
         font-size: .9em;
         font-weight: bold;
     }
-	.remoteVideo .peerActions i {
+    .peerActions i {
         font-size: 1em;
     }
   }
+  .miniContainer {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    max-height: none;
+    height: 85px;
+  }
+}
 
 .renderer-onepeople {
 }
@@ -342,7 +338,8 @@
     .overlayLogo {
       display: none;
     }
-		.peerLabel, .peerActions i {
+    .peerLabel,
+    .peerActions i {
       font-size: 1.1em;
     }
     .peerLabel {
@@ -356,8 +353,8 @@
   }
   .bigVideo {
     position: absolute;
-		left:0px;
+    left: 0;
-		right:0px;
+    right: 0;
     bottom: 112px;
     top: 2px;
     margin: auto;
@@ -366,21 +363,9 @@
     -webkit-transition-property: opacity;
     transition-duration: 2s;
     -webkit-transition-duration: 2s;
-	}
+    video {
-	.bigVideo video {
         width: 100%;
         height: 100%;
     }
-
-}
-
-@media only screen and (max-width: 630px) {
-	.mainScreenshare #audiovideo {
-		display:none;
-	}
-}
-@media only screen and (max-width:590px) {
-	#audiovideo {
-		right:0px;
   }
 }

src/styles/global/_mixins.scss

@@ -4,3 +4,9 @@
     @content;
   }
 }
+
+@mixin breakpt-only-screen($pt) {
+  @media only screen and (max-width: $pt) {
+    @content;
+  }
+}

src/styles/global/_variables.scss

@@ -44,6 +44,9 @@ $breakpoint-small: 480px;
 $breakpoint-medium: 700px;
 $breakpoint-large: 1280px;
 
+$breakpoint-video-small: 590px;
+$breakpoint-video-medium: 630px;
+
 $font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif;
 
 // compass