Embed: added mistPlay option to rotate the video (pass rotate:1 to rotate clockwise, rotate:-1 to rotate counterclockwise, and rotate:2 for 180degrees)

Author: thoronwen

embed/min/player.js

@@ -2,6 +2,13 @@
 .mistvideo-controls{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
 .mistvideo.novideo{overflow:visible}
 .mistvideo-video{overflow:hidden;outline:0}
+.mistvideo .mistvideo-maincontainer,.mistvideo .mistvideo-videocontainer{width:var(--width);height:var(--height)}
+.mistvideo[data-fullscreen] .mistvideo-maincontainer,.mistvideo[data-fullscreen] .mistvideo-videocontainer{width:100vw;height:100vh}
+[data-mist-rotate="-1"],[data-mist-rotate="1"]{width:var(--height)!important;height:var(--width)!important;transform-origin:bottom left;transform:translate(calc(var(--factor) * var(--width)),calc(var(--factor) * var(--height) - var(--width))) rotate(var(--rotate));object-fit:contain}
+.mistvideo[data-fullscreen] [data-mist-rotate="-1"],.mistvideo[data-fullscreen] [data-mist-rotate="1"]{width:100vh!important;height:100vw!important;transform-origin:bottom left;transform:translate(calc(var(--factor) * 100vw),calc(var(--factor) * 100vh - 100vw)) rotate(var(--rotate));object-fit:contain}
+[data-mist-rotate="1"]{--rotate:90deg;--factor:0}
+[data-mist-rotate="-1"]{--rotate:-90deg;--factor:1}
+[data-mist-rotate="2"]{transform:rotate(180deg);transform-origin:center center}
 .mistvideo svg.icon.loading{z-index:-1;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;opacity:0}
 .mistvideo [data-loading]{position:relative}
 .mistvideo [data-loading=stalled] svg.icon.loading{transition:opacity 0s 3s}

embed/min/skins/default.css

@@ -2,6 +2,13 @@
 .mistvideo-controls{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
 .mistvideo.novideo{overflow:visible}
 .mistvideo-video{overflow:hidden;outline:0}
+.mistvideo .mistvideo-maincontainer,.mistvideo .mistvideo-videocontainer{width:var(--width);height:var(--height)}
+.mistvideo[data-fullscreen] .mistvideo-maincontainer,.mistvideo[data-fullscreen] .mistvideo-videocontainer{width:100vw;height:100vh}
+[data-mist-rotate="-1"],[data-mist-rotate="1"]{width:var(--height)!important;height:var(--width)!important;transform-origin:bottom left;transform:translate(calc(var(--factor) * var(--width)),calc(var(--factor) * var(--height) - var(--width))) rotate(var(--rotate));object-fit:contain}
+.mistvideo[data-fullscreen] [data-mist-rotate="-1"],.mistvideo[data-fullscreen] [data-mist-rotate="1"]{width:100vh!important;height:100vw!important;transform-origin:bottom left;transform:translate(calc(var(--factor) * 100vw),calc(var(--factor) * 100vh - 100vw)) rotate(var(--rotate));object-fit:contain}
+[data-mist-rotate="1"]{--rotate:90deg;--factor:0}
+[data-mist-rotate="-1"]{--rotate:-90deg;--factor:1}
+[data-mist-rotate="2"]{transform:rotate(180deg);transform-origin:center center}
 .mistvideo svg.icon.loading{z-index:-1;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;opacity:0}
 .mistvideo [data-loading]{position:relative}
 .mistvideo [data-loading=stalled] svg.icon.loading{transition:opacity 0s 3s}

embed/min/skins/dev.css

@@ -30,7 +30,8 @@ function MistVideo(streamName,options) {
     setTracks: false,     //don't set tracks
     fillSpace: false,     //don't fill parent container
     width: false,         //no set width
-    height: false,        //no set height
+    height: false,        //no set height,
+    rotate: false,        //do not rotate; 1: rotate clockwise, -1: counter clockwise, 2: 180 degrees
     maxwidth: false,      //no max width (apart from targets dimensions)
     maxheight: false,     //no max height (apart from targets dimensions)
     ABR_resize: true,     //for supporting wrappers: when the player resizes, request a video track that matches the resolution best
@@ -377,6 +378,13 @@ function MistVideo(streamName,options) {
       MistVideo.showError(e,{reload:true,hideTitle:true});
       return;
     }
+
+    if (Math.abs(MistVideo.options.rotate) == 1) {
+      //switch width and height
+      var w = d.width;
+      MistVideo.info.width = d.height;
+      MistVideo.info.height = w;
+    }
 
     //pre-show poster or other loading image
     MistVideo.calcSize = function(size) {
@@ -1064,6 +1072,8 @@ function MistVideo(streamName,options) {
               this.setSize(size);
               container.style.width = size.width+"px";
               container.style.height = size.height+"px";
+              container.style.setProperty("--width",size.width+"px");
+              container.style.setProperty("--height",size.height+"px");
 
               if ((MistVideo.options.fillSpace) && (!options || !options.reiterating)) {
                 //if this container is set to fill the available space

embed/player.js

@@ -332,6 +332,17 @@ MistSkins["default"] = {
     },
     video: function(){
       var MistVideo = this;
+
+      if (MistVideo.options.rotate) {
+        switch (MistVideo.options.rotate) {
+          case -1:
+          case 1:
+          case 2: {
+            MistVideo.video.setAttribute("data-mist-rotate",MistVideo.options.rotate);
+            break;
+          }
+        }
+      }
 
       //disable right click
       MistUtil.event.addListener(MistVideo.video,"contextmenu",function(e){
@@ -2453,6 +2464,17 @@ MistSkins["default"] = {
 
       var ele = document.createElement("div");
       var MistVideo = this;
+
+      if (MistVideo.options.rotate) {
+        switch (MistVideo.options.rotate) {
+          case -1:
+          case 1:
+          case 2: {
+            ele.setAttribute("data-mist-rotate",MistVideo.options.rotate);
+            break;
+          }
+        }
+      }
 
       var canvasses = [];
       for (var n = 0; n < 2; n++) {

embed/skins.js

@@ -20,6 +20,47 @@
   overflow: hidden;
   outline: none;
 }
+.mistvideo .mistvideo-maincontainer,
+.mistvideo .mistvideo-videocontainer {
+  width: var(--width);
+  height: var(--height);
+}
+.mistvideo[data-fullscreen] .mistvideo-maincontainer,
+.mistvideo[data-fullscreen] .mistvideo-videocontainer {
+  width: 100vw;
+  height: 100vh;
+}
+[data-mist-rotate="1"],
+[data-mist-rotate="-1"] {
+  width: var(--height) !important;
+  height: var(--width) !important;
+  transform-origin: bottom left;
+  transform: translate(calc(var(--factor) * var(--width)), calc(var(--factor) * var(--height) - var(--width))) rotate(var(--rotate));
+  object-fit: contain;
+}
+.mistvideo[data-fullscreen] [data-mist-rotate="1"],
+.mistvideo[data-fullscreen] [data-mist-rotate="-1"] {
+  width: 100vh !important;
+  height: 100vw !important;
+  transform-origin: bottom left;
+  transform: translate(calc(var(--factor) * 100vw), calc(var(--factor) * 100vh - 100vw)) rotate(var(--rotate));
+  object-fit: contain;
+}
+
+[data-mist-rotate="1"] {
+  --rotate: 90deg;
+  --factor: 0;
+}
+[data-mist-rotate="-1"] {
+  --rotate: -90deg;
+  --factor: 1;
+
+}
+[data-mist-rotate="2"] {
+  transform: rotate(180deg);
+  transform-origin: center center;
+}
+
 .mistvideo svg.icon.loading {
   z-index: -1; /* don't use display: none because of transition for [data-loading=stalled] */
   position: absolute;