diff --git a/src/styles/components/_youtubevideo.scss b/src/styles/components/_youtubevideo.scss index 886dd721..218bcf2d 100644 --- a/src/styles/components/_youtubevideo.scss +++ b/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; +} diff --git a/static/js/directives/youtubevideo.js b/static/js/directives/youtubevideo.js index e1e739aa..18e4d0b5 100644 --- a/static/js/directives/youtubevideo.js +++ b/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) { diff --git a/static/partials/youtubevideo.html b/static/partials/youtubevideo.html index ebfef14f..561f84fb 100644 --- a/static/partials/youtubevideo.html +++ b/static/partials/youtubevideo.html @@ -41,6 +41,12 @@