diff --git a/dashboard-ui/css/images/media/fullscreen.png b/dashboard-ui/css/images/media/fullscreen.png index 87ca5cabb..0e3351111 100644 Binary files a/dashboard-ui/css/images/media/fullscreen.png and b/dashboard-ui/css/images/media/fullscreen.png differ diff --git a/dashboard-ui/css/images/media/reduce.png b/dashboard-ui/css/images/media/reduce.png deleted file mode 100644 index 5b43ab3ee..000000000 Binary files a/dashboard-ui/css/images/media/reduce.png and /dev/null differ diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css index 982428aff..905a7aa36 100644 --- a/dashboard-ui/css/site.css +++ b/dashboard-ui/css/site.css @@ -723,10 +723,6 @@ progress { position: relative; } - #mediaElement.video { - width: 270px; - } - .nowPlayingMediaInfo div { display: inline-block; } @@ -750,18 +746,34 @@ progress { height: 24px; } -.itemVideo, .itemVideo.video-js { +.itemVideo { position: absolute; z-index: 99998; height: auto; - /*width: 180px;*/ - bottom: -5px; + width: 270px; + bottom: 44px; + left: -240px; + border: 1px solid #666; + border-bottom: 0; + background: #000; +} + +.fullscreenVideo { + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + width: 100%; + border: 0; + z-index: 99996; } .currentTime { display: inline-block; position: relative; top: -10px; + width: 110px; } .mediaSlider { @@ -805,48 +817,29 @@ progress { margin-right: .5em!important; } -::-ms-fill-lower { - background: #777; -} - -::-ms-fill-upper { - background: #777; -} - ::-ms-thumb { - background: #000; - border-radius: 5px; - border: 1px solid #000; -} - -::-ms-ticks-after { - display: none; - color: #777!important; - background: #777; -} - -::-ms-ticks-before { - display: none; - color: #777!important; - background: #777; + background-image: linear-gradient(#fefefe,#dddddd); + width: 15px; } ::-ms-track { padding: 0; border: 0; + color: #777; +} + +input[type="range"]::-ms-fill-lower { + background-color: #777; +} + +input[type="range"]::-ms-fill-upper { + background-color: #777; } ::-ms-tooltip { display: none; /* display and visibility only */ } -@media all and (min-width: 650px) { - - .itemVideo { - width: 270px; - } -} - .userProfileIcon { width: 36px; } diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js index 488dc8c33..e4b3ba3f6 100644 --- a/dashboard-ui/scripts/mediaplayer.js +++ b/dashboard-ui/scripts/mediaplayer.js @@ -1,4 +1,4 @@ -(function (document, setTimeout, clearTimeout, screen, localStorage, _V_, $, setInterval, window) { +(function (document, setTimeout, clearTimeout, screen, localStorage, $, setInterval, window) { function mediaPlayer() { @@ -22,6 +22,34 @@ self.playing = ''; self.queue = []; + function requestFullScreen(element) { + // Supports most browsers and their versions. + var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; + + if (requestMethod) { // Native full screen. + requestMethod.call(element); + } else if (typeof window.ActiveXObject !== "undefined") { // Older IE. + var wscript = new ActiveXObject("WScript.Shell"); + if (wscript !== null) { + wscript.SendKeys("{F11}"); + } + } + } + + function isFullScreen() { + return document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitIsFullScreen ? true : false; + } + + $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() { + + if (isFullScreen()) { + $('.itemVideo').addClass('fullscreenVideo'); + } else { + $('.itemVideo').removeClass('fullscreenVideo'); + } + + }); + function replaceQueryString(url, param, value) { var re = new RegExp("([?|&])" + param + "=.*?(&|$)", "i"); if (url.match(re)) @@ -43,7 +71,6 @@ function onPlaybackStopped() { - console.log('ended'); currentTimeElement.hide(); var endTime = this.currentTime; @@ -258,12 +285,7 @@ var html = ''; - var attributes = "autoplay"; - - if ($.browser.ipad || $.browser.iphone || $.browser.android) { - attributes += " controls"; - } - html += '