Video mirrored rotation

Gives to video the same appearance as being mirrored.

static/sfu.css

@@ -755,6 +755,10 @@ h1 {
     object-fit: contain;
 }
 
+.media-mirror {
+  transform: scaleX(-1);
+}
+
 .media-failed {
     opacity: 0.7;
 }

static/sfu.js

@@ -1010,6 +1010,7 @@ function setMedia(c, isUp, video) {
     let local_media;
     let down_media;
     let audioMode = false;
+    let rotate;
 
     for(let id in serverConnection.up) {
         if (id === c.id) {
@@ -1019,8 +1020,15 @@ function setMedia(c, isUp, video) {
     }
     if(!isUp) {
         down_media = serverConnection.down[c.id];
-        if(down_media)
+        if(down_media) {
             audioMode = !down_media.stream.getVideoTracks().length;
+            rotate = true;
+            for(let mid in down_media.labelsByMid) {
+                // we do not rotate if video is a screenshare
+                if(down_media.labelsByMid[mid] === "screenshare")
+                    rotate = false;
+            }
+        }
     }
 
     let div = document.getElementById('peer-' + c.id);
@@ -1059,6 +1067,10 @@ function setMedia(c, isUp, video) {
     }
 
     if(!video) {
+        if((local_media && local_media.kind !== "screenshare") || rotate)
+            media.classList.add('media-mirror');
+        else
+            media.classList.add('media-static');
         let template = document.getElementById('videocontrols-template')
             .firstElementChild;
         let top_template = document.getElementById('top-videocontrols-template')
@@ -1240,6 +1252,19 @@ function registerControlEvent(peerid) {
         };
     }
 
+    let media = /** @type {HTMLElement} */(peer.querySelector("video.media"));
+    media.onenterpictureinpicture = function(event) {
+        if(event.target.classList.contains('media-static'))
+            return;
+        event.target.classList.remove('media-mirror');
+    };
+
+    media.onleavepictureinpicture = function(event) {
+        if(event.target.classList.contains('media-static'))
+            return;
+        event.target.classList.add('media-mirror');
+    };
+
     let stop = /** @type {HTMLElement} */(peer.querySelector(".stopsharing"));
     if (stop) {
         stop.onclick = function(event) {