Controls: video rotation/scale

api/video.js

@@ -4,6 +4,7 @@ var
 	that,
 	oldSource,
 	opacity,
+	rotation,
 	isStopped = true,
 	isLoaded = false,
 	video = dom.jqPlayerVideo[ 0 ],
@@ -154,6 +155,25 @@ api.video = that = {
 		jqVideo.trigger( "opacitychange" );
 		return that;
 	},
+
+	// Rotation (degrees)
+	rotation: function( deg ) {
+		if ( arguments.length === 0 ) {
+			return rotation;
+		}
+		rotation = utils.range( 0, deg, 360, rotation );
+		jqVideo.trigger( "rotationchange" );
+		return that;
+	},
+
+	// Getter: width/height
+	width: function() {
+		return video.videoWidth;
+	},
+	height: function() {
+		return video.videoHeight;
+	},
+
 	opacityToggle: function( b ) {
 		if ( typeof b !== "boolean" ) {
 			b = opacity < 1;

dom.js

@@ -44,6 +44,10 @@ window.dom = {
 		jqPlayerOpacityIcon: $( "#ctrl .opacity > .fa" ),
 		jqPlayerOpacitySlider: $( "#ctrl .opacity .cuteslider" ),
 		jqPlayerOpacityValue: $( "#ctrl .opacity .val" ),
+		// Rotation
+		jqPlayerRotationIcon: $( "#ctrl .rotation .fa" ),
+		jqPlayerRotationSlider: $( "#ctrl .rotation .cuteslider" ),
+		jqPlayerRotationValue: $( "#ctrl .rotation .val" ),
 		// CurrentTime
 		jqPlayerSliderCurrentTime: $( "#ctrl .cuteslider.position" ),
 			// Thumbnail

index.html

@@ -102,6 +102,26 @@ <h1 class="title">
 						</span>
 					</div
 					><div class="right"
+						><span class="btn rotation"
+							><i class="fa fa-repeat"></i
+							><div
+								class="menu"
+								><div class="content"
+									><div class="header"
+										><span class="title">Rotation : </span
+										><b class="val"></b
+									></div
+									><ul
+										><li
+											><input
+												type="range"
+												data-jquery-element="cuteslider"
+												min="0" max="360" value="0" step="1"
+										/></li
+									></ul
+								></div
+							></div
+						></span
 						><span class="btn visu"
 							><i class="fa fa-fw fa-align-center fa-rotate-270"></i
 							><div
@@ -229,6 +249,7 @@ <h1 class="title">
 <script src="player/events/controls.js"></script>
 <script src="player/events/subtitles.js"></script>
 <script src="player/events/thumbnail.js"></script>
+<script src="player/events/rotation.js"></script>
 <script src="player/events/position.js"></script>
 <script src="player/events/playpausestop.js"></script>
 <script src="player/events/volume.js"></script>

init.js

@@ -5,6 +5,7 @@ playerUI.textsShowing = false;
 api.video
 	.resizeUpdate()
 	.opacity( 1 )
+	.rotation( 0 )
 	// Force the volumechange event
 	.volume( 0 )
 	.volume( 1 )

player/css/controls.css

@@ -115,7 +115,8 @@
 	right: -62px;
 }
 
-#ctrl .opacity .menu .cuteslider {
+#ctrl .opacity .menu .cuteslider,
+#ctrl .rotation .menu .cuteslider {
 	width: 90px;
 	height: 14px;
 	margin: 0 .9em 0 .7em;
@@ -131,3 +132,8 @@
 	width: 28px;
 	height: 13px;
 }
+
+#ctrl .rotation .menu {
+	min-width: 120px;
+	right: -52px;
+}

player/data-binding.js

@@ -50,6 +50,10 @@ dom.jqPlayerVideo.on( {
 	opacitychange: function() {
 		lg( "ON: opacitychange" );
 		playerUI.opacity( api.video.opacity() );
+	},
+	rotationchange: function() {
+		lg( "ON: rotationchange" );
+		playerUI.rotation( api.video.rotation() );
 	}
 });
 

player/events/rotation.js

@@ -0,0 +1,7 @@
+(function(){
+
+dom.jqPlayerRotationSlider.change( function() {
+	api.video.rotation( this.value );
+});
+
+})();

player/player-ui.js

@@ -21,6 +21,10 @@ var
 	// Button: fullscreen.
 	jqBtnFScr = dom.jqPlayerFullscreenBtn,
 
+	// Button, slider: rotation.
+	jqRotationIcon = dom.jqPlayerRotationIcon,
+	jqRotationSlider = dom.jqPlayerRotationSlider,
+
 	// Button, slider: opacity.
 	jqOpacityIcon = dom.jqPlayerOpacityIcon,
 	jqOpacitySlider = dom.jqPlayerOpacitySlider,
@@ -158,6 +162,11 @@ window.playerUI = that = {
 	speed: function( rate ) {
 		return that.actionDesc( "Speed : " + rate.toFixed( 2 ) + "x" );
 	},
+	rotation: function( rot ) {
+		dom.jqPlayerVideo.css( { transform: "rotate(" + rot + "deg)" } );
+		dom.jqPlayerRotationValue.text( rot + "°" );
+		return that;
+	},
 	opacity: function( op ) {
 		dom.jqPlayerScreen.css( "opacity", op );
 		jqOpacitySlider.element().val( op );

tools/utils.js

@@ -18,6 +18,7 @@ window.utils = {
 	},
 	range: function( a, val, b, ori ) {
 		var valn = +val;
+
 		if ( arguments.length === 4 && val[ 1 ] === "=" ) {
 			valn =
 				( ori || 0 ) +