Make volume configurable for subscriber.

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

@@ -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();
 				});
 			};
@@ -544,6 +547,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>