diff --git a/airtime_mvc/application/controllers/PluploadController.php b/airtime_mvc/application/controllers/PluploadController.php index 89065a4b4..4c46e5fde 100644 --- a/airtime_mvc/application/controllers/PluploadController.php +++ b/airtime_mvc/application/controllers/PluploadController.php @@ -22,6 +22,7 @@ class PluploadController extends Zend_Controller_Action $this->view->headScript()->appendFile($baseUrl.'js/plupload/jquery.plupload.queue.min.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); $this->view->headScript()->appendFile($baseUrl.'js/airtime/library/plupload.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); $this->view->headScript()->appendFile($baseUrl.'js/plupload/i18n/'.$locale.'.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); + $this->view->headScript()->appendFile($baseUrl.'js/libs/dropzone.min.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); $this->view->headLink()->appendStylesheet($baseUrl.'css/plupload.queue.css?'.$CC_CONFIG['airtime_version']); $this->view->headLink()->appendStylesheet($baseUrl.'css/addmedia.css?'.$CC_CONFIG['airtime_version']); diff --git a/airtime_mvc/application/layouts/scripts/layout.phtml b/airtime_mvc/application/layouts/scripts/layout.phtml index 4f373fd91..225a4d34a 100644 --- a/airtime_mvc/application/layouts/scripts/layout.phtml +++ b/airtime_mvc/application/layouts/scripts/layout.phtml @@ -104,7 +104,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
>
-
+
layout()->content ?>
diff --git a/airtime_mvc/application/views/scripts/plupload/index.phtml b/airtime_mvc/application/views/scripts/plupload/index.phtml index 32e2ba94e..509775f0e 100644 --- a/airtime_mvc/application/views/scripts/plupload/index.phtml +++ b/airtime_mvc/application/views/scripts/plupload/index.phtml @@ -12,14 +12,37 @@ + +
+
diff --git a/airtime_mvc/public/css/addmedia.css b/airtime_mvc/public/css/addmedia.css index effa729de..80595b8c4 100644 --- a/airtime_mvc/public/css/addmedia.css +++ b/airtime_mvc/public/css/addmedia.css @@ -6,11 +6,6 @@ margin-bottom: 40px; } -#recent_uploads h2 -{ - font-size: 1.7em; -} - #recent_uploads_table { width: 100%; @@ -52,3 +47,529 @@ table#recent_uploads_table td text-decoration: underline; cursor: pointer; } + +@-webkit-keyframes passing-through { + 0% { + opacity: 0; + -webkit-transform: translateY(40px); + -moz-transform: translateY(40px); + -ms-transform: translateY(40px); + -o-transform: translateY(40px); + transform: translateY(40px) + } + 30%, 70% { + opacity: 1; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -ms-transform: translateY(0px); + -o-transform: translateY(0px); + transform: translateY(0px) + } + 100% { + opacity: 0; + -webkit-transform: translateY(-40px); + -moz-transform: translateY(-40px); + -ms-transform: translateY(-40px); + -o-transform: translateY(-40px); + transform: translateY(-40px) + } +} + +@-moz-keyframes passing-through { + 0% { + opacity: 0; + -webkit-transform: translateY(40px); + -moz-transform: translateY(40px); + -ms-transform: translateY(40px); + -o-transform: translateY(40px); + transform: translateY(40px) + } + 30%, 70% { + opacity: 1; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -ms-transform: translateY(0px); + -o-transform: translateY(0px); + transform: translateY(0px) + } + 100% { + opacity: 0; + -webkit-transform: translateY(-40px); + -moz-transform: translateY(-40px); + -ms-transform: translateY(-40px); + -o-transform: translateY(-40px); + transform: translateY(-40px) + } +} + +@keyframes passing-through { + 0% { + opacity: 0; + -webkit-transform: translateY(40px); + -moz-transform: translateY(40px); + -ms-transform: translateY(40px); + -o-transform: translateY(40px); + transform: translateY(40px) + } + 30%, 70% { + opacity: 1; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -ms-transform: translateY(0px); + -o-transform: translateY(0px); + transform: translateY(0px) + } + 100% { + opacity: 0; + -webkit-transform: translateY(-40px); + -moz-transform: translateY(-40px); + -ms-transform: translateY(-40px); + -o-transform: translateY(-40px); + transform: translateY(-40px) + } +} + +@-webkit-keyframes slide-in { + 0% { + opacity: 0; + -webkit-transform: translateY(40px); + -moz-transform: translateY(40px); + -ms-transform: translateY(40px); + -o-transform: translateY(40px); + transform: translateY(40px) + } + 30% { + opacity: 1; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -ms-transform: translateY(0px); + -o-transform: translateY(0px); + transform: translateY(0px) + } +} + +@-moz-keyframes slide-in { + 0% { + opacity: 0; + -webkit-transform: translateY(40px); + -moz-transform: translateY(40px); + -ms-transform: translateY(40px); + -o-transform: translateY(40px); + transform: translateY(40px) + } + 30% { + opacity: 1; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -ms-transform: translateY(0px); + -o-transform: translateY(0px); + transform: translateY(0px) + } +} + +@keyframes slide-in { + 0% { + opacity: 0; + -webkit-transform: translateY(40px); + -moz-transform: translateY(40px); + -ms-transform: translateY(40px); + -o-transform: translateY(40px); + transform: translateY(40px) + } + 30% { + opacity: 1; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -ms-transform: translateY(0px); + -o-transform: translateY(0px); + transform: translateY(0px) + } +} + +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1) + } + 10% { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -ms-transform: scale(1.1); + -o-transform: scale(1.1); + transform: scale(1.1) + } + 20% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1) + } +} + +@-moz-keyframes pulse { + 0% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1) + } + 10% { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -ms-transform: scale(1.1); + -o-transform: scale(1.1); + transform: scale(1.1) + } + 20% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1) + } +} + +@keyframes pulse { + 0% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1) + } + 10% { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -ms-transform: scale(1.1); + -o-transform: scale(1.1); + transform: scale(1.1) + } + 20% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1) + } +} + +.dropzone, .dropzone * { + box-sizing: border-box +} + +.dropzone { + min-height: 150px; + border: 2px solid rgba(0, 0, 0, 0.3); + background: #333; + padding: 20px 20px; + max-height: 300px; + overflow-y: auto; +} + +.dropzone.dz-clickable { + cursor: pointer +} + +.dropzone.dz-clickable * { + cursor: default +} + +.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * { + cursor: pointer +} + +.dropzone.dz-started .dz-message { + display: none +} + +.dropzone.dz-drag-hover { + border-style: solid +} + +.dropzone.dz-drag-hover .dz-message { + opacity: 0.5 +} + +.dropzone .dz-message { + text-align: center; + margin: auto; + padding: 2em; + font-size: 1.5em; + border: 2px dashed rgba(255, 255, 255, 0.2); + border-radius: 15px; + display: block; + width: 50%; + background-color: rgba(0, 0, 0, 0.1); + + -webkit-box-shadow: inset 0px -7px 27px -4px rgba(0,0,0,0.55); + -moz-box-shadow: inset 0px -7px 27px -4px rgba(0,0,0,0.55); + box-shadow: inset 0px -7px 27px -4px rgba(0,0,0,0.55); +} +.dropzone .dz-message:hover { + color: #fff; +} + +.dropzone .dz-preview { + position: relative; + display: inline-block; + vertical-align: top; + margin: 16px; + /*min-height: 100px*/ +} + +.dropzone .dz-preview:hover { + z-index: 1000 +} + +.dropzone .dz-preview:hover .dz-details { + opacity: 1 +} + +.dropzone .dz-preview.dz-file-preview .dz-image { + border-radius: 3px; + background: #444; + /*background: linear-gradient(to bottom, #eee, #ddd)*/ +} + +.dropzone .dz-preview.dz-file-preview .dz-details { + opacity: 1 +} + +.dropzone .dz-preview.dz-image-preview { + background: white +} + +.dropzone .dz-preview.dz-image-preview .dz-details { + -webkit-transition: opacity 0.2s linear; + -moz-transition: opacity 0.2s linear; + -ms-transition: opacity 0.2s linear; + -o-transition: opacity 0.2s linear; + transition: opacity 0.2s linear +} + +.dropzone .dz-preview .dz-remove { + font-size: 14px; + text-align: center; + display: block; + cursor: pointer; + border: none +} + +.dropzone .dz-preview .dz-remove:hover { + text-decoration: underline +} + +.dropzone .dz-preview:hover .dz-details { + opacity: 1 +} + +.dropzone .dz-preview .dz-details { + z-index: 20; + position: absolute; + top: 0; + left: 0; + opacity: 0; + font-size: 13px; + min-width: 100%; + max-width: 100%; + padding: 1em 1em; + text-align: left; + color: rgba(0, 0, 0, 0.9); + /*line-height: 150%*/ +} + +.dropzone .dz-preview .dz-details .dz-size { + margin-bottom: 1em; + /*font-size: 16px*/ + float: left; +} + +.dropzone .dz-preview .dz-details .dz-filename { + white-space: nowrap +} + +.dropzone .dz-preview .dz-details .dz-filename:hover span { + border: 1px solid rgba(200, 200, 200, 0.8); + background-color: rgba(255, 255, 255, 0.8) +} + +.dropzone .dz-preview .dz-details .dz-filename:not(:hover) { + overflow: hidden; + text-overflow: ellipsis +} + +.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span { + border: 1px solid transparent +} + +.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span { + background-color: rgba(255, 255, 255, 0.4); + padding: 0 0.4em; + border-radius: 3px +} + +.dropzone .dz-preview:hover .dz-image img { + -webkit-transform: scale(1.05, 1.05); + -moz-transform: scale(1.05, 1.05); + -ms-transform: scale(1.05, 1.05); + -o-transform: scale(1.05, 1.05); + transform: scale(1.05, 1.05); + -webkit-filter: blur(8px); + filter: blur(8px) +} + +.dropzone .dz-preview .dz-image { + border-radius: 20px; + overflow: hidden; + width: 360px; + height: 40px; + position: relative; + display: block; + z-index: 10 +} + +.dropzone .dz-preview .dz-image img { + display: block +} + +.dropzone .dz-preview.dz-success .dz-success-mark { + -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); + -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); + -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); + -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); + animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1) +} + +.dropzone .dz-preview.dz-error .dz-error-mark { + opacity: 1; + -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); + -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); + -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); + -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); + animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1) +} + +.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark { + pointer-events: none; + opacity: 0; + z-index: 500; + position: absolute; + display: block; + top: 50%; + left: 50%; + margin-left: -27px; + margin-top: -27px +} + +.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg { + display: block; + width: 54px; + height: 54px +} + +.dropzone .dz-preview.dz-processing .dz-progress { + opacity: 1; + -webkit-transition: all 0.2s linear; + -moz-transition: all 0.2s linear; + -ms-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.2s linear +} + +.dropzone .dz-preview.dz-complete .dz-progress { + opacity: 0; + -webkit-transition: opacity 0.4s ease-in; + -moz-transition: opacity 0.4s ease-in; + -ms-transition: opacity 0.4s ease-in; + -o-transition: opacity 0.4s ease-in; + transition: opacity 0.4s ease-in +} + +.dropzone .dz-preview:not(.dz-processing) .dz-progress { + -webkit-animation: pulse 6s ease infinite; + -moz-animation: pulse 6s ease infinite; + -ms-animation: pulse 6s ease infinite; + -o-animation: pulse 6s ease infinite; + animation: pulse 6s ease infinite +} + +.dropzone .dz-preview .dz-progress { + opacity: 1; + z-index: 1000; + pointer-events: none; + position: absolute; + height: 16px; + left: 50%; + top: 50%; + margin-top: -8px; + width: 80px; + margin-left: -40px; + background: rgba(255, 255, 255, 0.9); + -webkit-transform: scale(1); + border-radius: 8px; + overflow: hidden +} + +.dropzone .dz-preview .dz-progress .dz-upload { + background: #333; + background: linear-gradient(to bottom, #666, #444); + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 0; + -webkit-transition: width 300ms ease-in-out; + -moz-transition: width 300ms ease-in-out; + -ms-transition: width 300ms ease-in-out; + -o-transition: width 300ms ease-in-out; + transition: width 300ms ease-in-out +} + +.dropzone .dz-preview.dz-error .dz-error-message { + display: block +} + +.dropzone .dz-preview.dz-error:hover .dz-error-message { + opacity: 1; + pointer-events: auto +} + +.dropzone .dz-preview .dz-error-message { + pointer-events: none; + z-index: 1000; + position: absolute; + display: block; + display: none; + opacity: 0; + -webkit-transition: opacity 0.3s ease; + -moz-transition: opacity 0.3s ease; + -ms-transition: opacity 0.3s ease; + -o-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; + border-radius: 8px; + font-size: 13px; + top: 130px; + left: -10px; + width: 140px; + background: #be2626; + background: linear-gradient(to bottom, #be2626, #a92222); + padding: 0.5em 1.2em; + color: white +} + +.dropzone .dz-preview .dz-error-message:after { + content: ''; + position: absolute; + top: -6px; + left: 64px; + width: 0; + height: 0; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #be2626 +} diff --git a/airtime_mvc/public/css/plupload.queue.css b/airtime_mvc/public/css/plupload.queue.css index 3d5f8d042..d9abfc7b0 100644 --- a/airtime_mvc/public/css/plupload.queue.css +++ b/airtime_mvc/public/css/plupload.queue.css @@ -3,27 +3,51 @@ ------------------------------------------------------------------- */ .plupload_button { - display: -moz-inline-box; /* FF < 3*/ display: inline-block; - font: normal 12px sans-serif; - text-decoration: none; - color: #42454a; - border: 1px solid #bababa; - padding: 2px 8px 3px 20px; - margin-right: 4px; - background: #f3f3f3 url('img/buttons.png') no-repeat 0 center; - outline: 0; + *display: inline; + /* IE7 inline-block hack */ + *zoom: 1; + padding: 4px 14px; + margin-bottom: 0; + font-size: 14px; + line-height: 20px; + *line-height: 20px; + text-align: center; + vertical-align: middle; + cursor: pointer; + color: #efefef; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #676767; + background-image: -moz-linear-gradient(top, #676767, #535353); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#676767), to(#535353)); + background-image: -webkit-linear-gradient(top, #676767, #535353); + background-image: -o-linear-gradient(top, #676767, #535353); + background-image: linear-gradient(to bottom, #676767, #535353); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#676767', endColorstr='#535353', GradientType=0); - /* Optional rounded corners for browsers that support it */ - -moz-border-radius: 3px; - -khtml-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; + border-color: #5b5b5b #5b5b5b #4f4f4f; + *background-color: #676767; + /* Darken IE7 buttons by default so they stand out more given they won't have borders */ + + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + border: 1px solid #525252; + border-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.55); + *border: 0; + border-bottom-color: #323232; + -webkit-border-radius: 1px; + -moz-border-radius: 1px; + border-radius: 1px; + *margin-left: .3em; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); } .plupload_button:hover { - color: #000; - text-decoration: none; + color: #fff; + background-color: #535353; + *background-color: #535353; } .plupload_disabled, a.plupload_disabled:hover { @@ -38,14 +62,26 @@ } .plupload_wrapper { - font: normal 11px Verdana,sans-serif; width: 100%; } .plupload_container { padding: 8px; - background: url('img/transp50.png'); + /*background: url('img/transp50.png');*/ /*-moz-border-radius: 5px;*/ + + + border: 1px solid #202020; + border-top: 1px solid #353535; + border-left: 1px solid #2a2a2a; + + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.65); + -moz-box-shadow: inset 0 0 6px rgba(0,0,0,.65); + box-shadow: inset 0 0 6px rgba(0,0,0,.65); + + background-color: #242424; + color: #efefef; + } .plupload_container input { diff --git a/airtime_mvc/public/css/redmond/jquery-ui-1.8.8.custom.css b/airtime_mvc/public/css/redmond/jquery-ui-1.8.8.custom.css index 728e6f95b..cd6e1d898 100644 --- a/airtime_mvc/public/css/redmond/jquery-ui-1.8.8.custom.css +++ b/airtime_mvc/public/css/redmond/jquery-ui-1.8.8.custom.css @@ -117,7 +117,7 @@ box-shadow: inset 0 0 6px rgba(0,0,0,.65); background-color: #242424; - color: #efefef; + color: #e2e2e2; } .ui-widget-content a { diff --git a/airtime_mvc/public/js/airtime/library/plupload.js b/airtime_mvc/public/js/airtime/library/plupload.js index 9d86446a4..a9b20e3c5 100644 --- a/airtime_mvc/public/js/airtime/library/plupload.js +++ b/airtime_mvc/public/js/airtime/library/plupload.js @@ -14,6 +14,67 @@ $(document).ready(function() { Object.freeze(self.IMPORT_STATUS_CODES); } + Dropzone.options.addMediaDropzone = { + url:'/rest/media', + //clickable: false, + acceptedFiles: acceptedMimeTypes.join(), + init: function () { + this.on("sending", function (file, xhr, data) { + data.append("csrf_token", $("#csrf").val()); + }); + + this.on("success", function(file, xhr, data) { + //Refresh the upload table: + self.recentUploadsTable.fnDraw(); //Only works because we're using bServerSide + //In DataTables 1.10 and greater, we can use .fnAjaxReload() + }); + } + }; + + /* + var uploader = new plupload.Uploader({ + runtimes: 'html5, flash, html4', + browse_button: 'pickfiles', + container: $("#container"), + url : baseUrl+'rest/media', + filters : [ + {title: "Audio Files", extensions: "ogg,mp3,oga,flac,wav,m4a,mp4,opus,aac,oga,mp1,mp2,wma,au"} + ], + multipart_params : { + "csrf_token" : $("#csrf").attr('value') + }, + + init: { + PostInit: function() { + document.getElementById('filelist').innerHTML = ''; + + document.getElementById('uploadfiles').onclick = function() { + uploader.start(); + return false; + }; + }, + + FilesAdded: function(up, files) { + plupload.each(files, function(file) { + document.getElementById('filelist').innerHTML += '
' + file.name + ' (' + plupload.formatSize(file.size) + ')
'; + }); + }, + + UploadProgress: function(up, file) { + document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '' + file.percent + "%"; + }, + + Error: function(up, err) { + document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message; + } + } + }); + + uploader.init(); + */ + + + /* $("#plupload_files").pluploadQueue({ // General settings runtimes : 'gears, html5, html4', @@ -46,7 +107,7 @@ $(document).ready(function() { uploader.bind('UploadComplete', function(){ uploadProgress = false; - }); + });*/ $(window).bind('beforeunload', function(){ if(uploadProgress){