diff options
author | Victor Dubiniuk <victor.dubiniuk@gmail.com> | 2012-09-01 00:03:34 +0400 |
---|---|---|
committer | Victor Dubiniuk <victor.dubiniuk@gmail.com> | 2012-09-01 00:03:34 +0400 |
commit | ce2e11e16beb4d5937ceccab54b14ec0e336d02f (patch) | |
tree | cc236883728c21411503516039985e41cb462615 /files_videoviewer | |
parent | 148d54ab880c82fe6326b2bcdd54dcbdc300157b (diff) |
Markup and styles cleanup
Diffstat (limited to 'files_videoviewer')
-rw-r--r-- | files_videoviewer/css/style.css | 9 | ||||
-rw-r--r-- | files_videoviewer/img/overlay.png | bin | 146 -> 0 bytes | |||
-rw-r--r-- | files_videoviewer/js/viewer.js | 64 |
3 files changed, 36 insertions, 37 deletions
diff --git a/files_videoviewer/css/style.css b/files_videoviewer/css/style.css index f55a753b9..fd6cea838 100644 --- a/files_videoviewer/css/style.css +++ b/files_videoviewer/css/style.css @@ -1,17 +1,18 @@ -.overlay{ +#videoviewer_overlay{ position:fixed; top:0px;bottom:0px;left:0px;right:0px; z-index:100; - background:transparent url('%appswebroot%/files_videoviewer/img/overlay.png') repeat 0 0; + background-color:#777; + background-color:rgba(50,50,50, .4); } -#nonebox{ +#videoviewer_popup{ position:fixed; left:50%;top:50%; z-index:101; } -#container{ +#videoviewer_container{ position:relative; left:-50%;margin-top:-50%; padding:10px 10px 25px;border:5px solid #e4e4e4; diff --git a/files_videoviewer/img/overlay.png b/files_videoviewer/img/overlay.png Binary files differdeleted file mode 100644 index 05faf1105..000000000 --- a/files_videoviewer/img/overlay.png +++ /dev/null diff --git a/files_videoviewer/js/viewer.js b/files_videoviewer/js/viewer.js index 940730566..7fe228c31 100644 --- a/files_videoviewer/js/viewer.js +++ b/files_videoviewer/js/viewer.js @@ -1,36 +1,32 @@ var streamerPlayer = { UI : { - playerTemplate : '<video width="%width%" height="%height%" id="media_element" class="video-js vjs-default-skin" poster="" controls preload="auto">' + - '<source type="video/mp4" src="%src%" />' + - '<source type="video/webm" src="%src%" />' + - '<source type="video/flv" src="%src%" />' + - '<object width="%width%" height="%height%" type="application/x-shockwave-flash" data="%flash%">' + - '<param name="movie" value="%flash%" />' + - '<param name="flashvars" value="controls=true&file=%src%" />' + - '</object>' + + playerTemplate : '<video width="%width%" height="%height%" id="media_element" class="video-js vjs-default-skin" controls preload="none">' + + '<source type="%type%" src="%src%" />' + '</video>', - show : function (file, location, flashUri) { - $('<div class="overlay" id="overlay" style="display:none;"></div><div id="nonebox"><div id="container"><a class="box-close" id="box-close" href="#"></a><h3>'+file+'</h3></div></div>').appendTo('body'); + init : function(){ + OC.addScript('files_videoviewer','mediaelement-and-player', streamerPlayer.showPlayer); + }, + show : function () { + $('<div id="videoviewer_overlay" style="display:none;"></div><div id="videoviewer_popup"><div id="videoviewer_container"><a class="box-close" id="box-close" href="#"></a><h3>'+streamerPlayer.file+'</h3></div></div>').appendTo('body'); - $('#overlay').fadeIn('fast',function(){ - $('#nonebox').fadeIn('fast'); + $('#videoviewer_overlay').fadeIn('fast',function(){ + $('#videoviewer_popup').fadeIn('fast'); }); $('#box-close').click(streamerPlayer.hidePlayer); var size = streamerPlayer.UI.getSize(); var playerView = streamerPlayer.UI.playerTemplate.replace(/%width%/g, size.width) .replace(/%height%/g, size.height) - .replace(/%flash%/g, flashUri) - .replace(/%src%/g, location) + .replace(/%type%/g, streamerPlayer.mime) + .replace(/%src%/g, streamerPlayer.location) ; - $(playerView).prependTo('#container'); + $(playerView).prependTo('#videoviewer_container'); }, hide : function() { - $(".mejs-container").remove(); - $('#nonebox').fadeOut('fast', function() { - $('#overlay').fadeOut('fast', function() { - $('#overlay').remove(); + $('#videoviewer_popup').fadeOut('fast', function() { + $('#videoviewer_overlay').fadeOut('fast', function() { + $('#videoviewer_overlay').remove(); + $('#videoviewer_popup').remove(); }); - $('#nonebox').remove(); }); }, getSize : function () { @@ -43,7 +39,9 @@ var streamerPlayer = { return size; }, }, + mime : null, file : null, + location : null, player : null, mimeTypes : [ 'video/mp4', @@ -56,15 +54,15 @@ var streamerPlayer = { 'video/x-matroska', 'video/x-ms-asf' ], - showPlayer : function(){ - var location = streamerPlayer.getMediaUrl(streamerPlayer.file); - var mime = FileActions.getCurrentMimeType(); - - //Previous instance should NOT exist - streamerPlayer.player = false; - delete streamerPlayer.player; + onView : function(file) { + streamerPlayer.file = file; + streamerPlayer.location = streamerPlayer.getMediaUrl(file); + streamerPlayer.mime = FileActions.getCurrentMimeType(); - streamerPlayer.UI.show(streamerPlayer.file, location, OC.filePath('files_videoviewer', 'js', 'flashmediaelement.swf')); + OC.addScript('files_videoviewer','mediaelement-and-player', streamerPlayer.showPlayer); + }, + showPlayer : function() { + streamerPlayer.UI.show(); streamerPlayer.player = new MediaElementPlayer('#media_element', { features: ['playpause','progress','current','duration','tracks','volume','fullscreen'], @@ -75,7 +73,7 @@ var streamerPlayer = { success: function (player, node) { //set the size (for flash otherwise no video just sound!) player.setVideoSize($(node).width(), $(node).height()); - streamerPlayer.log(location); + streamerPlayer.log(streamerPlayer.location); player.load(); player.pause(); streamerPlayer.log('ready'); @@ -85,11 +83,11 @@ var streamerPlayer = { } }); }, - onView : function(file) { - streamerPlayer.file = file; - OC.addScript('files_videoviewer','mediaelement-and-player').done(streamerPlayer.showPlayer); - }, hidePlayer : function() { + streamerPlayer.player && streamerPlayer.pause(); + streamerPlayer.player = false; + delete streamerPlayer.player; + streamerPlayer.UI.hide(); }, getMediaUrl : function(file) { |