Merge pull request #110 from fancycode/youtube_changes

Various YouTube changes

src/styles/components/_youtubevideo.scss

@@ -116,3 +116,62 @@
   right: 23px;
   top: 6px;
 }
+
+.volumecontrol {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  pointer-events: auto;
+  z-index: 10;
+  background: rgba(0, 0, 0, 0.6);
+  padding: 4px;
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.volume-button {
+  display: inline;
+  min-width: 38px;
+}
+
+.volumebar {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 6px 8px;
+}
+
+.volumebar input[type="range"] {
+  -webkit-appearance: none;
+  background-color: #aaa;
+  border: 1px solid #aaa;
+  width: 100px;
+  height: 3px;
+  outline: 0;
+}
+
+.volumebar input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  background-color: #fff;
+  width: 6px;
+  height: 20px;
+}
+
+.volumebar input[type="range"]::-moz-range-track {
+  background: #aaa;
+  border: none;
+}
+
+.volumebar input[type="range"]::-moz-range-thumb {
+  background-color: #fff;
+  width: 6px;
+  height: 20px;
+  border-radius: 0;
+}
+
+.volumebar input[type="range"]::-moz-focusring{
+  outline: 1px solid #aaa;
+  outline-offset: -1px;
+}

static/js/directives/youtubevideo.js

@@ -22,7 +22,7 @@ define(['jquery', 'underscore', 'text!partials/youtubevideo.html', 'bigscreen'],
 
 	return ["$window", "$document", "mediaStream", "alertify", "translation", "safeApply", "appData", function($window, $document, mediaStream, alertify, translation, safeApply, appData) {
 
-		var YOUTUBE_IFRAME_API_URL = "https://www.youtube.com/iframe_api";
+		var YOUTUBE_IFRAME_API_URL = "//www.youtube.com/iframe_api";
 
 		var isYouTubeIframeAPIReady = $.Deferred();
 		$window.onYouTubeIframeAPIReady = function() {
@@ -65,6 +65,8 @@ define(['jquery', 'underscore', 'text!partials/youtubevideo.html', 'bigscreen'],
 			$scope.currentVideoId = null;
 			$scope.youtubeurl = "";
 			$scope.youtubeAPIReady = false;
+			$scope.volumebarVisible = true;
+			$scope.volume = null;
 
 			isYouTubeIframeAPIReady.done(function() {
 				$scope.$apply(function(scope) {
@@ -74,6 +76,7 @@ define(['jquery', 'underscore', 'text!partials/youtubevideo.html', 'bigscreen'],
 
 			var onPlayerReady = function(event) {
 				$scope.$apply(function(scope) {
+					scope.volume = player.getVolume();
 					playerReady.resolve();
 				});
 			};
@@ -289,7 +292,13 @@ define(['jquery', 'underscore', 'text!partials/youtubevideo.html', 'bigscreen'],
 								"onStateChange": onPlayerStateChange
 							}
 						});
-						$scope.isPublisher = with_controls;
+						$("#youtubeplayer").show();
+						safeApply($scope, function(scope) {
+							// YT player events don't fire in Firefox if
+							// player is not visible, so show while loading
+							scope.playbackActive = true;
+							scope.isPublisher = with_controls;
+						});
 					}
 				});
 			};
@@ -544,6 +553,13 @@ define(['jquery', 'underscore', 'text!partials/youtubevideo.html', 'bigscreen'],
 				}
 			});
 
+			$scope.$watch("volume", function(newval, oldval) {
+				// allow "viewers" to change the volume manually
+				if (oldval !== newval && player && !$scope.isPublisher && newval !== null) {
+					player.setVolume(newval);
+				}
+			});
+
 			$scope.toggleFullscreen = function(elem) {
 
 				if (BigScreen.enabled) {

static/partials/youtubevideo.html

@@ -41,6 +41,12 @@
 						<div>{{_('Currently playing')}}<br><a href="{{ currentVideoUrl }}" rel="external" target="_blank">{{ currentVideoUrl }}</a></div>
 					</div>
 					<div class="click-container" ng-show="!isPublisher">
+						<div class="volumecontrol">
+							<button class="btn volume-button" ng-class="{'active': volumebarVisible}" ng-click="volumebarVisible=!volumebarVisible"><i class="fa fa-volume-up" ng-class="{'fa-volume-up': volume &gt;= 60, 'fa-volume-down': volume &lt; 60}"></i></button>
+							<div ng-show="volumebarVisible" class="volumebar">
+								<input type="range" min="0" max="100" step="1" ng-model="volume" />
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>