SAAS-1083 - more work on publish dialog

airtime_mvc/application/forms/EditAudioMD.php

@@ -199,27 +199,37 @@ class Application_Form_EditAudioMD extends Zend_Form
         $cueOut->setValidators(array($cueOutValidator));
         $this->addElement($cueOut);
 
-        // Add the submit button
+        // Add the cancel button
-        $this->addElement('button', 'editmdsave', array(
-            'ignore'     => true,
-            'class'      => 'btn md-save right-floated',
-            'label'      => _('OK'),
-            'decorators' => array(
-                'ViewHelper'
-            )
-        ));
-
-        // Add the submit button
         $this->addElement('button', 'editmdcancel', array(
             'ignore'   => true,
-            'class'    => 'btn md-cancel right-floated',
+            'class'    => 'btn md-cancel',
             'label'    => _('Cancel'),
             'decorators' => array(
                 'ViewHelper'
             )
         ));
 
-        $this->addDisplayGroup(array('editmdcancel', 'editmdsave'), 'submitButtons', array(
+        // Add the submit button
+        $this->addElement('button', 'editmdsave', array(
+            'ignore'     => true,
+            'class'      => 'btn md-save',
+            'label'      => _('Save'),
+            'decorators' => array(
+                'ViewHelper'
+            )
+        ));
+
+        // Button to open the publish dialog
+        $this->addElement('button', 'publishdialog', array(
+            'ignore'   => true,
+            'class'    => 'btn md-publish',
+            'label'    => _('Publish track'),
+            'decorators' => array(
+                'ViewHelper'
+            )
+        ));
+
+        $this->addDisplayGroup(array('editmdsave', 'editmdcancel', 'publishdialog'), 'submitButtons', array(
             'decorators' => array(
                 'FormElements',
                 'DtDdWrapper'

airtime_mvc/application/views/scripts/library/edit-file-md.phtml

@@ -1,6 +1,6 @@
-<div class="ui-widget ui-widget-content block-shadow simple-formblock clearfix padded-strong" id="edit-md-dialog">
+<div class="ui-widget ui-widget-content block-shadow simple-formblock clearfix padded-strong edit-md-dialog">
     <div class="inner_editor_title">
-        <?php if ($this->permissionDenied) { ?> <h3>You do not have permission to edit this track.</h3> <?php } ?>
+        <?php if ($this->permissionDenied) { ?> <h3><?php echo _("You do not have permission to edit this track.") ?></h3> <?php } ?>
         <H2><?php
             if ($this->permissionDenied) {
                 echo(_("Viewing "));

airtime_mvc/application/views/scripts/library/publish-dialog.phtml

@@ -6,14 +6,19 @@
 <div class="inner_editor_wrapper">
     <form class="media-metadata">
         <input ng-value="media.id" class="obj_id" type="hidden"/>
-        <label>
+        <button ng-click="openEditDialog()" class="btn publish-edit-md"><?php echo _("Edit Metadata") ?></button>
+        <label class="publish-md-field">
             <?php echo _("Title") ?>
             <input disabled ng-model="media.track_title" type="text"/>
         </label>
-        <label>
+        <label class="publish-md-field">
             <?php echo _("Creator") ?>
             <input disabled ng-model="media.artist_name" type="text"/>
         </label>
+        <label class="publish-md-field">
+            <?php echo _("Description") ?>
+            <textarea disabled ng-model="media.description"></textarea>
+        </label>
         <fieldset>
             <legend><?php echo _("Publish to:"); ?></legend>
             <div ng-repeat="(source, label) in sources.toPublish">

airtime_mvc/public/css/dashboard.css

@@ -395,21 +395,21 @@ textarea {
 
 /* File Metadata Editor */
 
-#edit-md-dialog {
+.edit-md-dialog {
     width: 100%;
     background: none;
     border: none;
     box-shadow: none;
 }
 
-#edit-md-dialog label {
+.edit-md-dialog label {
     font-size: 14px;
     font-weight: normal;
 
     color: #efefef;
 }
 
-#edit-md-dialog .zend_form dt {
+.edit-md-dialog .zend_form dt {
     float: left;
     width: 40%;
 
@@ -420,7 +420,7 @@ textarea {
     padding-right: 4px;
 }
 
-#edit-md-dialog .zend_form dd {
+.edit-md-dialog .zend_form dd {
     float: left;
     width: auto;
 
@@ -553,6 +553,11 @@ li.ui-state-default {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     background-color: #111;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
     display: flex;
     flex-direction: column;
 }
@@ -571,6 +576,10 @@ li.ui-state-default {
 
     flex: 1 1 auto;
     /* Position the text label inside it centered*/
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
     display: flex;
     justify-content: center;
     flex-direction: column;
@@ -591,7 +600,7 @@ li.ui-state-default {
     outline-width: 0;
 }
 
-#edit-md-dialog .zend_form dd:last-child {
+.edit-md-dialog .zend_form dd:last-child {
     width: 160px;
 }
 

airtime_mvc/public/css/playlist_builder.css

@@ -8,12 +8,12 @@
     float: left;
 }
 
-#edit-md-dialog ul.errors {
+.edit-md-dialog ul.errors {
     clear: both;
     float: none;
 }
 
-#edit-md-dialog dd input.input_text {
+.edit-md-dialog dd input.input_text {
     width: auto;
 }
 

airtime_mvc/public/css/styles.css

@@ -2418,9 +2418,34 @@ dd.radio-inline-list, .preferences dd.radio-inline-list, .stream-config dd.radio
     line-height: 140%;
 }
 
+/* Metadata Editor styles */
+
 /* HACK, to be removed after 1.7.0 */
-button.ui-button.md-cancel {
+/*button.ui-button.md-cancel {*/
-        padding: .4em 1em;
+/*padding: .4em 1em;*/
+/*}*/
+
+.edit-md-dialog #submitButtons-element {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.md-publish {
+    width: 160px;
+    margin-top: 4px;
+}
+
+.md-save {
+    flex: 1 0 auto;
+    margin-right: 4px;
+}
+
+.md-cancel {
+    flex: 1 0 auto;
 }
 
 /*--//////////////////////// Changes/add-ons Jun 8th, 2011 ////////////////////////--*/
@@ -4006,3 +4031,20 @@ li .ui-state-hover {
     height: 26px;
     padding-right: 8px;
 }
+
+.publish-edit-md {
+    float: right;
+}
+
+.publish-md-field {
+    text-align: left !important;
+    display: block;
+}
+
+.publish-md-field > textarea, .publish-md-field > input {
+    display: block;
+}
+
+form.media-metadata fieldset {
+    margin-top: 8px;
+}

airtime_mvc/public/js/airtime/library/publish.js

@@ -19,16 +19,16 @@ var AIRTIME = (function (AIRTIME) {
             $scope.publishSources = {};
 
             function init () {
-                $http.get(endpoint + mediaId, { csrf_token: jQuery("#csrf").val() })
+                var csrfToken = jQuery("#csrf").val();
+                $http.get(endpoint + mediaId, { csrf_token: csrfToken })
                     .success(function (json) {
-                        console.log(json);
                         $scope.media = json;
                         tab.setName($scope.media.track_title);
                     });
 
                 // Get an object containing all sources, their translated labels,
                 // and their publication state for the file with the given ID
-                $http.get(endpoint + mediaId + '/publish-sources', { csrf_token: jQuery("#csrf").val() })
+                $http.get(endpoint + mediaId + '/publish-sources', { csrf_token: csrfToken })
                     .success(function (json) {
                         $scope.sources = json;
                         // Store the data (whether each source should be published to when publish is clicked)
@@ -40,6 +40,13 @@ var AIRTIME = (function (AIRTIME) {
                     });
             }
 
+            $scope.openEditDialog = function() {
+                var uid = AIRTIME.library.MediaTypeStringEnum.FILE + "_" + mediaId;
+                $.get(baseUrl + "library/edit-file-md/id/" + mediaId, {format: "json"}, function (json) {
+                    AIRTIME.playlist.fileMdEdit(json, uid);
+                });
+            };
+
             $scope.publish = function () {
                 var data = {};
                 jQuery.each($scope.publishData, function(k, v) {
@@ -131,6 +138,5 @@ var AIRTIME = (function (AIRTIME) {
         });*/
     };
 
-
     return AIRTIME;
 }(AIRTIME || {}));

airtime_mvc/public/js/airtime/library/spl.js

@@ -1038,14 +1038,15 @@ var AIRTIME = (function(AIRTIME){
     };
 
     mod._initFileMdEvents = function(newTab) {
+        var fileId = newTab.wrapper.find('#file_id').val();
+
         newTab.contents.find(".md-cancel").on("click", function() {
             newTab.close();
         });
 
         newTab.contents.find(".md-save").on("click", function() {
-            var file_id = newTab.wrapper.find('#file_id').val(),
+            var data = newTab.wrapper.find(".edit-md-dialog form").serializeArray();
-                data = newTab.wrapper.find("#edit-md-dialog form").serializeArray();
+            $.post(baseUrl+'library/edit-file-md', {format: "json", id: fileId, data: data}, function() {
-            $.post(baseUrl+'library/edit-file-md', {format: "json", id: file_id, data: data}, function() {
                 // don't redraw the library table if we are on calendar page
                 // we would be on calendar if viewing recorded file metadata
                 if ($("#schedule_calendar").length === 0) {
@@ -1056,7 +1057,11 @@ var AIRTIME = (function(AIRTIME){
             newTab.close();
         });
 
-        newTab.wrapper.find('#edit-md-dialog').on("keyup", function(event) {
+        newTab.contents.find(".md-publish").on("click", function() {
+            AIRTIME.publish.publishTrack(fileId);
+        });
+
+        newTab.wrapper.find('.edit-md-dialog').on("keyup", function(event) {
             if (event.keyCode === 13) {
                 newTab.wrapper.find('.md-save').click();
             }